/* Portal CAMPA — hoja única, sin framework ni compilación.
 *
 * El lenguaje visual **no se inventa aquí**: es el del Método CAMPA tal como
 * lo hizo Anabel —los kits, los álbumes, los cuadernos, las Guías del método y
 * su app—. Octubre de 2026: el portal deja la paleta que había sacado del
 * icono de la app de Android (índigo, Fraunces, Inter) y se vuelve una
 * extensión de lo mismo que el colegio ya tiene impreso:
 *
 *   - **Source Serif 4** para los títulos y **Public Sans** para todo lo demás
 *     (las de los kits y la app de Anabel; sin ellas, sus mismos respaldos:
 *     Iowan Old Style y Charter, Helvetica Neue).
 *   - **Tinta y papel**: neutros editoriales cálidos, filetes finos, esquinas
 *     casi rectas, sin sombras. El acento de la interfaz es la piedra.
 *   - **El color vive en el área, el pilar o el nivel** (`nucleo/marca.js`),
 *     como en los materiales: en cabeceras, bordes y detalles.
 *   - El rojo, para lo que está mal; el ámbar dorado, para lo que falta.
 */

/* Las fuentes del método, servidas desde el propio portal: el portal no pide
   nada a Google en cada visita. Son las variables de Google Fonts (un fichero
   cubre todos los pesos) en dos cortes: «latin» trae el español, el francés y
   el inglés; «latin-ext» solo se descarga si aparece una letra de fuera.
   Licencia SIL OFL 1.1: `fuentes/OFL-*.txt`. Bajadas el 7-oct-2026 con
   permiso de Felipe. ⚠️ /portal/fuentes/ se cachea un año como inmutable
   (app.py): si se cambia un fichero, se cambia su nombre (-v3). Ya pasó:
   las -v1 salieron como text/plain y Cloudflare se quedó esa copia. */
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fuentes/PublicSans-var-latin-ext-v2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fuentes/PublicSans-var-latin-v2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fuentes/SourceSerif4-var-latin-ext-v2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fuentes/SourceSerif4-var-latin-v2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* `hidden` manda sobre cualquier `display` propio: un `.campo` (flex) con
   hidden seguía viéndose (la tasa en «Nueva factura» con proforma elegida). */
[hidden] { display: none !important; }

:root {
  color-scheme: light dark;

  /* --- los neutros editoriales del método (globals.css de la app) --- */
  --tinta:  #1a1a1a;
  --hueso:  #fffcf6;
  --piedra: #3d3d3d;
  --lino:   #eae3d6;

  /* --- superficies: papel blanco sobre una mesa de hueso, con filete --- */
  --fondo:  #faf7f1;
  --papel:  #ffffff;
  --papel2: #f5f1ea;
  --linea:  #e2dacb;

  --texto: #1a1a1a;
  --tenue: #5b554e;   /* la tinta segunda de las portadas */

  /* El acento de la interfaz: la piedra, «el único color editorial de
     acento» de la app de Anabel. El nombre de la variable se queda por
     historia; su valor ya no es azul. */
  --azul: #3d3d3d;
  --azul-suave: #efeae2;

  /* Estados, con colores de los materiales legibles como letra. */
  --verde: #1e7a45;   /* la salvia del método, oscurecida para leerse */
  --ambar: #8a6a00;   /* el dorado de Matemática en los kits: lo que falta */
  --rojo:  #b03227;   /* el rojo de los kits (#B83227): «para», lo que está mal */
  --morado:#6a4c93;

  --indigo: #1a1a1a;  /* el cromo oscuro (modo clase, avisos flotantes) */
  --r: 6px;
  --r-chico: 4px;
  --lateral: 248px;
  --sombra: none;

  --serif: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Oscuro editorial: la misma tinta y el mismo papel, al revés, y cálidos. */
    --fondo: #151311; --papel: #1d1b18; --papel2: #25221e; --linea: #39342d;
    --texto: #f3eee5; --tenue: #b3aa9b;
    --azul: #e2dacb; --azul-suave: #2e2a24;
    --verde: #6fcf97; --ambar: #f4c430; --rojo: #ff8a7a; --morado: #c3a6ff;
    --indigo: #0f0e0c;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

/* El color de una asignatura, una dimensión o un tipo, **como texto**. Esos
   colores son para reconocer de un vistazo —el cuadro, el borde, el
   relleno—, no para leer: como letra se quedaban en 3,2 sobre claro y en 2,2
   sobre oscuro (Formación Humana, Robótica, Matemática…). Mezclado con el
   color del texto oscurece en claro y aclara en oscuro: una sola regla pasa
   de 4,5 en los dos temas y el tono se sigue reconociendo. */
.chip, .asig-clase, .chip-premio {
  --tinta-c: color-mix(in srgb, var(--c, var(--tenue)) 46%, var(--texto));
}
.asig-clase { --tinta-c: color-mix(in srgb, var(--c, var(--azul)) 46%, var(--texto)); }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
td a, .dato-val a, p a, .lh-salon a, .lh-faltaron a, .cd-meta a {
  font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}
td a:hover, .dato-val a:hover, p a:hover { text-decoration-color: currentColor; }

/* ============================================================ tipografía
 *
 * Dos familias con papeles distintos, como en los manuales: **Fraunces**
 * —serif con carácter— para los títulos y para lo que se lee despacio, que le
 * da alma de libro a lo que si no sería una hoja de cálculo; **Inter** para
 * todo lo demás, que es lo que hay que descifrar de un vistazo.
 */

h1, h2, h3, h4,
.titulo-pag h1, .panel-cab h2, .acceso h1,
.modo-clase .act h4, .nav-modulos .mod span {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.18;
}
.panel-cab h2, .modo-clase .act h4 { font-weight: 600; }

/* Números grandes en serif: en los manuales las cifras también son de la
   familia del título, y es lo que las hace legibles de lejos. */
.tarjeta .n, .cifra b, .reloj {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.02em;
}

/* El rótulo: versalitas espaciadas encima del título. Es la firma tipográfica
   de los manuales —«ASIGNATURA» sobre «Lengua Española»— y lo que da ritmo a
   una página larga sin necesidad de leerla. */
.rotulo, .grupo-t, .tarjeta .r, .ficha.modulo .codigo,
.modo-clase h2, .otorgar h3, .nav-modulos .mod strong, th {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.rotulo { color: var(--azul); margin-bottom: 2px; display: block; }

/* ================================================================== shell
 *
 * Octubre de 2026: el menú se rehízo por áreas —Aula, Seguimiento, Currículo,
 * Colegio, Dirección— y dejó de ser dos listas largas con todo al mismo peso.
 * El lateral se contrae a iconos; el pie lleva a quien está dentro, a las
 * utilidades y a la salida; en el teléfono hay una barra abajo con lo de cada
 * día. Lo que no cambia: el índigo del icono, el hueso como letra. */

.shell { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral); flex: 0 0 var(--lateral);
  /* Blanco con su filete, como el menú de la app de Anabel: el color lo
     ponen las áreas y los salones, no el marco. */
  background: var(--papel); color: var(--texto); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  transition: width .18s ease, flex-basis .18s ease;
}


/* Cabecera: la marca, el botón de contraer y la lupa. */
.lateral-cab { padding: 14px 14px 6px; }
.marca-fila { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 10px; }
.lateral .marca {
  display: flex; align-items: center; gap: 11px; color: var(--texto);
  padding: 2px 4px 0; text-decoration: none; flex: 1; min-width: 0;
}
.lateral .marca .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.lateral .marca .nombre {
  font-family: var(--serif); font-weight: 800; font-size: 1.34rem; letter-spacing: .01em;
}
.simbolo-campa { flex: none; color: var(--tenue); }
.lateral .marca .esc {
  font: 700 .64rem var(--sans); text-transform: uppercase; letter-spacing: .12em;
  color: var(--tenue); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Las áreas. El rótulo de cada una en versalitas, como en el manual. */
/* Catorce entradas y cinco rótulos tienen que caber en 820 píxeles de alto
   —un portátil con la barra del navegador— sin desplazarse. */
.lateral nav {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 6px;
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.grupo { margin-bottom: 4px; }
.grupo-t { color: var(--tenue); padding: 8px 10px 3px; font-size: .62rem; letter-spacing: .13em; line-height: 1.3; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 5px 10px; min-height: 32px; border-radius: var(--r-chico);
  color: var(--texto); font-size: .9rem; font-weight: 500; line-height: 1.3;
}
.nav-item:hover { background: var(--papel2); text-decoration: none; }
.nav-item.activo { background: var(--azul-suave); font-weight: 600; }
/* La marca de «estás aquí»: un filete hueso a la izquierda, lo mismo que
   señala en los manuales el bloque que se está leyendo. */
.nav-item.activo::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--texto);
}
.nav-item .ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--tenue); flex: none; }
.nav-item.activo .ico { color: var(--texto); }
.nav-item.activo .ico { opacity: 1; }
.nav-item .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* En construcción: atenuado y con la marca «pronto» (que se esconde en el lateral compacto). */
.nav-item.pronto .txt, .nav-item.pronto .ico { opacity: .55; }
.nav-item.pronto:hover .txt, .nav-item.pronto:hover .ico, .nav-item.pronto.activo .txt, .nav-item.pronto.activo .ico { opacity: .9; }
.nav-pronto { margin-left: auto; font: 700 .56rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
  border: 1px solid var(--linea); border-radius: 999px; padding: 1px 6px; flex: none; }
body.lateral-compacto .nav-pronto { display: none; }
.pronto-p { margin: 0; padding: 4px 16px 14px; line-height: 1.5; }
.pronto-lista { margin: 0; padding: 4px 16px 14px 34px; line-height: 1.5; display: grid; gap: 6px; }
.pronto-rejilla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 4px 16px 16px; }
.pronto-ficha { display: grid; gap: 4px; padding: 12px 14px; border: 1px dashed var(--linea); border-radius: 10px; color: inherit; text-decoration: none; }
.pronto-ficha:hover { border-color: var(--azul); text-decoration: none; }
.pronto-ficha strong { font-family: var(--serif); }
.pronto-ficha small { color: var(--tenue); }
.pronto-ficha .etiqueta { justify-self: start; }
.icono { flex: none; }

/* El pie: utilidades, quién está dentro, salir, y contraer. */
.lateral-pie { border-top: 1px solid var(--linea); padding: 6px 10px 8px; display: grid; gap: 2px; }
.lateral-pie > * { min-width: 0; }
.utilidades { display: flex; gap: 4px; overflow: hidden; }
.util {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px;
  color: var(--tenue); font-size: .74rem; font-weight: 600; min-width: 0; flex: 1 1 0; overflow: hidden;
}
.util .txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util .ico { display: grid; place-items: center; }
.util .icono { width: 15px; height: 15px; }
.util .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util:hover, .util.activo { background: var(--papel2); color: var(--texto); text-decoration: none; }

.yo { display: flex; align-items: center; gap: 10px; padding: 6px 4px 4px; min-width: 0; }
.yo .avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papel2); border: 1px solid var(--linea); color: var(--texto); font: 700 .78rem var(--sans); letter-spacing: .04em;
}
.yo .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.yo strong { color: var(--texto); font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo small { color: var(--tenue); font-size: .73rem; }
.yo .salir, .contraer {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 0; color: var(--tenue); cursor: pointer; border-radius: var(--r-chico); font: inherit;
}
.yo .salir { flex: none; width: 34px; height: 34px; }
.yo .salir:hover, .contraer:hover { background: var(--papel2); color: var(--texto); }
.contraer { flex: none; width: 30px; height: 30px; margin-top: -2px; }

/* Contraído: 72 píxeles, solo iconos; cada cosa deja su nombre en el `title`. */
body.lateral-compacto { --lateral: 72px; }
body.lateral-compacto .lateral .txt,
body.lateral-compacto .grupo-t .txt,
body.lateral-compacto .lupa-boton span,
body.lateral-compacto .lupa-boton kbd { display: none; }
body.lateral-compacto .lateral-cab { padding: 14px 12px 8px; }
body.lateral-compacto .marca-fila { flex-direction: column; align-items: center; gap: 8px; }
body.lateral-compacto .lateral .marca { justify-content: center; padding: 2px 0 0; flex: none; }
body.lateral-compacto .contraer { margin: 0; }
body.lateral-compacto .lupa-boton { justify-content: center; padding: 9px 0; margin: 0; width: 100%; }
body.lateral-compacto .lateral nav { padding: 4px 12px 10px; }
body.lateral-compacto .grupo-t { padding: 0; height: 1px; margin: 8px 6px 10px; background: var(--linea); }
body.lateral-compacto .grupo:first-child .grupo-t { display: none; }
body.lateral-compacto .nav-item { justify-content: center; padding: 8px 0; }
body.lateral-compacto .utilidades { flex-direction: column; align-items: stretch; }
body.lateral-compacto .util { justify-content: center; padding: 7px 0; }
body.lateral-compacto .yo { flex-direction: column; gap: 6px; padding: 6px 0 2px; }

main {
  flex: 1; min-width: 0; padding: 30px 40px 72px;
  max-width: 1280px;
}

.barra-movil, .barra-inferior, .velo { display: none; }

body.sin-chrome .lateral,
body.sin-chrome .barra-movil,
body.sin-chrome .barra-inferior { display: none; }
body.sin-chrome main { padding: 0; max-width: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  body.lateral-compacto { --lateral: 244px; }
  .lateral {
    position: fixed; z-index: 40; left: 0; top: 0; width: var(--lateral);
    transform: translateX(-100%); transition: transform .2s;
    box-shadow: 0 0 40px #00000033;
  }
  body.lateral-abierto .lateral { transform: none; }
  body.lateral-abierto .velo {
    display: block; position: fixed; inset: 0; background: #0006; z-index: 30;
  }
  .contraer { display: none; }
  /* En el cajón hay alto de sobra: las utilidades, una debajo de otra y enteras. */
  .utilidades { flex-direction: column; }
  /* La barra del teléfono: menú, marca y lupa, fija arriba. */
  .barra-movil {
    display: flex; align-items: center; gap: 8px;
    position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 56px;
    padding: 0 10px; background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--linea);
  }
  .barra-movil button {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: none; border: 0; color: var(--texto); cursor: pointer;
  }
  .barra-movil button:active { background: var(--papel2); }
  .marca-movil {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    font: 700 1.08rem var(--serif); color: var(--texto); letter-spacing: -.01em;
  }
  .marca-movil:hover { text-decoration: none; }

  /* La barra de abajo: lo de cada día al alcance del pulgar. */
  .barra-inferior {
    display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--linea);
  }
  .tab-inferior {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px 4px; border-radius: 10px; color: var(--tenue);
    font: 600 .64rem var(--sans); letter-spacing: .02em; text-decoration: none;
    background: none; border: 0; cursor: pointer; min-width: 0;
  }
  .tab-inferior .ico { display: grid; place-items: center; width: 24px; height: 24px; }
  .tab-inferior .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab-inferior.activo { color: var(--azul); }
  .tab-inferior.activo .ico { background: var(--azul-suave); border-radius: 8px; width: 40px; }
  .tab-inferior:hover { text-decoration: none; }

  main { padding: 72px 16px calc(84px + env(safe-area-inset-bottom)); }
}

