:root{
  /* El escritorio y la hoja son dos superficies distintas a proposito: es lo
     que saca a la pantalla de sentirse plana, sin recurrir a sombras de
     adorno ni a tarjetas apiladas. */
  --escritorio:#D7D1C1;
  --hoja:#F5F2EB;
  --chrome:#E4DFD2;
  --tinta:#141419;
  --filete:#BEB5A0;
  --filete-tenue:#D3CCB9;
  --apagado:#5C5749;
  --borravino:#7A1B32;
  --borravino-vivo:#96233F;
  --borravino-velo:#E6D7D8;
  --boton-arriba:#8F2340;
  --boton-abajo:#68172C;
  --boton-arriba-hover:#A42C4C;
  --boton-abajo-hover:#7A1D35;
  --sombra:0 1px 2px rgba(40,30,16,.09),0 8px 22px -7px rgba(40,30,16,.2);
  --sombra-boton:0 1px 2px rgba(40,30,16,.22);
}
[data-tema="oscuro"]{
  --escritorio:#0A0A0C;
  --hoja:#16161A;
  --chrome:#101014;
  --tinta:#F2F1EC;
  --filete:#2E2E36;
  --filete-tenue:#212128;
  --apagado:#9A9AA4;
  --borravino:#C2566E;
  --borravino-vivo:#D47085;
  --borravino-velo:#231419;
  --boton-arriba:#C0566E;
  --boton-abajo:#8E3950;
  --boton-arriba-hover:#D0637C;
  --boton-abajo-hover:#9E4159;
  --sombra:0 1px 2px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.7);
  --sombra-boton:0 1px 2px rgba(0,0,0,.45);
}

/* ─── Tamaño de letra ─────────────────────────────────────────────── */
/* Tres pasos y no un +/- infinito: con tres, siempre se sabe dónde está uno
   parado. El de siempre —15px de cuerpo, las medidas del prototipo— es el MÁS
   CHICO; por omisión entra el del medio (1.15x) y el más grande es 1.32x. Los
   valores los fijó Lorenzo el 22/09/2026 y no se rediscuten.

   Cómo funciona: --letra multiplica el font-size de la raíz y todo lo que tiene
   que acompañar al texto está en rem, así que crece solo. Lo que NO tiene que
   crecer —los filetes de 1px, los radios, el ancho de la barra lateral, el alto
   de la barra superior— sigue en px. El alto de los campos y de los botones usa
   max(44px,Nrem): nunca baja del piso del dedo, ni siquiera en chico. */
:root{--letra:1.15}
html{font-size:calc(16px * var(--letra))}
html[data-letra="chico"]{--letra:1}
html[data-letra="normal"]{--letra:1.15}
html[data-letra="grande"]{--letra:1.32}

/* El control de tamaño de letra: un botón con una "A" grande y un menú chico con
   los tres tamaños.
   Hasta el 22/09/2026 eran los tres "Aa" en fila, pegados uno al lado del otro.
   En un teléfono de 360 se comían el ancho entero de la barra de arriba —tres
   blancos chicos para el dedo donde el ojo busca uno— y Lorenzo lo vio ahí y lo
   dijo: "aparatoso". Ahora hay un solo botón, del alto del interruptor de tema, y
   las tres opciones salen cuando alguien las pide.
   El menú sale del <details> (app/nucleo/letra.php): el navegador ya sabe abrirlo
   y cerrarlo con Enter, con la barra espaciadora y con el dedo, así que se abre
   aunque el JavaScript no llegue. Elegir sí necesita JavaScript —aplicar el
   tamaño es escribir data-letra—, igual que el tema.
   La opción puesta se marca con la forma —el hueco del escritorio y una tilde
   dibujada— y no sólo con fondo: DESIGN.md, "el estado vive en la forma". */
.letra{position:relative}
.letra-boton{
  /* El triangulito que el navegador le dibuja al <summary> no va: es el botón de
     siempre, con la misma forma que el del tema. Va con .icono, así que hereda
     los 44px, el hover y el foco. */
  list-style:none;
}
.letra-boton::-webkit-details-marker{display:none}
.letra-boton::marker{content:''}
.letra[open] > .letra-boton{background:var(--borravino-velo);color:var(--tinta)}
.letra-a{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:1.25rem;
  font-weight:600;
  line-height:1;
}
/* El menú cuelga del botón, alineado a su borde derecho: es lo que lo mantiene
   adentro de la pantalla en 360, donde el botón está a menos de 90px del borde. */
.letra-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:10;
  min-width:11rem;
  list-style:none;
  padding:.25rem;
  background:var(--hoja);
  border:1px solid var(--filete);
  border-radius:10px;
  box-shadow:var(--sombra);
}
.letra-opcion{
  appearance:none;
  display:flex;align-items:center;gap:.75rem;
  width:100%;
  /* 44px de alto: es un control que se toca con el dedo, en un pasillo. Adentro
     del menú de opciones sube a 48: ver "Opciones del sistema". */
  min-height:44px;
  padding:0 .75rem;
  background:none;border:0;border-radius:7px;
  color:var(--tinta);
  font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  text-align:left;
  cursor:pointer;
  transition:background .12s ease-out,color .12s ease-out;
}
.letra-opcion:hover{background:var(--borravino-velo)}
.letra-opcion[aria-pressed="true"]{background:var(--escritorio);font-weight:600}
.letra-muestra{line-height:1;flex:none}
/* La palabra al lado de la muestra: Chico, Normal, Grande. La "Aa" sola hay que
   deducirla mirando, y el que ve poco no la deduce. */
.letra-nombre{flex:1;min-width:0}
.letra-opcion[data-letra-opcion="chico"] .letra-muestra{font-size:.6875rem}
.letra-opcion[data-letra-opcion="normal"] .letra-muestra{font-size:.8125rem}
.letra-opcion[data-letra-opcion="grande"] .letra-muestra{font-size:.9375rem}
.letra-tilde{
  width:1rem;height:1rem;flex:none;
  stroke:var(--borravino);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  /* Va siempre en el DOM y se esconde con visibility, no con display: así la
     fila mide lo mismo en las tres opciones y la tilde no corre el "Aa". */
  visibility:hidden;
}
.letra-opcion[aria-pressed="true"] .letra-tilde{visibility:visible}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--escritorio);
  color:var(--tinta);
  font-family:"Archivo",system-ui,sans-serif;
  /* 15px es el tamaño "chico": el que había. En rem para que los otros dos
     pasos lo agranden (ver "Tamaño de letra"). */
  font-size:.9375rem;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--borravino);color:#F5F2EB}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--filete);border:3px solid var(--escritorio);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--apagado)}
:focus-visible{outline:2px solid var(--borravino);outline-offset:2px}

.rotulo{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--apagado);
}

