:root {
  /* ------------------------- */
  /*          COLORS           */
  /* ------------------------- */

  /* Colores Interactive */
  --color-interactive-primary: #1C42E8;
  --color-interactive-primary-hover: #081754;
  --color-interactive-primary-press: #05297A;
  --color-interactive-secondary: #F3F3F3;
  --color-interactive-secondary-hover: #C9C9C9;
  --color-interactive-secondary-press: #DEDEDE;
  --color-interactive-error: #FF594D;
  --color-interactive-error-hover: #A26267; /* Valor asumido, no especificado en la imagen */
  --color-interactive-error-press: #C8180D;

  /* Colores Text */
  --color-text: #081754;
  --color-text-soft: #A4A4A4;
  --color-text-inactive: #8C8C8C;
  --color-text-invert: #FFFFFF;
  --color-text-error: #C8180D;
  --color-text-warning: #CF4600;
  --color-text-success: #2E8A41;
  --color-text-info: #0062A5;

  /* Colores Background */
  --color-bg-0: #F3F3F3;
  --color-bg-body: #FFFFFF;
  --color-bg-dark: #4A4A4A;
  --color-bg-error: #FF594D;
  --color-bg-success: #0ABF4F;
  --color-bg-warning: #FFD100; /* CORREGIDO: El valor en la imagen era #FFD100 */
  --color-bg-info: #1CA8F7;
  --color-bg-inactive: #DEDEDE;

  /* Colores Icon */
  --color-icon: #081754;
  --color-icon-soft: #4A4A4A;
  --color-icon-inactive: #8C8C8C;
  --color-icon-invert: #FFFFFF;
  --color-icon-error: #FF594D;
  --color-icon-success: #0ABF4F;
  --color-icon-warning: #FFD100; /* CORREGIDO: El valor en la imagen era #FFD100 */
  --color-icon-info: #1CA8F7;

  /* Colores Border */
  --color-border: #C9C9C9;
  --color-border-error: #FF594D;
  --color-border-success: #0ABF4F;
  --color-border-warning: #FFD100; /* CORREGIDO: El valor en la imagen era #FFD100 */
  --color-border-info: #1CA8F7;

  /* Colores Brand */
  --color-brand-coppel: #F0D224;
  --color-brand-bancoppel: #05297A;
  --color-brand-sales: #D31F2E; /* CORREGIDO: El rojo de 'Sales' es #D31F2E en la imagen */
  --color-brand-afore: #64128E; /* AÑADIDO: Color 'Afore' que faltaba */


  /* ------------------------- */
  /*        TYPOGRAPHY         */
  /* ------------------------- */

  /* Font Families */
  --font-family-display: 'PlayfairDisplay-Medium', serif;
  --font-family-sans: 'Poppins-Bold', sans-serif;

  /* Font Weights (basado en la sección de tipografía) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Tamaños de Texto */
  --font-size-display: 48px;
  --font-size-display-mobile: 36px;
  --font-size-h1: 36px;
  --font-size-h1-mobile: 28px;
  --font-size-h2: 28px;
  --font-size-h2-mobile: 24px;
  --font-size-h3: 24px;
  --font-size-h3-mobile: 20px;
  --font-size-subheader1: 20px; /* AJUSTADO: Para 'Subheader 1' */
  --font-size-subheader1-mobile: 18px;
  --font-size-subheader2: 18px; /* AÑADIDO: Para 'Subheader 2' */
  --font-size-subheader2-mobile: 16px; /* AÑADIDO: Para 'Subheader 2 Mobile', no especificado pero se infiere */
  --font-size-body: 16px;
  --font-size-body-mobile: 16px;
  --font-size-small: 14px;
  --font-size-small-mobile: 14px;
  --font-size-caption: 12px;
  --font-size-caption-mobile: 12px;

  /* Line Heights (Altura de línea) */
  --line-height-display: 1.2;
  --line-height-headings: 1.3; /* Para H2, H3, Subheaders */
  --line-height-body: 1.5;    /* Para Body, Small, Caption */

  /* ------------------------- */
  /*         PROPERTIES        */
  /* ------------------------- */
  
  /* Border Radius */
  --rounded-none: 0px;
  --rounded-sm: 8px;   /* Pequeño */
  --rounded-md: 16px;  /* Mediano */
  --rounded-full: 999px; /* Circular / Pill */

  /* Spacing (Se mantiene tu escala, parece correcta) */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 40px;
  --spacing-9: 48px;
  --spacing-10: 56px;

  /* Shadows (Profundidad) */
  --shadow-default: 0px 6px 24px 0px rgba(25, 75, 123, 0.04);
  --shadow-hover: 0px 6px 24px 0px rgba(25, 75, 123, 0.12);
  --shadow-float: 0px 4px 16px 0px rgba(25, 75, 123, 0.24), 0px 6px 24px 0px rgba(25, 75, 123, 0.16);
  /* NOTA: Tu CSS tenía una sombra '--shadow-primary' que no corresponde con 'Default', 'Hover' o 'Float' de la imagen. La he omitido por claridad. */
}