/* ================================================================ piezas */

.titulo-pag {
  display: flex; align-items: flex-end; gap: 14px 18px; flex-wrap: wrap;
  margin: 0 0 24px;
}
.titulo-pag > div:first-child { min-width: 0; }
.titulo-pag h1 { font-size: 1.95rem; margin: 0; }
.titulo-pag p { margin: 5px 0 0; color: var(--tenue); font-size: .93rem; }
.titulo-pag .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.titulo-pag .acciones .control { width: 240px; }
@media (max-width: 700px) {
  .titulo-pag h1 { font-size: 1.6rem; }
  .titulo-pag .acciones { margin-left: 0; width: 100%; }
}

.volver { display: inline-block; font-size: .88rem; margin-bottom: 10px; }

/* ------------------------------------------------------ migas e índice */

/* Las migas hacen de rótulo: van justo encima del título y en versalitas
   espaciadas, que es la estructura de la primera página de cada manual
   —«ASIGNATURA» pequeño y tracked, y debajo «Lengua Española» en serif—. */
.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tenue); margin-bottom: 6px;
}
.migas .sep { color: var(--tenue); }
.migas a { color: var(--tenue); }
.migas a:hover { color: var(--azul); }
.migas span:last-child { color: var(--azul); }

/* La fila del shell: el área en versalitas (el rótulo del manual) y el resto
   en texto normal —un nombre o un título largo en mayúsculas espaciadas no se
   lee—; donde estás, en tinta y sin enlace. */
.migas-shell { margin: 0 0 10px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .86rem; gap: 6px; }
.migas-shell .area { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--azul); }
.migas-shell a { color: var(--tenue); text-decoration: none; border-bottom: 1px solid transparent; }
.migas-shell a:hover { color: var(--azul); border-bottom-color: var(--azul); }
.migas-shell .actual { color: var(--texto); font-weight: 600; }
.migas-shell span:last-child { color: var(--texto); }
.migas-shell .sep { font-size: .95rem; line-height: 1; opacity: .7; }
/* Un título largo en una miga se recorta: la fila es para orientarse, el título entero va debajo. */
.migas-shell a, .migas-shell span:not(.sep) { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .migas-shell { font-size: .82rem; } }

/* Página con índice lateral. En pantalla estrecha el índice desaparece: en un
   móvil estorba más de lo que ayuda. */
.con-indice { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 26px; align-items: start; }
.con-indice .principal { min-width: 0; }
.lateral-indice { position: sticky; top: 22px; }
.indice { display: grid; gap: 2px; border-left: 2px solid var(--linea); }
.indice a {
  padding: 6px 12px; font-size: .86rem; color: var(--tenue);
  border-left: 2px solid transparent; margin-left: -2px;
}
.indice a:hover { color: var(--texto); text-decoration: none; }
.indice a.activo { color: var(--azul); border-left-color: var(--azul); font-weight: 600; }
@media (max-width: 1100px) {
  .con-indice { grid-template-columns: 1fr; }
  .lateral-indice { display: none; }
}

/* ------------------------------------------------------- matriz del plan */

.segmentos { display: flex; gap: 5px; }

table.matriz-plan th.grado { width: 54px; min-width: 54px; padding: 8px 4px; text-align: center; }
table.matriz-plan th.grado .g { display: block; font-size: 1rem; color: var(--texto); }
table.matriz-plan th.grado small { font-size: .66rem; }
table.matriz-plan th.asig {
  text-align: left; font-size: .88rem; font-weight: 500; color: var(--texto);
  text-transform: none; letter-spacing: 0; min-width: 230px;
}
/* El cuadrito de color delante de la asignatura: el mismo recurso que usan los
   manuales para marcar los puntos de una lista. */
.marca-asig {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: var(--c, var(--tenue)); margin-right: 9px; vertical-align: 0;
}
table.matriz-plan tr:hover .celda-plan {
  background: color-mix(in srgb, var(--c, var(--azul)) 16%, transparent);
  color: var(--c, var(--azul));
}
table.matriz-plan td { text-align: center; padding: 4px; }
.celda-plan {
  display: block; padding: 9px 0; border-radius: 8px; font-weight: 600;
  background: var(--azul-suave); color: var(--azul);
}
.celda-plan:hover { background: var(--azul); text-decoration: none; }
/* El punto dice algo —esa asignatura no se imparte en ese grado—: tiene que
   leerse, no solo intuirse (con --linea se quedaba en 1,3 de contraste). */
.no-hay { color: var(--tenue); }

.panel {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.panel-cab {
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel-cab h2 { font-size: 1.04rem; margin: 0; }
.panel-cab .acciones { margin-left: auto; display: flex; gap: 8px; }
.panel-cuerpo { padding: 16px; }
.panel-pie { padding: 12px 16px; border-top: 1px solid var(--linea); }

.tarjetas {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px 18px 14px; box-shadow: var(--sombra);
}
.tarjeta .n { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.tarjeta .r { color: var(--tenue); font-size: .66rem; margin-top: 6px; }

.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.rejilla.ancha { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.ficha {
  display: block; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px 18px; color: inherit;
  box-shadow: var(--sombra); transition: border-color .15s, transform .15s, box-shadow .15s;
}
/* La ficha de un salón lleva a la izquierda el filete con el color de su
   nivel —el recuadro de filete de los manuales—: en una rejilla de cinco
   salones, el de Inicial y los de Primaria se encuentran sin leer. */
.ficha.salon { border-left: 4px solid var(--c, var(--linea)); padding-left: 16px; }
a.ficha.salon:hover { transform: translateY(-1px); }
/* Una ficha que además es botón —«¿es esta persona?»— sigue siendo una ficha:
   el navegador se la centraría por ser <button>. */
button.ficha { text-align: left; width: 100%; font: inherit; cursor: pointer; }

a.ficha:hover, button.ficha:hover {
  border-color: color-mix(in srgb, var(--azul) 55%, transparent);
  text-decoration: none;  /* sin sombra: en los kits no las hay; basta el filete */
}
a.ficha.salon:hover { border-left-color: var(--c, var(--linea)); }
/* El nombre de la cosa, en serif: en el manual los nombres son de la familia
   del título, y es lo que hace que una rejilla de tarjetas se lea como un
   índice y no como una lista de la compra. */
.ficha strong {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 1.06rem; letter-spacing: -.01em;
}
/* Cada dato en su línea. Cuando dos `small` seguidos caían en la misma, se
   leían pegados —«3-6 años10 capítulos»—: no era un separador que faltaba,
   era que la ficha no tenía renglones. */
.ficha small { display: block; color: var(--tenue); font-size: .84rem; }
.ficha.modulo .codigo {
  font-size: .72rem; color: var(--tenue); letter-spacing: .05em; margin-bottom: 4px;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 20px;
  color: var(--tinta-c);
  border: 1px solid color-mix(in srgb, var(--c, var(--tenue)) 38%, transparent);
  background: color-mix(in srgb, var(--c, var(--tenue)) 9%, transparent);
}
a.chip:hover, a.chip.activo {
  background: var(--tinta-c); border-color: var(--tinta-c); color: var(--fondo); text-decoration: none;
}

/* -------------------------------------------------------------- controles */

.btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-chico); padding: 7px 14px; min-height: 36px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:hover { border-color: color-mix(in srgb, var(--tenue) 60%, var(--linea)); background: var(--papel2); }
.btn:focus-visible, .control:focus-visible, .nav-item:focus-visible, .pestana:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}
.btn.primario { background: var(--azul); border-color: var(--azul); }
.btn.peligro { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); }
.btn.plano { border-color: transparent; background: none; }
.btn.chico { padding: 4px 10px; min-height: 30px; font-size: .82rem; border-radius: var(--r-chico); }
.btn:disabled { opacity: .5; cursor: default; }

.control {
  font: inherit; color: var(--texto); background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--linea) 60%, var(--tenue)); border-radius: var(--r-chico); padding: 8px 11px; min-height: 36px; width: 100%;
}
.control::placeholder { color: color-mix(in srgb, var(--tenue) 75%, transparent); }
.control:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

.campo { display: block; margin-bottom: 13px; }
.campo > span { display: block; font-size: .82rem; color: var(--tenue); margin-bottom: 4px; }
.campo small { display: block; color: var(--tenue); font-size: .78rem; margin-top: 4px; }

