/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — Sistema de diseño · Colegio Bolívar, Cali
   Guía para Padres (CB App)

   ÚNICA fuente de verdad del color y la tipografía. No declares hex
   ni font-family sueltos en las páginas: usa var(--cb-*) / var(--font-*).
   Si un valor no existe aquí, agrégalo aquí — no en la página.

   Este archivo SOLO define tokens. No trae layout, ni sidebar, ni
   componentes: por eso es seguro cargarlo en todas las páginas sin
   romper el aislamiento CSS de cada .php.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');

:root {

  /* ── 0. TIPOGRAFÍA ─────────────────────────────────────────────
     --font-display: títulos — saludo, nombre de sección, encabezados
     de card, cifras destacadas. --font-body: todo lo demás. */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── 1. MARCA INSTITUCIONAL ───────────────────────────────────
     Los 5 colores oficiales del colegio. Valores intocables.     */
  --cb-azul:        #004E96;   /* azul principal  */
  --cb-azul-cielo:  #00AEEF;   /* azul cielo      */
  --cb-amarillo:    #FFC80F;   /* amarillo        */
  --cb-naranja:     #F26632;   /* naranja         */
  --cb-morado:      #A54399;   /* morado          */

  /* ── 2. ESCALA DE AZUL ────────────────────────────────────────
     Derivada del institucional: hsl(209, 100%, L). Todo tono azul
     de la app sale de aquí, para que nada compita con la marca.   */
  --cb-azul-900:    #002F5C;   /* títulos de mayor jerarquía      */
  --cb-azul-800:    #003F7A;   /* títulos, texto fuerte           */
  --cb-azul-700:    #004E96;   /* = institucional. Links, activo  */
  --cb-azul-600:    #005FB8;   /* hover de links                  */
  --cb-azul-500:    #0077E6;   /* acento claro                    */

  /* ── 3. NEUTROS AZULADOS ──────────────────────────────────────
     Grises con matiz 209° para que armonicen con el azul.        */
  --cb-texto:         #003F7A;  /* texto principal / títulos      */
  --cb-label:         #3D5A80;  /* etiquetas pequeñas  (7.1:1)    */
  --cb-nav:           #4A6A90;  /* links de navegación en reposo  */
  --cb-texto-sec:     #5A7AAA;  /* texto secundario               */
  --cb-texto-muted:   #7A96BC;  /* subtítulos, texto tenue        */
  --cb-icono-muted:   #AAC4E8;  /* iconos decorativos             */
  --cb-icono-faint:   #C8D8EE;  /* iconos/bordes muy tenues       */
  --cb-borde:         #DCE8F5;  /* borde estándar de card         */
  --cb-borde-suave:   #EEF2F8;  /* separadores de lista           */
  --cb-fondo:         #F4F7FB;  /* fondo del body                 */
  --cb-fondo-azul:    #EAF1FA;  /* badge de icono, estado activo  */
  --cb-fondo-hover:   #F2F7FD;  /* hover de fila / botón suave    */
  --cb-blanco:        #FFFFFF;

  /* ── 4. SEMÁNTICOS ────────────────────────────────────────────  */
  --cb-peligro:        #C0392B;
  --cb-peligro-bg:     #FFF0F0;
  --cb-peligro-borde:  #F5C6C6;
  --cb-peligro-claro:  #E53935;  /* punto de festivo, iconos PDF   */
  --cb-peligro-fuerte: #C62828;
  --cb-peligro-oscuro: #B71C1C;
  --cb-peligro-borde-suave: #FFCDD2;

  --cb-aviso:         #FFC80F;  /* = amarillo institucional       */
  --cb-aviso-bg:      #FFFBEA;
  --cb-aviso-bg2:     #FDFBE8;  /* variante cálida (novedades)    */
  --cb-aviso-borde:   #FFE9A3;
  --cb-aviso-borde2:  #F0E06A;
  --cb-aviso-texto:   #7A5800;  /* texto legible sobre fondo aviso */

  --cb-ambar:         #B07D00;  /* ⚠ 3.7:1 — iconos y bordes, NUNCA texto */
  --cb-ambar-texto:   #7A5800;  /* 5.1:1 — este sí para texto     */

  --cb-exito:         #1E7A4C;
  --cb-exito-claro:   #43A047;
  --cb-exito-bg:      #EAF7F0;
  --cb-exito-bg2:     #F0FFF4;
  --cb-exito-borde:   #A5D6A7;

  /* ── 4b. TEXTO DE LECTURA ─────────────────────────────────────  */
  --cb-texto-lectura: #243444;  /* párrafos largos, listas         */
  --cb-tinta:         #1A1A1A;
  --cb-tinta-suave:   #6B6B6B;

  /* ── 4c. POLÍTICAS ────────────────────────────────────────────
     Alerta institucional de las páginas de sección.               */
  --cb-politica-bg1:   #FFF2F2;
  --cb-politica-bg2:   #FFE8E8;
  --cb-politica-borde: #F5B0B0;
  --cb-politica-icono: #D63030;
  --cb-politica-tag:   #C02525;
  --cb-politica-texto: #6D1414;

  /* ── 4d. VARIANTES ACCESIBLES DE LA MARCA ─────────────────────
     Versiones oscurecidas de los institucionales, para cuando el
     color tiene que llevar texto blanco encima o ser texto él mismo. */
  --cb-azul-cielo-fuerte: #0077A3;  /* 5.0:1 con blanco encima     */
  --cb-naranja-texto:     #C24512;
  --cb-naranja-bg:        #FEF0EA;
  --cb-morado-texto:      #A54399;
  --cb-morado-bg:         #F7EDF6;
  --cb-morado-borde:      #E5CCE2;

  /* ── 4e. TONOS "CONTAINER" — Material tonal, más saturados ─────
     A medio camino entre el color puro y blanco (~75-80% del hue),
     no un tinte casi imperceptible como --cb-*-bg. Para bloques bento
     que necesitan leerse como color de verdad, no como blanco sucio. */
  --cb-azul-container:    #C7DFF3;
  --cb-naranja-container: #FBD9C9;
  --cb-morado-container:  #EFD4EA;
  --cb-cyan-container:    #BFEBF9;
  --cb-amarillo-container:#FFECAD;

  /* ── 5. IDENTIDAD POR SECCIÓN ACADÉMICA ───────────────────────
     Cada sección tiene un color institucional propio.

     ⚠ REGLA DE ACCESIBILIDAD (WCAG AA)
     El token base (--cb-{seccion}) es para RELLENOS: hero, franja
     superior de card, punto del tab activo, badge. NUNCA para texto
     sobre blanco — el amarillo da 1.6:1 y el azul cielo 2.6:1.
     Para texto usa siempre --cb-{seccion}-texto (todos ≥ 5:1).      */

  --cb-nido:              #00AEEF;
  --cb-nido-texto:        #0077A3;   /* 5.0:1 sobre blanco */
  --cb-nido-bg:           #E5F7FE;

  --cb-preprimaria:       #FFC80F;
  --cb-preprimaria-texto: #8A6A00;   /* 5.1:1 */
  --cb-preprimaria-bg:    #FFF8E0;

  --cb-primaria:          #F26632;
  --cb-primaria-texto:    #C24512;   /* 5.1:1 */
  --cb-primaria-bg:       #FEF0EA;

  --cb-middle:            #A54399;
  --cb-middle-texto:      #A54399;   /* 5.5:1 — sirve tal cual */
  --cb-middle-bg:         #F7EDF6;

  --cb-high:              #004E96;
  --cb-high-texto:        #004E96;   /* 8.2:1 */
  --cb-high-bg:           #EAF1FA;

  /* ── 6. RADIOS ────────────────────────────────────────────────  */
  --cb-r-sm:   8px;
  --cb-r-md:   12px;
  --cb-r-lg:   14px;
  --cb-r-xl:   16px;
  --cb-r-pill: 999px;

  /* ── 7. SOMBRAS ───────────────────────────────────────────────  */
  --cb-sombra-sm: 0 1px 2px rgba(0, 78, 150, 0.06);
  --cb-sombra-md: 0 4px 14px rgba(0, 78, 150, 0.08);
  --cb-sombra-lg: 0 10px 30px rgba(0, 78, 150, 0.12);

  /* ── 8. MARCAS DE TERCEROS ────────────────────────────────────
     NO son colores del colegio y NO deben alinearse a la marca:
     son los colores oficiales de productos externos. Se tokenizan
     solo para dejar claro que su valor es intencional.            */
  --marca-powerschool: #1A1A2E;
  --marca-seesaw:      #6B3FA0;
  --marca-classroom:   #188038;
  --marca-google-rojo: #EA4335;
  --marca-ontrack:     #4CAF50;
}


