/* ============================================================
   TEMA CELESTE — capa de aspecto para Leccionario Digital.

   Se carga DESPUÉS del <style> de public/index.html y no reemplaza
   ninguna regla: solo la pisa. Los selectores son los mismos que ya
   usa la aplicación (app.js, pie.js, familia.js), así que no hay que
   tocar el markup salvo por una cosa: los chips de estado de tarea
   necesitan la clase est-pend / est-tarde / est-ok (ver el final).

   Cómo se carga:
     <link rel="stylesheet" href="tema-celeste.css?v=124">
   justo antes de </head> en public/index.html.

   CARGARLA DESPUÉS NO ALCANZA. El orden solo decide entre reglas de
   la MISMA especificidad; con menos, la hoja de arriba gana igual.
   Cuatro reglas de esta capa nacieron perdiendo por eso, y están
   marcadas abajo una por una con el número que hay que igualar.
   ============================================================ */

/* ---------- 1. Tipografía ---------- */
/* LA FUENTE SE ALOJA ACÁ, NO SE LE PIDE A GOOGLE. Tres motivos, y
   ninguno es de gusto:
     · public/ no le pide hoy ni un recurso a un tercero, y el aviso de
       privacidad que firma cada colegio dice que los datos no se ceden.
       Una hoja de fonts.googleapis.com le entrega a Google la IP y el
       referente de cada persona que abre el libro de clases.
     · una hoja remota en el <head> BLOQUEA el primer pintado: con el
       wifi filtrado de un colegio la pantalla queda en blanco hasta que
       el DNS se rinde.
     · sin conexión no hay fuente, y esta PWA existe para abrir sin
       conexión.
   Archivo: Plus Jakarta Sans, subconjunto latino, 27 KB. Es un archivo
   VARIABLE, así que uno solo cubre 400–700 y por eso el font-weight es
   un rango y no cuatro @font-face. Licencia SIL OFL 1.1.
   Sin unicode-range a propósito: con un solo subconjunto no ahorra una
   descarga, y si mañana entra un nombre con un signo de fuera del rango
   el navegador lo resolvería con la letra del sistema en media palabra. */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("plus-jakarta-sans-latin.woff2") format("woff2");
}
:root{
  /* La pila de respaldo es la que ya traía la hoja: si el woff2 no llega
     —o el navegador no entiende woff2— la pantalla sigue legible con la
     letra del sistema, que en Windows es Segoe UI y en Android Roboto. */
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Verde nuevo: la paleta del 2026-08-12 no traía. Solo para tarea completada.
     OSCURECIDO DEL #1F7A4C QUE VENÍA EN EL PAQUETE. Medido en el navegador:
     ese verde sobre --verde-soft da 4,43:1 y el chip es letra de 12px, así que
     el mínimo son 4,5:1 y quedaba abajo por poco — «al día», «listo»,
     «revisada» son justo los chips que se leen de un vistazo y de lejos. Este
     da 5,42:1 sobre --verde-soft y 6,50:1 sobre blanco. */
  --verde:#1B6B43;
  --verde-soft:#DCEFE3;

  /* EL VIDRIO, EN TOKENS Y NO EN CADA REGLA. Hay dos situaciones en que
     el vidrio tiene que dejar de ser vidrio —el navegador sin
     backdrop-filter y la persona que pidió menos transparencia— y las
     dos apagan lo mismo. Con el valor en un token, cada una se resuelve
     redefiniendo cinco líneas en vez de repitiendo el bloque entero. */
  --vidrio-barra:rgba(255,255,255,.34);
  --vidrio-pestana:rgba(255,255,255,.26);
  --vidrio-pestana-hover:rgba(255,255,255,.5);
  --vidrio-pestana-activa:rgba(255,255,255,.85);
  --vidrio-tarjeta:rgba(255,255,255,.62);
  --vidrio-campo:rgba(255,255,255,.55);
  --vidrio-boton-hover:rgba(255,255,255,.14);

  /* EL BORDE DEL VIDRIO NO PUEDE SER BLANCO. Medido en el navegador
     sobre este fondo: blanco sobre el celeste más oscuro del degradado
     (#BFDDEC) llega a 1,33:1, y sobre el más claro (#F8FBFC) a 1,00:1.
     El mínimo de la WCAG 1.4.11 para el contorno de un control es 3:1, y
     el blanco no lo alcanza en ningún punto del degradado. Este marino
     al 60% da 3,04:1 en el peor punto. */
  --borde-vidrio:rgba(16,63,99,.60);
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
}
button,input,textarea,select{font-family:var(--font-body)}
/* Pesos más suaves que los de la hoja original. */
b,strong{font-weight:600}
h1,h2{font-weight:500;letter-spacing:-.015em}
h3,h4{font-weight:600;letter-spacing:-.012em}
.clase-tab,.btn,.att-btn,.tab-btn,.chip,label{font-weight:500;letter-spacing:.005em}
.clase-tab.active,.btn.gold,.att-firmar{font-weight:600}
.topline .date,.apartado-nom{font-weight:500}
.att-row-name b,.pendiente-cuerpo b{letter-spacing:-.012em}