h1,h2,h3,h4,h5{
  font-family:Poppins-Bold;
  color: var(--color-text);
}

/**
 * UTILITY CLASSES - DESIGN SYSTEM
 *
 * Este archivo contiene clases de utilidad generadas a partir de las variables
 * CSS (:root) para aplicar el sistema de diseño de forma consistente.
 *
 * Úsalo en tu HTML para estilizar elementos rápidamente.
 * Ejemplo: <h1 class="text-h1 color-text-primary">Título</h1>
 */

/* ------------------------- */
/*        TYPOGRAPHY         */
/* ------------------------- */

.text-display {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
}

.text-h1 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h1);
  line-height: 120%;
}

.text-h2 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-headings);
}

.text-h3 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-headings);
}

.text-subheader1 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-subheader1);
  line-height: var(--line-height-headings);
}

.text-subheader2 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-subheader2);
  line-height: var(--line-height-headings);
}

.text-body {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-small {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.text-caption {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

/* Estilos responsivos para tipografía en móviles */
@media (max-width: 768px) {
  .text-display { font-size: var(--font-size-display-mobile); }
  .text-h1 { font-size: var(--font-size-h1-mobile); }
  .text-h2 { font-size: var(--font-size-h2-mobile); }
  .text-h3 { font-size: var(--font-size-h3-mobile); }
  .text-subheader1 { font-size: var(--font-size-subheader1-mobile); }
  .text-subheader2 { font-size: var(--font-size-subheader2-mobile); }
  .text-body { font-size: var(--font-size-body-mobile); }
  .text-small { font-size: var(--font-size-small-mobile); }
  .text-caption { font-size: var(--font-size-caption-mobile); }
}

/* ------------------------- */
/*           COLORS          */
/* ------------------------- */

/* Clases para color de texto */
.color-text { color: var(--color-text); }
.color-text-soft { color: var(--color-text-soft); }
.color-text-inactive { color: var(--color-text-inactive); }
.color-text-invert { color: var(--color-text-invert); }
.color-text-error { color: var(--color-text-error); }
.color-text-warning { color: var(--color-text-warning); }
.color-text-success { color: var(--color-text-success); }
.color-text-info { color: var(--color-text-info); }

/* Clases para color de fondo */
.bg-0 { background-color: var(--color-bg-0); }
.bg-body { background-color: var(--color-bg-body); }
.bg-dark { background-color: var(--color-bg-dark); }
.bg-error { background-color: var(--color-bg-error); }
.bg-success { background-color: var(--color-bg-success); }
.bg-warning { background-color: var(--color-bg-warning); }
.bg-info { background-color: var(--color-bg-info); }
.bg-inactive { background-color: var(--color-bg-inactive); }

/* ------------------------- */
/*      BORDERS & SHADOWS    */
/* ------------------------- */

/* Clases para border-radius */
.rounded-none { border-radius: var(--rounded-none); }
.rounded-sm { border-radius: var(--rounded-sm); }
.rounded-md { border-radius: var(--rounded-md); }
.rounded-full { border-radius: var(--rounded-full); }

/* Clases para sombras (profundidad) */
.shadow-default { box-shadow: var(--shadow-default); }
.shadow-hover { box-shadow: var(--shadow-hover); }
.shadow-float { box-shadow: var(--shadow-float); }


/* ------------------------- */
/*          SPACING          */
/* ------------------------- */

/* 
  Clases de espaciado (margen y padding)
  Formato: {property}{sides}-{size}
  - property: m (margin), p (padding)
  - sides: t(top), b(bottom), l(left), r(right), x(eje x), y(eje y), [blank](all)
  - size: 0-10 (corresponde a --spacing-0 a --spacing-10)
  Ejemplos: .mt-4 (margin-top), .px-2 (padding left y right), .p-6 (padding all)
*/
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-7 { margin: var(--spacing-7); }
.m-8 { margin: var(--spacing-8); }
.m-9 { margin: var(--spacing-9); }
.m-10 { margin: var(--spacing-10); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
/* ... (puedes completar las demás clases de margen y padding si las necesitas) ... */

.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-7 { padding: var(--spacing-7); }
.p-8 { padding: var(--spacing-8); }
.p-9 { padding: var(--spacing-9); }
.p-10 { padding: var(--spacing-10); }

/* Padding en eje X (horizontal) */
.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
/* ... etc. */

/* Padding en eje Y (vertical) */
.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}
/* ... etc. */
/**
 * =========================================
 *               BUTTON STYLES
 * =========================================
 * Estilos para los botones basados en el sistema de diseño.
 * Estos estilos sobreescriben o complementan las clases de Bootstrap
 * para que coincidan con la apariencia deseada.
 */

/* --- Estilo Base del Botón (.btn) --- */
/* Unifica la apariencia de todos los botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6); /* 12px 24px: un buen balance */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body); /* 16px por defecto */
  font-weight: var(--font-weight-semibold); /* 600, para que el texto resalte */
  border-radius: var(--rounded-full); /* Forma de píldora/semicircular */
  border: 2px solid transparent; /* Borde base para consistencia de tamaño */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  user-select: none; /* Evita la selección de texto al hacer doble clic */
}

/* --- Botón Primario (Principal) --- */
/* La acción más importante en una vista */
.btn-primary {
  background-color: var(--color-interactive-primary);
  color: var(--color-text-invert);
  border-color: var(--color-interactive-primary);
}

/* Estado Hover: cuando el cursor está sobre el botón */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-interactive-primary-hover);
  color: var(--color-text-invert);
  border-color: var(--color-interactive-primary-hover);
  box-shadow: var(--shadow-hover); /* Añade profundidad al interactuar */
  transform: translateY(-2px); /* Efecto sutil de "levantamiento" */
}