/* ═══ Armazón ═══════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:238px 1fr;min-height:100%}

/* ─── Barra lateral ──────────────────────────────────────────────── */
.lateral{
  background:var(--chrome);
  border-right:1px solid var(--filete);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.lateral .marca{padding:1.375rem 1.375rem 1.25rem;border-bottom:1px solid var(--filete-tenue)}
/* El logo creció un 20% (34 -> 41px) y el aire de arriba y abajo también, o
   queda apretado contra el filete y contra el menú.
   El mismo 22/09/2026, al ver el deploy en el teléfono, Lorenzo lo pidió un
   poquito más: 41 -> 45px, y nada más que eso. El logo público, en cambio, había
   quedado enorme y volvió a bajar (ver "Armazón público"). */
.lateral .marca img{display:block;height:45px;width:auto}
[data-tema="oscuro"] .lateral .marca img{filter:invert(1)}

.nav{padding:1rem .75rem;flex:1;overflow-y:auto}
.nav .grupo{margin-bottom:1.375rem}
.nav .grupo > .rotulo{padding:0 .625rem .5625rem}
.nav a{
  display:flex;
  align-items:center;
  gap:.6875rem;
  padding:.5625rem .625rem;
  border-radius:7px;
  color:var(--tinta);
  text-decoration:none;
  font-size:.9375rem;
  font-weight:500;
  position:relative;
  transition:background .12s ease-out,color .12s ease-out;
}
.nav a svg{width:1.0625rem;height:1.0625rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.nav a:hover{background:var(--borravino-velo)}
.nav a[aria-current="page"]{
  background:linear-gradient(180deg,var(--boton-arriba),var(--boton-abajo));
  color:#F5F2EB;
  box-shadow:var(--sombra-boton),inset 0 1px 0 rgba(255,255,255,.15);
}
.nav a[aria-current="page"] svg{opacity:1}
.nav a .cuenta{
  margin-left:auto;
  font-size:.75rem;
  font-weight:600;
  color:var(--apagado);
  background:var(--escritorio);
  border-radius:99px;
  padding:1px .5rem;
}
.nav a[aria-current="page"] .cuenta{background:rgba(0,0,0,.24);color:#F5F2EB}

.usuario{
  border-top:1px solid var(--filete-tenue);
  padding:.875rem 1rem;
  display:flex;
  align-items:center;
  gap:.6875rem;
}
.inicial{
  width:2.125rem;height:2.125rem;flex:none;
  border-radius:50%;
  background:linear-gradient(180deg,var(--boton-arriba),var(--boton-abajo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
  color:#F5F2EB;
  display:grid;place-items:center;
  font-weight:600;font-size:.875rem;
}
.usuario b{display:block;font-size:.875rem;font-weight:600;line-height:1.3}
.usuario span{display:block;font-size:.75rem;color:var(--apagado)}
/* El nombre y el rol pueden ser largos y la barra lateral no se estira: se
   envuelven y, si igual no entran, se cortan. Sin esto, un nombre compuesto
   largo ensancha el bloque, empuja el ancho de la columna y la barra entera se
   sale de la pantalla. */
.usuario > div:last-child{min-width:0}
.usuario b,.usuario span{overflow-wrap:anywhere}

/* Salir, abajo del bloque del usuario: pegada al filete que ya separa el
   nombre del menú, así que no lleva otro. Es la misma pieza en la barra lateral
   de escritorio y en el cajón del teléfono —es el mismo elemento, en el mismo
   lugar— y por eso no hay dos comportamientos que se puedan separar.
   Vive acá desde el 23/09/2026; antes era una fila del menú de Opciones, en la
   barra superior, donde le comía ancho al título de la página (ver
   app/nucleo/opciones.php). */
.usuario-salir{padding:0 .625rem 1rem}
.salir-boton{
  appearance:none;
  display:flex;align-items:center;gap:.6875rem;
  width:100%;
  /* 44px: el piso del dedo del proyecto. Es un botón que cierra la sesión y no
     se puede tocar de refilón. */
  min-height:44px;
  padding:0 .625rem;
  background:none;border:0;border-radius:7px;
  color:var(--tinta);
  font:inherit;font-size:.9375rem;font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background .12s ease-out;
}
.salir-boton:hover{background:var(--borravino-velo)}
.salir-boton svg{width:1.0625rem;height:1.0625rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
/* El <span> de Salir NO tiene que heredar de .usuario span, que es el rol:
   .75rem y en tono apagado. Este va con el tamaño del botón y en tinta. */
.salir-boton span{display:inline;font-size:inherit;color:inherit;overflow-wrap:anywhere}

/* ─── Barra superior ─────────────────────────────────────────────── */
.principal{display:flex;flex-direction:column;min-width:0}
/* La barra superior y el ancho de la barra lateral son el marco, no el
   contenido: se quedan en px a propósito. Si crecieran con la letra, en el
   tamaño grande la barra de un teléfono de 360px se quedaría sin aire para la
   miga —o se saldría de la pantalla—, que es justo lo que hay que evitar. */
.superior{
  background:var(--chrome);
  border-bottom:1px solid var(--filete);
  padding:0 26px;
  height:62px;
  display:flex;
  align-items:center;
  gap:18px;
  position:sticky;top:0;z-index:5;
}
.abrir-menu,.volver{display:none}
/* flex:1: el título se queda con todo el espacio que sobra. Los controles
   tienen ancho propio y ni se estiran ni se encogen; lo que cede es el título, y
   cede cortándose con puntos suspensivos (la regla de .miga b, más abajo), nunca
   empujando un botón fuera de la pantalla ni achicando un blanco del dedo. */
.miga{display:flex;align-items:center;gap:.5625rem;font-size:.875rem;min-width:0;flex:1}
.miga a{color:var(--apagado);text-decoration:none}
.miga a:hover{color:var(--tinta)}
.miga svg{width:.8125rem;height:.8125rem;stroke:var(--apagado);fill:none;stroke-width:1.6;flex:none}
/* El título de la página. Va con min-height de 44px para que la zona que se
   toca —y la que marca el foco del teclado— llegue al piso del dedo, y con
   line-height 1.15 para que el texto entre en esos 44px y no empuje la barra.
   Los tres puntos suspensivos son el único corte aceptable: el título se
   trunca, nunca se corta a la mitad sin aviso. */
.miga b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;min-height:44px;display:flex;align-items:center}

/* ─── El texto largo no rompe la caja ────────────────────────────── */
/* Un mail largo, un domicilio o un apellido compuesto no tienen espacios donde
   partirse, y sin esto se salen de su caja: en un teléfono de 360 eso es scroll
   horizontal, que es justo lo que el revisor de diseño frena. `anywhere` y no
   `break-word` porque además de partir la palabra deja que la caja se encoja
   hasta su contenido mínimo, y esa es la diferencia entre que la fila entre o
   no. Va sobre el texto de DATOS y no sobre todo el documento: partir una
   palabra al medio en un título o en un botón se lee mal y no hace falta. */
.ayuda,
.dato b,
.analitico-quien,
.nombre,
.al-nombre,
.pd-unidad,
.responsables .quien b,
.texto-largo{overflow-wrap:anywhere}

/* El buscador es una lupa de 48px que abre el campo, y no un campo apretado en
   la fila del título: en 360 no hay ancho para el título y el campo a la vez, y
   lo primero que hay que poder leer es dónde estoy parado. Es el buscador de una
   tienda —se toca la lupa y el campo aparece abajo, entero— y es lo que estaba
   anotado como decisión pendiente desde el rediseño del encabezado.
   Es un <details>, como el panel de opciones: abre y cierra con el dedo, con
   Enter y con la barra espaciadora sin una línea de JavaScript.
   Hasta el 23/09/2026 acá vivía un <input disabled> sin formulario: se veía como
   un campo y no buscaba nada. Lorenzo lo tocó en el teléfono y lo dijo sin
   vueltas: "las búsquedas no andan". Un control dibujado que no hace nada enseña
   que la pantalla no responde.
   El ancho del panel va con min() y no con un valor fijo: en un teléfono de 360
   tiene que entrar entero aunque la letra esté en grande, que es justo cuando más
   se usa. */
.buscar{margin-left:auto;flex:none;position:relative}
.buscar[open] > .buscar-boton{background:var(--borravino-velo);color:var(--tinta)}
.buscar-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:20;
  width:min(26rem,calc(100vw - 1.75rem));
  padding:.875rem;
  background:var(--hoja);
  border:1px solid var(--filete);
  border-radius:12px;
  box-shadow:var(--sombra);
}

/* Acá vivía .iconos{display:flex;align-items:center;gap:4px}, el grupito que
   juntaba el tema, el tamaño de letra y salir contra el borde derecho de la
   barra. Se fue con el rediseño del encabezado: esas tres ya no están en la
   barra, están adentro del menú de opciones (app/nucleo/opciones.php). */
/* 44px y no 36: es el piso del dedo que el proyecto ya usa en los campos y en
   los botones. flex:none para que el ancho mínimo automático del item flex no lo
   aplaste cuando la barra se queda sin lugar —la miga cede antes, que para eso
   tiene min-width:0— y el dedo termine tocando un blanco de 30px. */
.icono{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;border-radius:8px;
  cursor:pointer;
  color:var(--apagado);
  transition:background .12s ease-out,color .12s ease-out;
}
.icono svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icono:hover{background:var(--borravino-velo);color:var(--tinta)}
/* Los controles del encabezado de la aplicación van a 48px —el piso que se
   pidió— y sus iconos a 24, porque se tocan en un pasillo y muchas veces con el
   teléfono lejos de la cara. Va con .superior adelante a propósito: el
   interruptor de tema del armazón público se queda en los 44px que ya tenía,
   porque el pedido fue el encabezado y no el resto de la interfaz. */
.superior .icono{width:48px;height:48px}
.superior .icono svg{width:24px;height:24px}

/* ─── El ícono del tema ──────────────────────────────────────────── */
/* Uno solo, y es el del tema AL QUE VAS: con el tema claro puesto se ve la luna
   —tocarlo lleva a oscuro— y con el oscuro, el sol. Hasta el 22/09/2026 los dos
   svg estaban en el botón y el JavaScript les ponía .hidden = true, que en un
   <svg> no hace nada: hidden es propiedad de HTMLElement, no de SVGElement, así
   que la asignación quedaba en el objeto y el atributo nunca cambiaba. Encima la
   regla del navegador que esconde [hidden] no alcanza a los svg. El resultado era
   el botón con los dos iconos apilados —el sol arriba de la luna— y sin manera
   de saber qué hacía: lo que Lorenzo vio en el teléfono.
   Ahora cuál se ve lo decide el CSS, con lo que ya sabe del tema, y el nombre
   accesible —que dice a dónde va y no dónde está— lo pone tema_script(). */
[data-tema-alternar] [data-icono="sol"]{display:none}
[data-tema="oscuro"] [data-tema-alternar] [data-icono="sol"]{display:block}
[data-tema="oscuro"] [data-tema-alternar] [data-icono="luna"]{display:none}
/* Mientras no haya data-tema —el JavaScript del tema todavía no corrió, o no
   corre— manda el sistema operativo, igual que con los colores. */
@media (prefers-color-scheme: dark){
  html:not([data-tema]) [data-tema-alternar] [data-icono="sol"]{display:block}
  html:not([data-tema]) [data-tema-alternar] [data-icono="luna"]{display:none}
}

/* ─── Opciones del sistema ───────────────────────────────────────── */
/* El encabezado tenía las cuatro funciones del sistema sueltas en la fila
   —buscar, tamaño de letra, tema y salir— y en un teléfono de 360 eso no entra:
   cinco blancos chicos para el dedo y el título de la página en cero píxeles.
   Ahora quedan a la vista las dos que se usan mientras se trabaja —Buscar y
   Opciones— y lo demás vive adentro de este panel, que abre el botón de los tres
   puntos. El reparto está explicado en app/nucleo/opciones.php.
   Es un <details>/<summary>, como el control de letra del armazón público: abre y
   cierra sin JavaScript, con Enter, con la barra espaciadora y con el dedo. */
.opciones{position:relative}
/* Los tres puntos, macizos: con el trazo de 1.6 de la familia quedarían tres
   anillos finos, que a 24px se leen como suciedad. */
.opciones-boton svg circle{fill:currentColor;stroke:none}
.opciones[open] > .opciones-boton{background:var(--borravino-velo);color:var(--tinta)}
.opciones-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:20;
  /* min() y no un ancho fijo: en un teléfono de 360 el panel tiene que entrar
     aunque la letra esté en grande, que es justo cuando más se abre. */
  width:min(19rem,calc(100vw - 1.75rem));
  padding:.375rem;
  background:var(--hoja);
  border:1px solid var(--filete);
  border-radius:12px;
  box-shadow:var(--sombra);
  /* Red de seguridad para el teléfono apaisado —360 de alto—: antes que recortar
     una fila, el panel scrollea. */
  max-height:calc(100vh - 5rem);
  max-height:calc(100dvh - 5rem);
  overflow-y:auto;
}
/* La fila de una opción. La misma pieza sirve de <summary> —la que despliega— y
   de <button> —la que alterna y la que sale—: la forma y el alto son los mismos
   porque lo que cambia es la acción, no el blanco del dedo. 56px, que es lo que
   se pidió, y con el texto en su tamaño de siempre: nada de achicar letra para
   que entre. */
.fila{
  appearance:none;
  display:flex;align-items:center;gap:.875rem;
  width:100%;
  min-height:56px;
  padding:.5rem .75rem;
  background:none;border:0;border-radius:8px;
  color:var(--tinta);
  font:inherit;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums;
  text-align:left;
  cursor:pointer;
  list-style:none;
  transition:background .12s ease-out;
}
.fila:hover{background:var(--borravino-velo)}
/* El triangulito que el navegador le dibuja al <summary> no va: la fila ya tiene
   su propia flecha. */
.fila::-webkit-details-marker{display:none}
.fila::marker{content:''}
/* El icono de la izquierda: es lo que hace que la lista se reconozca por forma
   antes de leerla, que es lo que necesita alguien que ve poco. Va en el tono
   apagado —6,4:1 sobre la hoja, por encima del 3:1 que pide un gráfico— y sube a
   tinta cuando la fila está bajo el dedo. */
.fila-icono{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--apagado)}
.fila-icono svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* La mitad llena del icono de tema: con el trazo de la familia el círculo
   quedaría vacío y no diría "contraste". */
.fila-icono .icono-mitad{fill:currentColor;stroke:none}
.fila:hover .fila-icono{color:var(--tinta)}
/* El rótulo que agrupa las dos preferencias de lectura. Va en la voz
   institucional —Jost en versalitas espaciadas— y a .75rem y no a los 11px del
   .rotulo: adentro de este menú entra alguien que ve poco, y esto hay que
   leerlo. Es el mismo criterio que el rótulo de un campo. */
.fila-grupo{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--apagado);
  padding:.375rem .75rem .125rem;
}
.fila-texto{display:flex;flex-direction:column;gap:.0625rem;flex:1;min-width:0}
.fila-nombre{font-weight:600;line-height:1.25}
/* El estado, en su propio renglón: es lo que viene a leer alguien que ve poco,
   así que no compite con el nombre ni depende de un icono. Va en el tono
   apagado, que sobre la hoja da 5,5:1 en claro y 7:1 en oscuro: arriba del 4,5:1
   que pide el texto chico. */
.fila-estado{font-size:.875rem;color:var(--apagado);line-height:1.25}
.fila-flecha{
  width:1.25rem;height:1.25rem;flex:none;
  stroke:var(--apagado);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s ease-out;
}
.opcion[open] > .fila .fila-flecha{transform:rotate(180deg)}
/* El interruptor del tema. NO es el control —el control es la fila entera, que se
   toca en cualquier lado— y va aria-hidden: es el dibujo que dice "esto se
   prende y se apaga", que es lo único que el texto solo no dice. */
.interruptor{
  width:44px;height:24px;flex:none;
  display:flex;align-items:center;
  padding:2px;
  border:1px solid var(--filete);border-radius:99px;
  background:var(--escritorio);
}
.interruptor-bola{
  width:18px;height:18px;border-radius:50%;
  background:var(--apagado);
}
[data-tema="oscuro"] .interruptor{background:var(--tinta);border-color:var(--tinta)}
[data-tema="oscuro"] .interruptor-bola{margin-left:auto;background:var(--hoja)}
/* Las opciones de adentro son la misma pieza que el menú de letra del armazón
   público (.letra-opcion), un poco más altas: acá se toca con el pulgar, parado
   en un pasillo, y el piso que se pidió son 48px. */
.fila-valores{list-style:none;padding:0 .25rem .25rem}
.fila-valores .letra-opcion{min-height:48px}
/* Acá vivían .opciones-salir —el filete que separaba Salir del tema— y
   .fila-salir. Se fueron el 23/09/2026 con la fila: Salir ya no está adentro de
   este panel, está en la barra lateral, abajo del nombre (ver .usuario-salir). */

/* ─── Lienzo ─────────────────────────────────────────────────────── */
.lienzo{padding:1.625rem;flex:1}
.tope{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.25rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
.tope h1{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.09em;
  line-height:1.2;
  margin-top:.5rem;
}
.tope .sub{font-size:.875rem;color:var(--apagado);margin-top:.4375rem}
.tope .sub em{font-style:normal;color:var(--tinta);font-weight:600}
.acciones{display:flex;gap:.5625rem;flex-wrap:wrap}

/* ─── Botones: se tienen que sentir apretables ───────────────────── */
.btn{
  font:inherit;font-size:.875rem;font-weight:600;
  padding:.5625rem 1.0625rem;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4375rem;
  border:1px solid transparent;
  /* text-decoration:none vive acá, en la regla base, y no en .nav a: un .btn
     que es un enlace —el "Volver al inicio" de la 404, el "Ir a entrar" del
     enlace vencido— salía subrayado, que es la forma de un enlace de texto y no
     la de un botón. */
  text-decoration:none;
  transition:background .12s ease-out,border-color .12s ease-out,
             box-shadow .12s ease-out,transform .06s ease-out;
}
.btn svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:translateY(1px)}

.btn.primario{
  background:linear-gradient(180deg,var(--boton-arriba),var(--boton-abajo));
  color:#F5F2EB;
  border-color:var(--boton-abajo);
  box-shadow:var(--sombra-boton),inset 0 1px 0 rgba(255,255,255,.17);
}
.btn.primario:hover{
  background:linear-gradient(180deg,var(--boton-arriba-hover),var(--boton-abajo-hover));
}
/* Apretado, el degradado se aplana y la luz de arriba se apaga: el
   volumen desaparece mientras el dedo esta encima. */
.btn.primario:active{
  background:linear-gradient(180deg,var(--boton-abajo),var(--boton-abajo));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
}
.btn.primario:disabled{
  background:var(--chrome);color:var(--apagado);
  border-color:var(--filete);box-shadow:none;cursor:not-allowed;transform:none;
}
.btn.segundo{
  background:linear-gradient(180deg,var(--hoja),var(--chrome));
  border-color:var(--filete);color:var(--tinta);
  box-shadow:var(--sombra-boton),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.segundo:hover{border-color:var(--apagado)}
.btn.segundo:active{background:var(--chrome);box-shadow:inset 0 1px 3px rgba(0,0,0,.14)}
.btn.plano{background:none;color:var(--apagado)}
.btn.plano:hover{background:var(--borravino-velo);color:var(--tinta)}

/* ─── Campos de formulario ───────────────────────────────────────── */
/* Antes de esto no había estilo de campo en el sistema. La pantalla de entrar
   —que se escribió después del prototipo— usaba las clases del buscador de la
   barra (.buscar), que en teléfono mide 40px porque está hecho para reducirse
   a su icono: los campos del login medían eso y no se veían. Los iconos que
   quedaban flotando eran el svg del buscador, posicionado absoluto.
   El campo se dibuja como .nota: un hueco en la hoja, con el escritorio
   detrás, que sube a la superficie de la hoja cuando tiene el foco. */
.formulario{display:flex;flex-direction:column;gap:1.125rem;max-width:46ch}
/* Acá vivía ".formulario > .zona-cierre{margin-top:8px}", que le bajaba el aire
   al bloque de cierre. Se fue con el bloque: los formularios públicos ya no
   meten la acción adentro de una caja. */
.campo{display:flex;flex-direction:column;gap:.5rem}
/* El rótulo de un campo va a 12px y no a los 11 del .rotulo: es el texto más
   chico de la pantalla y lo tiene que leer alguien de 55 años con el teléfono en
   un pasillo. El .rotulo de un grupo del menú o del folio se queda en 11: ahí no
   hay nada que completar. */
.campo > .rotulo{font-size:.75rem}
.campo input,
.campo select{
  width:100%;
  /* El alto acompaña a la letra, pero nunca baja de 44px: es el dedo, no el
     mouse. max() es lo que sostiene el piso en el tamaño chico. */
  min-height:max(44px,2.75rem);
  padding:.625rem .75rem;
  font:inherit;
  /* 16px es el piso: abajo de 16px, iOS hace zoom solo al enfocar el campo y
     deja la pantalla corrida. Con max() el campo crece con la letra pero nunca
     baja de 16px, en ningún tamaño. No es estética, es que el formulario se
     pueda llenar. */
  font-size:max(16px,1rem);
  color:var(--tinta);
  background:var(--escritorio);
  border:1px solid var(--filete);
  border-radius:8px;
  transition:border-color .12s ease-out,box-shadow .12s ease-out,background .12s ease-out;
}
/* El texto que se escribe adentro de un campo tampoco puede desbordar: un mail
   o un domicilio largos se ven hasta donde entra y el resto se corre, pero la
   caja no se estira ni arrastra la pantalla. */
.campo input,.campo select,.condicion-select{overflow-wrap:anywhere}
.campo input::placeholder{color:var(--apagado)}
.campo input:hover:not(:disabled),.campo select:hover:not(:disabled){border-color:var(--apagado)}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--borravino);
  background:var(--hoja);
  box-shadow:0 0 0 3px var(--borravino-velo);
}
.campo input:disabled,.campo select:disabled{color:var(--apagado);border-style:dotted;cursor:not-allowed}
/* El <select> NO pierde la flecha del navegador: la nativa es la que todo el
   mundo reconoce, y la que mejor se ve con poca vista. Sólo se aclara que es
   clickeable. */