.lista-check { display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.check { display: flex; align-items: center; gap: 9px; padding: 6px 4px; cursor: pointer; }
.check input { width: auto; }
.check small { margin-left: auto; }

/* ---------------------------------------------------------------- tablas */

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--linea); }
th {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tenue); font-weight: 700; background: var(--papel2); padding: 9px 16px;
}
td { font-size: .93rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Columna de acciones anclada a la derecha: sigue visible aunque la tabla no
   quepa. El degradado indica que hay contenido debajo. */
th.fija, td.fija {
  position: sticky; right: 0; background: var(--papel);
  text-align: right; box-shadow: -8px 0 8px -8px #0003;
}
th.fija-izq, td.fija-izq {
  position: sticky; left: 0; z-index: 1; background: var(--papel);
  box-shadow: 8px 0 8px -8px #0003;
}
thead th.fija-izq { z-index: 3; }
th.fija { background: var(--papel2); }
tbody tr:hover td.fija, tbody tr:hover td.fija-izq,
tbody tr:hover th.fija-izq { background: var(--papel2); }

.etiq {
  display: inline-block; padding: 2px 9px; border-radius: 20px; margin-left: 6px;
  font-size: .72rem; font-weight: 600; color: var(--tenue);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.etiq.admin { color: var(--azul); }
.etiq.bien { color: var(--verde); }
.etiq.mal  { color: var(--rojo); }
.etiq.no { color: var(--tenue); }

.acciones-fila { display: inline-flex; gap: 6px; }
.tenue { color: var(--tenue); font-size: .9em; }
.prosa { line-height: 1.65; }
.lista { margin: 0; padding-left: 1.15rem; }
.lista li { margin-bottom: 5px; }

.vacio { padding: 40px 16px; text-align: center; color: var(--tenue); }
.vacio small { display: block; margin-top: 6px; }

.cargando {
  padding: 46px; text-align: center; color: var(--tenue);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.girando {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--linea); border-top-color: var(--azul);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Como los recuadros de los kits: borde fino de color, esquinas suaves y un
   relleno apenas teñido. */
.aviso {
  padding: 11px 15px; border-radius: var(--r);
  border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  margin-bottom: 12px; font-size: .9rem;
}
.aviso.mal { background: color-mix(in srgb, var(--rojo) 11%, transparent); color: var(--rojo); }
.aviso.bien { background: color-mix(in srgb, var(--verde) 11%, transparent); color: var(--verde); }

/* --------------------------------------------------------- modal y avisos */

.modal {
  border: 0; border-radius: var(--r); padding: 0; max-width: 520px; width: 92%;
  background: var(--papel); color: var(--texto);
}
.modal::backdrop { background: #0008; }
.modal-cab {
  padding: 14px 18px; border-bottom: 1px solid var(--linea); font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.modal-cab .btn { margin-left: auto; }
.modal-cuerpo { padding: 18px; max-height: 68vh; overflow: auto; }
.modal-pie {
  padding: 13px 18px; border-top: 1px solid var(--linea);
  display: flex; gap: 8px; justify-content: flex-end;
}
code.token {
  display: block; word-break: break-all; background: var(--azul-suave);
  padding: 12px; border-radius: 9px; font-size: .82rem; margin: 10px 0;
  font-family: ui-monospace, Menlo, monospace;
}

.avisos { position: fixed; bottom: 18px; right: 18px; z-index: 100; display: grid; gap: 8px; }
.flotante {
  background: var(--indigo); color: var(--hueso);
  border: 1px solid #ffffff20; padding: 11px 16px; border-radius: var(--r-chico);
  font-size: .9rem; box-shadow: 0 8px 22px #00000040; transition: opacity .3s;
  max-width: 340px;
}
.flotante.mal { background: var(--rojo); }

/* ---------------------------------------------------------------- acceso */
/* La entrada es una portada del método (la plantilla de portadas de Anabel,
   4-sep-2026): barra de acento, «Portal / CAMPA» en dos pesos, la colección
   en versalitas, la línea ascendente de los cinco pilares, círculos
   degradados en las esquinas y el lema. Al lado, la caja para entrar. */
.acceso {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center; gap: 40px; max-width: 1100px; margin: 0 auto; padding: 40px 32px;
}
.portada {
  position: relative; overflow: hidden; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 48px 44px 40px; aspect-ratio: 210 / 250; display: flex; flex-direction: column;
  --area: #C9A33A;
}
.orbe { position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--area) 55%, transparent) 0%, color-mix(in srgb, var(--area) 18%, transparent) 46%, transparent 72%); }
.orbe::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--area) 70%, transparent); }
.orbe.a { right: -70px; top: -80px; }
.orbe.b { left: -80px; bottom: -70px; }
.portada-barra { width: 34%; height: 7px; background: var(--area); border-radius: 3px; margin-bottom: 26px; }
.portada h1 { font: 700 2.4rem/0.98 var(--serif); margin: 0; letter-spacing: -.005em; }
.portada h1 b { display: block; font-weight: 800; font-size: 3.6rem; margin-top: 2px; }
.portada-col { font: 700 .74rem var(--sans); letter-spacing: .17em; text-transform: uppercase; margin-top: 14px; }
.portada-lema { margin: auto 0 0; text-align: center; font: 600 1.25rem var(--serif); color: color-mix(in srgb, var(--area) 60%, var(--texto)); }
.linea-pilares { position: relative; height: 170px; margin: 34px 4% 30px; --linea-pilares: var(--area); }
.linea-pilares svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pilar-punto { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px var(--papel); }
/* Debajo de su punto, empezando un poco a la izquierda: como en la plantilla. */
.pilar-et { position: absolute; transform: translate(-30%, 62%); font: 400 .98rem var(--serif); white-space: nowrap; line-height: 1; }
.pilar-et b { font-size: 1.55rem; font-weight: 700; }
.acceso .caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 28px; }
.acceso .caja .rotulo { margin: 0 0 14px; }
.acceso .btn { width: 100%; justify-content: center; }
.acceso .aviso { margin-bottom: 12px; }
.acceso-enlace {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--papel2); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 20px; color: var(--texto);
}
.acceso-enlace .icono { flex: none; margin-top: 1px; color: var(--tenue); }
.acceso-enlace p { margin: 0; color: var(--texto); font-size: .92rem; line-height: 1.45; }
.acceso-pie {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--linea);
  color: var(--tenue); font-size: .82rem; line-height: 1.45; text-align: center;
}
@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px 30px; align-content: start; }
  .portada { aspect-ratio: auto; padding: 30px 26px 24px; }
  .portada h1 { font-size: 1.8rem; } .portada h1 b { font-size: 2.6rem; }
  .linea-pilares { height: 120px; margin: 26px 6% 22px; }
  .pilar-et { font-size: .8rem; } .pilar-et b { font-size: 1.15rem; }
  .portada-lema { font-size: 1.05rem; margin-top: 8px; }
}

/* ---------------------------------------------------------- experiencia */

.dos-columnas { display: grid; gap: 16px; grid-template-columns: 1.35fr 1fr; align-items: start; }
@media (max-width: 1000px) { .dos-columnas { grid-template-columns: 1fr; } }

.seccion { margin-bottom: 20px; }
.seccion h3 { font-size: .9rem; color: var(--azul); margin: 0 0 8px; }
.dimension { display: flex; gap: 12px; margin-bottom: 8px; }
.dimension > span { flex: 0 0 92px; font-size: .78rem; font-weight: 700; }
.dimension p { margin: 0; font-size: .92rem; }
.actividad { margin-bottom: 14px; }
.actividad p { margin: 4px 0 0; }
.premio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.premio small { flex-basis: 100%; color: var(--tenue); }
/* El recuadro de filete: la pieza que más se repite en los manuales —un
   bloque con una barra de color a la izquierda para lo que hay que leer
   entero—. Aquí sirve para lo mismo. */
blockquote {
  margin: 0 0 12px; padding: 13px 16px; background: var(--papel2);
  border-left: 4px solid var(--c, var(--azul));
  border-radius: 0 var(--r-chico) var(--r-chico) 0; line-height: 1.62;
}
/* La frase que se lee en voz alta va en serif: es narrativa, no interfaz. */
blockquote.frase {
  text-align: center; font-family: var(--serif); font-size: 1.06rem;
  font-style: normal; border-left: 0; border-radius: var(--r-chico);
}

/* -------------------------------------------------------------- registro */

.periodos { display: flex; gap: 5px; }
.leyenda {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px; font-size: .78rem; color: var(--tenue);
}
.muestra::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 5px; vertical-align: -1px;
}
/* De peor a mejor, con las dimensiones CAMPA: Acción, Motivación, Propósito
   y Autonomía. No es decoración —es la misma rueda del icono y del manual—. */
.muestra.destacado::before { background: var(--verde); }
.muestra.logrado::before { background: var(--azul); }
.muestra.proceso::before { background: var(--ambar); }
.muestra.insuficiente::before { background: var(--rojo); }

/* Registro: lista de módulos a la izquierda, la hoja del módulo a la derecha */
.con-modulos { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 16px; align-items: start; }
.nav-modulos { display: grid; gap: 4px; position: sticky; top: 22px; max-height: 82vh; overflow-y: auto; }
.nav-modulos .mod {
  display: grid; gap: 1px; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--linea); background: var(--papel); color: inherit;
}
.nav-modulos .mod:hover { border-color: var(--azul); text-decoration: none; }
.nav-modulos .mod.activo { border-color: var(--azul); background: var(--azul-suave); }
.nav-modulos .mod strong { font-size: .72rem; color: var(--tenue); letter-spacing: .04em; }
.nav-modulos .mod span { font-size: .86rem; line-height: 1.3; }
.nav-modulos .mod small { font-size: .74rem; color: var(--tenue); }
.nav-modulos .mod.activo strong, .nav-modulos .mod.activo small { color: var(--azul); }
@media (max-width: 1000px) {
  .con-modulos { grid-template-columns: 1fr; }
  .nav-modulos { position: static; max-height: 210px; }
}

.matriz-scroll { overflow: auto; max-height: calc(100vh - 250px); }
table.matriz { border-collapse: separate; border-spacing: 0; }
table.matriz th, table.matriz td { padding: 0; border: 0; }

table.matriz thead th {
  position: sticky; top: 0; z-index: 3; background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
table.matriz th.esquina {
  left: 0; z-index: 4; min-width: 340px; max-width: 340px;
  padding: 10px 12px; text-align: left;
}
table.matriz th.alumno {
  width: 46px; min-width: 46px; height: 130px; vertical-align: bottom; padding-bottom: 8px;
}
table.matriz th.alumno span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; overflow: hidden; max-height: 118px;
  font-size: .76rem; text-transform: none; letter-spacing: 0; color: var(--texto);
}
table.matriz th.indicador {
  position: sticky; left: 0; z-index: 2; background: var(--papel);
  min-width: 340px; max-width: 340px; padding: 6px 12px;
  font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--texto); text-align: left; line-height: 1.35;
  border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea);
}
table.matriz th.indicador .orden {
  color: var(--tenue); margin-right: 6px; font-variant-numeric: tabular-nums;
}
table.matriz tr.fila-modulo th {
  position: sticky; left: 0; background: var(--azul-suave); color: var(--azul);
  padding: 7px 12px; font-size: .78rem; font-weight: 700; text-align: left;
  text-transform: none; letter-spacing: 0;
}
table.matriz tbody tr:hover th.indicador { background: var(--papel2); }
table.matriz tbody tr:hover { background: none; }

/* La celda de la matriz. Vale para las dos escalas: un campo numérico donde
   se puntúa de 0 a 100, y un desplegable donde se observa por niveles. Los
   colores son los mismos porque significan lo mismo —de peor a mejor—. */
.celda {
  width: 46px; height: 34px; text-align: center; font: inherit; font-size: .85rem;
  border: 0; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea);
  background: transparent; color: var(--texto);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
input.celda::-webkit-outer-spin-button,
input.celda::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.celda:focus { outline: 2px solid var(--azul); outline-offset: -2px; }

/* El nivel se lee entero: «LHS» no significa nada para quien califica. Cabe
   porque son tres opciones y la tabla ya se desplaza a lo ancho. */
select.celda.nivel {
  width: 116px; font-size: .78rem; text-align: left; padding: 0 4px;
  appearance: none; cursor: pointer;
}

.celda.destacado { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); font-weight: 600; }
.celda.logrado { background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul); font-weight: 600; }
.celda.proceso { background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--ambar); font-weight: 600; }
.celda.insuficiente { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--rojo); font-weight: 600; }
.celda.guardando { opacity: .5; }

/* ------------------------------------------------------------ modo clase */

.modo-clase { display: flex; flex-direction: column; height: 100vh; background: var(--papel); }
.modo-clase > header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--linea); background: var(--indigo); color: #fff;
}
.modo-clase header .salir { color: #cdd3e4; display: inline-flex; padding: 6px; margin: -6px; border-radius: 8px; }
.modo-clase header .salir:hover { color: #fff; background: #ffffff18; }
.modo-clase header > div:not(.crono) { min-width: 0; }
.modo-clase header strong { display: block; }
.vistas-clase { display: none; }
.modo-clase header small { color: #8b93ad; }
.crono { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.reloj { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.reloj.poco { color: #ff8a80; }
.crono .btn { background: #ffffff18; border-color: #ffffff2e; color: #fff; }

.modo-clase .lienzo { flex: 1; display: flex; overflow: hidden; }
.modo-clase article {
  flex: 1; overflow-y: auto; padding: 30px 40px 70px;
  font-size: 1.12rem; line-height: 1.7; max-width: 60rem;
}
.modo-clase h2 { font-size: 1rem; color: var(--azul); text-transform: uppercase; letter-spacing: .06em; }
.modo-clase .act { margin-bottom: 18px; }
.modo-clase .act h4 { margin: 0 0 4px; font-size: 1.05rem; }
.modo-clase .act .tipo {
  font-size: .74rem; font-weight: 500; color: var(--tenue);
  border: 1px solid var(--linea); border-radius: 20px; padding: 1px 8px; margin-left: 8px;
}
.modo-clase .reto { color: var(--tenue); }
.modo-clase blockquote { font-size: 1.15rem; }

.otorgar {
  flex: 0 0 320px; border-left: 1px solid var(--linea);
  background: var(--papel2); padding: 16px; overflow-y: auto;
}
.otorgar h3 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; color: var(--azul); letter-spacing: .05em; }
.premios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip-premio {
  font: inherit; font-size: .8rem; cursor: pointer; padding: 5px 11px; border-radius: 20px;
  background: var(--papel); color: var(--texto);
  border: 1px solid color-mix(in srgb, var(--c, var(--linea)) 45%, var(--linea));
  display: inline-flex; gap: 6px; align-items: center;
}
.chip-premio b { color: var(--tinta-c); }
.chip-premio.activo { background: var(--c, var(--azul)); border-color: var(--c, var(--azul)); }
.alumnos { display: grid; gap: 4px; }
.alumnos .alumno {
  font: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--linea);
  background: var(--papel); color: var(--texto);
}
.alumnos .alumno span { flex: 1; }
.alumnos .alumno b { color: var(--tenue); font-variant-numeric: tabular-nums; }
.alumnos .alumno.marcado { background: var(--azul); border-color: var(--azul); }

@media (max-width: 900px) {
  .modo-clase > header { gap: 12px; padding: 10px 14px; }
  .modo-clase header strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
  .modo-clase header small { font-size: .78rem; }
  .reloj { font-size: 1.2rem; }
  .crono { gap: 6px; }
  .crono .btn { padding: 7px; min-height: 0; }
  .vistas-clase {
    display: flex; gap: 4px; padding: 6px; background: var(--papel2);
    border-bottom: 1px solid var(--linea);
  }
  .vistas-clase button {
    flex: 1; font: 600 .9rem var(--sans); padding: 9px; border-radius: 9px; cursor: pointer;
    border: 0; background: none; color: var(--tenue);
  }
  .vistas-clase button[aria-pressed="true"] { background: var(--papel); color: var(--texto); box-shadow: 0 1px 2px #0000001f; }
  .modo-clase .lienzo { display: block; overflow-y: auto; }
  .modo-clase.ver-guion .otorgar, .modo-clase.ver-otorgar article { display: none; }
  .otorgar { border-left: 0; overflow: visible; }
  .modo-clase article { padding: 20px 18px 60px; font-size: 1.02rem; overflow: visible; }
}

/* ---------------------------------------------------- fichas de detalle
 *
 * Las pantallas de detalle —estudiante, salón, familia— son listas de pares
 * «qué es / cuánto vale». Con una etiqueta de ancho fijo la columna de valores
 * se alinea sola y el ojo baja en línea recta, que es lo que se hace al leer
 * una ficha: buscar un dato concreto, no leerla entera. */
.rejilla { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .rejilla { grid-template-columns: 1fr; } }

.dato { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: 0; }
.dato-etq { flex: 0 0 150px; color: var(--tenue); font-size: .82rem; padding-top: 1px; }
.dato-val { flex: 1; min-width: 0; font-size: .92rem; word-break: break-word; }

/* Cuatro números grandes que se leen de lejos: el resumen de asistencia es
 * una ojeada, no una tabla. */
.cifras { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cifra { display: flex; flex-direction: column; font-size: .76rem; color: var(--tenue); }
.cifra b { font-size: 1.5rem; font-weight: 700; color: var(--texto); line-height: 1.1; }
.cifra.bien b { color: var(--verde); }
.cifra.mal b  { color: var(--rojo); }

/* ------------------------------------------------------ guías del salón */
/* ================================================== Guías del salón
   Se leen como un libro del método (8-oct-2026): biblioteca de portadas,
   portada e índice de cada guía, y una lectura con medida de libro, títulos
   en serif y los recuadros de los kits. El color es el del área del capítulo
   (o el del nivel en Inicial), y solo marca: barras, filetes, chips. */

/* La biblioteca: un estante por nivel, un libro por salón, por edad. */
.estantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 24px; align-items: start; margin-top: 22px; }
.estante { min-width: 0; }
.estante-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.estante-cab::before { content: ''; width: 28px; height: 5px; border-radius: 3px; background: var(--c); }
.estante-libros { display: grid; gap: 14px; }
.libro {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 200px;
  padding: 22px 20px 16px 30px; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); color: inherit; overflow: hidden; transition: border-color .15s, transform .15s;
}
.libro:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 55%, var(--linea)); transform: translateY(-2px); }
.libro-lomo { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--c); }
.libro-col { font: 700 .68rem var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--tenue); }
.libro-titulo { font: 700 2rem/1.05 var(--serif); margin-top: 6px; letter-spacing: -.005em; }
.libro-edad { font: 600 .98rem var(--serif); color: color-mix(in srgb, var(--c) 46%, var(--texto)); }
.libro-pie { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82rem; color: var(--tenue); }
.libro-sigue { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--linea); font-size: .82rem; color: var(--texto); }