/* ---------- 2. Fondo celeste ---------- */
/* El degradado va en el contenedor de la aplicación, no en las barras. */
.shell,.pie-app,#app{
  background:linear-gradient(180deg,#BFDDEC 0%,#D8EDF4 38%,#EEF7FA 78%,#F8FBFC 100%);
  min-height:100vh;
}
.main,.alumno-main,.pie-main,.fam-cuerpo{background:transparent}

/* ---------- 3. Vidrio: barras, pestañas, tarjetas ---------- */
.alumno-topbar,.fam-top,.pie-top{
  background:var(--vidrio-barra);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:0;
  padding-bottom:14px;
}
/* `.tabs` ENTRA ACÁ Y NO ESTABA. Es el contenedor genérico de pestañas
   —el que usan el módulo PIE y la pestaña de notas—, y conserva su
   `border-bottom:1px solid var(--line)`, que sobre el celeste se ve como
   una línea blanca cruzando la pantalla de lado a lado. Lo demás de la
   lista sí lo tenía. */
/* LA BANDEJA NO VA DENTRO DE UNA CAJA, y esto pedia (0,2,0) para conseguirlo.
   `.clase-tabs.sub-tabs` (index.html:1492) es un compuesto: le pone fondo
   --surface-2, borde y esquinas. Con el reseteo escrito como `.sub-tabs`
   -(0,1,0)- perdia, y la bandeja de Gestion salia sobre una barra blanca que
   cruzaba la pantalla entera. Es el mismo defecto de especificidad de los
   chips, en otro sitio. */
.tabs,.clase-tabs,.portal-tabs,.sub-tabs,.fam-tabs,
.clase-tabs.sub-tabs{background:transparent;border:0}
/* Y su flechita se va con ella: apuntaba desde la caja hacia la pestana de
   arriba, y sin caja queda un rombo blanco flotando. */
.clase-tabs.sub-tabs::before{display:none}
.clase-tabs.sub-tabs{padding-left:0;padding-right:0}
.clase-tabs + .clase-tabs,.portal-tabs + .sub-tabs{margin-top:6px;padding-top:0}
.clase-tab,.tab-btn{
  background:var(--vidrio-pestana);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--borde-vidrio);
  color:var(--ink-soft);
}
.clase-tab:hover,.tab-btn:hover{background:var(--vidrio-pestana-hover)}
/* LA PESTANA ABIERTA VA EN MARINO SOLIDO, en los dos niveles.
   El vidrio al 85% sobre el celeste queda a 1,11:1 de las cerradas, y el minimo
   para distinguir dos superficies de interfaz es 3:1 (WCAG 1.4.11): con vidrio
   dejaba de saberse que pantalla se estaba mirando. Marino da 9,55:1 contra la
   pastilla cerrada y 10,98:1 para su letra. Es tambien lo que hacia la hoja
   original, y el motivo de que se viera bien. */
.clase-tab.active,.tab-btn.active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--navy-ink);
  box-shadow:0 2px 10px -4px rgba(16,63,99,.28);
}
/* LA BANDEJA DE SEGUNDO NIVEL (Lista · Leccionario · Notas · Anotaciones
   · Firma) PEDÍA (0,3,0) Y ESTO DABA (0,2,0).
   index.html:1557 `.clase-tabs.sub-tabs .clase-tab.active` pone
   `background:var(--navy)` con tres clases; la regla de acá arriba solo
   tiene dos, así que ganaba el marino de abajo y llegaba el color marino
   de acá: texto #103F63 sobre fondo #103F63, 1,00:1 medido. La pestaña
   activa se quedaba literalmente sin texto.
   El mismo número hace falta para el estado inactivo, que index.html:1556
   fija en blanco sólido y rompe el vidrio de la bandeja. */
.clase-tabs.sub-tabs .clase-tab{
  background:var(--vidrio-pestana);
  border-color:var(--borde-vidrio);
}
/* LA ACTIVA VUELVE A SER MARINO SOLIDO, y no es volver atras: es que el arreglo
   anterior corrigio la mitad equivocada. La hoja original la pintaba de marino
   con letra blanca; la capa le puso vidrio al 85% y dejo la letra marina, o sea
   marino sobre marino. Se corrigio el TEXTO, y con eso el texto se leia (10,44:1)
   pero la pastilla activa quedaba a 1,11:1 de las inactivas: para distinguir dos
   superficies hacen falta 3:1, asi que dejo de saberse cual estaba abierta.
   Lo vio Rony mirando la bandeja de Gestion. */