.campo select{cursor:pointer}
/* Y el rótulo puede llevar una aclaración —"si la hay"— que en versalitas
   espaciadas y en caja alta se lee mal. */
.campo .rotulo .aparte{text-transform:none;letter-spacing:0;font-weight:400}
/* Un dato que el sistema ya sabe y la persona no cambia: se lee, no se llena. */
.campo input[readonly]{background:transparent;border-color:var(--filete-tenue);color:var(--apagado)}
/* El campo de salud del formulario público es un <textarea> y no un <input>: es
   un texto largo y se escribe como se puede. Hasta acá no había ningún textarea
   en el sistema, así que necesita sus propias reglas; son las mismas de un campo
   de una línea —el piso de 16px que evita el zoom de iOS, el borde, el foco en
   borravino— más el alto y que se pueda estirar hacia abajo. El ancho lo limita
   el contenedor y el texto se parte donde haga falta: a 360px no puede haber
   scroll horizontal ni con un texto pegado sin espacios. */
.campo textarea{
  width:100%;
  min-height:6rem;
  padding:.625rem .75rem;
  font:inherit;
  font-size:max(16px,1rem);
  line-height:1.55;
  color:var(--tinta);
  background:var(--escritorio);
  border:1px solid var(--filete);
  border-radius:8px;
  resize:vertical;
  overflow-wrap:anywhere;
  transition:border-color .12s ease-out,box-shadow .12s ease-out,background .12s ease-out;
}
.campo textarea:hover:not(:disabled){border-color:var(--apagado)}
.campo textarea:focus{
  outline:none;
  border-color:var(--borravino);
  background:var(--hoja);
  box-shadow:0 0 0 3px var(--borravino-velo);
}
.campo textarea:disabled{color:var(--apagado);border-style:dotted;cursor:not-allowed}
/* El texto que explica, en cualquier parte: la ayuda de un campo y también el
   párrafo suelto al lado de la acción (entrar y el alta por enlace).
   Estaba escrito como ".campo .ayuda", así que un .ayuda suelto salía con el
   tamaño y el color del cuerpo. */