/* La portada de una guía, como las de los kits. */
.guia-portada {
  position: relative; overflow: hidden; margin: 6px 0 28px; padding: 32px 36px 28px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
}
.guia-portada .orbe.a { right: -70px; top: -90px; width: 230px; height: 230px; }
.guia-portada-barra { width: 90px; height: 6px; border-radius: 3px; background: var(--area); margin-bottom: 18px; }
.guia-portada h1 { margin: 12px 0 8px; line-height: 1; }
.guia-portada h1 span { display: block; font: 600 1.45rem var(--serif); color: var(--tenue); }
.guia-portada h1 b { display: block; font: 800 3.2rem/1.02 var(--serif); letter-spacing: -.01em; }
.guia-portada-meta { font: 600 1.05rem var(--serif); color: color-mix(in srgb, var(--area) 46%, var(--texto)); }
.guia-portada-acc { display: flex; gap: 10px; margin-top: 18px; }
.guia-portada-acc:empty { display: none; }
.guia-tab-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.guia-tab-cab p { margin: 0; }

/* El índice: cada capítulo dice de qué va antes de abrirlo. */
.guia-indice-t { font: 700 1.3rem var(--serif); margin: 0 0 12px; }
.capitulos-guia { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capitulos-guia a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; align-items: start;
  padding: 16px 18px; background: var(--papel); color: inherit;
  border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: var(--r);
}
.capitulos-guia a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 50%, var(--linea)); border-left-color: var(--c); }
.cap-num { font: 700 1.6rem/1 var(--serif); color: color-mix(in srgb, var(--c) 46%, var(--texto)); padding-top: 2px; }
.cap-nombre { font: 700 1.15rem/1.2 var(--serif); }
.cap-idea { margin: 5px 0 6px; font-size: .92rem; line-height: 1.5; max-width: 78ch; }
.cap-meta { font-size: .78rem; color: var(--tenue); }
.cap-ir { color: var(--tenue); align-self: center; }

/* La lectura */
.guia-lectura .con-indice { grid-template-columns: minmax(0, 1fr) 240px; gap: 44px; }
.guia-lectura .principal { max-width: 840px; }
.guia-lectura .lateral-indice { max-height: calc(100vh - 44px); overflow-y: auto; padding-top: 6px; }
.guia-lectura .lateral-indice .rotulo { display: block; margin: 0 0 8px 14px; }
.guia-lectura .indice a { font-size: .82rem; line-height: 1.35; padding: 5px 12px; }
.guia-lectura .indice a.activo { color: color-mix(in srgb, var(--area) 46%, var(--texto)); border-left-color: var(--area); }
.guia-cab { padding: 4px 0 22px; border-bottom: 1px solid var(--linea); }
.guia-cab-barra { width: 80px; height: 6px; border-radius: 3px; background: var(--area); margin: 10px 0 16px; }
.guia-cab h1 { font: 700 2.6rem/1.05 var(--serif); margin: 8px 0; letter-spacing: -.01em; }
.guia-cab-meta { color: var(--tenue); font-size: .92rem; }
.guia-cab-acc { display: flex; gap: 8px; margin-top: 14px; }

.guia-sec { padding: 30px 0 8px; scroll-margin-top: 18px; }
.guia-sec + .guia-sec { border-top: 1px solid var(--linea); }
.guia-sec-ante { display: flex; gap: 10px; align-items: baseline; font: 700 .72rem var(--sans); letter-spacing: .14em;
                 text-transform: uppercase; color: color-mix(in srgb, var(--area) 46%, var(--texto)); }
.guia-sec-cab h2 { font: 700 1.6rem/1.18 var(--serif); margin: 6px 0 4px; letter-spacing: -.005em; }
.guia-sec-sub { font: 600 1.02rem/1.4 var(--serif); color: var(--tenue); }
.guia-sec-cuerpo { margin-top: 14px; font-size: 1rem; line-height: 1.65; }
.guia-sec-cuerpo > p, .guia-sec-cuerpo > h4, .guia-lista, .guia-recuadro, .guia-aviso, .guia-pregunta { max-width: 70ch; }
.guia-sec-cuerpo p { margin: 0 0 14px; }
.guia-entrada { font: 400 1.3rem/1.5 var(--serif); border-left: 4px solid var(--area); padding-left: 18px; }
.guia-sec.idea { padding-top: 26px; }
.guia-sub { font: 700 1.05rem/1.3 var(--serif); margin: 22px 0 8px; }
.guia-rotulo { font: 700 .7rem var(--sans); letter-spacing: .15em; text-transform: uppercase;
               color: color-mix(in srgb, var(--area) 46%, var(--texto)); margin-bottom: 6px; }
.guia-rotulo.en-linea { display: inline; margin: 0 4px 0 0; }

/* Los recuadros de los kits */
.guia-pregunta {
  margin: 4px 0 18px; padding: 16px 20px; border-left: 4px solid var(--area);
  background: color-mix(in srgb, var(--area) 7%, var(--papel)); border-radius: 0 var(--r) var(--r) 0;
}
.guia-pregunta p { font: 600 1.25rem/1.4 var(--serif); margin: 0; }
.guia-recuadro {
  margin: 6px 0 18px; padding: 14px 18px; border-radius: var(--r);
  border: 1.5px solid color-mix(in srgb, var(--area) 45%, var(--linea)); background: color-mix(in srgb, var(--area) 4%, var(--papel));
}
.guia-recuadro p { margin: 0; }
.guia-recuadro ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.guia-aviso {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 6px 0 16px; padding: 12px 16px;
  border: 1.5px solid color-mix(in srgb, var(--ambar) 45%, var(--linea)); background: color-mix(in srgb, var(--ambar) 6%, var(--papel));
  border-radius: var(--r);
}
.guia-aviso-ic { color: var(--ambar); padding-top: 3px; }
.guia-aviso p { margin: 0; }

/* Listas: las viñetas que el PDF perdió */
.guia-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.guia-lista > li { position: relative; padding-left: 22px; }
.guia-lista > li::before { content: ''; position: absolute; left: 5px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--area); }
.guia-lista > li.guia-cuidado { padding: 8px 12px 8px 30px; border-radius: var(--r); background: color-mix(in srgb, var(--ambar) 7%, var(--papel)); }
.guia-lista > li.guia-cuidado::before { left: 13px; top: 1.05em; background: var(--ambar); }
.guia-lista > li.guia-destaca::before { content: '★'; background: none; width: auto; height: auto; left: 2px; top: 0; color: #C9A33A; }
.guia-lista > li.guia-pista, .guia-recuadro li.guia-pista { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding-left: 0; }
.guia-lista > li.guia-pista::before { display: none; }
.guia-grado {
  display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 12px; margin-top: 1px;
  font: 700 .78rem var(--sans); background: color-mix(in srgb, var(--area) 46%, var(--texto)); color: var(--fondo);
}
.guia-mod { font-weight: 700; color: color-mix(in srgb, var(--area) 46%, var(--texto)); text-decoration: underline; text-underline-offset: 2px; }
.guia-ref { font-weight: 600; color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.guia-dur {
  display: inline-block; padding: 0 7px; border-radius: 10px; white-space: nowrap; vertical-align: 1px;
  font: 600 .76rem/1.6 var(--sans); color: var(--tenue); background: var(--papel2); border: 1px solid var(--linea);
}

/* Tablas: el «Mapa de hilos» y el calendario, por columnas */
.guia-tabla-env { overflow-x: auto; margin: 6px 0 20px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.guia-tabla-datos { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9rem; line-height: 1.42; }
.guia-tabla-datos th, .guia-tabla-datos td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.guia-tabla-datos thead th {
  font: 700 .7rem/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); background: var(--papel2);
}
.guia-tabla-datos tbody th { font: 600 .9rem/1.42 var(--sans); text-transform: none; letter-spacing: 0; color: var(--texto); background: none; }
.guia-tabla-datos tbody tr:last-child > * { border-bottom: 0; }
.guia-tabla-datos.con-numero tbody td:first-child { width: 26px; font: 700 1rem var(--serif); color: color-mix(in srgb, var(--area) 46%, var(--texto)); }
.guia-tabla-datos.con-numero tbody td:nth-child(2) { font-weight: 600; }
.guia-pre { overflow-x: auto; margin: 6px 0 18px; background: var(--papel2); border-radius: var(--r); }
.guia-pre pre { margin: 0; padding: 12px 14px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; color: var(--texto); }

/* Anterior y siguiente */
.guia-vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 10px; padding-top: 24px; border-top: 1px solid var(--linea); }
.guia-vecino {
  display: grid; gap: 4px; padding: 14px 18px; color: inherit; background: var(--papel);
  border: 1px solid var(--linea); border-top: 4px solid var(--c); border-radius: var(--r);
}
.guia-vecino.despues { text-align: right; }
.guia-vecino strong { font: 700 1.15rem var(--serif); }
.guia-vecino:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 50%, var(--linea)); border-top-color: var(--c); }