/* ═══════════════════════════════════════════════════════════════
   UTILIDADES DE SECCIÓN
   Pon la clase en un contenedor (idealmente <body>) y los hijos
   heredan el color de la sección vía --sec-*. Así una misma card
   se pinta sola según dónde viva.

   <body class="sec-primaria"> … </body>
═══════════════════════════════════════════════════════════════ */

/* --sec: color institucional REAL — úsalo para rellenos grandes (fondos,
   botones, headers). --sec-texto: variante oscura — SOLO para texto/iconos
   sobre blanco. --sec-on: color de texto/icono legible SOBRE un relleno
   --sec (blanco casi siempre, salvo cyan y amarillo que necesitan texto
   oscuro encima). Nunca uses --sec-texto como fondo: en cyan y amarillo
   se ve oliva/marrón en vez del color real. */
.sec-nido        { --sec: var(--cb-nido);        --sec-texto: var(--cb-nido-texto);        --sec-bg: var(--cb-nido-bg);        --sec-on: var(--cb-azul-900); }
.sec-preprimaria { --sec: var(--cb-preprimaria); --sec-texto: var(--cb-preprimaria-texto); --sec-bg: var(--cb-preprimaria-bg); --sec-on: var(--cb-aviso-texto); }
.sec-primaria    { --sec: var(--cb-primaria);    --sec-texto: var(--cb-primaria-texto);    --sec-bg: var(--cb-primaria-bg);    --sec-on: #FFFFFF; }
.sec-middle      { --sec: var(--cb-middle);      --sec-texto: var(--cb-middle-texto);      --sec-bg: var(--cb-middle-bg);      --sec-on: #FFFFFF; }
.sec-high        { --sec: var(--cb-high);        --sec-texto: var(--cb-high-texto);        --sec-bg: var(--cb-high-bg);        --sec-on: #FFFFFF; }

/* Fallback: en páginas sin clase de sección, --sec cae al azul institucional */
body { --sec: var(--cb-azul); --sec-texto: var(--cb-azul); --sec-bg: var(--cb-fondo-azul); --sec-on: #FFFFFF; }

/* Franja de color en el borde superior de una card de sección */
.sec-franja { border-top: 3px solid var(--sec); }