.ayuda{font-size:.8125rem;color:var(--apagado);line-height:1.55}
/* El error se ve en la forma —el borde engorda— y se explica en el texto.
   El texto va en --borravino-vivo y no en --borravino: sobre la hoja oscura el
   borravino queda en 4.2:1 y este texto es chico, así que no llega al piso de
   4.5:1. El borde sí puede quedarse en --borravino: lo que tiene que llegar a
   3:1 es un gráfico, no una letra. */
.campo.error input{border-color:var(--borravino);box-shadow:inset 0 0 0 1px var(--borravino)}
.campo.error input:focus{box-shadow:inset 0 0 0 1px var(--borravino),0 0 0 3px var(--borravino-velo)}
.campo.error .ayuda{color:var(--borravino-vivo)}
/* El error de un envío entero, arriba de los campos de una pantalla pública.
   Va en borravino y con peso —el énfasis del sistema es peso, no color— porque
   el que falló es el formulario completo y no hay un campo al que señalar: el
   login no puede decir cuál de los dos falló sin delatar qué mails existen.
   Sin caja: una caja adentro de .papel es una tarjeta adentro de otra. */
.mensaje-error{color:var(--borravino-vivo);font-weight:600;line-height:1.55}

/* "Recordarme en este dispositivo": el check, arriba del botón.
   El <label> envuelve al input y al texto —ver app/vistas/entrar.php—, así que
   todo el renglón es la zona que se toca y no sólo el cuadradito de 20px. El
   alto de 44px es el piso del dedo del proyecto.
   Arranca apagado y eso no se toca desde el CSS: el estado por omisión es el
   atributo ausente en el HTML, a la vista de quien lea la vista. */
.recordar label{
  display:flex;
  align-items:center;
  gap:.625rem;
  min-height:max(44px,2.75rem);
  cursor:pointer;
  font-size:.875rem;
  line-height:1.35;
}
.recordar input[type="checkbox"]{
  width:1.25rem;height:1.25rem;flex:none;
  accent-color:var(--borravino);
  cursor:pointer;
}

/* ─── La hoja ────────────────────────────────────────────────────── */
.papel{
  background:var(--hoja);
  border:1px solid var(--filete);
  border-radius:12px;
  box-shadow:var(--sombra);
  padding:1.875rem 2.125rem 2.125rem;
}
/* La acción suelta abajo del texto —el "Volver al inicio" de la 404, el "Ir a
   entrar" del enlace vencido—. Estaba adentro de .zona-cierre, que adentro de
   .papel es una tarjeta adentro de otra y DESIGN.md prohíbe por nombre. */