.clase-tabs.sub-tabs .clase-tab.active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--navy-ink);
  box-shadow:0 2px 10px -4px rgba(16,63,99,.28);
}
/* Y CON EL CURSOR ENCIMA VOLVÍA A DESAPARECER, por lo mismo:
   index.html:1530 y :1098 son `.clase-tab.active:hover` y
   `.tab-btn.active:hover` —(0,3,0) las dos— y devuelven
   `color:var(--navy-ink)`, que es blanco, sobre el vidrio blanco al 85%.
   Blanco sobre blanco. */
.clase-tab.active:hover,.tab-btn.active:hover,
.clase-tabs.sub-tabs .clase-tab.active:hover{color:var(--navy-ink)}
.card,.subject-card,.fam-bloque,.fam-dato,.fam-anot,.fam-chip{
  background:var(--vidrio-tarjeta);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--borde-vidrio);
}
.buscador input,input[type="search"],input[type="text"],input[type="password"],
input[type="date"],input[type="number"],textarea,select{
  background:var(--vidrio-campo);
  border-color:var(--borde-vidrio);
}

/* ---------- 4. Botones ---------- */
/* El principal (antes ocre .gold) pasa a océano plano y se vuelve
   TRANSPARENTE al pasar el cursor: se ve el celeste a través. */