/* En pantallas estrechas, el índice va plegado arriba */
.guia-indice-movil { display: none; margin: 16px 0 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.guia-indice-movil summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.guia-indice-movil ol { margin: 0; padding: 2px 16px 14px 38px; display: grid; gap: 7px; font-size: .9rem; }
@media (max-width: 1100px) {
  .guia-indice-movil { display: block; }
  .guia-lectura .con-indice { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .guia-portada { padding: 24px 20px 22px; }
  .guia-portada h1 b { font-size: 2.4rem; }
  .guia-cab h1 { font-size: 2rem; }
  .guia-entrada { font-size: 1.12rem; }
  .guia-sec-cab h2 { font-size: 1.35rem; }
  .guia-vecinos { grid-template-columns: 1fr; }
  .guia-vecino.despues { text-align: left; }
  .capitulos-guia a { grid-template-columns: 30px minmax(0, 1fr); padding: 14px; }
  .cap-ir { display: none; }
}
@media print {
  .guia-cab-acc, .guia-vecinos, .guia-indice-movil { display: none !important; }
  .guia-sec { break-inside: auto; }
  .guia-tabla-datos { min-width: 0; font-size: 8.5pt; }
}

/* ---------------------------------------------------- datos por revisar */
.aviso-cabecera {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.aviso-cabecera .tenue { line-height: 1.5; }

/* --------------------------------------------------------- pasar lista */
/* Cuatro botones por estudiante, uno marcado. Se señalan las excepciones:
   todos entran presentes, porque en un salón de quince, catorce lo están. */

table.lista { width: 100%; border-collapse: collapse; }
table.lista td { padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.lista td.num { width: 40px; text-align: right; color: var(--tenue); font-variant-numeric: tabular-nums; }
table.lista tr:hover { background: var(--papel2); }

.estados { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.estado {
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent;
  font: inherit; font-size: .82rem; color: var(--tenue);
}
.estado:hover { border-color: var(--azul); color: var(--texto); }
/* Solo el estado puesto se colorea: un salón entero de colores no se lee. */
.estado.puesto { border-color: transparent; background: var(--azul); }
.estado.bien.puesto { background: var(--verde); }
.estado.mal.puesto  { background: var(--rojo); }
.estado.no.puesto   { background: var(--ambar); }

input.fecha {
  font: inherit; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--texto);
}

/* El texto que va ENCIMA de un relleno de color siempre es `--fondo`, nunca
   blanco: en claro el fondo es papel y se ve igual que antes, y en oscuro los
   rellenos son tonos claros donde el blanco daba 1,87 de contraste. Es una
   sola regla y sale bien en los dos temas por construcción. */
.btn.primario,
.celda-plan:hover,
.estado.puesto,
.alumnos .alumno.marcado,
.alumnos .alumno.marcado b,
.chip-premio.activo,
.chip-premio.activo b { color: var(--fondo); }

/* Pasar lista en un teléfono.
 *
 * Los cuatro estados viven en su propia celda y alineados a la derecha, que en
 * una pantalla ancha es exactamente lo que hace falta. En 375 px esa celda se
 * queda sin sitio y los botones caen en escalera: cada estudiante ocupaba
 * media pantalla y había que bajar cuatro veces para un salón de quince.
 *
 * Aquí la fila se parte en dos renglones —quién, y debajo los cuatro estados
 * repartidos a lo ancho— y los botones crecen hasta tamaño de dedo. */
@media (max-width: 700px) {
  table.lista tr {
    display: grid; grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 9px; align-items: center; border-bottom: 1px solid var(--linea);
  }
  table.lista td { border-bottom: 0; padding: 6px 4px; }
  table.lista td:last-child { grid-column: 1 / -1; padding: 2px 0 12px; }
  .estados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .estado { padding: 11px 2px; font-size: .8rem; }
}

/* ---------------------------------------------- buscar y elegir una persona
 *
 * El vinculador de familia enseña resultados sobre los que se hace clic. Se
 * ve como una lista y no como un desplegable a propósito: hay que poder leer
 * el teléfono y cuántos hijos tiene cada uno antes de elegir, que es lo que
 * distingue a dos personas con el mismo nombre. */
.lista-busca { max-height: 240px; overflow-y: auto; margin: 8px 0; }
.opcion-busca {
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px;
  margin-bottom: 6px; cursor: pointer;
}
.opcion-busca:hover { background: var(--papel2); }
.opcion-busca.elegida { border-color: var(--azul); background: var(--papel2); }

.oculto { display: none; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }

/* Un estudiante dado de baja sigue en la lista pero apagado: esconderlo haría
 * imposible reactivarlo, y verlo igual que los demás haría creer que está. */
/* Un estudiante de baja sigue en la lista, en gris y tachado: con opacidad
   el nombre y su etiqueta quedaban por debajo de 3 de contraste. */
.fila-baja, .fila-baja a, .fila-baja .etiq { color: var(--tenue); opacity: 1; }
.fila-baja a { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tenue) 50%, transparent); }

/* ------------------------------------------------------------- mi clase */
/* Un carril por grado. Se lee de pie, con el aula delante: el grado y quiénes
   son arriba, y debajo —grande— lo único que hay que decidir, que es si se da
   esa experiencia o se busca otra. */

.carril-cab {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px 6px;
}
.carril-cab strong { font-family: var(--serif); font-size: 1.2rem; }
.no-cursa { margin: -6px 0 12px; }
/* Lo que el salón decidió sobre el plan (solo dirección). */
.decisiones { list-style: none; margin: 0; padding: 6px 16px 12px; display: grid; gap: 6px; }
.decisiones li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .92rem; }
.nombres { padding: 0 16px 14px; font-size: .86rem; }

.siguiente {
  margin: 0 16px 14px; padding: 14px 16px;
  border-left: 4px solid var(--c, var(--azul));
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  background: var(--papel2);
}
.siguiente h3 { margin: 2px 0 10px; font-size: 1.24rem; }
.siguiente .acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.panel > p.tenue { padding: 0 16px 14px; margin: 0; }

@media (max-width: 700px) {
  .siguiente h3 { font-size: 1.12rem; }
  .siguiente .acciones .btn { flex: 1; justify-content: center; }
}

/* El rótulo que separa, en el panel de otorgar, a los del grado de la
   experiencia del resto del salón. */
.otros-grados {
  color: var(--tenue); margin: 14px 0 6px; padding-top: 12px;
  border-top: 1px solid var(--linea);
}

/* ---------------------------------------------------------- diagnósticas */
/* La matriz enseña lo que escribió cada uno, no solo si acertó: «13» y «48»
   a 6×7 son fallos distintos. En blanco va en gris y no en rojo, porque no
   es un fallo: es otro diagnóstico. */

table.matriz-diag th small.destreza-col {
  display: block; font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  text-transform: none; color: var(--tenue);
}
td.diag { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
td.diag.bien   { color: var(--verde); }
td.diag.mal    { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 9%, transparent); }
td.diag.blanco { color: var(--tenue); background: var(--papel2); }
tr.fila-grado th {
  background: var(--papel2); color: var(--azul); text-align: left;
  padding: 7px 16px;
}
tr.fila-pie th, tr.fila-pie td { color: var(--tenue); font-size: .8rem; }
.lista-necesita { margin: 10px 0 0; padding-left: 1.1rem; font-size: .88rem; }
.lista-necesita li { margin-bottom: 3px; }

/* En «Mi clase»: cada estudiante con lo que le falta al lado. */
.alumnos-carril { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 4px; }
.alumnos-carril li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.alumnos-carril li > span:first-child { min-width: 11rem; }
.alumnos-carril .etiq { margin-left: 0; }

/* Diagnósticas personalizadas: lo que no se le puso a alguien no es «en
   blanco», y lo que se lee primero es por dónde sigue cada uno. */
/* «No se le puso»: es un dato (no es lo mismo que un 0), y se lee como el
   «no se imparte» del Plan. Con --linea quedaba a 1,4 de contraste. */
td.diag.nopuesta { color: var(--tenue); }
details.plegable { padding: 0 16px 14px; }
details.plegable summary { cursor: pointer; color: var(--azul); padding: 8px 0; font-weight: 600; }
table.matriz-sigue td.sigue { font-size: .84rem; }
table.matriz-sigue td.sigue small { display: block; color: var(--tenue); font-size: .74rem; }
table.matriz-sigue td.sigue.bien { color: var(--verde); font-weight: 600; }

/* ------------------------------------------------------------------ lupa */
/* La puerta a cualquier papel impreso. Arriba del menú, con aspecto de campo
   de búsqueda para que se entienda sin explicarla. */
.lupa-boton {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0; padding: 7px 10px; border-radius: 10px;
  background: var(--fondo); border: 1px solid var(--linea); color: var(--tenue);
  font: inherit; font-size: .84rem; cursor: pointer; text-align: left;
}
.lupa-boton:hover { border-color: color-mix(in srgb, var(--tenue) 50%, var(--linea)); color: var(--texto); }
.lupa-boton span { flex: 1; }
.lupa-boton .icono { opacity: .75; }
.lupa-boton kbd {
  font: 600 .68rem var(--sans); color: var(--tenue); border: 1px solid var(--linea);
  border-radius: 5px; padding: 1px 5px;
}

dialog.lupa { max-width: 480px; }
.lupa-entrada {
  font: 600 1.25rem var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 12px;
}
.lupa-entrada::placeholder { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: .95rem; }
.lupa-msg { min-height: 1.4em; margin: 8px 0 12px; font-size: .88rem; color: var(--tenue); text-align: center; }
.lupa-msg.mal { color: var(--rojo); }
.lupa-msg.bien { color: var(--verde); }
dialog.lupa .btn { width: 100%; justify-content: center; }
.lupa-camara { position: relative; margin-top: 12px; border-radius: var(--r-chico); overflow: hidden; background: #000; }
.lupa-camara video { display: block; width: 100%; }
/* La guía: la franja donde se lee. Enseña dónde poner el código. */
.lupa-guia {
  position: absolute; left: 8%; right: 8%; top: 27.5%; height: 45%;
  border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 999px #0006;
}
.lupa-ayuda { font-size: .78rem; margin: 12px 0 0; text-align: center; }

/* La hoja de un estudiante. */
.codigo-doc {
  font: 600 .9rem var(--sans); letter-spacing: .1em; padding: 6px 10px;
  border: 1px dashed var(--linea); border-radius: var(--r-chico); color: var(--tenue);
}
table.hoja-clave td.esperada { font-weight: 700; color: var(--verde); white-space: nowrap; }
table.hoja-clave small.nivel { display: block; font-size: .72rem; margin-top: 2px; }
.ubicacion { padding: 10px 16px; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.ubicacion.bien { color: var(--verde); font-weight: 600; }
/* Los grados de Inicial se nombran («Pár. III», «Kín.»), no se numeran: más
   pequeños para que quepan en la columna. */
table.matriz-plan th.grado .g.texto { font-size: .72rem; white-space: nowrap; }

/* Corregir una hoja: el campo de lo que escribió, el ✓ que copia la
   respuesta, y la marca que dice cómo va a quedar. */
table.hoja-clave.corregir td { vertical-align: middle; }
.campo-corr { width: 9rem; font: 600 .95rem var(--sans); padding: 6px 8px; }
.acciones-corr { white-space: nowrap; }
.acciones-corr .btn { margin-right: 6px; }
.marca-corr { font-size: .8rem; font-weight: 700; }
.marca-corr.bien { color: var(--verde); }
.marca-corr.mal { color: var(--rojo); }
.marca-corr.blanco { color: var(--tenue); font-weight: 400; }
.pie-corr { display: flex; justify-content: flex-end; margin: 4px 0 30px; }

/* En el teléfono la hoja no cabe como tabla: la pregunta se queda en una
 * columna de dos palabras por renglón y la marca ✓/✗ se sale por la derecha.
 * Cada pregunta pasa a ser una ficha: arriba el número y el enunciado a lo
 * ancho; debajo la respuesta y —al corregir— el campo, el ✓ y la marca. */
@media (max-width: 700px) {
  table.hoja-clave thead { display: none; }
  table.hoja-clave tr {
    display: grid; grid-template-columns: 26px 7rem minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 4px; align-items: center;
    padding: 10px 4px; border-bottom: 1px solid var(--linea);
  }
  table.hoja-clave td { border-bottom: 0; padding: 0; }
  table.hoja-clave td.num { grid-row: 1; align-self: start; }
  table.hoja-clave td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; }
  table.hoja-clave td.esperada { grid-column: 2; }
  table.hoja-clave td.esperada::before { content: 'Respuesta '; font-weight: 400; color: var(--tenue); font-size: .8rem; }
  table.hoja-clave td.diag { grid-column: 3 / -1; justify-self: start; }
  table.hoja-clave.corregir .campo-corr { width: 100%; }
}

/* ------------------------------------------------------------- intereses
 * El cuestionario «Mi Mundo»: la matriz del salón, el perfil de cada uno y el
 * formulario para pasar lo que respondió en papel. */
.temas-salon { list-style: none; margin: 0; padding: 0 16px 14px; }
.temas-salon li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--linea);
}
.temas-salon .cuenta {
  font: 700 .8rem var(--sans); min-width: 1.6em; text-align: center;
  border-radius: 99px; padding: 1px 7px; background: var(--papel2);
}
.ficha.mundo { gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.linea-mundo { font-size: .86rem; }
.linea-mundo.destacada { border-left: 3px solid var(--azul); padding-left: 7px; }
.linea-mundo.evitar, .perfil-mundo dd.evitar { color: var(--rojo); }
.puntos { letter-spacing: .12em; font-size: .8rem; }
.perfil-mundo { margin: 0; padding: 4px 16px 14px; }
.perfil-mundo dt { font-size: .8rem; color: var(--tenue); margin-top: 10px; }
.perfil-mundo dd { margin: 2px 0 0; }
.texto-libre { white-space: pre-wrap; }
.form-mundo { padding: 4px 16px 14px; }
.pregunta-mundo { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.pregunta-mundo:last-child { border-bottom: 0; }
.pregunta-mundo .enunciado { font-weight: 600; margin-bottom: 6px; }
.pregunta-mundo textarea.control { width: 100%; font: inherit; resize: vertical; }
.pregunta-mundo input.control[type=text] { width: 100%; }
.marcar { display: grid; gap: 4px 12px; }
.marcar.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marcar.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcion-marcar {
  display: flex; gap: 8px; align-items: center; cursor: pointer;
  padding: 6px 8px; border: 1px solid var(--linea); border-radius: var(--r-chico);
}
.opcion-marcar:has(input:checked) { border-color: var(--azul); background: var(--papel2); font-weight: 600; }
.escala-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.escala-op { padding: 6px 12px; }
.aviso-suave { color: var(--rojo); font-weight: 600; }
@media (max-width: 700px) {
  .marcar.cols-2, .marcar.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .opcion-marcar { padding: 10px; }
}

/* En la corrección de prácticas la marca es un botón: un toque la cambia
   cuando la sugerencia se equivoca. */
button.marca-corr {
  background: none; border: 1px solid transparent; border-radius: var(--r-chico);
  padding: 4px 8px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700;
}
button.marca-corr:hover { border-color: var(--linea); }
button.marca-corr.blanco { cursor: default; font-weight: 400; }

/* ======================================================= revisión general
 * Septiembre de 2026. Lo que hacía que el portal pareciera «sin terminar» no
 * eran pantallas sueltas sino piezas repetidas: iconos de caracteres sueltos,
 * fechas técnicas, tablas que en el teléfono no cabían, vacíos que parecían
 * «no ha cargado». Se arreglan aquí, una vez, y llegan a todas las pantallas. */

/* Vacío: icono, qué pasa y, si hay, qué hacer. */
.vacio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 20px; color: var(--tenue); text-align: center;
}
.vacio .vacio-ico {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papel2); color: var(--tenue); margin-bottom: 6px;
}
.vacio strong { color: var(--texto); font-weight: 600; font-size: 1rem; }
.vacio small { max-width: 48ch; margin: 0; line-height: 1.5; }
.vacio > .btn { margin-top: 10px; }