.papel > .btn{margin-top:1.125rem}

.encabezado{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.625rem;
  padding-bottom:1.375rem;border-bottom:1px solid var(--tinta);
}
.folio{text-align:right;line-height:1}
.folio .numero{
  font-size:clamp(2rem,5vw,2.6rem);font-weight:500;
  letter-spacing:.01em;margin-top:.5rem;
}
.folio .mesa{font-size:.8125rem;color:var(--apagado);margin-top:.6875rem}

.cuerpo{display:grid;grid-template-columns:1fr 250px;gap:2.25rem;margin-top:1.625rem}

/* Las columnas del acta siguen en px: son el ancho de la hoja, no texto. El
   espacio entre ellas sí acompaña a la letra. */
/* Las columnas: la de condición mide 122px porque las tres palabras que puede
   decir —Regular, Libre, Ausente— tienen que entrar enteras. Leer "Regul" no le
   sirve a nadie. El ancho del nombre es minmax(0,1fr) y no 1fr: sin el 0, un
   apellido compuesto largo estira la columna y la fila se sale de la pantalla. */
.rotulos,.fila{display:grid;grid-template-columns:32px minmax(0,1fr) 104px 122px 82px;gap:.9375rem;align-items:center}
.rotulos{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--apagado);font-weight:500;
  padding-bottom:.6875rem;border-bottom:1px solid var(--filete);
}
.rotulos span:nth-child(4),.rotulos span:nth-child(5){text-align:right}
.fila{padding:.8125rem 0;border-bottom:1px solid var(--filete-tenue);transition:background .1s ease-out}
.fila:hover{background:var(--borravino-velo)}
.orden{color:var(--apagado);font-size:.875rem;font-weight:500}
.nombre{font-weight:500;font-size:1rem}
.dni{color:var(--apagado);font-size:.875rem}
.condicion{text-align:right;font-size:.8125rem;color:var(--apagado)}
.condicion.libre{color:var(--tinta);text-decoration:line-through;text-decoration-color:var(--apagado);text-decoration-thickness:1px}

/* El ancho de 66px es el de la celda del acta: se queda en px para no salirse de
   su columna (86px) en el tamaño grande. El alto sí acompaña a la letra, con el
   piso de 44px del dedo. min-width:0 es el mismo cuidado que en .buscar: sin él,
   el ancho automático del input manda y la celda se sale de la pantalla. */
.nota{
  justify-self:end;width:66px;min-width:0;height:max(44px,2.5rem);
  background:var(--escritorio);
  border:1px solid var(--filete);border-radius:7px;
  color:var(--tinta);font:inherit;font-size:1.125rem;font-weight:600;
  text-align:center;font-variant-numeric:tabular-nums;
  transition:border-color .12s ease-out,box-shadow .12s ease-out,background .12s ease-out;
}
.nota:hover:not(:disabled){border-color:var(--apagado)}
.nota:focus{outline:none;border-color:var(--borravino);background:var(--hoja);box-shadow:0 0 0 3px var(--borravino-velo)}
.nota.vacia{border-style:dashed;border-color:var(--borravino);background:var(--borravino-velo)}
.nota.vacia::placeholder{color:var(--borravino);opacity:1}
.nota:disabled{background:transparent;border-style:dotted;cursor:not-allowed}

/* La condición, adentro de la fila. Es un <select> y no un texto porque se elige,
   y mide 44px de alto como todo lo que se toca. */
.condicion-select{
  width:100%;
  min-height:max(44px,2.5rem);
  padding:0 .5rem;
  background:var(--escritorio);
  border:1px solid var(--filete);border-radius:7px;
  color:var(--tinta);font:inherit;font-size:.875rem;
  cursor:pointer;
}
.condicion-select:focus{outline:none;border-color:var(--borravino);background:var(--hoja);box-shadow:0 0 0 3px var(--borravino-velo)}
/* El estado vive en la forma y no en el color (DESIGN.md, las cuatro reglas del
   contenido): libre va tachado y el ausente va punteado, así se entiende impreso
   en blanco y negro o leído por alguien que no distingue colores. La nota del
   ausente y del libre ya queda punteada por el :disabled de .nota. */
.fila[data-condicion="Libre"] .nombre{text-decoration:line-through;text-decoration-color:var(--apagado);text-decoration-thickness:1px}
.fila[data-condicion="Ausente"] .nombre{text-decoration:underline dotted;text-decoration-color:var(--apagado);text-underline-offset:3px}
/* El error de UNA fila, abajo de la fila. El error de guardar una planilla de
   veinte no sirve si no dice en cuál de las veinte. */
.fila.error{background:var(--borravino-velo)}
.fila-error{padding:0 0 .75rem;font-size:.8125rem;color:var(--borravino-vivo);font-weight:600}

/* ─── Margen ─────────────────────────────────────────────────────── */
.margen h2{padding-bottom:.75rem;border-bottom:1px solid var(--filete)}
.anotacion{padding:.9375rem 0;border-bottom:1px solid var(--filete-tenue);font-size:.8125rem;line-height:1.6}
.anotacion b{
  display:block;font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:.8125rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.375rem;
}
.anotacion span{color:var(--apagado)}
.margen .btn{margin-top:.875rem;width:100%;justify-content:center}

/* El contenido de una declaración de salud, en la pantalla de dirección.
   Se lee como lo escribió la familia, con sus renglones: white-space:pre-wrap y
   no un <br> metido a mano, que además de ensuciar el HTML no respeta los
   espacios. Es un hueco en la hoja —el mismo tratamiento que un campo— porque
   eso es lo que es: algo que alguien escribió, no un dato que el sistema
   calculó. */
.declaracion{
  background:var(--escritorio);
  border:1px solid var(--filete);
  border-radius:8px;
  padding:.9375rem 1.125rem;
  white-space:pre-wrap;
  font-size:1rem;
  line-height:1.6;
}

/* ─── La lista de actas ──────────────────────────────────────────── */
/* Una fila por acta con lo que importa a la vista: el folio —que es su
   identidad—, la unidad, si está cerrada y cuántas notas le faltan asentar. */
.rotulos.actas,.fila.actas{grid-template-columns:72px minmax(0,1fr) 96px 132px}
.fila.actas{text-decoration:none;color:var(--tinta)}
.ac-folio{color:var(--apagado);font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums}
.ac-unidad{font-weight:500;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-estado{font-size:.8125rem;color:var(--apagado)}
.ac-falta{text-align:right;font-size:.8125rem;color:var(--apagado)}
/* Lo que falta asentar es lo que hay que ir a hacer: es el único lugar de la
   lista donde el ojo tiene que detenerse. */
.ac-falta.pendiente{color:var(--borravino-vivo);font-weight:600}
/* Los años, arriba de la hoja. 44px de alto, como todo lo que se toca. */
.anios{display:flex;flex-wrap:wrap;gap:.375rem;margin:0 0 1rem}
.anios a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 .875rem;
  border:1px solid var(--filete);border-radius:99px;
  color:var(--apagado);text-decoration:none;
  font-size:.875rem;font-variant-numeric:tabular-nums;
  transition:color .12s ease-out,border-color .12s ease-out;
}
.anios a:hover{color:var(--tinta);border-color:var(--apagado)}
.anios a[aria-current="page"]{background:var(--hoja);border-color:var(--tinta);color:var(--tinta);font-weight:600}

