/* ==========================================================================
   tema-latino.css — Identidad visual del Colegio Latino para el Sistema de Admisión
   Se carga DESPUÉS de /css/base.css y solo redefine variables y unos pocos selectores.
   Paleta medida de la portada del brochure "Admisión 2027": azul institucional plano,
   acento turquesa, celeste holográfico, blanco puro y grises fríos. Ver docs/IDENTIDAD-VISUAL.md.

   Contrastes comprobados (WCAG 2.1, texto normal ≥ 4.5:1):
     blanco / --primario #1B478F .......... 8.96  ✓
     blanco / --marino  #122659 ........... 14.51 ✓
     blanco / --acento  #5EB4B5 ........... 2.42  ✗  → el turquesa NUNCA lleva texto blanco:
                                                     se usa como franja con texto marino (5.99 ✓)
                                                     o como color decorativo (bordes, puntos, líneas).
     --marino / --acento-claro #BCDBE1 .... 9.92  ✓
     --texto-secundario #4F6178 / blanco .. 6.34  ✓   (sobre --superficie-2: 5.90 ✓)
     --acento-azul #0063DC / blanco ....... 5.50  ✓   (enlaces)
     --primario / --primario-claro ........ 7.51  ✓
     --barra-texto #C9D6EA / --barra-fondo  9.87  ✓
     --acento / --barra-fondo (decorativo)  5.99  ✓
   ========================================================================== */

/* ---------- 0. Tipografía Montserrat (fuente variable, SIL OFL 1.1; ver /fonts/OFL-Montserrat.txt) ----------
   La CSP solo permite recursos propios: nada de Google Fonts. 676 KB → font-display: swap y
   pila de respaldo; la legibilidad no depende de ella (el respaldo system-ui/Segoe UI/Arial es equivalente). */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Variables (complementa base.css §1 :root) ---------- */
:root {
  /* Azules institucionales */
  --primario: #1B478F;            /* azul de la portada (rango #1A4385–#1F4F9B) */
  --primario-oscuro: #122659;     /* azul marino del uniforme: hover y cabeceras */
  --primario-claro: #E3ECF7;      /* fondos suaves, filas seleccionadas */
  --marino: #122659;
  --acento-azul: #0063DC;         /* azul brillante del logo PNG: enlaces y estados activos */

  /* Acento turquesa (franja "FUTURO" e íconos) y celeste holográfico */
  --acento: #5EB4B5;
  --acento-claro: #BCDBE1;
  --acento-suave: #E0F0F0;
  --celeste: #87BEE5;
  --celeste-oscuro: #78ACD8;

  /* Neutros fríos */
  --fondo: #F3F6FA;
  --superficie: #FFFFFF;
  --superficie-2: #F4F7FB;
  --texto: #0F1F3D;
  --texto-secundario: #4F6178;
  --texto-invertido: #FFFFFF;
  --borde: #DCE4EE;
  --borde-fuerte: #B9C7DA;

  /* Semánticos: conservan su significado, matizados hacia el azul */
  --peligro: #B42318;             /* 6.57:1 sobre blanco */
  --peligro-oscuro: #912018;
  --peligro-claro: #FCE8E6;
  --exito: #15803D;               /* 5.02:1 sobre blanco */
  --exito-claro: #DCFCE7;
  --aviso: #B45309;               /* 5.02:1 sobre blanco */
  --aviso-claro: #FEF3C7;
  --info: #1B478F;
  --info-claro: #E3ECF7;

  /* Barra lateral: marino con texto celeste grisáceo y acento turquesa */
  --barra-fondo: #122659;
  --barra-texto: #C9D6EA;
  --barra-texto-activo: #FFFFFF;
  --barra-activo: rgba(255, 255, 255, 0.10);
  --barra-acento: #5EB4B5;

  /* Formas: esquinas redondeadas, tarjetas de 16 px como en la portada */
  --radio: 8px;
  --radio-pequeno: 6px;
  --radio-grande: 16px;
  --sombra: 0 1px 3px rgba(18, 38, 89, 0.10), 0 1px 2px rgba(18, 38, 89, 0.06);
  --sombra-alta: 0 14px 36px rgba(18, 38, 89, 0.28);
  --foco: 0 0 0 3px rgba(0, 99, 220, 0.40);

  /* Tipografía */
  --fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. Tipografía (complementa base.css §2: h1–h4 con peso 600) ---------- */
h1, h2 { font-family: var(--fuente-titulos); font-weight: 800; letter-spacing: -0.01em; color: var(--marino); }
h3, h4 { font-family: var(--fuente-titulos); font-weight: 700; }
a { color: var(--acento-azul); }
/* Etiquetas y cabeceras de tabla en 600 (base.css §7 y §8) */
.campo > label, .etiqueta-campo, .tabla thead th, .descripcion dt, .cifra-etiqueta { font-weight: 600; }
.tabla thead th { letter-spacing: 0.04em; font-size: 0.78rem; }

/* ---------- 3. Cabecera de página (complementa base.css §4 .cabecera-pagina h1) ----------
   Mayúsculas con espaciado sutil, como "ADMISIÓN" y "QUE IMAGINAS" en la portada. */
.cabecera-pagina h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.35rem;
  color: var(--marino);
}
.cabecera-pagina .subtitulo { font-weight: 500; }