/* Tablas en el teléfono: cada fila, una tarjeta con sus rótulos. */
@media (max-width: 700px) {
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody { display: block; width: 100%; }
  table.responsiva tr {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 16px; border-bottom: 1px solid var(--linea);
  }
  table.responsiva tr:last-child { border-bottom: 0; }
  table.responsiva td {
    display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0;
    text-align: left; white-space: normal; position: static; background: none; min-width: 0;
  }
  table.responsiva td::before {
    content: attr(data-col); flex: 0 0 34%; max-width: 9em;
    color: var(--tenue); font: 700 .64rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
  }
  table.responsiva td:first-child { font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
  table.responsiva td:first-child::before, table.responsiva td[data-col=""]::before { display: none; }
  table.responsiva td.fija { margin-top: 8px; }
  table.responsiva td.fija .acciones-fila { justify-content: flex-start; }
  table.responsiva.compacta tr { flex-direction: row; flex-wrap: wrap; gap: 2px 16px; padding: 10px 16px; }
  table.responsiva.compacta td { flex: 0 1 auto; max-width: 100%; gap: 5px; }
  table.responsiva.compacta td:first-child { flex-basis: 100%; }
  table.responsiva.compacta td::before { flex: none; }
  table.responsiva.compacta td.fija { flex-basis: 100%; margin-top: 4px; }
}

/* Panel: las cifras, en una fila en escritorio; en el teléfono de dos en
   dos, y la que sobra a lo ancho en vez de quedarse huérfana. */
.tarjetas { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
a.tarjeta.enlace { color: inherit; transition: border-color .15s, transform .15s; }
a.tarjeta.enlace:hover { text-decoration: none; border-color: var(--azul); transform: translateY(-1px); }
@media (max-width: 560px) {
  .tarjetas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tarjetas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.pendientes { list-style: none; margin: 0; padding: 4px 0; }
.pendientes li a {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--texto);
}
.pendientes li a:hover { background: var(--papel2); text-decoration: none; }
.pendientes li + li { border-top: 1px solid var(--linea); }
.pendientes .cuenta {
  min-width: 2.2em; padding: 2px 8px; border-radius: 99px; text-align: center;
  font: 700 .82rem var(--sans); background: color-mix(in srgb, var(--ambar) 16%, transparent);
  color: color-mix(in srgb, var(--ambar) 75%, var(--texto));
}
.pendientes .cuenta.mal { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); }
.pendientes .que { flex: 1; min-width: 0; }
.pendientes .ir { color: var(--tenue); }
.todo-al-dia { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--verde); font-weight: 600; }

/* Una etiqueta no se parte: «nunca entró» en dos renglones parecía un botón
   roto. Y el nombre de una fila tampoco, en escritorio. */
.etiq { white-space: nowrap; }
.sin-partir { white-space: nowrap; }
.nombre-fila { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
@media (min-width: 701px) { .nombre-fila a { white-space: nowrap; } }

/* Pasar lista: el punto de cada estudiante lleva el color de su estado. */
table.lista td.num { white-space: nowrap; }
table.lista td.num small { margin-left: 5px; }
.punto-estado {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--azul); vertical-align: middle;
}
.punto-estado.bien { background: var(--verde); }
.punto-estado.mal { background: var(--rojo); }
.punto-estado.no { background: var(--ambar); }
/* En el teléfono los cuatro botones tienen que caber: «Justificada» se salía
   por el borde. Columnas que pueden encoger y sin relleno a los lados. */
@media (max-width: 700px) {
  .estados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .estado { min-width: 0; padding: 11px 0; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Mi clase: elegir salón y asignatura. */
.salon-clase { gap: 4px; }
.asigs-clase { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.asig-clase {
  padding: 5px 11px; border-radius: 99px; font-size: .82rem; font-weight: 600;
  color: var(--tinta-c); border: 1px solid color-mix(in srgb, var(--c, var(--azul)) 35%, transparent);
  background: color-mix(in srgb, var(--c, var(--azul)) 7%, transparent);
}
.asig-clase:hover { text-decoration: none; background: color-mix(in srgb, var(--c, var(--azul)) 15%, transparent); }
/* Ámbar: falta un dato que importa. El rojo queda para lo que está mal de
   verdad; con decenas de filas en rojo, «sin teléfono» parecía un fallo. */
/* `aviso` es también la clase del recuadro de avisos (barra a la izquierda,
   relleno, margen). En una etiqueta ese estilo se colaba y la convertía en
   un recuadro: se devuelve aquí la forma de etiqueta. */
.etiq.aviso {
  /* Un punto más oscuro que el ámbar puro: con su relleno se quedaba en 4,2. */
  color: color-mix(in srgb, var(--ambar) 82%, var(--texto)); border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 2px 9px; border-radius: 20px; margin-bottom: 0; font-size: .72rem;
}
@media (max-width: 700px) {
  /* Margen a los lados de cada estudiante: los botones iban de borde a borde. */
  table.lista tr { padding: 6px 12px 0; grid-template-columns: 16px minmax(0, 1fr); }
  table.lista td.num { padding-left: 0; padding-right: 0; width: auto; text-align: left; }
}

/* Los datos y los botones sueltos dentro de un recuadro van con su margen:
   pegados al borde se veían sin terminar (la ficha, el panel). */
.panel > .dato { padding: 8px 16px; }
.panel > .btn { margin: 12px 16px 14px; }

/* Aprendizaje, en la ficha del estudiante. */
.aprendizaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bloque-apr { padding: 12px 16px 14px; border-right: 1px solid var(--linea); min-width: 0; }
.bloque-apr:last-child { border-right: 0; }
.bloque-apr h3 { font: 700 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin: 2px 0 8px; }
.bloque-apr p { margin: 0; font-size: .88rem; }
.fila-apr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; color: var(--texto); border-top: 1px solid var(--linea); }
.fila-apr:first-of-type { border-top: 0; }
.fila-apr:hover { text-decoration: none; }
.fila-apr:hover strong { color: var(--azul); }
.fila-apr .que { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fila-apr strong { font-size: .88rem; font-weight: 600; }
.fila-apr small { font-size: .78rem; }
@media (max-width: 700px) { .bloque-apr { border-right: 0; border-bottom: 1px solid var(--linea); } }
/* Cifras dentro de un recuadro (asistencia en la ficha del estudiante, el
   rastro de trabajo del docente): con su margen, no pegadas al borde. */
.panel .cifras { padding: 14px 16px 0; margin-bottom: 12px; }
.panel .cifras + p.tenue { padding: 0 16px 14px; margin: 0; }

.panel-cab h2 .titulo-cuenta { font: 400 .8rem var(--sans); margin-left: 8px; }

/* En el teléfono, el rótulo de 150 px dejaba al valor 147: el correo se
   partía en «gmail.co / m». */
@media (max-width: 560px) {
  .dato-etq { flex-basis: 104px; }
  .dato-val { overflow-wrap: anywhere; word-break: normal; }
}

/* Una asignación vencida: se queda como historia, pero no puede parecer vigente. */
/* Apagada con el gris del texto secundario, no con transparencia: con
   opacidad .55 el nombre y la etiqueta quedaban en 2,9 de contraste. */
tr.apagada td, tr.apagada td a, tr.apagada td .etiq { color: var(--tenue); }
tr.apagada td a { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tenue) 50%, transparent); }

/* Panel: tres secciones —Hoy, El curso, Por completar— y las cifras al final. */
.seccion-panel { margin-top: 26px; }
.seccion-panel:first-of-type { margin-top: 6px; }
.seccion-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 2px 10px; }
.seccion-cab h2 {
  margin: 0; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--azul);
}
.seccion-cab p { margin: 0; font-size: .85rem; }
.seccion-panel > .panel + .panel { margin-top: 14px; }

.listas-hoy { list-style: none; margin: 0; padding: 0; }
.listas-hoy li {
  display: grid; grid-template-columns: minmax(150px, 1fr) 2.2fr; gap: 4px 18px;
  padding: 12px 16px; border-top: 1px solid var(--linea); align-items: baseline;
}
.listas-hoy li:first-child { border-top: 0; }
.listas-hoy .lh-salon { display: flex; flex-direction: column; }
.listas-hoy .lh-salon a { font-weight: 600; }
.listas-hoy .lh-estado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.listas-hoy .lh-faltaron {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .86rem;
}
@media (max-width: 560px) {
  .listas-hoy li { grid-template-columns: 1fr; }
  .listas-hoy .lh-faltaron { grid-column: 1; }
}

/* Pie de un bloque del Panel: de cuándo son los datos. */
.pie-bloque { display: block; padding: 10px 16px 12px; border-top: 1px solid var(--linea); }
.ambar-t { color: color-mix(in srgb, var(--ambar) 75%, var(--texto)); }
.listas-hoy .lh-estado select { max-width: 260px; }

/* Pestañas: las áreas de una pantalla, una a la vez. La activa con la línea
   azul debajo; en el teléfono la barra se desliza de lado en vez de partirse. */
.pestanas {
  display: flex; gap: 2px; margin: 0 0 20px; border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; padding: 10px 14px; color: var(--tenue); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; border-radius: 8px 8px 0 0;
}
.pestana:first-child { margin-left: -2px; }
.pestana:hover { color: var(--texto); text-decoration: none; }
.pestana.activa { color: var(--azul); border-bottom-color: var(--azul); }
/* La cuenta de una pestaña: neutra («20 estudiantes»); ámbar solo si avisa
   de algo pendiente («3 facturas con saldo», «sin familia»). */
.cuenta-pestana {
  font: 700 .72rem var(--sans); padding: 1px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--tenue) 14%, transparent); color: var(--tenue);
}
.cuenta-pestana.tono-aviso {
  background: color-mix(in srgb, var(--ambar) 16%, transparent);
  color: color-mix(in srgb, var(--ambar) 75%, var(--texto));
}
/* Los bloques de una pestaña, lado a lado cuando hay ancho. */
.bloques { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); align-items: start; }
.bloques > .panel { margin: 0; }
@media (max-width: 560px) { .bloques { grid-template-columns: 1fr; } }
.pregunta-pestana { margin: -6px 2px 14px; font-size: .88rem; }

/* Ponches: navegar de día en día o de mes en mes, y los ponches de un día. */
.navegar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.navegar strong { font-family: var(--serif); font-size: 1.1rem; }
.ponches-dia { display: flex; flex-wrap: wrap; gap: 6px; }
.ponche-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 99px;
  border: 1px solid var(--linea); font-variant-numeric: tabular-nums; font-size: .86rem;
}
.ponche-chip.manual { border-style: dashed; border-color: color-mix(in srgb, var(--azul) 50%, var(--linea)); }
.ponche-chip.anulado { text-decoration: line-through; color: var(--tenue); opacity: .75; }
.ponche-chip.corregido { text-decoration: underline dotted var(--tenue); text-underline-offset: 3px; }
.ponche-chip.corregido.anulado { text-decoration: line-through; }
.ponche-chip small { color: var(--tenue); text-decoration: none; }
.chip-accion {
  display: inline-flex; padding: 3px; border: 0; background: none; color: var(--tenue);
  border-radius: 99px; cursor: pointer;
}
.chip-accion:hover { color: var(--texto); background: var(--papel2); }

/* ---------------------------------------------------------------- Cobros */

/* El editor de líneas de una factura o un plan: en escritorio, una fila por
   línea; en el teléfono, se apilan. */