/* ─── Agregar un alumno, desde el margen ─────────────────────────── */
.buscar-alumno{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.resultados{list-style:none;margin-top:.75rem;display:flex;flex-direction:column;gap:.375rem}
.resultado{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  width:100%;min-height:48px;padding:.625rem .75rem;
  background:var(--escritorio);border:1px solid var(--filete);border-radius:8px;
  color:var(--tinta);font:inherit;font-size:.875rem;text-align:left;cursor:pointer;
  transition:border-color .12s ease-out;
}
.resultado:hover{border-color:var(--apagado)}
.resultado-nombre{font-weight:600}
.resultado-dni{color:var(--apagado);font-variant-numeric:tabular-nums}
/* El bloque de corrección del acta: un desplegable en el margen que no se abre
   por accidente y que dice qué hace antes de hacerlo. */
.corregir{margin-top:1rem;border-top:1px solid var(--filete-tenue);padding-top:.75rem}
.corregir > summary{cursor:pointer;list-style:none}
.corregir > summary::-webkit-details-marker{display:none}
.corregir > summary::marker{content:''}
.corregir > summary:hover{color:var(--tinta)}
.resultado-accion{color:var(--tinta);font-weight:600}


/* ─── Cierre ─────────────────────────────────────────────────────── */
.cierre{
  margin-top:1.5rem;padding-top:1.375rem;border-top:1px solid var(--tinta);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.recuento{font-size:.875rem;color:var(--apagado);line-height:1.8}
.recuento b{color:var(--tinta);font-weight:700}
.recuento .falta{color:var(--borravino)}

.zona-cierre{
  margin-top:1.625rem;padding:1.25rem 1.375rem;
  border:1px solid var(--filete);border-radius:10px;
  background:var(--chrome);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
}
.zona-cierre p{font-size:.8125rem;color:var(--apagado);max-width:58ch;line-height:1.65}

/* ─── Pie ────────────────────────────────────────────────────────── */
.pie{
  border-top:1px solid var(--filete);
  padding:1.25rem 1.625rem 1.625rem;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.nombre-sistema{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:.8125rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--tinta);
}
.pie .institucion{font-size:.8125rem;color:var(--apagado)}
.pie .version,.publico-pie .version{font-size:.75rem;color:var(--apagado)}

/* ═══ Armazón público ═══════════════════════════════════════════════ */
/* Las pantallas de antes de entrar —entrar, alta por enlace y los errores que
   ve alguien sin sesión— no llevan barra lateral, ni barra superior, ni el pie
   de la aplicación: todo eso supone una sesión abierta. Llevan el logo, el
   título, una columna de 380px y una línea de pie. DESIGN.md, "Dos armazones,
   no uno".

   El tema sigue al del sistema operativo y no se elige: los tokens oscuros
   entran más abajo por prefers-color-scheme, y ninguna regla de este bloque
   depende de data-tema.

   El aire de arriba creció junto con el logo chico: el 22/09/2026 el logo
   público bajó de 77 a 50px y el espacio alrededor subió, porque el problema no
   era sólo el tamaño, era que todo estaba apretado. */
body.publico{
  /* El centrado vertical va con margin:auto en el hijo, no con
     justify-content:center. Con center, un formulario más alto que la pantalla
     —un teléfono apaisado, la letra agrandada del sistema— se recorta arriba y
     el logo queda fuera del scroll. Con auto, el margen vale 0 cuando no entra
     y la pantalla scrollea desde el principio, como cualquier otra. */
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:1.875rem 1.125rem calc(1.875rem + env(safe-area-inset-bottom,0px));
}
.publico-marco{flex:none;margin:auto;width:100%;max-width:380px}
/* El interruptor de tema, chico y arriba a la derecha del armazón. No es una
   barra: es el mismo botón .icono de la aplicación, alineado al borde de la
   columna. */
.publico-tema{display:flex;justify-content:flex-end;align-items:center;gap:.5rem}
/* El logo es lo primero que identifica a la institución y su tamaño se corrigió
   dos veces el mismo día. El 22/09/2026 a la mañana se lo agrandó un 20% (64 ->
   77px) y a la tarde, al verlo en su teléfono, Lorenzo lo dio vuelta: "demasiado
   grande y medio grotesco". Tenía razón: en una pantalla de 360, 77px de alto
   ocupan media pantalla de ancho. Queda en 50px, que es donde el logo se lee sin
   gritar.
   El aire, en cambio, creció en vez de achicarse, porque el problema no era sólo
   el tamaño: era que todo estaba apretado. Arriba y abajo del logo hay ahora casi
   el doble de espacio, y entre el título y la tarjeta también. El bloque no se
   pasa de alto —el logo baja 27px y el aire sube casi lo mismo— así que la acción
   principal sigue entrando sin scrollear en el teléfono de referencia (360x640),
   en el tamaño de letra por omisión. Lo que queda abajo del botón (la nota y el
   pie) sí scrollea, y está bien; en el tamaño grande también, que es lo que la
   persona eligió. */
.publico-marca{padding:1.5rem 0 1.125rem}
.publico-marca img{display:block;height:50px;width:auto;margin:0 auto}
.publico-pantalla{margin-top:2rem}
/* El .tope de la aplicación es una fila con la acción a la derecha. Acá el
   título va centrado abajo del logo, sin el rótulo con el nombre de la
   institución: el logo ya lo dice. */
.publico-pantalla .tope{display:block;text-align:center;margin-bottom:1.75rem}
.publico-pantalla .tope h1{margin-top:0}
/* El nombre del sistema y la versión del cache-buster, en la misma línea del
   pie: es el mismo pie en fila que el de la aplicación (.pie). En la columna de
   380px entran juntos; a 360 la versión baja sola a un segundo renglón, que es
   lo que ya hace el pie de la aplicación en teléfono. */
.publico-pie{
  margin-top:1.625rem;
  padding-top:1.125rem;
  border-top:1px solid var(--filete-tenue);
  text-align:center;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:.25rem .875rem;
}
/* Acá vivía ".publico .zona-cierre{flex-direction:column;align-items:stretch}".
   Se fue con el bloque: ninguna pantalla pública usa más el bloque de cierre
   —el submit de entrar, el del alta y el "Volver al inicio" de la 404 están
   sueltos—, así que la acción se estira con la regla de abajo. */
/* El .btn mide 41px de alto; el piso del proyecto para el dedo son 44. Y va a
   todo el ancho de la columna: a 360px el submit del login medía 245px contra
   291px de los campos, y un botón más angosto que su propio campo se lee como un
   control de otra pantalla. Cada pantalla pública tiene una sola acción, así que
   no hay fila de botones que romper. */
.publico .btn{min-height:max(44px,2.75rem);justify-content:center;width:100%}

/* La nota al pie de un formulario público: información de trámite que no es un
   campo ni un error —"si no tenés usuario, pedilo en secretaría"—.
   Va FUERA de .papel (ver app/vistas/entrar.php), chica y sin recuadro. Pegada
   al botón, adentro de la misma caja, se lee como si el botón hiciera lo que el
   texto cuenta; separada, se lee como lo que es. */
.publico-nota{margin-top:1rem;font-size:.8125rem;color:var(--apagado);line-height:1.55}

/* El tema del armazón público.
   El interruptor escribe data-tema en <html> (app/nucleo/tema.php). Mientras el
   JavaScript no corrió —o si no corre— el tema sigue al del sistema operativo:
   por eso los tokens oscuros se aplican a html.publico:not([data-tema]). Apenas
   hay data-tema mandan los tokens de [data-tema="oscuro"] de arriba, o los
   claros de :root, y el sistema operativo deja de decidir. Sin el :not(),
   elegir "claro" en un teléfono en oscuro no haría nada: html.publico le gana
   por especificidad a [data-tema]. */
@media (prefers-color-scheme: dark){
  html.publico:not([data-tema]){
    --escritorio:#0A0A0C;
    --hoja:#16161A;
    --chrome:#101014;
    --tinta:#F2F1EC;
    --filete:#2E2E36;
    --filete-tenue:#212128;
    --apagado:#9A9AA4;
    --borravino:#C2566E;
    --borravino-vivo:#D47085;
    --borravino-velo:#231419;
    --boton-arriba:#C0566E;
    --boton-abajo:#8E3950;
    --boton-arriba-hover:#D0637C;
    --boton-abajo-hover:#9E4159;
    --sombra:0 1px 2px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.7);
    --sombra-boton:0 1px 2px rgba(0,0,0,.45);
  }
  html.publico:not([data-tema]) .publico-marca img{filter:invert(1)}
}
/* El logo se invierte también cuando el tema oscuro lo eligió la persona y no
   el sistema operativo. Es la misma regla que la de la barra lateral en tema
   oscuro, aplicada al armazón público. */
[data-tema="oscuro"] .publico-marca img{filter:invert(1)}

/* ─── Aviso de versión nueva ─────────────────────────────────────── */
/* La barra es del sistema, no de una pantalla: va fija abajo, sobre el
   escritorio, con la superficie de hoja y el filete de arriba. Una sola acción
   (Actualizar), que es la que está esperando una mano. Nada de animación: no
   aporta y molesta. */
.aviso-version{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--hoja);
  border-top:1px solid var(--filete);
  box-shadow:var(--sombra);
  padding:.8125rem 1.625rem calc(.8125rem + env(safe-area-inset-bottom,0px));
}
.aviso-version p{font-size:.875rem;color:var(--apagado);max-width:62ch;line-height:1.55}
.aviso-version p b{color:var(--tinta);font-weight:600}
/* `hidden` solo no alcanza: la regla de arriba trae display:flex y le gana al
   display:none que el navegador le pone a [hidden]. Sin esta línea la barra
   queda visible siempre, que es el bug clásico de este patrón. */