/* ---------- 4. Barra lateral (complementa base.css §3 .barra-lateral/.barra-marca/.barra-menu) ---------- */
.barra-lateral { background: var(--barra-fondo); }
.barra-marca { padding: var(--esp-5) var(--esp-4) var(--esp-4); border-bottom-color: rgba(255, 255, 255, 0.12); }
/* Logo horizontal blanco con lema (1200×351 px, proporción 3.419:1). Marcado esperado (lo inserta nav.js):
   <a class="colegio" href="/admin"><img class="barra-logo" src="/img/logo-colegio-horizontal-blanco.png" alt="" width="1200" height="351"><span class="barra-colegio-nombre">Nombre</span></a> */
.barra-marca .barra-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 0 var(--esp-3); }
.barra-marca .colegio { font-family: var(--fuente-titulos); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.barra-marca .colegio:hover { text-decoration: none; color: var(--acento-claro); }
.barra-marca .proceso { color: var(--acento-claro); opacity: 1; font-weight: 500; font-size: 0.82rem; }
/* Respaldo sin cambiar nav.js: si la marca todavía no trae <img class="barra-logo">, el logo se pinta con un
   pseudoelemento (img-src 'self' permite imágenes de fondo propias). Los navegadores sin :has() ignoran la regla. */
.barra-marca:not(:has(.barra-logo))::before {
  content: "";
  display: block;
  width: 190px; max-width: 100%; aspect-ratio: 1200 / 351;   /* logo horizontal 1200×351 px → 3.419:1 (190×55.6) */
  margin-bottom: var(--esp-3);
  background: url("/img/logo-colegio-horizontal-blanco.png") left center / contain no-repeat;
}
.barra-menu a, .barra-menu button { font-weight: 500; border-left-width: 4px; }
.barra-menu a.activa { border-left-color: var(--barra-acento); background: rgba(94, 180, 181, 0.16); color: #fff; font-weight: 600; }
.barra-menu a:hover, .barra-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.barra-menu .separador, .barra-usuario { border-color: rgba(255, 255, 255, 0.12); }
.barra-usuario a { color: var(--acento-claro); }   /* 6.12:1 sobre marino */
/* Íconos del menú (sprite /img/iconos.svg) */
.barra-menu .icono { width: 20px; height: 20px; opacity: 0.9; }
.barra-menu a.activa .icono { opacity: 1; color: var(--acento); }
.cabecera-movil { background: var(--barra-fondo); }
/* Cabecera móvil con isotipo blanco vectorial (lo inserta nav.js: <img class="cabecera-logo" src="/img/isotipo-blanco.svg" alt="" width="28" height="28">) */
.cabecera-movil .cabecera-logo { width: 28px; height: 28px; flex-shrink: 0; }
.cabecera-movil .colegio { min-width: 0; }
.barra-marca .barra-colegio-nombre { display: block; }
/* Botón de menú con el ícono "menu" del sprite en lugar del carácter ☰ */
.btn-menu { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-menu .icono { width: 22px; height: 22px; vertical-align: 0; }
.cabecera-movil .colegio { font-family: var(--fuente-titulos); font-weight: 700; }
.btn-menu { border-color: rgba(255, 255, 255, 0.35); border-radius: var(--radio-pequeno); }

/* ---------- 5. Tarjetas (complementa base.css §5 .tarjeta con radio 8 px) ---------- */
.tarjeta { border-radius: var(--radio-grande); border-color: var(--borde); }
.tarjeta-pie { border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
.tarjeta-clicable:hover { border-color: var(--celeste); box-shadow: 0 6px 18px rgba(18, 38, 89, 0.12); }
.tarjeta-titulo { font-family: var(--fuente-titulos); font-weight: 700; color: var(--marino); }
.tarjeta-opcion { border-radius: var(--radio); border-color: var(--acento-claro); }
.tarjeta-opcion:hover { border-color: var(--primario); }
.tarjeta-opcion.seleccionada, .tarjeta-opcion[aria-pressed="true"] { border-color: var(--primario); background: var(--primario-claro); }

/* Cifras del panel (complementa base.css §5 .cifra): número en Montserrat 800 azul, como el "2027" de la portada */
.cifra { font-family: var(--fuente-titulos); font-weight: 800; color: var(--primario); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cifra a { color: inherit; }
.lista-cifras a { border-radius: var(--radio); }
.lista-cifras a:hover { background: var(--acento-suave); }
/* Nueva: .tarjeta-cifra — tarjeta blanca con franja turquesa superior y cifra grande.
   <div class="tarjeta tarjeta-cifra"><div class="cifra">128</div><div class="cifra-etiqueta">Inscritos</div></div> */
.tarjeta-cifra { border-top: 4px solid var(--acento); padding: var(--esp-4) var(--esp-5); }
.tarjeta-cifra .cifra { font-size: 2.4rem; line-height: 1.05; }
.tarjeta-cifra .cifra-etiqueta { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; margin-top: var(--esp-1); }

/* ---------- 6. Botones (complementa base.css §6 .btn y .btn-primario) ---------- */
.btn { border-radius: var(--radio); font-weight: 600; }
.btn-pequeno { border-radius: var(--radio-pequeno); }
.btn-grande { border-radius: 12px; }
.btn-gigante { border-radius: var(--radio-grande); font-weight: 700; }
/* Los botones de bloque (portadas) parten línea: con Montserrat el texto ya no cabe en 375 px con el nowrap de base.css. */
.btn-bloque { white-space: normal; text-align: center; line-height: 1.25; }
.btn-primario { background: var(--primario); border-color: var(--primario); }
.btn-primario:hover:not(:disabled) { background: var(--marino); border-color: var(--marino); }
.btn-secundario { color: var(--primario); border-color: var(--borde-fuerte); }
.btn-secundario:hover:not(:disabled) { background: var(--primario-claro); border-color: var(--primario); color: var(--marino); }
.btn-enlace { color: var(--acento-azul); }
.btn-peligro-suave:hover:not(:disabled) { background: #F9D2CE; }
.grupo-segmentado { border-radius: var(--radio); }
.grupo-segmentado .btn { border-radius: 0; }
.paginacion .btn.activo { background: var(--primario); border-color: var(--primario); }

/* ---------- 7. Formularios (complementa base.css §7) ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea { border-radius: var(--radio); }
input:focus, select:focus, textarea:focus { border-color: var(--acento-azul); }
.barra-filtros { border-radius: var(--radio-grande); }
.pestana.activa, .pestana[aria-selected="true"] { color: var(--primario); border-bottom-color: var(--acento); }
.pasos li.activo::before { background: var(--primario); }

/* ---------- 8. Tablas (complementa base.css §8) ---------- */
.tabla-contenedor { border-radius: var(--radio-grande); }
.tabla thead th { background: var(--superficie-2); color: var(--texto-secundario); }
.tabla tr.clicable:hover, .tabla tr.seleccionada { background: var(--primario-claro); }

/* ---------- 9. Etiquetas (complementa base.css §9 .etiqueta-*) — mismos significados, tonos fríos ---------- */
.etiqueta { font-weight: 600; letter-spacing: 0.01em; }
.etiqueta-gris { background: #E4EAF2; color: #33475F; }          /* 7.86:1 */
.etiqueta-oscuro { background: var(--marino); color: #F4F7FB; }
.etiqueta-azul { background: var(--primario-claro); color: #0F3A77; }   /* 9.31:1 */
.etiqueta-celeste { background: var(--acento-suave); color: #0B3D3E; }  /* 10.22:1 (turquesa institucional) */
.etiqueta-verde { background: #DCFCE7; color: #14532D; }
.etiqueta-rojo { background: #FCE8E6; color: #8B1A12; }
.etiqueta-ambar { background: #FEF3C7; color: #8A3D0A; }

/* ---------- 10. Alertas (complementa base.css §10 .alerta-*) ---------- */
.alerta { border-radius: var(--radio); border-left-width: 4px; }
.alerta-info { background: var(--primario-claro); border-color: #C5D6EE; border-left-color: var(--primario); color: var(--marino); }
.alerta-exito { border-left-color: var(--exito); }
.alerta-aviso { border-left-color: #D97706; }
.alerta-error { background: var(--peligro-claro); border-color: #F5C2BD; border-left-color: var(--peligro); color: #7A1710; }
.toast { background: var(--marino); border-left-color: var(--acento); border-radius: var(--radio); }
.toast-info { border-left-color: var(--celeste); }
#cargando-global { background: var(--acento); }

/* ---------- 11. Diálogos, calendario, agenda (complementa base.css §13 y §16) ---------- */
.dialogo-cabecera h2 { color: var(--marino); }
.dialogo-pie { border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
.calendario, .agenda { border-radius: var(--radio-grande); }
.calendario .dia.seleccionado, .agenda-franja.libre:hover { background: var(--primario-claro); }
.cita-item { border-left-color: var(--primario); border-radius: var(--radio); }
.cita-item .hora { font-family: var(--fuente-titulos); font-weight: 800; color: var(--primario); }
/* Cabecera de columna de la agenda: Montserrat es más ancha que la fuente del sistema y los nombres se cortaban sin puntos suspensivos
   (el <style> de admin/agenda.html pone display:flex, que anula text-overflow). Bloque con letra un poco menor y elipsis real. */
main .agenda-columna-cabecera .nombre .titulo { display: block; font-size: 0.85rem; letter-spacing: -0.01em; }
main .agenda-columna-cabecera .nombre { min-width: 0; }
.barra-progreso > span { background: var(--primario); }
.codigo-grande { font-family: var(--fuente-titulos); font-weight: 800; color: var(--marino); border-color: var(--acento-claro); background: var(--acento-suave); border-radius: var(--radio); }
.codigo { white-space: nowrap; } /* el código de acceso (p. ej. 2TQ-FVV) no se parte en el guion dentro de tablas estrechas */

/* ---------- 12. Páginas públicas centradas (complementa base.css §20 .pagina-centrada) ----------
   Fondo azul institucional plano con dos brillos celestes muy sutiles (como el halo de la portada),
   tarjeta blanca redondeada de 16 px y el logo azul arriba. */
.pagina-centrada {
  background:
    radial-gradient(circle at 15% 10%, rgba(135, 190, 229, 0.22) 0, rgba(135, 190, 229, 0) 42%),
    radial-gradient(circle at 85% 90%, rgba(94, 180, 181, 0.16) 0, rgba(94, 180, 181, 0) 45%),
    var(--primario);
}
.pagina-centrada .caja {
  border: 0;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-6);
}
/* Logo vertical azul sobre la tarjeta (900×1074 px: isotipo arriba y COLEGIO LATINO debajo). Marcado esperado en las portadas:
   <div class="marca"><img class="logo-marca" src="/img/logo-colegio-vertical.png" alt="Colegio Latino" width="900" height="1074"> … */
.pagina-centrada .marca .logo-marca { display: block; width: 180px; max-width: 60%; height: auto; margin: 0 auto var(--esp-4); }
.pagina-centrada .marca:not(:has(.logo-marca))::before {
  content: "";
  display: block;
  width: 180px; max-width: 60%; aspect-ratio: 900 / 1074;   /* 180×215 px */
  margin: 0 auto var(--esp-4);
  background: url("/img/logo-colegio-vertical.png") center / contain no-repeat;
}
.pagina-centrada .marca .colegio { font-family: var(--fuente-titulos); font-weight: 800; color: var(--marino); letter-spacing: -0.01em; }
.pagina-centrada .marca .sistema { font-weight: 500; color: var(--texto-secundario); }
.portada .marca .sistema { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 700; color: var(--primario); }
.pagina-centrada .pie a { color: var(--acento-azul); font-weight: 600; }
/* Cajas muy anchas (asistente de configuración): el fondo azul debe seguir viéndose alrededor */
.pagina-centrada .caja-ancha { max-width: 680px; }

/* ---------- 13. Franja de acento (nueva) ----------
   Título con franja turquesa detrás, como "FUTURO" en la portada. El texto va en marino
   (5.99:1 sobre turquesa); el blanco sobre turquesa no cumple AA (2.42:1) y no se usa.
   <h2><span class="franja-acento">Admisión 2027</span></h2>
   Variante .franja-acento-marino: franja marino con texto blanco (14.5:1), para fondos claros. */
.franja-acento, .franja-acento-marino {
  position: relative;
  display: inline-block;
  padding: 0.12em 0.55em;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--marino);
  isolation: isolate;
  z-index: 0;
}
.franja-acento::before, .franja-acento-marino::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acento);
  border-radius: 4px;
  transform: skewX(-8deg);
}
.franja-acento-marino { color: #fff; }
.franja-acento-marino::before { background: var(--marino); }

/* ---------- 14. Íconos del sprite /img/iconos.svg (nuevo) ----------
   <svg class="icono" aria-hidden="true"><use href="/img/iconos.svg#agenda"></use></svg>
   Trazos con currentColor: heredan el color del texto. Para íconos que comunican algo por sí solos,
   usar role="img" y aria-label en lugar de aria-hidden. */
.icono {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono-grande { width: 1.75em; height: 1.75em; vertical-align: -0.4em; }
/* Ícono destacado dentro de un círculo turquesa (campus, coliseo y piscina de la portada).
   Trazo marino sobre turquesa (5.99:1). Variante .claro: turquesa muy claro con trazo azul (7.63:1). */
.icono-circulo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75em; height: 2.75em;
  border-radius: 50%;
  background: var(--acento);
  color: var(--marino);
  flex-shrink: 0;
}
.icono-circulo .icono { width: 1.4em; height: 1.4em; vertical-align: 0; }
.icono-circulo.claro { background: var(--acento-suave); color: var(--primario); }
.icono-circulo.marino { background: var(--marino); color: #fff; }
.btn .icono { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.vacio .icono { width: 2.5em; height: 2.5em; color: var(--celeste-oscuro); opacity: 1; }

/* ---------- 15. Bloque azul (nuevo) ----------
   Sección con fondo azul institucional y texto blanco para destacados dentro de una página clara.
   <section class="bloque-azul"><h2>Título</h2><p>Texto</p></section> */
.bloque-azul {
  background: var(--primario);
  color: #fff;
  border-radius: var(--radio-grande);
  padding: var(--esp-5) var(--esp-6);
}
.bloque-azul h1, .bloque-azul h2, .bloque-azul h3 { color: #fff; }
.bloque-azul a { color: var(--acento-claro); }
.bloque-azul .texto-secundario { color: var(--acento-claro); }
.bloque-azul .icono-circulo { background: transparent; border: 2px solid var(--acento); color: var(--acento-claro); }

/* ---------- 16. Impresión desde pantallas del personal (complementa base.css §22) ---------- */
@media print {
  .pagina-centrada { background: #fff; }
  .tarjeta-cifra { border-top-color: #999; }
  .cifra { color: #000; }
}