.linea-cobro { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr 5em 7em 5em 7em auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.linea-cobro .num { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .linea-cobro { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
}
.plan-cobro { padding: 10px 16px 4px; border-top: 1px solid var(--linea); }
.plan-cobro:first-child { border-top: 0; }
.plan-cobro.apagada { opacity: .6; }
.plan-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lista-elegir { max-height: 50vh; overflow: auto; margin-top: 8px; }
.doc-cobro td[data-col], td[data-col="Fecha"], td[data-col="Vence"], td[data-col="Venció"] { white-space: nowrap; }
.celda-corta { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Factura y recibo: una hoja que se ve igual en pantalla y al imprimir. */
.acciones-doc { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.lista-contactos { display: grid; gap: 6px; margin: 4px 0 10px; }
.doc-cobro { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 28px; max-width: 820px; margin: 0 auto; }
.doc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--texto); padding-bottom: 12px; margin-bottom: 16px; }
.doc-escuela { font-size: 1.15rem; }
.doc-num { text-align: right; }
.doc-num strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.doc-datos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.doc-totales { display: grid; justify-content: end; gap: 4px; margin: 14px 0; }
.doc-totales > div { display: flex; justify-content: space-between; gap: 40px; min-width: 260px; }
.doc-pie pre { font-family: inherit; white-space: pre-wrap; margin: 4px 0 0; }
.doc-nota { color: var(--tenue); font-size: .85rem; }

/* Al imprimir sale solo la hoja: ni el menú, ni la barra, ni los botones. */
@media print {
  body * { visibility: hidden; }
  .imprimible, .imprimible * { visibility: visible; }
  .imprimible { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; max-width: none; }
  .imprimible a { color: inherit; text-decoration: none; }
  /* En tema oscuro el texto es claro: en papel blanco no se leería. */
  .imprimible, .imprimible * { color: #1a1a1a !important; background: transparent !important; border-color: #a99f8c !important; }
  .imprimible .doc-cab { border-bottom-color: #1a1a1a !important; }
}

/* WhatsApp: abre el chat de esa persona (ver `botonWhatsapp` en ui.js). Verde
   del portal, no el de WhatsApp: el suyo no da contraste sobre fondo claro. */
.btn.whatsapp { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); text-decoration: none; }
.btn.whatsapp .ico, .btn.whatsapp svg { flex: none; }
.lh-estado .btn.whatsapp { margin-left: 2px; }

/* ---------------------------------------------------------- el salón (hub)
 * Una pantalla por salón con sus pestañas. Cada pestaña abre con una barra:
 * las asignaturas, el día de la lista, los periodos del Registro. */
.barra-tab { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: -4px 0 16px; }
.barra-tab .crece { flex: 1; }
.barra-tab .dia { font-family: var(--serif); font-size: 1.08rem; letter-spacing: -.01em; }
.barra-tab .control.fecha { width: auto; }
.barra-tab .periodos { display: flex; gap: 4px; }
.barra-tab .etiq { margin-left: 0; }
.asigs-barra { gap: 6px; }
/* La asignatura elegida, rellena con su color: es la que se está viendo. */
.asig-clase.activo, .asig-clase.activo:hover {
  background: var(--tinta-c); border-color: var(--tinta-c); color: var(--fondo);
}
.salon-hub .pestanas { margin-top: 0; }
@media (max-width: 700px) {
  .barra-tab .btn.primario { width: 100%; }
  .barra-tab .crece { display: none; }
}

/* ------------------------------------------------- el calendario del salón
 * La clase de cada día: una fila por clase, con el día grande a la izquierda
 * como en una agenda; lo que está por dar lleva el filete ámbar. */
.barra-filtro { margin: -8px 0 14px; font-size: .86rem; }
.asig-clase.mas { border-style: dashed; color: var(--tenue); background: none; }
.asig-clase.mas:hover { background: var(--papel2); }
.calendario { display: grid; gap: 8px; }
.clase-dia {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; gap: 14px; align-items: center;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 12px 14px 12px 12px; color: inherit; box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s;
}
.clase-dia:hover { text-decoration: none; border-color: color-mix(in srgb, var(--azul) 55%, transparent); transform: translateY(-1px); }
.clase-dia.sin_marcar { border-left: 4px solid var(--ambar); }
.clase-dia.dada .cd-fecha b { color: var(--verde); }
.cd-fecha { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cd-fecha b { font: 700 1.7rem var(--serif); letter-spacing: -.02em; }
.cd-fecha small { font: 700 .62rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin-top: 4px; }
.cd-que { min-width: 0; }
.cd-que strong { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: -.01em; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 5px; font-size: .82rem; color: var(--tenue); }
.cd-ir { color: var(--tenue); display: grid; place-items: center; }
.cd-cab { margin: 2px 0 18px; }
.cd-cab h2 { font-size: 1.5rem; margin: 2px 0 8px; }
.cd-cab .chips { margin-top: 0; align-items: center; }
.cd-tv { padding: 12px 18px 14px; display: grid; gap: 8px; }
.mesas-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mesa-dia { padding: 12px 18px 14px; border-right: 1px solid var(--linea); min-width: 0; }
.mesa-dia:last-child { border-right: 0; }
.mesa-dia strong { display: block; font-family: var(--serif); margin-bottom: 4px; }
.mesa-hoy { font-size: .9rem; line-height: 1.5; }
.mesa-frase { margin: 8px 0 0; font-family: var(--serif); color: var(--tenue); font-size: .92rem; }
.clases-prox { display: grid; }
.clase-prox { padding: 12px 18px 14px; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.clase-prox + .clase-prox { border-top: 1px solid var(--linea); }
.clase-prox-que { flex: 1; min-width: 220px; }
.clase-prox strong { font-family: var(--serif); font-size: 1.1rem; }
/* Las semanas del calendario. */
.semana-cal { margin-bottom: 18px; }
/* --- Calendario del salón: vistas de mes y semana (8-oct-2026) --- */
.cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-titulo { font-family: var(--serif); font-size: 1.08rem; min-width: 12ch; text-align: center; }
.cal-resumen { margin: -4px 0 10px; font-size: .86rem; }
.cal-mes { display: grid; gap: 4px; }
.cal-mes.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cal-mes.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab { font: 700 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); padding: 2px 6px; }
.cal-dia { min-height: 96px; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dia.fuera { opacity: .45; }
.cal-dia.esta { border-color: color-mix(in srgb, var(--azul) 40%, var(--linea)); background: color-mix(in srgb, var(--azul) 4%, var(--papel)); }
.cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--azul); }
.cal-num { align-self: flex-end; font: 700 .9rem var(--serif); color: var(--tenue); text-decoration: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-num:hover { background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--texto); text-decoration: none; }
.cal-dia.hoy .cal-num { background: var(--azul); color: var(--fondo); }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: .74rem; line-height: 1.2; padding: 2px 5px; border-radius: 5px; min-width: 0;
  background: color-mix(in srgb, var(--c) 12%, var(--papel)); border-left: 3px solid var(--c); color: var(--texto); text-decoration: none; }
.cal-chip:hover { background: color-mix(in srgb, var(--c) 24%, var(--papel)); text-decoration: none; }
.cal-chip .cal-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cal-chip svg { color: var(--verde); flex: none; }
.cal-chip .cal-q { color: var(--ambar); flex: none; }
.cal-chip.suelta { border-left-style: dashed; }
.cal-semana { display: grid; gap: 8px; }
.cal-semana.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cal-semana.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-col { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 8px; min-height: 170px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cal-col.hoy { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.cal-col-cab { display: flex; align-items: baseline; gap: 6px; }
.cal-col-cab small { font: 700 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.cal-col-cab b { font: 700 1.2rem var(--serif); }
.cal-col.hoy .cal-col-cab b { color: var(--azul); }
.cal-tarjeta { display: block; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea); border-left: 4px solid var(--c); background: var(--fondo); color: var(--texto); text-decoration: none; }
.cal-tarjeta:hover { border-color: color-mix(in srgb, var(--azul) 55%, var(--linea)); border-left-color: var(--c); text-decoration: none; }
.cal-tarjeta strong { display: block; margin: 4px 0 2px; font-size: .92rem; line-height: 1.25; }
.cal-tarjeta .cd-meta { margin-top: 2px; }
.cal-nada { text-align: center; margin: auto 0; font-size: .84rem; }
/* El salón delante de la clase cuando el calendario junta varios (la casa). */
.cal-salon { font: 700 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); flex: none; }
.cal-tarjeta .cal-salon, .clase-prox .cal-salon { display: block; margin-bottom: 3px; }
/* La casa del docente (8-oct): cifras en la fila del título; Hoy y los
   salones lado a lado; el calendario a todo lo ancho con su título en la barra. */
.casa-cifras { margin: 0; gap: 20px; }
.casa-cifras .cifra b { font-size: 1.3rem; }
.casa-arriba { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 18px; }
.casa-salones { display: grid; }
.casa-salon {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  padding: 9px 14px 9px 12px; border-left: 4px solid var(--c, var(--linea)); border-bottom: 1px solid var(--linea);
  color: inherit; text-decoration: none; transition: background .12s;
}
.casa-salon:last-child { border-bottom: 0; }
.casa-salon:hover { background: color-mix(in srgb, var(--azul) 6%, transparent); text-decoration: none; }
.casa-salon strong { font-family: var(--serif); font-size: 1.02rem; line-height: 1.2; }
.casa-salon .cs-nombre small { display: block; font-size: .8rem; }
.casa-salon .cs-nombre { grid-column: 1; grid-row: 1; min-width: 0; }
.casa-salon .cs-prox { grid-column: 1; grid-row: 2; color: var(--tenue); font-size: .8rem; }
.casa-salon svg { grid-column: 2; grid-row: 1 / span 2; }
.casa-salon .cs-prox.hoy { color: var(--verde); font-weight: 700; }
.casa-salon svg { color: var(--tenue); }
.casa-salon .cs-nombre small { display: inline; margin-left: 6px; }
.cal-barra-izq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-h { font-family: var(--serif); font-size: 1.15rem; margin: 0; }
@media (max-width: 900px) { .casa-arriba { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .casa-salon .cs-nombre small { display: block; margin-left: 0; } }
@media (max-width: 720px) {
  .cal-dia { min-height: 62px; padding: 3px 4px 4px; }
  .cal-chip .cal-txt { display: none; }
  .cal-chip { padding: 4px; min-height: 10px; }
  .cal-semana.cols-5, .cal-semana.cols-7 { grid-template-columns: 1fr; }
  .cal-col { min-height: 0; }
  .cal-titulo { min-width: 0; font-size: .98rem; }
}
.semana-cab { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.semana-cab strong { font-family: var(--serif); font-size: 1.02rem; }
.semana-cal.esta .clase-dia { border-color: color-mix(in srgb, var(--azul) 35%, var(--linea)); }
/* «Se dio el…»: los cinco días de la semana a un toque. */
.se-dio { padding: 14px 18px 16px; }
.se-dio-estado { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; }
.se-dio-estado.bien { color: var(--verde); }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dia-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 52px; height: 52px; border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--papel); color: var(--texto); cursor: pointer; font: inherit;
}
.dia-btn small { font: 700 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.dia-btn b { font: 700 1.15rem var(--serif); line-height: 1; }
.dia-btn:hover:not(:disabled) { border-color: var(--azul); }
.dia-btn.previsto { border-style: dashed; border-color: color-mix(in srgb, var(--azul) 60%, var(--linea)); }
.dia-btn.puesto { background: var(--verde); border: 1px solid var(--verde); color: var(--fondo); }
.dia-btn.puesto small { color: var(--fondo); }
.dia-btn:disabled { opacity: .4; cursor: default; }
.otro-dia { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.otro-dia .control.fecha { width: auto; }
.historial-dada { margin-top: 12px; font-size: .86rem; }
.historial-dada summary { cursor: pointer; color: var(--tenue); }
.historial-dada ul { margin: 6px 0 0; padding-left: 1.1rem; }
@media (max-width: 700px) {
  .mesa-dia { border-right: 0; border-bottom: 1px solid var(--linea); }
  .clase-dia { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 10px; }
}

/* Cobros · cada mañana: el ensayo de un día. */
.cada-manana { padding: 14px 18px 4px; }
.ensayo-resumen { margin: 0 0 8px; }
.ensayo-faltas { margin: 0 0 10px; padding-left: 1.1rem; color: color-mix(in srgb, var(--ambar) 75%, var(--texto)); font-size: .9rem; }
.ensayo-lista { margin: 0 0 12px; }
.ensayo-lista summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.ensayo-dia .tabla-scroll { margin: 0 -18px; border-top: 1px solid var(--linea); }
.mal-t { color: var(--rojo); font-size: .88rem; }

/* ======================================================= lista y detalle
 * Octubre de 2026: el patrón de un dashboard de verdad. La lista es para
 * encontrar (tabla compacta, la fila entera abre); el detalle para gestionar
 * (cabecera con estado, pestañas en la ruta); el formulario edita una cosa
 * (secciones y barra de guardar). Piezas en `nucleo/pagina.js`. */

/* Menú de acciones «⋯». */
.menu-acc { position: relative; display: inline-flex; }
.btn.menu-btn.solo-icono { padding: 0; width: 36px; }
.btn.chico.menu-btn.solo-icono, .acciones-fila .menu-btn.solo-icono { width: 30px; min-height: 30px; }
.menu-pop {
  position: fixed; z-index: 60; min-width: 210px; padding: 6px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: 0 12px 32px -8px #1a1a1a2e, 0 2px 6px #1a1a1a14;
}
@media (prefers-color-scheme: dark) { .menu-pop { box-shadow: 0 12px 32px -8px #000a; } }
.menu-pop hr { border: 0; border-top: 1px solid var(--linea); margin: 5px 2px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--texto); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--papel2); text-decoration: none; outline: none; }
.menu-item .icono { color: var(--tenue); }
.menu-item.peligro, .menu-item.peligro .icono { color: var(--rojo); }
.menu-hueco { width: 16px; flex: none; }

/* Barra de datos: vistas a la izquierda, búsqueda y filtros a la derecha. */
.barra-datos { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: -6px 0 14px; }
.barra-datos-izq, .barra-datos-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-datos-der .control { width: auto; }
.buscador-caja { position: relative; display: inline-flex; align-items: center; }
.buscador-caja .icono { position: absolute; left: 10px; color: var(--tenue); pointer-events: none; }
.buscador-caja .buscador { padding-left: 32px; width: 240px; }
.segmentos-lista { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--papel2); border: 1px solid var(--linea); }
.segmento {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-chico);
  color: var(--tenue); font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.segmento:hover { color: var(--texto); text-decoration: none; }
.segmento.activo { background: var(--papel); color: var(--texto); box-shadow: 0 0 0 1px var(--linea); }
.segmento-n { font: 700 .72rem var(--sans); padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--tenue) 14%, transparent); color: color-mix(in srgb, var(--tenue) 65%, var(--texto)); }
.segmento.tono-aviso .segmento-n { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: color-mix(in srgb, var(--ambar) 75%, var(--texto)); }
@media (max-width: 700px) {
  .barra-datos-der, .buscador-caja, .buscador-caja .buscador { width: 100%; }
  .segmentos-lista { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* Tabla de datos: la fila entera abre; las columnas se ordenan. */
table.datos tr.fila-abre { cursor: pointer; }
table.datos tr.fila-abre:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
table.datos td.col-abrir, table.datos th.col-abrir { width: 28px; padding-left: 0; padding-right: 12px; color: var(--tenue); }
table.datos tr.fila-abre:hover td.col-abrir { color: var(--azul); }
th.ordenable { padding: 0; }
.orden-btn {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 9px 16px; border: 0; background: none;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
th.num .orden-btn { justify-content: flex-end; }
.orden-btn:hover { color: var(--texto); }
.orden-flecha { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; opacity: 0; margin-top: 4px; }
th.ordenable:hover .orden-flecha { opacity: .35; }
th.ordenada .orden-flecha { opacity: 1; }
th.ordenada.desc .orden-flecha { border-top-color: transparent; border-bottom-color: currentColor; margin-top: -4px; }
@media (max-width: 700px) {
  table.datos tr.fila-abre { position: relative; padding-right: 36px; }
  table.datos td.col-abrir { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: auto; padding: 0; }
}

/* La cabecera de un detalle: nombre, estado, datos clave, acciones. */
.detalle-cab { margin-bottom: 18px; }
.detalle-fila { display: flex; align-items: flex-start; gap: 12px 18px; flex-wrap: wrap; }
.detalle-nombre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; flex: 1; }
.detalle-nombre h1 { font-size: 1.95rem; margin: 0; }
.detalle-nombre .etiq { margin-left: 0; font-size: .78rem; padding: 3px 10px; }
.detalle-fila .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detalle-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; color: var(--tenue); font-size: .93rem; }
.detalle-meta .sep { color: var(--tenue); }
.detalle .con-pestanas { margin-top: 2px; }
@media (max-width: 700px) {
  .detalle-nombre h1 { font-size: 1.55rem; }
  .detalle-fila .acciones { width: 100%; }
}

/* Secciones de formulario y la zona delicada. */
.seccion-form .panel-cab { align-items: flex-start; }
.seccion-ayuda { margin: 3px 0 0; font-size: .86rem; }
.seccion-cuerpo { padding: 16px 18px 6px; }
.seccion-cuerpo > .dato:first-child { padding-top: 0; }
.panel .seccion-cuerpo > .dato { padding: 8px 0; }
.zona-delicada { border-color: color-mix(in srgb, var(--rojo) 30%, var(--linea)); }
.zona-delicada .panel-cab h2 { color: var(--rojo); }
.zona-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; flex-wrap: wrap; }
.zona-fila + .zona-fila { border-top: 1px solid var(--linea); }
.zona-fila p { margin: 2px 0 0; font-size: .88rem; max-width: 60ch; }

/* La barra de guardar: fija abajo mientras se edita. */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 18px -2px 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r);
  background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px -18px #1a1a1a55;  /* separa la barra fija de lo que pasa por debajo */
}
.barra-guardar-err { flex: 1; color: var(--rojo); font-size: .9rem; }
@media (max-width: 900px) { .barra-guardar { bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* Esqueleto de carga: la forma de la página, con un brillo que pasa. */
.esqueleto { padding-top: 6px; }
.esq { border-radius: 8px; background: linear-gradient(90deg, var(--papel2) 0%, color-mix(in srgb, var(--papel2) 40%, var(--papel)) 50%, var(--papel2) 100%); background-size: 200% 100%; animation: brillo 1.3s ease-in-out infinite; }
.esq-rotulo { width: 80px; height: 10px; margin-bottom: 10px; }
.esq-titulo { width: 260px; height: 30px; margin-bottom: 10px; }
.esq-sub { width: 360px; max-width: 80%; height: 14px; margin-bottom: 26px; }
.esq-tabla { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.esq-fila { height: 18px; }
.esq-fila:nth-child(2n) { width: 86%; }
.esq-fila:nth-child(3n) { width: 72%; }
@keyframes brillo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }

/* Ficha del estudiante: a quién se llama, y el acta en una fila. */
.contacto-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 12px 18px; }
.contacto-fila + .contacto-fila { border-top: 1px solid var(--linea); }
.contacto-acc { display: inline-flex; align-items: center; gap: 8px; }
.rejilla.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .rejilla.rejilla-4 { grid-template-columns: 1fr 1fr; } }
.pie-lista { margin: -6px 2px 0; font-size: .82rem; text-align: right; }