.btn.gold,.att-firmar{
  background:var(--navy-2);
  border:1.5px solid var(--navy-2);
  color:#fff;
  box-shadow:0 0 0 3px rgba(23,108,143,.10);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn.gold:hover,.att-firmar:hover{
  background:var(--vidrio-boton-hover);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  color:var(--navy);
  box-shadow:0 0 0 4px rgba(23,108,143,.16);
  filter:none;
}
.att-firmar{letter-spacing:.02em}
/* EXCEPCIÓN: los avisos de sala conservan rojo y amarillo, porque son
   urgencia y no estado de tarea. */
.room-alert-row .btn.danger{background:var(--danger);border:1.5px solid var(--danger);color:#fff}
.room-alert-row .btn.danger:hover{background:var(--vidrio-boton-hover);color:var(--danger)}
.room-alert-row .btn.warn{background:var(--amber-soft);border:1.5px solid var(--amber);color:#6B4E12}
.room-alert-row .btn.warn:hover{background:var(--vidrio-boton-hover);color:#6B4E12}

/* ---------- 5. Colores reservados al estado de una tarea ----------
   amarillo = sin completar · rojo = sin completar y fuera de plazo ·
   verde = completada. Todo lo demás vive en la familia azul.        */
/* EL RESETEO NOMBRA LOS MODIFICADORES, Y NO ES ADORNO. `.chip` sola es
   (0,1,0) y `.chip.ok`, `.chip.warn`, `.chip.bad`, `.chip.mut` y
   `.chip.pend` de index.html:961-966 son (0,2,0): cargar esta hoja
   después no le ganaba a ninguna de las cinco. O sea que la regla
   central del rediseño —«todo chip sin est-* sale en azul
   informativo»— no se aplicaba ni una vez, y los 71 chips de la
   aplicación seguían saliendo turquesa, ámbar y rojo como antes.
   Nombrarlas acá las iguala en (0,2,0) y el orden decide. */
.chip,
.chip.ok,.chip.warn,.chip.bad,.chip.mut,.chip.pend{
  background:var(--brand-soft);color:#0F5478;border:1px solid var(--brand-line);
}
/* Estas van DESPUÉS del reseteo a propósito: empatan en (0,2,0) con la
   línea de arriba y ganan por orden. Un chip real llega marcado con las
   dos clases —`class="chip warn est-pend"`— y tiene que salir ámbar. */
.chip.est-pend{background:var(--amber-soft);color:#6B4E12;border-color:var(--amber)}
.chip.est-tarde{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.chip.est-ok{background:var(--verde-soft);color:var(--verde);border-color:var(--verde)}
/* Asistencia y notas son datos, no tareas. */
.att-btn.att-ok.active,.att-btn.att-ok.propuesta{background:var(--brand-soft);color:#0F5478;border-color:var(--brand-line)}
.att-btn.att-warn.active,.att-btn.att-warn.propuesta{background:var(--teal-soft);color:var(--teal);border-color:var(--teal)}
.att-btn.att-bad.active,.att-btn.att-bad.propuesta{background:var(--surface-2);color:var(--ink-soft);border-color:var(--ink-faint)}
.fam-pill.bueno{color:#0F5478;border-color:var(--brand-line)}
.fam-pill.medio{color:var(--teal);border-color:var(--teal)}
.fam-pill.malo{color:var(--ink-soft);border-color:var(--ink-faint)}
.fam-prom.bueno,.fam-nota-celda.bueno,.fam-dato.bueno b{color:var(--navy-2)}
.fam-prom.medio,.fam-nota-celda.medio,.fam-dato.medio b{color:var(--teal)}
.fam-prom.malo,.fam-nota-celda.malo,.fam-dato.malo b{color:var(--ink-soft)}
/* Tarea: apartado que falta al firmar, punto de pendiente, borde de la clase. */
.apartado.falta{background:var(--amber-soft)}
.apartado.falta .apartado-ic{color:#6B4E12}
.apartado.ok .apartado-ic{color:var(--verde)}
.firma-card.lista{border-left-color:var(--amber)}
.firma-card.firmada{border-left-color:var(--verde)}
.pendiente-punto{background:var(--amber)}
.pendiente-punto.urgente{background:var(--danger)}
/* El tipo de aviso de sala no es estado de tarea. */
.aviso-punto.insp{background:var(--navy-2)}
.aviso-punto.tec{background:var(--teal)}

/* ---------- 6. Detalles ---------- */
.table td small{display:block;color:var(--ink-faint);font-size:11.5px;line-height:1.35;margin-top:2px}
/* La intranet de familia usa --card y --muted, que la hoja de la app no define. */
.fam-top,.fam-cuerpo{--card:var(--vidrio-tarjeta);--muted:var(--ink-faint)}
.fam-tabla{width:100%;table-layout:fixed}
.fam-tabla td{overflow-wrap:anywhere}
.fam-tabla .fam-fecha{white-space:normal}

/* ---------- 7. Cuando el vidrio no puede ser vidrio ----------

   SIN backdrop-filter EL VIDRIO NO DESENFOCA NADA: queda un blanco al
   26% y se ve LIMPIO lo que hay debajo. En la barra fija eso significa
   la lista de alumnos —nombre y RUT— pasando por detrás del encabezado
   mientras se baja la página. No es un detalle de gusto: es el dato de
   un menor de edad leyéndose donde no corresponde.
   Firefox lo trajo recién en la 103 (2022) y en los laboratorios hay
   equipos más viejos que eso. Se apaga el vidrio y se pone opaco.

   Los valores opacos son el mismo blanco ya compuesto sobre el celeste
   del degradado, así que la pantalla se ve igual de clara; lo único que
   se pierde es el desenfoque. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{
    --vidrio-barra:#EDF5F9;
    --vidrio-pestana:#EAF3F8;
    --vidrio-pestana-hover:#F3F9FB;
    --vidrio-pestana-activa:#FBFDFE;
    --vidrio-tarjeta:#F7FBFD;
    --vidrio-campo:#F6FAFC;
    --vidrio-boton-hover:#EDF5F9;
  }
}
/* Y lo mismo cuando la persona pidió menos transparencia en su sistema.
   Ahí no es un navegador que no puede: es alguien que dijo que este
   efecto le estorba para leer. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --vidrio-barra:#EDF5F9;
    --vidrio-pestana:#EAF3F8;
    --vidrio-pestana-hover:#F3F9FB;
    --vidrio-pestana-activa:#FBFDFE;
    --vidrio-tarjeta:#F7FBFD;
    --vidrio-campo:#F6FAFC;
    --vidrio-boton-hover:#EDF5F9;
  }
  .alumno-topbar,.fam-top,.pie-top,
  .clase-tab,.tab-btn,
  .card,.subject-card,.fam-bloque,.fam-dato,.fam-anot,.fam-chip,
  .btn.gold:hover,.att-firmar:hover{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ---------- 8. Foco de teclado ----------
   El `:focus-visible` de index.html:198 —`outline:2px solid
   var(--accent)`— se conserva tal cual y esta capa no lo pisa: ninguna
   regla de acá declara `outline`. Queda escrito para que quien venga
   después no lo apague sin darse cuenta de que es el único aviso que
   tiene quien navega con teclado. */

/* ---------- 9. Colores decorativos de asignatura ----------
   Los colores por materia venían con ocre #A8781E y rojo #B23B2E, que
   ahora están reservados. Reemplazar en el sembrado / CONFIG por la
   familia azul: #103F63 marino · #176C8F océano · #12808A turquesa ·
   #65D7CF menta · #0F5478 océano profundo.                            */