.aviso-version[hidden]{display:none}
@media (max-width:980px){
  .aviso-version{padding:.75rem .875rem calc(.75rem + env(safe-area-inset-bottom,0px))}
  .aviso-version .btn{flex:1;justify-content:center}
}

/* ═══ Laptop ════════════════════════════════════════════════════════ */
/* Con la barra lateral puesta, abajo de ~1240 no entran las dos columnas: el
   margen le comía el ancho al nombre y "Almeyra Beltrán, Renata" se partía en
   tres renglones. El margen es lo secundario, así que baja. */
@media (min-width:981px) and (max-width:1240px){
  .cuerpo{grid-template-columns:1fr;gap:0}
  .margen{margin-top:1.75rem}
  .rotulos,.fila{grid-template-columns:30px minmax(0,1fr) 96px 114px 74px;gap:.875rem}
  .margen .btn{width:auto}
}

/* ═══ Teléfono ══════════════════════════════════════════════════════ */
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .lateral{
    position:fixed;inset:0 auto 0 0;width:270px;z-index:20;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.22,.8,.3,1);
    box-shadow:var(--sombra);
  }
  .app[data-menu="abierto"] .lateral{transform:none}
  .velo{
    position:fixed;inset:0;background:rgba(10,8,4,.42);z-index:15;
    opacity:0;pointer-events:none;transition:opacity .22s ease-out;
  }
  .app[data-menu="abierto"] .velo{opacity:1;pointer-events:auto}
  .abrir-menu,.volver{display:grid}
  /* En 375px la cadena entera no entra y partia la barra en tres
     renglones. Queda el lugar donde estoy, y la flecha para subir. */
  .miga a,.miga svg{display:none}
  .miga{min-width:0;flex:1}
  .miga b{font-size:.9375rem}
  /* 8 y no 12: con los controles de la fila en 48px —el piso del dedo— cada
     píxel entre ellos es un píxel que le falta al título, que es lo único de la
     barra que puede encogerse. La cuenta a 360, con la flecha de volver puesta:
     cuatro controles de 48 = 192, más cuatro huecos de 8 = 32, más 28 de padding
     = 252. Al título le quedan 108px y si no alcanzan se corta con puntos
     suspensivos, que es lo que hay que hacer: el título cede, el blanco del dedo
     no.
     Hasta el 23/09/2026 acá había un quinto control, porque Salir vivía adentro
     del panel de Opciones: con 48 más el hueco, al título le quedaban 52px, que
     son dos letras y puntos suspensivos. Ese quinto control ya no está (ver
     .usuario-salir). */
  .superior{padding:0 14px;gap:8px}
  /* El cajón del teléfono es una lista de dedos: cada ítem del menú llega a los
     44px del piso. En la barra lateral de escritorio el ítem queda como está
     —ahí se apunta con el mouse— y por eso la regla vive acá adentro y no
     arriba, con el resto de .nav a. */
  .nav a{min-height:44px}
  /* Salir lleva el mismo aire que en la barra, más el borde de gestos del
     teléfono: sin eso queda pegado al borde inferior y se toca sin querer al
     volver de la barra del sistema. */
  .usuario-salir{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
  /* Acá estaban .buscar{flex:0 0 48px;width:48px;height:48px}, .buscar svg y
     .buscar input{width:0;padding:0;border:0}: el buscador reducido a su icono,
     con la caja de texto en ancho cero y el aria-label guardado para el día que
     existiera la consulta. Se fueron el 23/09/2026 con el buscador de verdad.
     La lupa sigue midiendo 48px, porque es un .icono del encabezado, y el panel
     ya se achica solo con el min() de su ancho: en teléfono no hace falta
     ninguna regla propia. */

  /* El campo de búsqueda va a 16px y no a .875rem como el resto de los campos
     del sistema: en un teléfono, un campo de menos de 16px hace que el navegador
     haga zoom al enfocarlo y la pantalla salte. Es la única excepción, y es por
     eso. */
  .buscar-panel input{font-size:1rem}
  .lienzo{padding:1rem .875rem 1.875rem}
  .papel{padding:1.25rem 1rem 1.5rem;border-radius:10px}
  /* En teléfono no sobra ancho para limitar la medida, y el bloque de cierre
     se apila con su acción a todo el ancho, igual que .acciones. */
  .formulario{max-width:none}
  .zona-cierre{flex-direction:column;align-items:stretch}
  .cuerpo{grid-template-columns:1fr;gap:0}
  .margen{order:2;margin-top:1.875rem}
  .registro{order:1}
  .rotulos{display:none}
  /* La fila del acta se envuelve en dos renglones. Las columnas fijas siguen en
     px; el espacio entre ellas acompaña a la letra. La columna del nombre es
     minmax(0,1fr) a propósito: sin el 0 de mínimo, el nombre largo la estira y
     la fila se sale de la pantalla. La nota va pegada al borde con 66px, y su
     altura crece con la letra (max con el piso de 44px del dedo). */
  .fila{
    grid-template-columns:26px minmax(0,1fr) 66px;
    grid-template-areas:"orden nombre nota" "orden dni nota" "orden cond nota";
    gap:.1875rem .75rem;padding:.875rem 0;
  }
  .orden{grid-area:orden;align-self:start;padding-top:3px}
  .nombre{grid-area:nombre;line-height:1.3}
  .dni{grid-area:dni}
  .condicion-select{grid-area:cond}
  .nota{grid-area:nota;align-self:center;height:max(44px,2.875rem)}
  /* La lista de actas: el folio queda a la izquierda cruzando los dos renglones
     y el resto se acomoda al lado. El estado y lo que falta, en el segundo. */
  .fila.actas{
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:"folio unidad estado" "folio falta falta";
    gap:.1875rem .75rem;
  }
  .ac-folio{grid-area:folio;align-self:start;padding-top:2px}
  .ac-unidad{grid-area:unidad;white-space:normal}
  .ac-estado{grid-area:estado}
  .ac-falta{grid-area:falta;text-align:left}
  .encabezado{grid-template-columns:1fr;gap:1rem;align-items:start}
  .folio{text-align:left;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .875rem}
  .folio .numero{margin-top:0}
  .folio .mesa{margin-top:0;flex:1 1 100%}
  .acciones{width:100%}
  .acciones .btn{flex:1;justify-content:center}
  .pie{padding:1.125rem .875rem 1.5rem;gap:.4375rem}
  .pie p{flex:1 1 100%}
}
@media (min-width:981px){.velo{display:none}}

