/* Registro Académico · estilos
Sin framework y sin build, igual que el sistema al que sustituye.
EL ASPECTO ES EL DEL SISTEMA ACTUAL, A PROPÓSITO. Los colores, la
cabecera verde, las tarjetas y los distintivos salen de `Index.html`
del repositorio. La migración ya cambia la dirección web y la forma de
entrar; cambiar además el aspecto convierte «es lo mismo en otro sitio»
en «es otro programa», que es una conversación mucho más difícil con
quien solo quiere pasar lista.
Por el mismo motivo NO hay tema oscuro: el sistema actual no lo tiene,
y quien trabaje con el sistema operativo en oscuro vería aquí algo que
no reconoce. */
:root{
color-scheme: light;
/* Paleta institucional — la misma de Index.html */
--verde-oscuro:#00453d;--verde-medio:#086357;--verde-claro:#009485;
--naranja:#f39300;--amarillo:#ffca00;
--azul-oscuro:#282d5f;--azul:#3e3e91;
--bg:#f0f5f4;--card:#fff;--txt:#1a2e2a;--muted:#527068;--border:#d8d9db;
--r:10px;--sh:0 1px 3px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* `hidden` tiene que ganar SIEMPRE. El atributo trae de serie
`display:none` desde la hoja del navegador, que es la de menor
prioridad: cualquier regla propia con `display` —como el `flex` de
.entrada— lo deja sin efecto y el elemento sigue en pantalla aunque el
código crea haberlo ocultado. Pasó: tras entrar, la pantalla de login
se quedaba encima del panel. */
[hidden]{display:none !important}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);
color:var(--txt);min-height:100vh;-webkit-font-smoothing:antialiased}
/* ─── ENTRADA ──────────────────────────────────────────────────── */
/* Calcada de la pantalla de acceso del sistema actual —fondo claro,
tarjeta blanca, emblema, botón naranja—: es la primera pantalla que
verá el equipo al cambiar de dirección, y la que más importa que
reconozcan sin pensar. */
/* En columna: la caja y, debajo de ella, el emblema de la casa. */
.entrada{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:100vh;padding:16px}
/* Sin fondo propio: desde el 29/09/2026 lo pone el marco común de Pantheos en
toda la página (la Acrópolis al 45 %). */
.entrada-caja{background:var(--card);border-radius:12px;padding:32px;max-width:420px;width:100%;
box-shadow:0 4px 24px rgba(0,0,0,.08);text-align:center}
/* El símbolo de Jano, sobre la tarjeta blanca (en gris, ver abajo). Sustituye al 🏛️
que estaba prestado del sistema anterior. Alto fijo y ancho automático:
el dibujo es más alto que ancho (600×650) y lo que tiene que ser
constante entre pantallas es la altura. */
.entrada-logo{height:108px;width:auto;display:block;margin:0 auto 14px;opacity:.5}
/* En gris (opacidad .5) desde el 28/09/2026, como en Pantheos y como el
emblema de NA de debajo: el nombre es lo que se lee. */
.entrada-caja h1{font-size:20px;font-weight:600;margin:0 0 6px}
/* La pantalla de entrada es donde se aprende el nombre del sistema: es lo
primero que ve quien llega y lo único que mira sin prisa. Por eso el
nombre va grande y la descripción justo debajo, no al revés. */
.entrada-marca{font-size:30px;font-weight:800;letter-spacing:.14em;line-height:1.1;
text-transform:uppercase;color:var(--verde-oscuro);margin:0 0 8px}
.entrada-caja .sub{color:#4a5568;font-size:13.5px;font-weight:600;margin:0 0 20px}
/* El emblema de Nueva Acrópolis, FUERA de la caja y en gris: dice de
quién es la casa sin competir con el nombre del sistema, que es lo que
hay que leer aquí. El archivo es blanco —está hecho para la cabecera
verde—, así que se invierte a negro y se baja la opacidad; teñirlo por CSS no se puede con un
``, habría que incrustar el SVG entero en la página. */
.entrada-na{height:46px;width:auto;display:block;margin:24px auto 0;
filter:invert(1);opacity:.4}
#entrada-msg{color:#718096;font-size:12px;margin:16px 0 0}
/* ─── CONTENIDO ────────────────────────────────────────────────── */
main{padding:16px 20px 20px;max-width:1400px;margin:0 auto}
.sec-title{font-size:18px;font-weight:700;color:var(--verde-oscuro);margin-bottom:6px;
display:flex;align-items:center;gap:10px}
/* Sin tope de ancho (22/09/2026, a petición del usuario). Llevó `max-width:70ch`
—la medida cómoda de lectura de un libro— y una clase `.ancha` para saltarse
el tope aquí y allá. Estos párrafos no se leen como un libro: se leen de una
pasada al entrar en la pantalla, y cortados a media anchura ocupaban cuatro
renglones donde caben dos, empujando hacia abajo justo lo que se viene a ver.
`main` ya topa en 1400px, que es el ancho de verdad. */
.ayuda{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.cargando{color:#718096;font-size:13px;padding:14px 0}
/* ─── TARJETAS ─────────────────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;
margin:0} /* explícito: el marco común les pone 18px debajo, y aquí las separa su rejilla */
.card-hd{padding:14px 18px;border-bottom:1px solid #f0ede8;display:flex;align-items:center;
justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-hd h3{font-size:13px;font-weight:600;color:#4a5568}
/* EL AIRE DE LA TARJETA. Faltaba, y es lo que hacía que las tablas
parecieran pegadas al borde: en el sistema actual TODO lo que va dentro
de una tarjeta —el buscador, los filtros, la tabla y el paginador— vive
dentro de `.card-bd`. */
.card-bd{padding:18px}
/* ─── KPI ──────────────────────────────────────────────────────── */
/* Las tarjetas del panel (`.kpi-grid`, `.kpi`, `.kpi-cat`…) las pone el marco
común desde el 30/09/2026; aquí solo lo de jano (las acciones `.kpi-acts`). */
/* ─── TABLAS ───────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 13px;background:#f7f6f3;color:#718096;font-size:11px;font-weight:600;
text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #e8e5df;white-space:nowrap}
td{padding:9px 13px;border-bottom:1px solid #f0ede8;vertical-align:middle}
tr:last-child td{border-bottom:none}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.codigo{color:#718096;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Tablas apiladas en móvil (class="stack"): cada fila se vuelve tarjeta */
@media(max-width:640px){
table.stack thead{display:none}
table.stack tbody tr{display:block;border:1px solid #e2e8f0;border-radius:10px;margin:0 0 10px;
padding:6px 12px;background:#fff}
table.stack tbody td{display:flex;align-items:center;justify-content:space-between;gap:12px;
border:none !important;padding:5px 0 !important}
table.stack tbody td[data-l]::before{content:attr(data-l);color:#718096;font-size:11px;
text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
}
/* El pie del drill-down: la salida a la vista completa. Separado del
cuerpo por una línea, porque no es una fila más de la tabla. */
.drill-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:14px;padding-top:12px;border-top:1px solid #e2e8f0}
/* El aviso de las pestañas comunes a todas las filiales, cuando quien
mira no es nacional y las ve en solo lectura (23/09/2026). */
.aviso-comun{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#ebf8ff;
border:1px solid #bee3f8;color:#2c5282;font-size:13px}
/* Aviso de posible ficha equivocada (22/10/2026): QR a quien se llama parecido. */
.aviso-ficha{margin:0 0 12px;padding:10px 14px;border-radius:8px;background:#fefcbf;
border:1px solid #f6e05e;color:#8a6410;font-size:13px}
.aviso-ficha ul{margin:6px 0 0;padding-left:18px}
.aviso-ficha li{margin:2px 0}
/* ─── FILIALES ─────────────────────────────────── */
/* Elegir filial: botones grandes, uno por sede. Un desplegable con
veintiocho nombres se lee peor y no deja enseñar cuánta gente tiene
cada una, que es lo que dice de un vistazo si te has equivocado. */
.fil-lista{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.fil-op{display:block;width:100%;text-align:left;padding:10px 14px;border:1px solid #e2e8f0;
border-radius:9px;background:#fff;cursor:pointer;font-family:inherit}
.fil-op:hover{border-color:var(--naranja);background:#fffaf0}
.fil-op.on{border-color:var(--naranja);background:#fffaf0;box-shadow:inset 3px 0 0 var(--naranja)}
.fil-op strong{display:block;font-size:14px;color:var(--txt)}
.fil-op span{display:block;font-size:11.5px;color:#718096}
.fil-op .fil-n{color:#a0aec0}
/* El contador que se pide: grande, porque es la respuesta a la pregunta
con la que se entra en esta pantalla. */
.fil-cuenta{font-size:13px;color:#4a5568;margin:0 0 16px}
.fil-cuenta strong{font-size:22px;font-weight:800;color:var(--verde-oscuro);
font-variant-numeric:tabular-nums}
.fil-h{font-size:13px;font-weight:700;color:var(--verde-oscuro);text-transform:uppercase;
letter-spacing:.04em;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
/* El interruptor deslizante (25/09/2026): para lo que se guarda al moverlo,
como las tareas automáticas de una filial. La casilla de verdad sigue
ahí —invisible pero enfocable—, así que el teclado y los lectores de
pantalla la tratan como lo que es. */
.tg-lista{display:flex;flex-direction:column;gap:2px}
.tg{display:flex;align-items:flex-start;gap:12px;padding:8px 6px;border-radius:8px;cursor:pointer;
position:relative}
.tg:hover{background:#f4f7f6}
.tg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tg-riel{flex:none;width:38px;height:22px;border-radius:11px;background:#cbd5e0;position:relative;
margin-top:1px;transition:background .18s ease}
.tg-riel::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s ease}
.tg input:checked + .tg-riel{background:var(--verde-claro)}
.tg input:checked + .tg-riel::after{transform:translateX(16px)}
.tg input:focus-visible + .tg-riel{outline:2px solid var(--verde-oscuro);outline-offset:2px}
.tg input:disabled + .tg-riel{opacity:.5}
.tg-txt{display:flex;flex-direction:column;font-size:13.5px;line-height:1.35;min-width:0}
.tg-txt span{font-size:12.5px;color:#4a5568}
@media (prefers-reduced-motion:reduce){.tg-riel,.tg-riel::after{transition:none}}
/* El precio, editado en su fila (25/09/2026), con la nota de cuando se
aparta del precio nacional de referencia. */
.pr-edit{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.pr-in{width:90px;text-align:right}
.pr-nota{flex-basis:100%;margin:4px 0 0;text-align:left;font-size:12.5px;line-height:1.4;
color:#8a6410;background:#fefcbf;border-radius:8px;padding:6px 9px}
/* ─── DISTINTIVOS ──────────────────────────────────────────────── */
/* Mismos nombres de clase que el sistema actual, para que la tabla de
colores por etapa sea literalmente la misma y no dos que se separan
con el tiempo. Cada distintivo se lee por su texto; el color acompaña,
nunca sustituye. */
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.b-green{background:#c6f6d5;color:#276749}.b-red{background:#fed7d7;color:#c53030}
.b-gray{background:#e2e8f0;color:#4a5568}.b-blue{background:#bee3f8;color:#2b6cb0}
.b-yellow{background:#fefcbf;color:#975a16}.b-purple{background:#e9d8fd;color:#553c9a}
.b-teal{background:#b2f5ea;color:#285e61}.b-orange{background:#feebc8;color:#c05621}
.b-slate{background:#cbd5e0;color:#2d3748}
/* «Súper bien» en «Cómo lo veo hoy»: un verde más intenso que el de Normal. */
.b-intenso{background:#2f855a;color:#fff}
/* ─── BOTONES ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:6px;border:none;
font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;
transition:background .15s,color .15s,transform .12s ease-out}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--naranja);color:#fff}
.btn-gold:hover{background:#d97e00}
.btn-sec{background:#e2e8f0;color:#4a5568}
/* Rojo para lo destructivo, con los mismos tonos que el sistema actual.
Empieza suave y se enciende al pasar por encima: lo que se pulsa por
error es lo que está gritando desde el principio. */
.btn-red{background:#fed7d7;color:#c53030}
.btn-red:hover{background:#fc8181;color:#fff}
.btn-sec:hover:not(:disabled){background:#cbd5e0}
.btn:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
/* ─── BÚSQUEDA Y PAGINACIÓN ────────────────────────────────────── */
.search-row{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.search-row input{padding:7px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;
outline:none;background:#fff;font-family:inherit;flex:1;min-width:180px;max-width:26rem}
.search-row input:focus{border-color:var(--naranja)}
.cuenta{font-size:12px;color:#718096}
/* «✎ Corregir un grupo terminado»: acción secundaria bajo el selector que abre
el buscador de grupos cerrados. Botón con icono en recuadro, título, cuántos
grupos cerrados hay y una flecha; se lee como acción sin pesar como el
selector (antes era un enlace subrayado diminuto; 28/10/2026). */
.asi-corregir{display:inline-flex;align-items:center;gap:10px;margin-top:10px;
padding:7px 12px 7px 8px;border:1px solid var(--border);border-radius:9px;
background:var(--card);color:var(--txt);cursor:pointer;font:inherit;text-align:left;
transition:border-color .12s,background .12s,box-shadow .12s}
.asi-corregir:hover{border-color:var(--verde-claro);background:#f3faf8;
box-shadow:0 1px 3px rgba(0,0,0,.06)}
.asi-corregir-ic{flex:none;width:26px;height:26px;border-radius:7px;display:grid;
place-items:center;font-size:14px;background:#e9f3f0;color:var(--verde-medio);
transition:background .12s,color .12s}
.asi-corregir:hover .asi-corregir-ic{background:var(--verde-medio);color:#fff}
.asi-corregir-tx{display:flex;flex-direction:column;line-height:1.25}
.asi-corregir-t1{font-size:12.5px;font-weight:600;color:var(--verde-oscuro)}
.asi-corregir-t2{font-size:11px;color:var(--muted)}
.asi-corregir-car{flex:none;color:var(--muted);font-size:17px;line-height:1;
transition:color .12s}
.asi-corregir:hover .asi-corregir-car{color:var(--verde-medio)}
/* ── Cabecera de Asistencia en una sola banda (27/10/2026) ──
A la izquierda, el selector con su etiqueta y el estado del grupo; a la
derecha, aprovechando el hueco, el avance del grupo en grande con barra y el
cumpleaños. Debajo, las pestañas con aspecto de pestañas (subrayado), no de
botones. Antes la tarjeta estaba casi vacía y el avance quedaba en gris
diminuto junto a la tabla. */
.asi-sel-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
color:#718096;font-weight:600;margin-bottom:4px}
.asi-sel-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Sin tope de ancho: el selector llena su columna (más ancho en escritorio,
28/10/2026). El `min-width:0` deja que encoja en el móvil sin desbordar. */
.asi-grupo{flex:1 1 420px;min-width:0;padding:9px 12px;border:1px solid #e2e8f0;
border-radius:8px;font-size:15px;font-weight:600;outline:none;background:#fff;font-family:inherit;
color:var(--verde-oscuro)}
.asi-grupo:focus{border-color:var(--naranja)}
.asi-grupo-estado{flex:0 0 auto}
/* En el escritorio, la columna del selector se lleva más sitio que la del
avance (28/10/2026): es lo que más se usa. */
.asi-head-grid{display:grid;grid-template-columns:minmax(0,2fr) 1px minmax(0,1fr);
gap:22px;align-items:center}
.asi-head-grupo,.asi-head-avance{min-width:0}
.asi-head-div{align-self:stretch;width:1px;background:var(--border)}
.asi-av-top{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.asi-av-num{font-size:30px;font-weight:800;color:var(--verde-oscuro);line-height:1;
font-variant-numeric:tabular-nums}
.asi-av-de{font-size:17px;font-weight:700;color:var(--muted)}
.asi-av-lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.asi-prog{height:9px;background:#e6edeb;border-radius:99px;overflow:hidden}
.asi-prog-fill{height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--verde-claro),var(--verde-medio));transition:width .3s}
/* El distintivo de cumpleaños es un botón: abre el modal con todos. Más
notorio si hay alguno esta semana (borde ámbar fuerte) u hoy (naranja). */
.asi-cumple-chip{display:inline-flex;align-items:center;gap:8px;margin-top:10px;
font-size:12.5px;font-family:inherit;color:var(--verde-oscuro);text-align:left;
background:#fff7e6;border:1px solid #ffe3a3;padding:6px 11px;border-radius:8px;cursor:pointer}
.asi-cumple-chip:hover{background:#fff1d6}
.asi-cumple-chip .cumple-mas{font-size:11.5px;font-weight:700;color:var(--naranja);white-space:nowrap}
.asi-cumple-chip.cumple-pronto{border-color:#f6ad55;box-shadow:0 0 0 2px rgba(246,173,85,.18)}
.asi-cumple-chip.cumple-hoy{background:#fff0dc;border-color:var(--naranja);font-weight:600}
/* Buscador de grupos cerrados (modal). */
.asi-buscar-campo{width:100%;box-sizing:border-box;font-size:16px;font-family:inherit;
padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;outline:none;margin-bottom:12px}
.asi-buscar-campo:focus{border-color:var(--naranja)}
.asi-buscar-lista{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.cg-row{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;cursor:pointer;
background:#fff;border:1px solid #e6edeb;border-radius:10px;padding:11px 13px;font-family:inherit}
.cg-row:hover{border-color:var(--verde-medio);background:#f6faf8}
.cg-l1{font-size:14px;font-weight:700;color:var(--verde-oscuro)}
.cg-l2{font-size:12.5px;color:var(--muted)}
.cg-tag{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;color:#718096}
.empty-sm{color:var(--muted);font-size:13px;padding:10px 2px}
/* Modal de cumpleaños. */
.asi-cumple-lista{display:flex;flex-direction:column}
.cu-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
color:#718096;margin:14px 0 6px}
.cu-sec:first-child{margin-top:0}
.cu-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:9px 0;border-top:1px solid #eef1f0}
.cu-nom{font-size:14px;font-weight:600;color:var(--verde-oscuro)}
.cu-fecha{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cu-cuando{color:var(--naranja);font-weight:600}
/* Las pestañas de Asistencia, por `id` para ganar al estilo de pastilla de
`.pestanas` sin importar el orden del archivo: subrayado, no relleno. */
#asi-tabs.asi-tabs-bar{gap:2px;margin:16px 0 0;border-bottom:2px solid #e6edeb}
#asi-tabs.asi-tabs-bar button{background:none;border:none;border-radius:0;color:#718096;
font-size:14px;font-weight:600;padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-2px}
#asi-tabs.asi-tabs-bar button:hover{background:none;color:var(--verde-medio)}
#asi-tabs.asi-tabs-bar button[aria-selected="true"]{background:none;color:var(--verde-oscuro);
border-bottom-color:var(--verde-medio);font-weight:700}
#asi-tabs.asi-tabs-bar button[aria-selected="true"]:hover{background:none}
/* ── El programa del grupo como lista escaneable (27/10/2026) ── */
.prog-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
flex-wrap:wrap;padding:2px 2px 10px}
.prog-cab-t{font-size:14px;font-weight:700;color:var(--verde-oscuro)}
.prog-leyenda{font-size:12px;color:#718096}
.prog-leyenda b{font-weight:700}
.prog-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 14px;align-items:center;
grid-template-areas:"st main acc";padding:12px 6px;border-radius:10px;border:1px solid transparent}
.prog-row + .prog-row{border-top:1px solid #eef2f1}
.prog-row.es-sig{background:#fff8ec;border-color:#ffe3a3}
.prog-row.es-borr{background:#fffaf0}
.prog-st{grid-area:st;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.prog-st.st-ok{background:#c6f6d5;color:#276749}
.prog-st.st-draft{background:#fefcbf;color:#975a16;font-size:12px}
.prog-st.st-next{background:var(--naranja);color:#fff}
.prog-st.st-wait{background:#eef2f1;color:#9fb3ad;border:1px dashed #cfdcd8}
.prog-main{grid-area:main;min-width:0}
.prog-tit{font-size:14.5px;font-weight:600;color:var(--verde-oscuro);display:flex;align-items:center;
gap:7px;flex-wrap:wrap}
.prog-num{color:#718096;font-weight:700;font-variant-numeric:tabular-nums}
.prog-meta{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;
align-items:center}
.prog-meta .u-sep{color:#c3d3ce}
.prog-meta .u-opc{color:#9fb3ad}
.prog-main .codigo{margin-top:2px}
.prog-acc{grid-area:acc;text-align:right;white-space:nowrap}
.u-sig-tag{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
color:var(--naranja);margin-bottom:3px}
/* En el móvil: la acción baja bajo el texto (nada de muro de etiquetas). */
@media (max-width:720px){
.asi-head-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.asi-head-div{display:none}
}
@media (max-width:640px){
.prog-row{grid-template-columns:26px minmax(0,1fr);grid-template-areas:"st main" ". acc";
align-items:start}
.prog-acc{margin-top:10px}
.u-sig-tag{display:inline-block;margin:0 8px 0 0;vertical-align:middle}
}
.search-row select{padding:7px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;
outline:none;background:#fff;font-family:inherit;color:var(--txt)}
.search-row select:focus{border-color:var(--naranja)}
/* El paginador (`.pager`) lo pone el marco común desde el 30/09/2026. */
/* Estado vacío: el mismo del sistema actual, con su emblema grande. Una
celda que solo dice «no hay nada» en gris pequeño se lee como un fallo
de carga. */
.empty{text-align:center;padding:40px 20px;color:#a0aec0}
.empty .ei{font-size:36px;margin-bottom:10px}
.empty p{font-size:13px}
/* ─── MODAL (la ficha) ─────────────────────────────────────────── */
/* Mismas clases y mismo mecanismo que el sistema actual: lo que oculta
el fondo es `opacity` + `pointer-events`, y lo que lo muestra es la
clase `open`. Nunca `style.display`. */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:flex;
align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:16px}
.backdrop.open{opacity:1;pointer-events:all}
/* Un modal abierto DESDE otro necesita esto o queda detrás del que lo
abrió: invisible, pero recibiendo los clics. Misma convención que el
sistema actual. */
.backdrop.encima{z-index:600}
.modal{background:#fff;border-radius:12px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;
padding:26px;transform:translateY(10px);transition:transform .2s;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.backdrop.open .modal{transform:translateY(0)}
.modal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.modal-sm .modal,.modal.modal-sm{max-width:440px}
/* La consecuencia que no se ve va DENTRO del modal, no en un aviso que se
va solo: que la baja de la persona cierra todas sus matrículas es justo
lo que hay que leer antes de confirmar. */
.baja-aviso{font-size:12.5px;color:#8a6410;background:#fefcbf;border-radius:8px;
padding:9px 12px;margin:0 0 16px;line-height:1.45}
.modal-title{font-size:17px;font-weight:700;color:var(--verde-oscuro)}
.ficha-etapa{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* La barra de acciones: separada de los distintivos por una línea, y con
aire entre botones. Amontonados y mezclados con las etiquetas no se
veía dónde acababa lo que la persona ES y empezaba lo que se le puede
hacer. */
.ficha-acciones{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding-top:14px;
border-top:1px solid #edf0ef}
.ficha-acciones:empty{display:none}
/* Lo irreversible va al final y despegado, pero SIN `margin-left:auto`:
con él se iba solo a una segunda línea, alineado a la derecha, y
parecía un descuido en vez de una separación. */
.ficha-acciones .btn-aparte{margin-left:10px}
/* Cada bloque de la ficha, en su tarjeta: así se ve dónde empieza y dónde
acaba. Antes iban seguidos, separados solo por una línea de 1 px. */
.fblq{border:1px solid #e9edec;border-radius:10px;background:#fcfdfd;
padding:0 16px 16px;margin:0 0 14px}
.fblq:last-child{margin-bottom:0}
.fblq .fsec{border-top:0;margin:0 0 12px;padding-top:15px}
.btn-sm{padding:5px 10px;font-size:12px}
/* Carga dentro del modal: oculta el contenido hasta tenerlo listo, para
no enseñar una ficha a medio rellenar. */
.modal-load{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
padding:56px 0;color:#718096}
.modal-load.on{display:flex}
.modal-load .ms{width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:var(--naranja);
border-radius:50%;animation:spin .7s linear infinite}
.modal-load .mt{font-size:13px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Bloques de la ficha */
.fsec{font-size:11px;font-weight:700;color:#8a7f6a;text-transform:uppercase;letter-spacing:.04em;
border-top:1px solid #f0ede8;padding-top:12px;margin:14px 0 10px}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:10px 18px}
/* ⚠️ `> div` Y NO `div` A SECAS. Esta regla viste al envoltorio de cada
par etiqueta/valor, que es hijo directo de la lista; sin el `>` alcanza
a CUALQUIER div de dentro, y ahí cae el desplegable con buscador
(`.combo-drop`, que es un div): `.dl div` gana en especificidad a
`.combo-drop{display:none}`, así que el buscador de la fase del CRM
aparecía desplegado desde que se abría la ficha y no había forma de
cerrarlo —al cerrarlo volvía a `display:flex`—. Se llevaba por delante
también la lista de opciones y los grupos, que son divs igualmente. */
.dl > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl dt{font-size:11px;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:.03em}
.dl dd{font-size:13px;margin:0;overflow-wrap:anywhere}
.dl dd.vacio{color:#a0aec0}
/* Un «no» explícito se ve: antes de publicar una foto hay que poder
distinguir «dijo que no» de «nunca se le preguntó». */
.dd-no{color:#c53030;font-weight:600}
/* Avance de pagos: la misma barra del sistema actual */
.avz-bar{height:8px;background:#edf2f7;border-radius:99px;overflow:hidden;margin-top:4px}
.avz-fill{height:100%;background:var(--verde-medio);border-radius:99px}
/* Línea de tiempo del recorrido */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f7f5f1;font-size:13px}
.tl li:last-child{border-bottom:0}
.tl-ico{flex:0 0 1.4rem;text-align:center;line-height:1.4}
.tl-cuerpo{min-width:0;flex:1}
.tl-fecha{font-size:11px;color:#718096;font-variant-numeric:tabular-nums}
.tl-detalle{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
/* Pasar lista: añadir a quien vino sin estar en la lista (08/10/2026) */
.lista-anadir{margin-top:12px}
.lista-anadir input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font:inherit}
.lista-anadir-p{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;text-align:left;margin-top:6px;padding:8px 11px;border:1px solid var(--border);border-radius:8px;background:#fff;font:inherit;cursor:pointer}
.lista-anadir-p:hover{border-color:var(--gold, #f39300)}
/* El aviso de eventos al pasar lista (08/10/2026) */
.ev-gr{margin:0 0 14px;padding:10px 12px;border:1px solid #ecc94b;border-radius:10px;background:#fffbea}
/* Sin nada que promover: solo el enlace, sin la caja amarilla (27/10/2026). */
.ev-gr-plano{margin:0 0 10px;padding:0;border:0;background:none}
.ev-gr-tit{font-weight:700;font-size:13px;margin-bottom:6px}
/* El resumen en vivo junto al título del modal: asistieron · faltaron ·
(sin marcar), con el color y las palabras de la leyenda de «Presentes». */
.lista-resumen{margin-top:4px;font-size:12px;display:flex;align-items:center;flex-wrap:wrap}
.ev-gr-ev{padding:6px 0;border-top:1px solid #f6e7a7}
.ev-gr-ev:first-of-type{border-top:0}
.ev-gr-nom{font-weight:600;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ev-gr-ses{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:3px 0}
.ev-gr-alumnos{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:8px}
.ev-gr-al{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.ev-gr-mas{margin-top:6px;background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
/* Los cambios de fase y los envíos son ruido de fondo comparados con un
alta o una baja: se atenúan en vez de ocultarse. */
.tl li.tenue .tl-cuerpo{color:#8a949e}
/* Desplegable de fase del CRM, dentro de la ficha */
.fase-sel{padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12.5px;
font-family:inherit;background:#fff;color:var(--txt);max-width:100%;outline:none}
.fase-sel:focus{border-color:var(--naranja)}
.fase-sel:disabled{opacity:.6}
/* El choque entre la fase y el registro se explica donde se ha intentado
el cambio, y se queda: no es un aviso que se va solo, es lo que hay que
leer para saber qué hacer en su lugar. */
.fase-estado{display:block;margin-top:5px;font-size:11.5px;color:#c05621;font-weight:600;line-height:1.4}
.fase-haz{font-weight:400;color:#8a6410}
/* ✔ Asistió: la fecha y el botón juntos, dentro del propio campo */
.asis{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.asis input[type=date]{padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12.5px;
font-family:inherit;background:#fff;color:var(--txt);outline:none}
.asis input[type=date]:focus{border-color:var(--naranja)}
.asis .fld-ayuda{flex:1 0 100%}
/* Formulario de escritura dentro de la ficha */
.sg-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sg-form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld label{font-size:11px;font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:.03em}
.fld input,.fld textarea{padding:7px 11px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;
outline:none;transition:border-color .15s;font-family:inherit;background:#fff;color:var(--txt);width:100%}
.fld input:focus,.fld textarea:focus{border-color:var(--naranja)}
.fld textarea{resize:vertical;min-height:52px}
.fld-ayuda{font-size:11px;color:#718096}
/* Atajos del proximo seguimiento: +3 dias, +1 semana... Van pegados al
campo de fecha y envuelven en pantalla estrecha. */
.sg-atajos{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
/* La franja de «ver como». Va en la cabecera, no se puede cerrar
mientras dure y se sale de un clic: una sesion con menos permisos de
los que tocan y sin avisar se confunde con una averia. */
/* DOS ESTADOS, Y A PROPÓSITO NO SE PARECEN EN NADA:
· El OFRECIMIENTO —«ver como: RRPP · Instructor…»— es una herramienta de
quien administra, que la usa de vez en cuando. Va discreta, bajo el
buscador y a la derecha: en amarillo y a todo lo ancho gritaba un
aviso donde no había ninguno, y encima ocupaba el sitio de la marca.
· MIENTRAS DURA el disfraz manda el aviso, y ese sí grita: una sesión
con menos permisos de los que tocan y sin avisar se confunde con una
avería —«a mí esto me salía ayer»—. Ese estado se queda amarillo, a
todo lo ancho y en su propia fila. La clase la pone `VerComo.pintar`. */
.vercomo{grid-area:vercomo;justify-self:end;display:flex;align-items:center;flex-wrap:wrap;
gap:6px;font-size:11px;color:rgba(255,255,255,.6)}
.vercomo .btn{background:transparent;border:1px solid rgba(255,255,255,.26);
color:rgba(255,255,255,.78);font-size:11px;font-weight:500;padding:3px 9px;border-radius:999px}
.vercomo .btn:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.vercomo select{font-size:12px;padding:2px 6px}
/* El «¿qué instructor?» de «Ver como instructor…» es un desplegable con
buscador y vive en la cabecera: se le pone techo y la etiqueta se corta
con puntos suspensivos —`.cv` ya lo hace— en vez de empujar la marca o el
buscador. Al abrirlo, el desplegable se porta a `body` y no hereda este
ancho, así que las opciones se leen enteras igualmente. */
.vercomo .combo{max-width:230px}
/* La fila 3 no está en la plantilla: se crea sola al colocar aquí algo, y
así no deja un hueco cuando no hay disfraz (que es casi siempre). */
.vercomo.activo{grid-column:1/-1;grid-row:3;justify-self:stretch;
padding:7px 12px;border-radius:8px;background:#fff3cd;color:#664d03;
border:1px solid #ffe69c;font-size:13px;gap:10px}
.vercomo.activo .btn{background:#e2e8f0;border:0;color:#4a5568;
font-size:12px;font-weight:500;padding:5px 10px;border-radius:6px}
.vercomo.activo .btn:hover{background:#cbd5e0;color:#4a5568;border:0}
/* Prefijo y número: dos casillas, una fila. El prefijo es estrecho a
propósito —mide cuatro caracteres— y darle el mismo ancho que al
número hace pensar que cabe algo más. */
.tel-row{display:grid;grid-template-columns:72px 1fr;gap:6px}
.sg-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* El motivo por el que no se ha guardado va junto al botón, no en un
aviso que se va solo: es lo que hay que leer para poder arreglarlo. */
.sg-error{font-size:12px;color:#c53030;font-weight:600}
/* ── Pasar lista en tres momentos (sql/75, 27/10/2026) ── */
/* El pie se apila: primero el progreso (barra + etiqueta del momento +
«guardado»), luego la acción de cerrar, y debajo los errores y la lista
de a quién falta. Sin «Guardar la clase»: cada marca se autoguarda. */
.lista-pie{flex-direction:column;align-items:stretch;gap:10px}
.lista-prog{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lista-prog-bar{flex:1 1 140px;min-width:120px;height:8px;background:#edf2f7;
border-radius:99px;overflow:hidden}
.lista-prog-fill{height:100%;width:0;background:var(--verde-medio);border-radius:99px;
transition:width .2s ease}
/* El «✔ Guardado / Guardando…» es discreto —el autoguardado no debe gritar—
salvo cuando falla, que entonces sí tiene que verse. */
.lista-guardado{color:var(--verde-medio);font-weight:600;white-space:nowrap}
.lista-guardado.err{color:#c53030}
.lista-pie-acc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* A quién falta por marcar para poder cerrar: no cabe en una frase, así que
va en su propia caja, con la persona y qué le falta (estado, «cómo lo veo»). */
.lista-faltan{font-size:13px;background:#fffbeb;border:1px solid #fde68a;
border-radius:8px;padding:10px 12px;color:#78500a}
.lista-faltan ul{margin:6px 0 0;padding-left:18px}
.lista-faltan li{margin:2px 0}
.lista-falta-q{color:#b45309;font-weight:600}
/* La casilla que decide de dónde sale la fecha del grupo. Va en línea
con su texto —no encima como las demás etiquetas—: es una frase que se
marca, no un campo que se rellena. */
.fld label.chk{display:flex;align-items:center;gap:8px;text-transform:none;
letter-spacing:0;font-size:13px;font-weight:500;color:var(--txt);cursor:pointer}
.fld label.chk input{width:auto;padding:0;margin:0}
@media(max-width:560px){ .sg-form{grid-template-columns:1fr} }
/* Inscribir: plegado de partida. La ficha se abre sobre todo para leer,
y un formulario desplegado empuja hacia abajo lo que se viene a mirar. */
.insc-det{margin:10px 0 4px;border:1px solid #e2e8f0;border-radius:8px;background:#f9fafb;padding:8px 12px}
.insc-det summary{cursor:pointer;font-size:12.5px;font-weight:600;color:#4a5568}
.insc-det summary:hover{color:var(--naranja)}
.insc-det[open] summary{margin-bottom:12px}
.insc-det select,.insc-det input{padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;
font-size:12.5px;font-family:inherit;background:#fff;color:var(--txt);outline:none;width:100%}
.insc-det select:focus,.insc-det input:focus{border-color:var(--naranja)}
/* ─── Pasar lista ──────────────────────────────────────────────── */
.modal-ancho{max-width:920px}
/* UNA TARJETA POR ALUMNO, NO UNA TABLA, y son las mismas clases y las
mismas medidas del sistema anterior (`.att-*`, `.alr-*`): es la
pantalla que el instructor se sabe de memoria, y en una tabla de cinco
columnas el nombre deja de ser lo primero que se lee. Cada fila lleva,
en este orden: quién es, cómo va de pago, su asistencia, lo que
dependa del tipo de unidad (nota si es examen, reposición si faltó,
fecha propia si es tutoría) y cómo se le ve hoy. */
.att-grid{display:flex;flex-direction:column;gap:8px}
/* `.att-row`, `.att-name`, `.att-btns` y `.abt` ya estaban, más abajo,
en «PASAR LISTA: los estados»: se usan aquí tal cual. */
.att-lbl{font-size:10px;color:#a0aec0;text-transform:uppercase;letter-spacing:.03em}
.att-min{width:80px;padding:4px 7px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;
font-family:inherit;outline:none}
.att-fec{width:135px;padding:4px 7px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;
font-family:inherit;outline:none}
.att-min:focus,.att-fec:focus{border-color:var(--naranja)}
.att-repo{display:inline-flex;align-items:center;gap:6px}
/* El avance de pago, dentro de la fila: quién va al día se ve mientras se
pasa lista, no en otra pantalla. Pulsable solo para quien puede cobrar. */
.att-pago{min-width:132px;display:flex;flex-direction:column;gap:3px}
.att-pago .avz-bar{height:6px;margin-top:0}
.att-pago b{font-size:11px;font-weight:600;color:#4a5568;white-space:nowrap}
.att-pago.ok .avz-fill{background:#38a169}
.att-pago.ok b{color:#2f855a}
.att-pago.debe .avz-fill{background:#d69e2e}
.att-pago.debe b{color:#975a16}
.att-pago.link{cursor:pointer;border-radius:6px;padding:3px 5px;margin:-3px -5px;
transition:background .15s}
.att-pago.link:hover{background:#f7fafc}
/* «Cómo lo veo hoy»: cuatro botones con el color de su nivel y su
palabra, no un desplegable. Se marca de un gesto y se lee de un
vistazo, que es lo que hace falta con la clase delante. */
/* Separada del resto por una línea: lo que hizo hoy y cómo se le ve son
dos preguntas distintas, y pegadas se respondían por inercia. */
.alr-wrap{display:flex;flex-direction:column;gap:4px;
padding-top:6px;border-top:1px dashed #ece9e3}
.alr-btns{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
/* La etiqueta «Cómo lo veo hoy» va EN LÍNEA con sus botones, no en un
renglón propio: repetida en cada alumno, una fila entera por cabeza
alargaba la lista sin aportar (27/10/2026). */
.alr-lbl{margin-right:4px}
/* El ✎ para abrir el campo de nota: aparece solo con un nivel puesto. */
.alr-nota{padding:3px 8px;border-radius:20px;border:1.5px solid #e2e8f0;color:#a0aec0;
background:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;
white-space:nowrap;transition:all .12s}
.alr-nota.sel{border-color:var(--naranja);color:var(--naranja)}
/* El atajo «Todos presentes», encima de la lista. */
.lista-rapida{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
/* El filtro por nombre de grupos grandes: a la derecha de «Todos presentes». */
.lista-filtro{margin-left:auto;min-width:150px;flex:0 1 220px;padding:6px 10px;border:1px solid var(--border);
border-radius:8px;font:inherit;font-size:13px;outline:none}
.lista-filtro:focus{border-color:var(--naranja)}
/* Una fila que el filtro descarta: se oculta de verdad (el atributo [hidden]
lo pisaría el display:flex de .att-row). Sigue en el DOM: es solo vista. */
.att-row.filtrado-fuera{display:none}
.alr-b{padding:4px 9px;border-radius:20px;border:1.5px solid;font-size:11px;font-weight:600;
cursor:pointer;background:#fff;font-family:inherit;white-space:nowrap;transition:all .12s}
.alr-b.b-intenso{border-color:#2f855a;color:#22543d;background:#fff}
.alr-b.b-intenso.sel{background:#2f855a;color:#fff}
.alr-b.b-green{border-color:#48bb78;color:#276749}
.alr-b.b-green.sel{background:#48bb78;color:#fff}
.alr-b.b-yellow{border-color:#ecc94b;color:#975a16}
.alr-b.b-yellow.sel{background:#ecc94b;color:#5b4408}
.alr-b.b-orange{border-color:#b7791f;color:#975a16}
.alr-b.b-orange.sel{background:#b7791f;color:#fff}
.alr-b.b-red{border-color:#f56565;color:#c53030}
.alr-b.b-red.sel{background:#f56565;color:#fff}
.alr-com{width:100%;max-width:520px;padding:4px 7px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;
font-family:inherit;outline:none}
.alr-com:focus{border-color:var(--naranja)}
/* El minimapa de valoraciones anteriores, al lado del nombre. Lo que
vale es la trayectoria —tres unidades seguidas empeorando dicen mucho
más que un amarillo suelto—, y por eso cabe aquí y no en una columna.
Cada cuadrito lleva su `title` con el nombre del nivel: marrón
«Seguimiento» y rojo «Riesgo» no se distinguen solo por el color. */
.al-serie{display:inline-flex;gap:2px;vertical-align:middle;margin-left:5px}
.al-serie i{width:7px;height:14px;border-radius:2px;display:inline-block;background:#cbd5e0}
.al-serie i.b-intenso{background:#2f855a}
.al-serie i.b-green{background:#48bb78}
.al-serie i.b-yellow{background:#ecc94b}
.al-serie i.b-orange{background:#b7791f}
.al-serie i.b-red{background:#f56565}
/* Los cuatro estados, como botones. Cada uno se distingue por su LETRA y
por su color, no solo por el color: la inicial se lee igual sin
distinguir verde de rojo. El elegido se marca además con un borde, que
es la tercera señal. */
.segs{display:inline-flex;gap:3px}
.seg-b{width:28px;height:28px;border:1px solid transparent;border-radius:6px;cursor:pointer;
font:inherit;font-size:12px;font-weight:700;opacity:.4;transition:opacity .12s,box-shadow .12s}
.seg-b:hover{opacity:.75}
.seg-b.on{opacity:1;box-shadow:inset 0 0 0 2px currentColor}
/* La fila de una persona se abre: hay que verlo antes de pulsarla */
tr.abrible{cursor:pointer}
tr.abrible:hover td{background:#fafaf9}
/* Avance: el modal de unidad por unidad (26 y 27/09/2026) */
.av-det-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.av-unidades{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.av-u{display:grid;grid-template-columns:2.2em 1fr auto 6.5em;gap:8px;align-items:center;font-size:13.5px;padding:3px 0;border-bottom:1px solid #edf2f7}
.av-u-n{color:var(--muted);text-align:right}
.av-u-f{text-align:right}
.av-antes,.av-despues{opacity:.65}
.av-alerta{margin:0 0 10px;padding:8px 12px;border-radius:8px;border:1px solid #feb2b2;background:#fff5f5;color:#9b2c2c;font-size:13.5px}
@media(max-width:640px){.av-u{grid-template-columns:2em 1fr;}.av-u-e,.av-u-f{grid-column:2;text-align:left}}
/* ─── AVISOS ───────────────────────────────────────────────────── */
/* Misma píldora que el indicador de carga del sistema actual. */
#toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:7px}
.toast{padding:11px 16px;border-radius:8px;font-size:13px;font-weight:500;
box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:200px;max-width:min(380px,90vw);
animation:tIn .2s ease,tOut .3s ease 2.7s forwards}
.t-ok{background:#276749;color:#fff}.t-err{background:#c53030;color:#fff}.t-info{background:#2b6cb0;color:#fff}
@keyframes tIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes tOut{to{transform:translateX(110%);opacity:0}}
/* Indicador de carga global: barra superior + píldora centrada, por
encima de todo (incluidos los modales). No bloquea: solo informa. */
#spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--naranja);
border-radius:50%;animation:spin .7s linear infinite;display:none;margin-left:4px;flex-shrink:0}
#spinner.on{display:block}
#cargando{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;display:none;
overflow:hidden;background:rgba(0,0,0,.06)}
#cargando.on{display:block}
#cargando::after{content:'';position:absolute;top:0;left:0;height:100%;width:35%;
background:var(--naranja);border-radius:0 3px 3px 0;animation:cargaBarra 1.1s ease-in-out infinite}
@keyframes cargaBarra{0%{left:-35%}100%{left:100%}}
#cargando-pill{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:10001;
background:rgba(26,32,44,.94);color:#fff;padding:8px 18px;border-radius:99px;font-size:12.5px;
font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.22);display:none;align-items:center;gap:9px;
opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
#cargando-pill.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
#cargando-pill i{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
border-radius:50%;animation:spin .7s linear infinite;display:block}
/* ─── Filtros de Interesados ───────────────────────────────────── */
/* Los ejes van en píldoras etiquetadas y no sueltos en la fila: sin la
etiqueta no se ve que «🔔 Seguimiento» y «🕰 Último contacto» son dos
preguntas distintas —el próximo contacto y el anterior—. */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.drpill{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;
padding:7px 10px 7px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f9fafb}
.filtros .drpill{margin:0}
.drpill-lbl{font-size:12px;font-weight:600;color:#4a5568;white-space:nowrap}
.drpill-sep{font-size:12px;color:#718096;white-space:nowrap}
.drpill select,.drpill input[type=date]{padding:6px 10px;border:1px solid #e2e8f0;
border-radius:6px;font-size:12px;background:#fff;outline:none;font-family:inherit;color:var(--txt)}
.drpill select:focus,.drpill input[type=date]:focus{border-color:var(--naranja)}
/* La barra de selección múltiple del listado de Personas. Solo se ve
con filas marcadas: una barra siempre presente y casi siempre inútil
roba sitio a la tabla, que es lo que se viene a mirar. */
.bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;
padding:8px 12px;border:1px solid #f6e05e;border-radius:8px;background:#fffaf0}
.bulk select{padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;
background:#fff;outline:none;font-family:inherit;color:var(--txt);max-width:260px}
.bulk select:focus{border-color:var(--naranja)}
.seg{display:inline-flex;border:1px solid #e2e8f0;border-radius:999px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:12px;color:#4a5568;
cursor:pointer;white-space:nowrap;font-family:inherit}
.seg button+button{border-left:1px solid #e2e8f0}
.seg button:hover:not(.on){background:#f7fafc}
.seg button.on{background:#fffaf0;color:#1a202c;font-weight:600}
/* El contador va en el propio botón: un filtro que dice «0» antes de
pulsarlo ahorra el clic. */
.seg-n,.seg .n{color:#718096;font-weight:400;font-variant-numeric:tabular-nums}
.seg button.on .seg-n,.seg button.on .n{color:#4a5568}
/* ─── La cabecera de «pasar lista» ─────────────────────────────── */
/* Un campo de fecha, que trae su rótulo ENCIMA, junto a unos botones que
no lo traen. Centrados —que es lo que hace `.search-row`—, los botones
se quedaban a media altura del campo y nada quedaba a ras de nada. Y en
iPadOS se llegaban a montar: Safari le da al `` su
propio tamaño intrínseco, que con `min-width:180px` heredado de
`.search-row input` y un contenedor que no podía encoger se salía por
encima de los botones. Aquí se alinean por abajo, comparten altura y el
campo puede encogerse. */
.lista-cab{align-items:flex-end;gap:10px 12px}
.lista-cab .fld{flex:0 1 auto;min-width:0}
.lista-cab input[type=date]{-webkit-appearance:none;appearance:none;
flex:0 1 auto;width:100%;min-width:0;max-width:12rem;height:34px;
padding:0 10px;line-height:normal;background:#fff}
.lista-cab .seg{flex:0 0 auto;height:34px;align-items:stretch}
.lista-cab .seg button{display:flex;align-items:center;padding:0 14px}
/* La pista va a ras del texto de los botones, no del borde de la fila. */
.lista-cab #lista-hint{padding-bottom:9px}
/* Estrecho, la pista baja a su propia línea en vez de partirse en
palabras sueltas contra el borde. */
@media(max-width:560px){
.lista-cab #lista-hint{flex:1 0 100%;margin-left:0;padding-bottom:0}
}
/* ─── Pestañas del informe ─────────────────────────────────────── */
/* Las pestañas del sistema actual NO son una barra subrayada: son
botones, el elegido en naranja y el resto en gris. Se ven así en
Informe, en Asistencia y en Configuración, y cambiarlo aquí por una
barra hacía que las tres pantallas se leyeran distinto. */
.pestanas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.pestanas button{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;
border:none;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;
background:#e2e8f0;color:#4a5568;transition:background .15s,color .15s,transform .12s ease-out}
.pestanas button:hover{background:#cbd5e0}
.pestanas button:active{transform:scale(.97)}
.pestanas button[aria-selected="true"]{background:var(--naranja);color:#fff}
.pestanas button[aria-selected="true"]:hover{background:#d97e00}
/* El porcentaje acompaña al absoluto, nunca lo sustituye: «3 (50%)» sobre
6 leads dice algo muy distinto que sobre 600, y solo el número entero
lo distingue. */
.pct{font-size:11px;color:#718096;font-weight:400}
/* ─── Gráfico de avance de los grupos ──────────────────────────── */
/* La columna de la etiqueta creció de 170 a 215 px al pasar la fecha a la
línea del curso: con 170 se cortaba justo por el año —«19/01/20…»—, que
es la mitad del dato. La pista pierde esos píxeles y no los echa de
menos: lo que se lee ahí es el porcentaje, no la longitud exacta. */
.gbar-row{display:grid;grid-template-columns:215px 1fr 110px;align-items:center;gap:12px;
padding:7px 0;border-bottom:1px solid #f7f5f0}
.gbar-row:last-child{border-bottom:none}
.gbar-lbl{display:flex;flex-direction:column;min-width:0}
.gbar-lbl strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Solo los spans DIRECTOS (curso · instructor, fecha de inicio): el
selector descendiente alcanzaba también al badge .gbar-tipo del
y le ganaba en especificidad, pintándole las letras en gris. */
.gbar-lbl>span{font-size:11px;color:#718096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbar-track{height:10px;background:#edf2f7;border-radius:4px;position:relative}
.gbar-fill{height:100%;background:var(--verde-medio);border-radius:0 4px 4px 0}
/* FPV (curso de entrada) e ISO (segundo nivel) se distinguen por color de
barra Y por etiqueta: nunca solo por color. */
.gbar-fill.iso{background:var(--azul)}
.gbar-tipo{font-size:10px;font-weight:700;letter-spacing:.3px;padding:1px 5px;border-radius:4px;
background:var(--verde-medio);color:#fff;margin-left:6px;vertical-align:1px}
.gbar-tipo.iso{background:var(--azul)}
.gbar-leyenda .gbar-tipo{margin-left:0}
/* Hitos de examen: rombo hueco = pendiente, relleno = impartido (la
distinción es por RELLENO, no solo por color). El `box-shadow` blanco
no es decorativo: es lo que separa el rombo de la barra y de los
rombos vecinos cuando dos exámenes caen juntos. */
.gbar-hito{position:absolute;top:50%;width:9px;height:9px;
transform:translate(-50%,-50%) rotate(45deg);background:#fff;border:2px solid #a0aec0;
border-radius:2px;box-shadow:0 0 0 2px #fff;cursor:help}
.gbar-hito.hecho{background:var(--verde-oscuro);border-color:var(--verde-oscuro)}
.gbar-leyenda{display:flex;align-items:center;gap:8px;font-size:11px;color:#718096;
margin-top:10px;padding-top:8px;border-top:1px solid #f7f5f0}
.gbar-hito-muestra{position:static;transform:rotate(45deg);flex-shrink:0;box-shadow:none;cursor:default}
.gbar-val{font-size:12px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.gbar-val span{color:#718096}
/* En el móvil no cabe la fecha al lado del curso: la etiqueta se apila en
tres líneas y cada una se corta por donde toca. */
@media(max-width:640px){.gbar-row{grid-template-columns:128px 1fr 76px;gap:8px}}
/* Minimapa de la serie de alertas: la trayectoria de un vistazo. Cada
marca lleva su `title` con la unidad, el nivel y la fecha, porque el
color solo no basta para leerlo. Las medidas son las del sistema
actual: marcas verticales, no puntos. */
.alr-tick{display:inline-block}
/* ─── El QR del formulario ─────────────────────────────────────── */
/* El código se dibuja en un SVG inline (ver el objeto QR de app.js), así
que lo único que hace falta es sitio y un fondo blanco: un QR sobre
color no lo lee ningún móvil. */
.qr-caja{display:flex;justify-content:center;background:#fff;border:1px solid var(--border);
border-radius:var(--r);padding:14px;margin:6px 0 12px}
.qr-caja svg{display:block;max-width:100%;height:auto}
/* ─── BUSCADOR GLOBAL DE PERSONAS ──────────────────────────────── */
/* Estaba en la cabecera del sistema actual y aquí no existía. Es el
atajo que más se usa —Ctrl+K, escribir dos letras y abrir la ficha—,
y sin él hay que ir a Personas y filtrar. Su aspecto y su sitio en la
cabecera los pone el marco común (`.gsearch`, desde el 30/09/2026). */
/* Las bajas del listado de clase: plegadas, y cuando se abren se ven
apagadas — su asistencia se consulta, no se cambia. */
.lista-vbajas{margin-top:12px}
.lista-bajas{margin-top:10px;padding-top:10px;border-top:1px dashed #e2e8f0}
.lista-bajas .ayuda{margin:0 0 8px}
.att-ro{background:#fafafa;border-style:dashed}
.att-ro .abt,.att-ro input{opacity:.65}
.att-ro .abt:disabled{cursor:default}
/* ─── Los tres números de una clase ────────────────────────────── */
/* Asistieron · faltaron · (sin marcar). Cada uno con SU color y su
palabra: el color solo no vale —verde y rojo no los distingue todo el
mundo— y por eso está la leyenda encima de la lista y el rótulo
emergente en cada número. */
.as-si{color:#2f855a;font-weight:700}
.as-no{color:#c53030;font-weight:700}
.as-falta{color:#b7791f;font-weight:700}
.as-sep{color:#cbd5e0;margin:0 4px}
/* ─── PASAR LISTA: los estados, como en el sistema actual ──────── */
/* Píldoras con el nombre del estado y su color, no cuadraditos con una
inicial: es lo que el instructor ya sabe leer. */
/* TRES RENGLONES por alumno: quién es (con su pago), qué hizo hoy, y cómo
se le ve. Iba todo en una línea que se reordenaba sola —al marcar
«Ausente» aparece la reposición y empujaba los botones de «cómo lo veo»
a otro sitio—, y en una lista que se recorre a golpe de clic los
botones tienen que estar siempre donde se los dejó. */
.att-row{display:flex;flex-direction:column;gap:6px;padding:8px 13px;
border:1px solid #e8e5df;border-radius:8px;background:#fff}
.att-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.att-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:29px}
.att-name{flex:1;font-size:13px;font-weight:500;min-width:140px}
.att-btns{display:flex;gap:4px;flex-wrap:wrap}
.abt{padding:4px 9px;border-radius:20px;border:1.5px solid;font-size:11px;font-weight:600;
cursor:pointer;background:none;font-family:inherit;transition:all .12s}
.abt.p{border-color:#48bb78;color:#276749}.abt.p.sel{background:#48bb78;color:#fff}
.abt.a{border-color:#fc8181;color:#c53030}.abt.a.sel{background:#fc8181;color:#fff}
.abt.t{border-color:#ed8936;color:#975a16}.abt.t.sel{background:#ed8936;color:#fff}
.abt.j{border-color:#63b3ed;color:#2b6cb0}.abt.j.sel{background:#63b3ed;color:#fff}
.att-lbl{font-size:10px;color:#a0aec0;text-transform:uppercase;letter-spacing:.03em}
/* ─── SEMÁFOROS DEL AULA ───────────────────────────────────────── */
/* Mismas piezas que el sistema actual: el badge con su punto de color y
el minimapa de la serie. Lo que vale es la trayectoria, no el último
dato suelto. */
.alr-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;white-space:nowrap}
.alr-dot{width:9px;height:9px;border-radius:50%;flex:none}
.alr-serie{display:inline-flex;gap:2px;align-items:center;margin-left:6px;vertical-align:middle}
.alr-tick{width:7px;height:14px;border-radius:2px;cursor:help}
.alr-b{padding:4px 9px;border-radius:20px;border:1.5px solid;font-size:11px;font-weight:600;
cursor:pointer;background:#fff;font-family:inherit;transition:all .12s;white-space:nowrap}
.alr-b:disabled{cursor:default;opacity:.75}
/* ─── UTILIDADES ───────────────────────────────────────────────── */
/* Las mismas del sistema actual: el título de sección y su botón de
acción comparten fila, y de ahí salen los mismos huecos. */
.flex{display:flex}.items-c{align-items:center}.gap8{gap:8px}.gap12{gap:12px}
.ml-auto{margin-left:auto}
.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.lnk{cursor:pointer}
.lnk:hover{color:var(--naranja);text-decoration:underline}
.btn-danger{background:#c53030;color:#fff}
.btn-danger:hover{background:#9b2c2c}
.form-actions{margin-top:20px;display:flex;gap:8px;justify-content:flex-end;
border-top:1px solid #f0ede8;padding-top:16px}
tr.clickable:hover td{background:#fafaf9;cursor:pointer}
/* Acciones dentro de una tarjeta del panel (las tarjetas, del marco común). */
/* Pendientes: dos colas, cada una con su tabla. `.pend-sec` solo existe
para poder enseñar y esconder una sección entera sin repintarla. Los
botones del filtro son los mismos que en el sistema actual —el activo
en naranja— y no el segmentado de los listados: allí el segmentado
filtra filas de UNA tabla, y aquí lo que se conmuta son tablas. */
.pend-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pend-sec[hidden]{display:none}
.pend-sec+.pend-sec{margin-top:12px}
/* ⚠️ **La separación entre bloques sale SOLO de aquí**, y conviene saber
por qué: `.kpi-cat` abre 20px por arriba, pero
`.kpi-cat:first-child{margin-top:0}` se los quita — y ese epígrafe es
el primer hijo de SU div en los cinco bloques, no solo en el de arriba
del todo. Así que un bloque sin `margin-bottom` queda literalmente
pegado al siguiente. Pasó dos veces: la última tabla de pendientes
contra «Actividad académica», y «Qué toca hacer» contra «Pendientes de
seguimiento» el 23/09/2026, que nació sin su cierre.
Un bloque nuevo en el panel tiene que entrar en esta lista. */
#tareas,#pendientes,#academico{margin-bottom:22px}
/* Los botones de cada tarjeta: llevar a la lista, incorporar a alguien a
esa etapa y sacarlo. Mismas medidas y mismos colores que en el sistema
actual — es la pantalla que el equipo se sabe de memoria. */
/* LOS TRES EN UNA LÍNEA. Iban con `flex-wrap`, así que caían dos arriba y
uno debajo, centrado: la tarjeta parecía desbordada, no compuesta. Ahora
se reparten el ancho a partes iguales (`flex:1 1 0`) y se encogen juntos;
el `text-overflow` es la red por si algún día un rótulo crece — hoy el
más largo, «⬆ Promover», entra con holgura. */
.kpi-acts{display:flex;flex-wrap:nowrap;gap:5px;margin-top:8px;justify-content:center}
/* Cada botón con SU ancho (`flex:0 1 auto`), no repartiéndose la fila a
partes iguales: estirados a tres anchos idénticos, «Promover» se comía
su propia palabra mientras a «Baja» le sobraba sitio. Encogen solo si
algún día no cupieran. */
.kpi-act{flex:0 1 auto;min-width:0;text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:10.5px;padding:3px 7px;border:1px solid #e2e8f0;border-radius:6px;
background:#fff;cursor:pointer;color:#4a5568;font-family:inherit;line-height:1.4}
.kpi-act:hover{border-color:var(--naranja);color:var(--naranja)}
.kpi-act:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
/* En el móvil las tarjetas van de dos en dos y la fila se queda a unos 18
px de que quepan los tres rótulos enteros. Se recortan los rellenos —los
de la tarjeta y los del botón— en vez de recortar las palabras. */
@media(max-width:640px){
.kpi-acts{gap:4px}
.kpi-act{padding:3px 5px}
}
/* El modal de elegir a quién: la lista es lo único que crece, y crece
dentro y no estirando el modal fuera de la pantalla. */
.eleg-cuerpo{max-height:52vh;overflow-y:auto;margin-top:4px}
/* Los dos enlaces de la encuesta abierta, uno por tanda. Lado a lado en
pantalla ancha y apilados en el móvil: se miran para compararlos, no
para leerlos por separado. */
.ea-tandas{display:flex;gap:16px;flex-wrap:wrap}
.ea-tanda{flex:1 1 260px;border:1px solid #e2e8f0;border-radius:10px;padding:14px;background:#fff}
.ea-tanda h3{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ea-qr{display:flex;justify-content:center;margin-bottom:10px;min-height:170px}
.ea-url{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:8px;background:#f7fafc}
.eleg-cuerpo tr.abrible{cursor:pointer}
/* Accesibilidad: menos movimiento — conserva opacidad, quita
desplazamientos y escalas. Igual que en el sistema actual. */
@media(prefers-reduced-motion:reduce){
.btn:active{transform:none}
.toast{animation:none}
}
/* ─── DESPLEGABLES CON BUSCADOR ────────────────────────────────── */
/* En el sistema actual **todos** los `