/* La cuenta de cobros: el dinero a la vista entre la cabecera y las pestañas. */
.cifras-cuenta { margin: -4px 0 16px; padding: 14px 18px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); box-shadow: var(--sombra); gap: 28px; }

/* El nombre de un pilar como letra: su color mezclado con la tinta, que
   oscurece en claro y aclara en oscuro (fijo, en oscuro se quedaba en 1,2). */
.pilar-t { --tinta-c: color-mix(in srgb, var(--c, var(--tenue)) 46%, var(--texto)); color: var(--tinta-c); }

/* ------------------------------------------------------------ impresión */
/* La cola de lo que hay que imprimir (8-oct-2026). El menú lleva la cuenta de
   pendientes para quien imprime; «hoy» y «vencido» se ven sin leer la fecha. */
.nav-n {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-grid; place-items: center; font: 700 .7rem var(--sans);
  background: color-mix(in srgb, var(--ambar) 46%, var(--texto)); color: var(--fondo);
}
body.lateral-compacto .nav-n { position: absolute; right: 6px; top: 4px; margin: 0; min-width: 16px; height: 16px; font-size: .62rem; }
body.lateral-compacto .nav-item { position: relative; }
.imp-hoy { color: color-mix(in srgb, var(--ambar) 46%, var(--texto)); }
.imp-vencido { color: var(--rojo); font-weight: 600; }
.imp-que { margin: 0 0 14px; padding: 10px 12px; background: var(--papel2); border-radius: var(--r-chico); font-weight: 600; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-pedido textarea { min-height: 70px; }
.datos-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; padding: 14px 18px; margin: 0 0 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.pedido-estado { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) { .form-fila { grid-template-columns: 1fr; } }

/* Moverse entre clases (8-oct-2026): «n de N» entre las flechas de arriba, y
   abajo la anterior y la siguiente como tarjetas, para seguir preparando sin
   volver arriba. ← → del teclado hacen lo mismo. */
.cd-pos { font-size: .82rem; white-space: nowrap; padding: 0 2px; }
.btn.apagado { opacity: .45; cursor: default; pointer-events: none; }
.cd-vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--linea); }
.cd-vecina { display: grid; gap: 3px; padding: 12px 16px; color: inherit; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.cd-vecina.despues { text-align: right; }
.cd-vecina strong { font: 700 1.05rem/1.25 var(--serif); }
.cd-vecina:hover { text-decoration: none; border-color: color-mix(in srgb, var(--texto) 35%, var(--linea)); }
@media (max-width: 700px) { .cd-vecinas { grid-template-columns: 1fr; } .cd-vecina.despues { text-align: left; } }

/* Materiales (8-oct-2026): el formulario con el tipo de trabajo a elegir, la
   lista de pasos que se marcan, y el hilo de mensajes del pedido. */
.num-pedido { font: 700 .82rem var(--sans); letter-spacing: .04em; color: var(--tenue); white-space: nowrap; }
.num-pedido.grande { font-size: .95rem; margin-right: 8px; color: var(--texto); }
tr.fila-urgente td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.opciones-trabajo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion-trabajo { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px;
                  border: 1px solid var(--linea); border-radius: var(--r-chico); cursor: pointer; background: var(--papel); }
.opcion-trabajo input { margin-top: 3px; grid-row: span 2; }
.opcion-trabajo.elegida { border-color: var(--texto); background: var(--azul-suave); }
.ot-titulo { font-weight: 600; }
.ot-sub { font-size: .8rem; color: var(--tenue); line-height: 1.35; }
.acabados { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.acabado { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.campo-check { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.campo-urgente { margin-bottom: 12px; }
.campo-urgente .aviso { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pasos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 10px; border: 1px solid var(--linea); border-radius: var(--r-chico); }
.pasos li label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.pasos li.hecho label span { text-decoration: line-through; color: var(--tenue); font-weight: 500; }
.pasos input { width: 18px; height: 18px; }
.hilo-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.hilo-lista li { padding: 8px 12px; border-radius: var(--r-chico); background: var(--papel2); max-width: 90%; }
.hilo-lista li.mio { margin-left: auto; background: var(--azul-suave); }
.hilo-quien { font-size: .78rem; font-weight: 600; margin-bottom: 2px; }
.hilo-texto { white-space: pre-wrap; line-height: 1.5; }
.hilo-nuevo { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.hilo-nuevo textarea { min-height: 48px; }
@media (max-width: 700px) { .opciones-trabajo { grid-template-columns: 1fr; } .campo-check { margin-top: 0; } }

/* --- Desarrollo: el rumbo y el cuaderno (8-oct-2026) --- */
.rumbo-cifras { margin: 0 0 12px; }
.rumbo-cifras a.cifra { text-decoration: none; }
.rumbo-cifras a.cifra:hover b { color: var(--azul); }
.rumbo-intro { margin: 0 0 14px; max-width: 70ch; line-height: 1.5; }
.rumbo-areas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 14px; }
.rumbo-lista { list-style: none; margin: 0; padding: 6px 16px 12px; display: grid; gap: 5px; }
.rumbo-lista li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.rumbo-lista li.hecho svg { color: var(--verde); flex: none; }
.rumbo-lista li.viene a { color: var(--tenue); }
.rumbo-punto { color: var(--tenue); width: 14px; text-align: center; flex: none; }
.rumbo-principios { margin: 0; padding: 6px 16px 14px 32px; display: grid; gap: 6px; line-height: 1.45; }
.notas-dev { display: grid; gap: 10px; }
.nota-dev { background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--azul); border-radius: 10px; padding: 10px 14px; }
.nota-dev.duda { border-left-color: var(--ambar); }
.nota-dev.bifurcacion { border-left-color: var(--morado, #6A4C93); }
.nota-dev.pendiente { border-left-color: var(--rojo); }
.nota-dev.decision { border-left-color: var(--verde); }
.nota-dev.cerrada { opacity: .72; }
.nota-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nota-fecha { font: 700 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); flex: none; }
.nota-acciones { margin-left: auto; }
.nota-detalle { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.45; font-size: .92rem; }
.nota-opciones { margin-top: 6px; font-size: .9rem; }
.nota-opciones ul { margin: 2px 0 0; padding-left: 20px; }
.nota-elegida, .nota-cierre { margin: 6px 0 0; font-size: .9rem; }
.nota-ruta { display: inline-flex; align-items: center; margin-top: 6px; font-size: .82rem; color: var(--tenue); }

/* Desarrollo › cuaderno por categorías y guías de proceso (13-oct). */
.notas-cat + .notas-cat { margin-top: 10px; }
.notas-cat .casa-h { margin: 14px 0 8px; font-size: 1.05rem; }
.guia-md { padding: 6px 22px 22px; max-width: 78ch; line-height: 1.55; }
.guia-md h1 { font-family: var(--serif); font-size: 1.7rem; margin: 10px 0 6px; }
.guia-md h2 { font-family: var(--serif); font-size: 1.25rem; margin: 22px 0 6px; border-bottom: 1px solid var(--linea); padding-bottom: 4px; }
.guia-md h3 { font-family: var(--serif); font-size: 1.05rem; margin: 16px 0 4px; }
.guia-md p, .guia-md ul, .guia-md ol { margin: 6px 0; }
.guia-md li { margin: 3px 0; }
.guia-md table { border-collapse: collapse; margin: 8px 0; font-size: .9rem; width: 100%; }
.guia-md th, .guia-md td { border: 1px solid var(--linea); padding: 5px 8px; text-align: left; vertical-align: top; }
.guia-md th { background: color-mix(in srgb, var(--azul) 7%, var(--papel)); }
.guia-md blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--ambar); background: color-mix(in srgb, var(--ambar) 8%, var(--papel)); border-radius: 0 8px 8px 0; }
.guia-md pre { background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; overflow: auto; font-size: .84rem; }
.guia-md code { font-size: .88em; }

/* Las pizarras de la clase (lo escrito en el iPad desde el presentador). La
   imagen va en papel claro siempre: la tinta es oscura. */
.pz-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 12px 18px 16px; }
.pz-mini { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; cursor: pointer;
           border: 1px solid var(--linea); border-radius: var(--r-chico); background: var(--papel); color: var(--texto); font: inherit; }
.pz-mini:disabled { cursor: default; }
.pz-mini img, .pz-sin { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #faf7f1;
                        border: 1px solid var(--linea); }
.pz-sin { display: grid; place-items: center; color: var(--tenue); font-size: .85rem; }
.pz-dialogo { border: 0; border-radius: var(--r); padding: 0; max-width: min(1100px, 94vw); background: var(--papel); color: var(--texto); }
.pz-dialogo::backdrop { background: rgb(0 0 0 / .5); }
.pz-dialogo img { display: block; width: 100%; height: auto; background: #faf7f1; }
.pz-dialogo-pie { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.pz-dialogo-pie strong { margin-right: auto; }