/* Estado Active (Press): cuando se hace clic en el botón */
.btn-primary:active {
  background-color: var(--color-interactive-primary-press);
  border-color: var(--color-interactive-primary-press);
  box-shadow: none; /* Se quita la sombra para simular que está presionado */
  transform: translateY(0); /* Vuelve a su posición original */
}


/* --- Botón Secundario (Outline) --- */
/* Para acciones secundarias, como la selección de rangos */
.btn-outline-primary {
  background-color: transparent;
  color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active { /* El estado .active es útil para botones de selección */
  background-color: var(--color-interactive-primary);
  color: var(--color-text-invert);
  border-color: var(--color-interactive-primary);
}


/* --- Botón de Texto (Link) --- */
/* Para acciones como 'Regresar' o 'Leer completo' que no necesitan tanto peso visual */
.btn-link {
  color: var(--color-interactive-primary);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  padding: 0; /* Los botones de link no suelen tener padding */
  font-weight: var(--font-weight-regular); /* Suelen ser menos pesados */
}

.btn-link:hover,
.btn-link:focus {
  color: var(--color-interactive-primary-hover);
  text-decoration: underline;
  background-color: transparent; /* Asegura que no cambie el fondo */
  border-color: transparent;
  box-shadow: none;
  transform: none;
}