/* ═══ Alumnos y legajo ══════════════════════════════════════════════ */
/* La búsqueda, en la misma fila del título y a la derecha. */
.buscar-fila{display:flex;align-items:flex-start;gap:.5rem;flex-wrap:wrap}
.buscar-fila .campo{flex:1 1 15rem}
/* La lista de alumnos: el nombre se queda con lo que sobra, como el título. */
.rotulos.alumnos,.fila.alumnos{grid-template-columns:minmax(0,1fr) 104px 150px 96px}
.fila.alumnos{text-decoration:none;color:var(--tinta)}
.al-nombre{font-weight:500;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-dni{color:var(--apagado);font-size:.875rem}
.al-coro{font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-estado{font-size:.8125rem;color:var(--apagado)}
/* La historia académica y el analítico comparten la fila: es LA tabla del
   sistema, la que contesta "¿qué tiene hecho este chico?". */
.rotulos.historia,.fila.historia{grid-template-columns:52px minmax(0,1fr) 118px 60px 112px}
.celda-nota{text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
/* El estado en la forma y no en el color, como en el acta. */
.fila[data-estado="Cursando"] .condicion{text-decoration:underline dotted;text-decoration-color:var(--apagado);text-underline-offset:3px}
.fila[data-estado="Libre"] .nombre{text-decoration:line-through;text-decoration-color:var(--apagado)}
.fila[data-estado="Desaprobada"] .condicion{font-weight:600}
/* Los datos del legajo: una grilla que se acomoda sola al ancho que hay. */
.seccion{margin:2rem 0 1rem;padding-bottom:.75rem;border-bottom:1px solid var(--filete)}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 1.5rem}
.dato{display:flex;flex-direction:column;gap:.125rem;border-bottom:1px solid var(--filete-tenue);padding-bottom:.5rem}
.dato .rotulo{font-size:.75rem}
.dato b{font-weight:500;font-size:1rem}
.dato b.vacio{color:var(--apagado);font-weight:400}

/* ═══ El analítico ══════════════════════════════════════════════════ */
/* Es un documento oficial: tipografía y jerarquía en papel, no una pantalla
   (DESIGN.md). Por eso tiene el ancho de una hoja y no el de la pantalla. */
.analitico{max-width:52rem}
.analitico .titulo-documento{
  font-family:"Jost","Archivo",system-ui,sans-serif;
  font-size:1.35rem;font-weight:400;text-transform:uppercase;letter-spacing:.12em;
  margin-top:.5rem;
}
.analitico-quien{margin:1.25rem 0;font-size:1rem;line-height:1.5}
.analitico-ciclo{margin-top:1.75rem}
.analitico-ciclo h2{padding-bottom:.5rem;border-bottom:1px solid var(--filete)}
.analitico .rotulos,.analitico .fila{grid-template-columns:52px minmax(0,1fr) 118px 60px 112px}
/* La magnitud se dibuja y no se numera: la barra es la carga horaria aprobada
   sobre la del ciclo (DESIGN.md, "la magnitud se dibuja, no se numera"). */
.analitico-total{margin-top:.875rem;font-size:.875rem;color:var(--apagado);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.analitico-total b{color:var(--tinta)}
.analitico-barra{flex:1 1 8rem;min-width:6rem;height:6px;border:1px solid var(--filete);border-radius:99px;overflow:hidden;background:var(--escritorio)}
.analitico-barra > span{display:block;height:100%;background:var(--tinta)}
.analitico-borrador{font-size:.8125rem;color:var(--apagado);line-height:1.55;max-width:62ch}
.analitico-borrador b{color:var(--borravino-vivo)}

@media (max-width:980px){
  .buscar-fila{width:100%}
  .rotulos.alumnos,.fila.alumnos{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nombre estado" "dni coro";
    gap:.1875rem .75rem;
  }
  .al-nombre{grid-area:nombre;white-space:normal}
  .al-dni{grid-area:dni}
  .al-coro{grid-area:coro;text-align:right}
  .al-estado{grid-area:estado}
  /* La historia se envuelve en tres renglones: año y nota a los costados y el
     estado abajo. La columna del acta baja al tercero, que es lo que menos se
     mira. */
  .rotulos.historia,.fila.historia,
  .analitico .rotulos,.analitico .fila{
    grid-template-columns:44px minmax(0,1fr) 54px;
    grid-template-areas:"orden nombre nota" "orden cond cond" "orden dni dni";
    gap:.1875rem .75rem;
  }
  .fila.historia .orden,.analitico .fila .orden{grid-area:orden}
  .fila.historia .nombre,.analitico .fila .nombre{grid-area:nombre}
  .fila.historia .condicion,.analitico .fila .condicion{grid-area:cond}
  .fila.historia .celda-nota,.analitico .fila .celda-nota{grid-area:nota}
  .fila.historia .dni,.analitico .fila .dni{grid-area:dni;font-size:.75rem}
}

/* ═══ Impresión ═════════════════════════════════════════════════════ */
/* El analítico se imprime y se entrega. Al imprimir queda el documento: sin
   barra lateral, sin barra superior, sin pie, sin botones y sin el velo del
   cajón. El aviso de borrador NO se esconde: nadie tiene que firmar un borrador
   sin darse cuenta. */
@media print{
  .lateral,.superior,.pie,.aviso-version,.solo-pantalla,.velo{display:none !important}
  body{background:#fff;color:#000}
  .app{display:block;grid-template-columns:none}
  .lienzo{padding:0}
  .papel{border:0;border-radius:0;box-shadow:none;padding:0;background:#fff}
  .analitico{max-width:none}
  .analitico-barra{border-color:#000}
  .analitico-barra > span{background:#000}
  @page{margin:18mm}
}

/* ═══ Inicio ════════════════════════════════════════════════════════ */
/* Lo que está esperando una mano, en fila y con su enlace. No es un tablero de
   números grandes: DESIGN.md prohíbe por nombre la plantilla de "número enorme,
   etiqueta chica y estadísticas de apoyo", y además un número grande no dice qué
   hacer. Lo que sirve es la lista de lo que falta. */
.rotulos.pendientes,.fila.pendientes{grid-template-columns:64px minmax(0,1fr) 140px}
.fila.pendientes{text-decoration:none;color:var(--tinta)}
.pd-folio{color:var(--apagado);font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums}
.pd-unidad{font-weight:500;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-falta{text-align:right;font-size:.8125rem;color:var(--borravino-vivo);font-weight:600}
/* Los números del pie: chicos y en una línea. */
.pie-resumen{margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--filete-tenue);font-size:.8125rem;color:var(--apagado);line-height:1.7}
.pie-resumen b{color:var(--tinta)}
@media (max-width:980px){
  .fila.pendientes{
    grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"folio unidad" "folio falta";
    gap:.1875rem .75rem;
  }
  .pd-folio{grid-area:folio;align-self:start}
  .pd-unidad{grid-area:unidad;white-space:normal}
  .pd-falta{grid-area:falta;text-align:left}
}

/* Los responsables de un alumno: una fila por adulto, con su botón de sacar. */
.responsables{list-style:none}
.responsables li{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--filete-tenue)}
.responsables .quien{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.responsables .quien b{font-weight:500;font-size:1rem}
.responsables .quien .rotulo{font-size:.75rem}
.responsables form{flex:none}

/* ─── Panel técnico (app/vistas/tecnico.php) ────────────────────────
   Cuatro reglas y ningún token nuevo: los colores, el filete y el radio son los
   de siempre. Lo único que agrega es el semáforo y la fila de barras de 30 días.

   POR QUÉ NO ESTÁ EN DESIGN.md: esta tanda tiene DESIGN.md congelado, así que el
   contrato no se pudo actualizar. Lo que DESIGN.md debería decir el día que se
   lo toque es esto: el semáforo del panel técnico es forma además de color —el
   lleno, el medio lleno, la cruz y el punteado se distinguen en escala de grises—
   y su color sale de la paleta que ya está (tinta, apagado, borravino), porque el
   contrato fija negro, blanco y borravino y no tiene verde ni amarillo. El
   gráfico de 30 días es una fila de barras de altura proporcional, sin ejes ni
   etiquetas más que el primero y el último día. */
.tecnico-semaforo{flex:none;width:22px;height:22px;display:grid;place-items:center}
.tecnico-semaforo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tecnico-semaforo svg .lleno{fill:currentColor;stroke:none}
.tecnico-semaforo[data-estado="ok"]{color:var(--tinta)}
.tecnico-semaforo[data-estado="ojo"]{color:var(--apagado)}
.tecnico-semaforo[data-estado="alerta"]{color:var(--borravino-vivo)}
.tecnico-semaforo[data-estado="sin-dato"]{color:var(--apagado)}

/* La línea del estado de un bloque: el dibujo, la palabra y el resumen. */
.tecnico-estado{display:flex;align-items:flex-start;gap:.625rem;margin:.25rem 0 1.25rem}
.tecnico-estado b{font-weight:600}
.tecnico-estado span{color:var(--apagado);min-width:0;overflow-wrap:anywhere}

/* Las barras de los últimos 30 días. La altura la pone la vista en un style en
   línea, igual que la barra del analítico: la altura ES el dato. Los días en
   cero quedan en 2px con el filete tenue, para que la serie se lea como una
   línea de tiempo y no como un gráfico recortado. */
.tecnico-dias{display:flex;align-items:flex-end;gap:1px;height:34px;margin:.5rem 0 .25rem}
.tecnico-dias span{flex:1 1 0;min-width:0;height:2px;background:var(--tinta)}
.tecnico-dias span[data-cero="si"]{background:var(--filete-tenue)}
.tecnico-eje{display:flex;justify-content:space-between;font-size:.75rem;color:var(--apagado);font-variant-numeric:tabular-nums}

/* Una serie: su rótulo, su barra y su total, separadas por el filete tenue. */
.tecnico-serie{padding:.8125rem 0;border-bottom:1px solid var(--filete-tenue)}
.tecnico-serie:last-child{border-bottom:0;padding-bottom:0}