/*
 * CRM Elizalde · hoja de estilos única.
 * Marca Academia Elizalde (registro de documentos funcionales: claro y legible): azul #42589B dominante, verde #8CBF46
 * solo como acento, «Ink» #171F36 para la barra lateral. Tipografías del Panel (Familjen Grotesk + Bodoni Moda).
 * Pensada para pantallas grandes: carcasa a pantalla completa, contenido a todo el ancho, rejillas que crecen.
 * Sin estilos en línea en el HTML (la CSP los prohíbe): todo vive aquí.
 */

@font-face { font-family: "Familjen Grotesk"; src: url(fuentes/familjen-grotesk.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(fuentes/bodoni-moda.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }

/* ---------- 1. Tokens ---------- */
:root {
  --azul: #42589B; --azul-hover: #35477C; --azul-suave: #E9EDF8; --azul-medio: #8B9BD4;
  --verde: #8CBF46; --verde-oscuro: #45701C; --verde-suave: #EEF5E4;
  --ink: #171F36; --ink-2: #232C4D; --ink-texto: #C6CCE0; --ink-suave: #8A93AE;
  --papel: #F4F5F9; --tarjeta: #FFFFFF; --hueso: #EEF0F5; --borde: #E1E5EE; --borde-fuerte: #CBD1DE;
  --ink-titulo: #171F36; --texto: #2B2B2B; --suave: #5E6680;
  --ok: #2E6B1E; --ok-suave: #E7F3E2; --aviso: #8A5210; --aviso-suave: #FBF1E4; --error: #B3402F; --error-suave: #F8E8E5;
  --radio: 12px; --radio-p: 8px;
  --sombra: 0 1px 2px rgba(23, 31, 54, .05), 0 2px 8px rgba(23, 31, 54, .04);
  --sombra-alta: 0 8px 28px rgba(23, 31, 54, .10);
  --lateral: 264px;
  --hueco: clamp(1rem, 1.6vw, 2.25rem);
  --letra: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-titulo: "Bodoni Moda", Georgia, serif;
  /* Series de gráficas (validadas con dataviz: CVD ΔE 28,5 y contraste ≥ 3:1, en claro y en oscuro) */
  --serie-1: #42589B; --serie-2: #6E9E33;
  /* Movimiento */
  --curva: cubic-bezier(.2, .8, .2, 1); --curva-salto: cubic-bezier(.34, 1.4, .64, 1);
  --rapido: 160ms; --medio: 320ms; --lento: 700ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --azul: #8FA2E0; --azul-hover: #AAB9EA; --azul-suave: #1F2740; --azul-medio: #5C6FB0;
    --verde-oscuro: #A6D46A; --verde-suave: #22301A;
    --ink: #0E1322; --ink-2: #1A2136;
    --papel: #11141C; --tarjeta: #181C27; --hueso: #1F2433; --borde: #2A3043; --borde-fuerte: #3A4157;
    --ink-titulo: #EEF0F6; --texto: #D8DCE6; --suave: #9AA2B8;
    --ok: #79C26A; --ok-suave: #1B2E1A; --aviso: #E6A85A; --aviso-suave: #33281A; --error: #EE8A7A; --error-suave: #3A201C;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3); --sombra-alta: 0 8px 28px rgba(0, 0, 0, .45);
    --serie-1: #6680D9; --serie-2: #6FA232;
    color-scheme: dark;
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(15px, .3vw + 11px, 17px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 1rem/1.55 var(--letra); }
a { color: var(--azul); text-underline-offset: 2px; }
a:hover { color: var(--azul-hover); }
h1, h2, h3 { color: var(--ink-titulo); line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-family: var(--letra-titulo); font-weight: 500; font-size: clamp(1.7rem, 1.1vw + 1.1rem, 2.4rem); letter-spacing: -.01em; }
h1 small { font-family: var(--letra); font-size: .55em; color: var(--suave); font-weight: 400; letter-spacing: 0; margin-left: .35rem; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--azul-suave); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: .5rem; top: -3rem; z-index: 50; background: var(--azul); color: #fff; padding: .5rem .9rem; border-radius: var(--radio-p); }
.saltar:focus { top: .5rem; color: #fff; }
.icono { width: 1.2rem; height: 1.2rem; flex: none; }

/* ---------- 3. Avisos de entorno ---------- */
.aviso-pruebas { background: var(--aviso-suave); color: var(--aviso); text-align: center; font-size: .8rem; font-weight: 600; padding: .3rem 1rem; letter-spacing: .02em; }
.banda-modulo { background: var(--error); color: #fff; text-align: center; font-weight: 700; letter-spacing: .08em; padding: .35rem 1rem; font-size: .8rem; }

/* ---------- 4. Carcasa (con sesión) ---------- */
.carcasa { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--ink); color: var(--ink-texto); display: flex; flex-direction: column; padding: 1.1rem .8rem; }
.lateral .marca { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-family: var(--letra-titulo); font-size: 1.25rem; padding: .25rem .6rem 1.1rem; }
.lateral .marca img { width: 30px; height: auto; }
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-grupo { margin: 1.1rem .7rem .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-suave); }
.menu a { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: var(--radio-p); color: var(--ink-texto); text-decoration: none; position: relative; font-size: .95rem; }
.menu a:hover { background: var(--ink-2); color: #fff; }
.menu a[aria-current="page"] { background: var(--azul); color: #fff; }
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: -.8rem; top: .45rem; bottom: .45rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--verde); }
.lateral-pie { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--ink-2); padding: .9rem .4rem 0; margin-top: 1rem; }
.avatar { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 600; font-size: .85rem; }
.persona { display: grid; min-width: 0; line-height: 1.25; }
.persona strong { color: #fff; font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona small { color: var(--ink-suave); font-size: .75rem; }
.salir { margin: 0 0 0 auto; }
.salir button { display: flex; align-items: center; gap: .3rem; background: none; border: 1px solid var(--ink-2); color: var(--ink-texto); padding: .4rem .55rem; border-radius: var(--radio-p); cursor: pointer; font: inherit; font-size: .8rem; }
.salir button:hover { background: var(--ink-2); color: #fff; }
.salir button span { display: none; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: .7rem var(--hueco); background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.buscador { position: relative; flex: 1; max-width: 44rem; }
.buscador input { width: 100%; padding: .6rem 2.6rem .6rem 2.5rem; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); font: inherit; color: var(--texto); }
.buscador input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-suave); }
.buscador-icono { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.atajo { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font: .75rem var(--letra); color: var(--suave); border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: 0 .35rem; }
.contenido { padding: var(--hueco); width: 100%; outline: none; }

/* ---------- 5. Sin sesión (entrar) ---------- */
.sin-sesion { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 15% 10%, var(--azul-suave), transparent 45%), var(--papel); }
.contenido-simple { flex: 1; display: grid; place-content: center; padding: 2rem 1rem; }
.marca-simple { display: flex; align-items: center; justify-content: center; gap: .7rem; font-family: var(--letra-titulo); font-size: 1.6rem; color: var(--ink-titulo); margin-bottom: 1rem; }
.entrar { width: min(30rem, 92vw); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 2rem; box-shadow: var(--sombra-alta); }
.dev { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--borde-fuerte); font-size: .9rem; }
.dev h2 { font-size: .9rem; color: var(--aviso); }

/* ---------- 6. Piezas comunes ---------- */
.titulo-con-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.titulo-con-acciones h1, .titulo-con-acciones h2 { margin: 0; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.miga { margin: 0 0 .3rem; font-size: .85rem; color: var(--suave); }
.miga a { color: var(--suave); }
.ayuda { color: var(--suave); font-size: .88rem; }
.vacio { color: var(--suave); }
.nota { background: var(--azul-suave); color: var(--texto); padding: .6rem .9rem; border-radius: var(--radio-p); border: 1px solid color-mix(in srgb, var(--azul) 35%, transparent); }
.error { background: var(--error-suave); color: var(--error); padding: .6rem .9rem; border-radius: var(--radio-p); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); }
.error ul, .aviso ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.error p { margin: 0; }
.aviso { background: var(--aviso-suave); color: var(--texto); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent); padding: .6rem .9rem; border-radius: var(--radio-p); margin: .75rem 0; }
.aviso-texto { color: var(--aviso); }
.aviso-imagen { display: inline-flex; align-items: center; gap: .4rem; background: var(--error-suave); color: var(--error); font-weight: 600; padding: .4rem .8rem; border-radius: 999px; font-size: .9rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); }
.tarjeta h2 { margin-bottom: .5rem; }
.tarjeta.con-atraso { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borde)); background: color-mix(in srgb, var(--aviso-suave) 55%, var(--tarjeta)); }
.tarjeta h3 { margin: 0 0 .25rem; }
.tarjeta h3 small { color: var(--suave); font-weight: 400; }
.tarjeta p { margin: .2rem 0; }
.bloque { margin-top: 1.75rem; }
.bloque > h2:first-child, .bloque .titulo-con-acciones h2 { font-size: 1.1rem; }
.bloque.peligro { border-top: 1px solid color-mix(in srgb, var(--error) 30%, transparent); padding-top: 1rem; }
.separado { margin-top: 1rem; }
.atenuada, .tarjeta.inactivo { opacity: .55; }
.insignia { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: var(--verde); color: #1E2A0E; border-radius: 999px; padding: .1rem .55rem; }
.marca-menor, .marca-imagen, .estado { display: inline-block; vertical-align: middle; font-family: var(--letra); font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .12rem .55rem; margin-left: .3rem; white-space: nowrap; }
.marca-menor { color: var(--aviso); background: var(--aviso-suave); }
.marca-imagen { color: var(--error); background: var(--error-suave); }
.estado { background: var(--hueso); color: var(--suave); margin-left: 0; }
.estado-firmada, .estado-pendiente { background: var(--azul-suave); color: var(--azul); }
.estado-aceptada { background: var(--ok-suave); color: var(--ok); }
.estado-rechazada, .estado-anulada { background: var(--error-suave); color: var(--error); }
.estado-ms { background: var(--azul-suave); color: var(--azul); }
.estado-envio-recibida { background: var(--ok-suave); color: var(--ok); }
.estado-envio-rechazada { background: var(--error-suave); color: var(--error); }
.estado-envio-reintentar, .estado-envio-enviando { background: var(--aviso-suave); color: var(--aviso); }
details > summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: .3rem 0; }
details[open] > summary { margin-bottom: .6rem; }
.historial { margin-top: .75rem; font-size: .9rem; color: var(--suave); }

/* Datos clave–valor */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; margin: 0; box-shadow: var(--sombra); }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }
.datos .datos { box-shadow: none; padding: .5rem .75rem; }
.datos.compacta { border: 0; box-shadow: none; background: none; padding: 0; }

/* Listas */
.lista-simple { list-style: none; padding: 0; margin: .5rem 0; }
.lista-simple li { padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }
.fila-accion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lista-enlaces { list-style: none; margin: 0; padding: 0; }
.lista-enlaces li { display: flex; align-items: baseline; gap: .4rem; padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.lista-enlaces li:last-child { border-bottom: 0; }
.lista-enlaces .ayuda { margin-left: auto; }

/* ---------- 7. Botones y formularios ---------- */
button, .boton { font: inherit; cursor: pointer; border-radius: var(--radio-p); padding: .5rem 1rem; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto); display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; line-height: 1.3; transition: background-color .12s, border-color .12s; }
button:hover { background: var(--hueso); }
.boton { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.boton:hover { background: var(--azul-hover); border-color: var(--azul-hover); color: #fff; }
.boton.secundario { background: var(--tarjeta); color: var(--azul); border-color: var(--azul-medio); }
.boton.secundario:hover { background: var(--azul-suave); }
.boton.peligro { background: var(--error); border-color: var(--error); }
.boton.desactivado, button:disabled { opacity: .55; cursor: not-allowed; }
.boton .icono { width: 1rem; height: 1rem; }
.enviando { cursor: progress; }
.formulario { display: grid; gap: .9rem; max-width: 34rem; }
.formulario.ancho { max-width: 64rem; }
.formulario.en-linea, form.en-linea { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .8rem; max-width: none; margin: 0; }
.filtros { margin: .25rem 0 .5rem; padding: .8rem 1rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
label { display: grid; gap: .25rem; font-size: .88rem; color: var(--suave); }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .4rem; color: var(--texto); }
.campo { display: grid; gap: .25rem; min-width: 0; }
.campo label { display: block; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--tarjeta); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-p); padding: .5rem .65rem; min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-suave); }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--azul); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--error); }
.error-campo { color: var(--error); font-size: .82rem; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.25rem 1.2rem; margin: 0; display: grid; gap: .9rem; background: var(--tarjeta); box-shadow: var(--sombra); }
legend { font-weight: 600; color: var(--ink-titulo); padding: 0 .4rem; }
legend small { font-weight: 400; color: var(--suave); }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; }
.confirmar { display: flex; gap: .5rem; align-items: center; background: var(--aviso-suave); color: var(--aviso); padding: .55rem .85rem; border-radius: var(--radio-p); font-weight: 600; }
table.lineas input { width: 100%; }

/* ---------- 8. Tablas ---------- */
.tabla { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); margin: .75rem 0; box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { text-align: left; font-weight: 600; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); background: var(--hueso); padding: .65rem .9rem; white-space: nowrap; }
td { padding: .6rem .9rem; border-top: 1px solid var(--borde); vertical-align: middle; }
tbody tr:hover td { background: color-mix(in srgb, var(--azul-suave) 45%, transparent); }
tfoot th { text-transform: none; font-size: .95rem; color: var(--ink-titulo); background: var(--hueso); }
.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 9. Rejillas ---------- */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; margin: 1rem 0; }
.rejilla-tarjetas .tarjeta h2 { margin: 0 0 .25rem; font-size: 1.12rem; }
.rejilla-tarjetas .tarjeta h2 a { color: var(--ink-titulo); text-decoration: none; }
.rejilla-tarjetas .tarjeta h2 a:hover { color: var(--azul); text-decoration: underline; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.columnas-principal { grid-template-columns: minmax(0, 2.2fr) minmax(18rem, 1fr); }
.columnas-principal > aside { position: sticky; top: 4.5rem; }
.ficha-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.ficha-rejilla > .bloque { margin-top: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); min-width: 0; }
.ficha-rejilla > .bloque > h2:first-child, .ficha-rejilla > .bloque > .titulo-con-acciones { padding-bottom: .55rem; margin-bottom: .75rem; border-bottom: 1px solid var(--borde); }
.ficha-rejilla .datos { border: 0; box-shadow: none; padding: 0; background: none; }
.ficha-rejilla .tarjeta { box-shadow: none; background: var(--hueso); border-color: transparent; }
.ficha-rejilla .formulario { max-width: none; }
.resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 1rem; }
.lista-resultados { list-style: none; margin: 0; padding: 0; }
.lista-resultados a { display: grid; padding: .5rem .25rem; border-bottom: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.lista-resultados a:hover { background: var(--azul-suave); }
.lista-resultados span { font-size: .85rem; color: var(--suave); }

/* ---------- 10. Portada ---------- */
.portada-cabecera { margin-bottom: 1.25rem; }
.portada-cabecera .fecha { margin: 0; color: var(--suave); font-size: .9rem; }
.panel-portada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1.1rem; align-items: stretch; }
@media (min-width: 2300px) { .panel-portada { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.recuadro { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); min-width: 0; }
.recuadro h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: .8rem; }
.alto-2 { grid-row: span 2; } .alto-3 { grid-row: span 3; } .alto-4 { grid-row: span 4; }
.recuadro.alto-2, .recuadro.alto-3, .recuadro.alto-4 { align-self: stretch; display: flex; flex-direction: column; }
.recuadro .agenda { max-height: 34rem; overflow-y: auto; padding-right: .25rem; }
.ancho-1 { grid-column: span 1; } .ancho-2 { grid-column: span 2; } .ancho-3 { grid-column: span 3; } .ancho-4 { grid-column: span 4; }
.pie-recuadro { margin: .85rem 0 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.cifra-caja { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: var(--radio-p); background: var(--hueso); color: var(--texto); text-decoration: none; }
a.cifra-caja:hover { background: var(--azul-suave); color: var(--texto); }
.cifra { white-space: nowrap; font-family: var(--letra-titulo); font-size: clamp(1.4rem, .8vw + 1rem, 2rem); line-height: 1.05; color: var(--ink-titulo); font-variant-numeric: tabular-nums; }
.cifra-texto { font-size: .85rem; color: var(--suave); }
.cifra-caja.tono-aviso { background: var(--aviso-suave); }
.cifra-caja.tono-aviso .cifra { color: var(--aviso); }
.cifra-caja.tono-ok .cifra { color: var(--ok); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.agenda li { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: .75rem; padding: .5rem .7rem; border-radius: var(--radio-p); background: var(--hueso); border: 1px solid color-mix(in srgb, var(--area, var(--azul)) 40%, transparent); }
.agenda li.pasada { opacity: .5; }
.agenda li.ahora { background: color-mix(in srgb, var(--verde) 16%, var(--tarjeta)); }
.agenda-hora { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-hora small { font-weight: 400; color: var(--suave); }
.agenda a { display: grid; text-decoration: none; color: var(--texto); min-width: 0; }
.agenda a strong { color: var(--ink-titulo); }
.agenda a span { font-size: .85rem; color: var(--suave); }

/* ---------- 11. Cursos ---------- */
.area-universidad { --area: #42589B; } .area-escolar { --area: #45701C; } .area-diseno { --area: #B8741F; } .area-otros { --area: #6B7390; }
@media (prefers-color-scheme: dark) { .area-universidad { --area: #8FA2E0; } .area-escolar { --area: #8CBF46; } .area-diseno { --area: #E6A85A; } }
.etiqueta-area { margin: 0 0 .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--area, var(--suave)); }
.tarjeta.grupo { border-top: 4px solid var(--area, var(--borde)); display: grid; gap: .15rem; }
.tarjeta.grupo .codigo { color: var(--suave); font-size: .88rem; }
.plazas { display: grid; gap: .3rem; min-width: 12rem; margin-top: .5rem; }
.plazas-texto { font-size: .85rem; color: var(--suave); }
.plazas meter { width: 100%; height: .55rem; }
.plazas.llena .plazas-texto, .plazas.excedida .plazas-texto { color: var(--aviso); }
.semana { display: grid; grid-template-columns: 4.5rem repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(1.8rem, auto); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-top: 1rem; box-shadow: var(--sombra); }
.semana[data-dias="6"] { grid-template-columns: 4.5rem repeat(6, minmax(0, 1fr)); }
.semana[data-dias="7"] { grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr)); }
.semana > * { background: var(--tarjeta); }
.semana-esquina, .semana-dia { grid-row: 1; font-weight: 600; text-align: center; padding: .45rem; background: var(--hueso); position: sticky; top: 0; }
.semana-esquina { grid-column: 1; }
.semana-dia.hoy { background: var(--azul); color: #fff; }
.semana-dia.hoy small { font-weight: 400; opacity: .85; }
.semana-hora { grid-column: 1; font-size: .75rem; color: var(--suave); text-align: right; padding: 0 .45rem; }
.semana-clase { margin: 2px; border-radius: 6px; padding: .3rem .5rem; font-size: .82rem; line-height: 1.25; text-decoration: none; color: var(--texto);
  background: color-mix(in srgb, var(--area, var(--azul)) 13%, var(--tarjeta)); border: 1px solid color-mix(in srgb, var(--area, var(--azul)) 45%, transparent); overflow: hidden; display: flex; flex-direction: column; z-index: 1; }
.semana-clase:hover { background: color-mix(in srgb, var(--area, var(--azul)) 24%, var(--tarjeta)); color: var(--texto); }
.semana-clase strong { color: var(--ink-titulo); }
.semana-clase span { color: var(--suave); }
.semana-clase.carriles-2 { width: calc(50% - 4px); } .semana-clase.carriles-3 { width: calc(33.33% - 4px); } .semana-clase.carriles-4 { width: calc(25% - 4px); }
.semana-clase.carriles-2.carril-2 { margin-left: 50%; } .semana-clase.carriles-3.carril-2 { margin-left: 33.33%; } .semana-clase.carriles-3.carril-3 { margin-left: 66.66%; }
.semana-clase.carriles-4.carril-2 { margin-left: 25%; } .semana-clase.carriles-4.carril-3 { margin-left: 50%; } .semana-clase.carriles-4.carril-4 { margin-left: 75%; }
.lista-alumnos { columns: 2; font-size: 1.05rem; }

/* ---------- 12. TicketBAI ---------- */
.documento-factura { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.75rem; box-shadow: var(--sombra); }
.cabecera-factura { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.marca-agua { margin: 0 0 1rem; text-align: center; font-weight: 700; color: var(--error); letter-spacing: .1em; font-size: .78rem; }
.identificador { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; word-break: break-all; }
img.qr { display: block; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--borde); }
.pie-factura { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }

/* ---------- Asistencia ---------- */
.segmentado { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 2px; gap: 2px; background: var(--hueso); box-shadow: none; margin: 0; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado label { display: block; cursor: pointer; padding: .35rem .85rem; border-radius: 999px; color: var(--suave); font-size: .85rem; font-weight: 600; user-select: none; }
.segmentado label:hover { background: var(--tarjeta); color: var(--texto); }
.segmentado input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 1px; }
.segmentado input:checked + .op-presente { background: var(--ok-suave); color: var(--ok); }
.segmentado input:checked + .op-falta { background: var(--error); color: #fff; }
.segmentado input:checked + .op-justificada { background: var(--azul-suave); color: var(--azul); }
.segmentado input:checked + .op-retraso { background: var(--aviso-suave); color: var(--aviso); }
.segmentado input:disabled + label { cursor: default; }
.resumen-lista { font-size: .88rem; color: var(--suave); }
.centrado { text-align: center; }
.cuadricula-asistencia td, .cuadricula-asistencia th { padding: .45rem .5rem; }
.celda-presente { color: var(--ok); } .celda-falta { background: var(--error-suave); color: var(--error); font-weight: 700; }
.celda-justificada { color: var(--azul); font-weight: 600; } .celda-retraso { color: var(--aviso); font-weight: 600; } .celda-nada { color: var(--borde-fuerte); }

/* Aviso de confirmación tras una acción (se oculta solo con crm.js; sin JS, se queda arriba) */
.aviso-flotante { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--radio-p); background: var(--ok-suave); color: var(--ok); font-weight: 600; border: 1px solid color-mix(in srgb, var(--verde) 35%, transparent); box-shadow: var(--sombra); }
.aviso-flotante.oculta { opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }

.contacto { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.contacto small { color: var(--suave); }

/* ---------- Interesados: tablero por estados ---------- */
.tablero { display: grid; grid-template-columns: repeat(5, minmax(15rem, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.tablero-columna { background: var(--hueso); border-radius: var(--radio); padding: .8rem; display: grid; gap: .6rem; min-width: 0; }
.tablero-columna h2::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--col, var(--azul)); flex: none; align-self: center; }
.tablero-columna h2 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .2rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.tablero-columna h2 small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tablero-columna .cuenta { background: var(--tarjeta); color: var(--texto); border-radius: 999px; padding: 0 .5rem; font-size: .75rem; letter-spacing: 0; }
.tablero-columna .vacio { margin: 0; font-size: .85rem; }
.col-nuevo { --col: var(--azul); } .col-contactado { --col: #6B7FC0; } .col-prueba { --col: var(--aviso); } .col-matriculado { --col: var(--verde); } .col-descartado { --col: var(--borde-fuerte); }
.col-descartado .tarjeta-interesado { opacity: .7; }
.tarjeta-interesado { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-p); padding: .7rem .8rem; box-shadow: var(--sombra); display: grid; gap: .25rem; }
.tarjeta-interesado h3 { margin: 0; font-size: 1rem; }
.tarjeta-interesado h3 a { color: var(--ink-titulo); text-decoration: none; }
.tarjeta-interesado h3 a:hover { color: var(--azul); text-decoration: underline; }
.tarjeta-interesado p { margin: 0; font-size: .85rem; color: var(--suave); overflow-wrap: anywhere; }
.tarjeta-interesado .para { color: var(--texto); }
.tarjeta-interesado .ultima { font-style: italic; }
.pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .2rem; font-size: .8rem; }
.pie-tarjeta .origen { color: var(--suave); }
.cuando { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--suave); font-size: .8rem; }
.cuando .icono { width: 1em; height: 1em; }
.cuando.hoy { color: var(--azul); } .cuando.atrasado { color: var(--error); }
.mover-estado { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mover-estado .mover { font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; background: var(--hueso); border: 1px solid var(--borde); color: var(--texto); cursor: pointer; font-weight: 600; }
.mover-estado .mover:hover { background: var(--azul-suave); border-color: var(--azul); }
.mover-estado .a-matriculado:hover { background: var(--ok-suave); border-color: var(--verde); }
.mover-estado .a-descartado:hover { background: var(--error-suave); border-color: var(--error); }
.estado-int-nuevo, .estado-int-contactado { background: var(--azul-suave); color: var(--azul); }
.estado-int-prueba { background: var(--aviso-suave); color: var(--aviso); }
.estado-int-matriculado { background: var(--ok-suave); color: var(--ok); }
.linea-tiempo { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1rem; background: linear-gradient(var(--borde), var(--borde)) 0 0 / 2px 100% no-repeat; display: grid; gap: .7rem; }
.linea-tiempo li { position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--tarjeta); border: 2px solid var(--azul); }
.linea-tiempo time { font-size: .8rem; color: var(--suave); }
.linea-tiempo p { margin: .1rem 0 0; }
.etiqueta-vacia { display: block; }
.campo-boton { align-content: start; justify-items: start; }
@media (max-width: 1150px) { .tablero { grid-template-columns: repeat(5, minmax(14rem, 1fr)); } }
@media (max-width: 700px) { .tablero { grid-template-columns: 1fr; overflow-x: visible; } }

/* ---------- Acciones rápidas (barra de arriba) ---------- */
.rapidas { display: flex; gap: .4rem; margin-left: auto; }
.rapida { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); text-decoration: none; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.rapida:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-suave); }
.rapida .icono { width: 1.05rem; height: 1.05rem; }
@media (max-width: 1150px) { .rapida span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rapida { padding: .45rem; } }

/* ---------- Tareas ---------- */
.lista-tareas { list-style: none; margin: 0; padding: 0; }
.tarea { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--borde); }
.tarea:last-child { border-bottom: 0; }
.tarea-texto { display: grid; gap: .1rem; min-width: 0; }
.tarea-texto p { margin: .15rem 0; color: var(--texto); font-size: .9rem; }
.tarea-texto small { color: var(--suave); }
.tarea-lado { display: flex; align-items: center; gap: .6rem; }
.tarea .marcar { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--tarjeta); padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ok); }
.tarea .marcar:hover { border-color: var(--verde); background: var(--ok-suave); }
.tarea .marcar .icono { width: 1rem; height: 1rem; }
.tarea.hecha .marcar { border-color: var(--verde); background: var(--ok-suave); }
.tarea.hecha strong { text-decoration: line-through; color: var(--suave); }
.enlace-peligro { background: none; border: 0; padding: 0; color: var(--error); font-size: .85rem; cursor: pointer; text-decoration: underline; }

/* ---------- Seguridad ---------- */
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-avisos li { padding: .6rem .75rem; border-radius: var(--radio-p); background: var(--hueso); display: grid; gap: .2rem; }
.lista-avisos li.sin-leer { background: var(--error-suave); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }
.lista-avisos p { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.lista-avisos .ayuda { font-size: .8rem; }
.aviso-seguridad { background: var(--error-suave); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); border-radius: var(--radio-p); padding: .6rem .8rem; }

/* ---------- Horas ---------- */
.por-grupo { font-size: .85rem; }
.por-grupo small { color: var(--suave); }

/* ---------- Informes: gráficos SVG ---------- */
.rejilla-informes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
@media (min-width: 2300px) { .rejilla-informes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.informe-ancho { grid-column: span 1; }
.grafico { width: 100%; height: auto; display: block; }
.grafico .guia { stroke: var(--borde); stroke-width: 1; }
.grafico .eje { fill: var(--suave); font-size: 12px; font-family: var(--letra); }
.grafico .serie-0, .leyenda .serie-0 { fill: var(--serie-1); background: var(--serie-1); }
.grafico .serie-1, .leyenda .serie-1 { fill: var(--serie-2); background: var(--serie-2); }
.grafico rect:hover { opacity: .8; }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .4rem; font-size: .85rem; color: var(--suave); }
.leyenda .clave { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-left: .6rem; }
.leyenda .clave:first-child { margin-left: 0; }
.tabla-datos { margin-top: .6rem; font-size: .9rem; }
.tabla-datos summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.barras li { display: grid; grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: .75rem; }
.barra-etiqueta { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-etiqueta small { color: var(--suave); }
.barra-cifra { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.barra-grafico { width: 100%; min-width: 0; height: .8rem; display: block; }
.barra-grafico .fondo { fill: var(--hueso); }
.barra-grafico .valor { fill: var(--azul); }
.barra-grafico.bajo .valor { fill: var(--aviso); }
@media (max-width: 1150px) { .rejilla-informes { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .barras li { grid-template-columns: 1fr 3.5rem; } .barras .barra-grafico { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- 13. Pantallas medianas y pequeñas ---------- */
@media (max-width: 1500px) { .panel-portada { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ancho-4 { grid-column: span 3; } }
@media (max-width: 1150px) { .panel-portada { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ancho-3, .ancho-4 { grid-column: span 2; } .columnas-principal { grid-template-columns: 1fr; } .columnas-principal > aside { position: static; } }
@media (max-width: 900px) {
  .carcasa { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem .8rem; gap: .5rem; }
  .lateral .marca { padding: .2rem .4rem; }
  .menu { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; gap: .25rem; }
  .menu-grupo { display: none; }
  .menu a { white-space: nowrap; }
  .menu a[aria-current="page"]::before { display: none; }
  .lateral-pie { border: 0; margin: 0 0 0 auto; padding: 0; }
  .persona { display: none; }
  .barra { position: static; }
}
@media (max-width: 700px) {
  .panel-portada { grid-template-columns: 1fr; } .ancho-2, .ancho-3, .ancho-4 { grid-column: span 1; }
  .datos { grid-template-columns: 1fr; } .datos dd { margin-bottom: .4rem; }
  .atajo { display: none; }
  .agenda li { grid-template-columns: 3.6rem 1fr; } .agenda .insignia { display: none; }
}

/* ---------- 14. Impresión y movimiento ---------- */
@media print {
  .lateral, .barra, .aviso-pruebas, .banda-modulo, .miga, .acciones, form { display: none !important; }
  .carcasa { display: block; } .contenido { padding: 0; }
  body { background: #fff; }
  .documento-factura, .tarjeta, .tabla { box-shadow: none; border: 0; }
  .rapidas, .tabla-datos summary, .mover-estado { display: none !important; }
  .rejilla-informes, .panel-portada { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .recuadro, .tablero-columna, .tarjeta-interesado, tr { break-inside: avoid; }
  .recuadro { box-shadow: none; }
  .tablero { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: .4rem; }
  .barra-grafico .fondo { fill: #eee; }
  :root { color-scheme: light; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 15. Cuadrícula de la semana (generado: columnas y filas por clase, sin estilos en línea) ---------- */
.col-2 { grid-column: 2; }
.col-3 { grid-column: 3; }
.col-4 { grid-column: 4; }
.col-5 { grid-column: 5; }
.col-6 { grid-column: 6; }
.col-7 { grid-column: 7; }
.col-8 { grid-column: 8; }
.col-9 { grid-column: 9; }
.fila-2 { grid-row: 2; } .desde-2 { grid-row-start: 2; } .hasta-3 { grid-row-end: 3; }
.fila-3 { grid-row: 3; } .desde-3 { grid-row-start: 3; } .hasta-4 { grid-row-end: 4; }
.fila-4 { grid-row: 4; } .desde-4 { grid-row-start: 4; } .hasta-5 { grid-row-end: 5; }
.fila-5 { grid-row: 5; } .desde-5 { grid-row-start: 5; } .hasta-6 { grid-row-end: 6; }
.fila-6 { grid-row: 6; } .desde-6 { grid-row-start: 6; } .hasta-7 { grid-row-end: 7; }
.fila-7 { grid-row: 7; } .desde-7 { grid-row-start: 7; } .hasta-8 { grid-row-end: 8; }
.fila-8 { grid-row: 8; } .desde-8 { grid-row-start: 8; } .hasta-9 { grid-row-end: 9; }
.fila-9 { grid-row: 9; } .desde-9 { grid-row-start: 9; } .hasta-10 { grid-row-end: 10; }
.fila-10 { grid-row: 10; } .desde-10 { grid-row-start: 10; } .hasta-11 { grid-row-end: 11; }
.fila-11 { grid-row: 11; } .desde-11 { grid-row-start: 11; } .hasta-12 { grid-row-end: 12; }
.fila-12 { grid-row: 12; } .desde-12 { grid-row-start: 12; } .hasta-13 { grid-row-end: 13; }
.fila-13 { grid-row: 13; } .desde-13 { grid-row-start: 13; } .hasta-14 { grid-row-end: 14; }
.fila-14 { grid-row: 14; } .desde-14 { grid-row-start: 14; } .hasta-15 { grid-row-end: 15; }
.fila-15 { grid-row: 15; } .desde-15 { grid-row-start: 15; } .hasta-16 { grid-row-end: 16; }
.fila-16 { grid-row: 16; } .desde-16 { grid-row-start: 16; } .hasta-17 { grid-row-end: 17; }
.fila-17 { grid-row: 17; } .desde-17 { grid-row-start: 17; } .hasta-18 { grid-row-end: 18; }
.fila-18 { grid-row: 18; } .desde-18 { grid-row-start: 18; } .hasta-19 { grid-row-end: 19; }
.fila-19 { grid-row: 19; } .desde-19 { grid-row-start: 19; } .hasta-20 { grid-row-end: 20; }
.fila-20 { grid-row: 20; } .desde-20 { grid-row-start: 20; } .hasta-21 { grid-row-end: 21; }
.fila-21 { grid-row: 21; } .desde-21 { grid-row-start: 21; } .hasta-22 { grid-row-end: 22; }
.fila-22 { grid-row: 22; } .desde-22 { grid-row-start: 22; } .hasta-23 { grid-row-end: 23; }
.fila-23 { grid-row: 23; } .desde-23 { grid-row-start: 23; } .hasta-24 { grid-row-end: 24; }
.fila-24 { grid-row: 24; } .desde-24 { grid-row-start: 24; } .hasta-25 { grid-row-end: 25; }
.fila-25 { grid-row: 25; } .desde-25 { grid-row-start: 25; } .hasta-26 { grid-row-end: 26; }
.fila-26 { grid-row: 26; } .desde-26 { grid-row-start: 26; } .hasta-27 { grid-row-end: 27; }
.fila-27 { grid-row: 27; } .desde-27 { grid-row-start: 27; } .hasta-28 { grid-row-end: 28; }
.fila-28 { grid-row: 28; } .desde-28 { grid-row-start: 28; } .hasta-29 { grid-row-end: 29; }
.fila-29 { grid-row: 29; } .desde-29 { grid-row-start: 29; } .hasta-30 { grid-row-end: 30; }
.fila-30 { grid-row: 30; } .desde-30 { grid-row-start: 30; } .hasta-31 { grid-row-end: 31; }
.fila-31 { grid-row: 31; } .desde-31 { grid-row-start: 31; } .hasta-32 { grid-row-end: 32; }
.fila-32 { grid-row: 32; } .desde-32 { grid-row-start: 32; } .hasta-33 { grid-row-end: 33; }
.fila-33 { grid-row: 33; } .desde-33 { grid-row-start: 33; } .hasta-34 { grid-row-end: 34; }
.fila-34 { grid-row: 34; } .desde-34 { grid-row-start: 34; } .hasta-35 { grid-row-end: 35; }
.fila-35 { grid-row: 35; } .desde-35 { grid-row-start: 35; } .hasta-36 { grid-row-end: 36; }
.fila-36 { grid-row: 36; } .desde-36 { grid-row-start: 36; } .hasta-37 { grid-row-end: 37; }
.fila-37 { grid-row: 37; } .desde-37 { grid-row-start: 37; } .hasta-38 { grid-row-end: 38; }
.fila-38 { grid-row: 38; } .desde-38 { grid-row-start: 38; } .hasta-39 { grid-row-end: 39; }
.fila-39 { grid-row: 39; } .desde-39 { grid-row-start: 39; } .hasta-40 { grid-row-end: 40; }
.fila-40 { grid-row: 40; } .desde-40 { grid-row-start: 40; } .hasta-41 { grid-row-end: 41; }
.fila-41 { grid-row: 41; } .desde-41 { grid-row-start: 41; } .hasta-42 { grid-row-end: 42; }
.fila-42 { grid-row: 42; } .desde-42 { grid-row-start: 42; } .hasta-43 { grid-row-end: 43; }
.fila-43 { grid-row: 43; } .desde-43 { grid-row-start: 43; } .hasta-44 { grid-row-end: 44; }
.fila-44 { grid-row: 44; } .desde-44 { grid-row-start: 44; } .hasta-45 { grid-row-end: 45; }
.fila-45 { grid-row: 45; } .desde-45 { grid-row-start: 45; } .hasta-46 { grid-row-end: 46; }
.fila-46 { grid-row: 46; } .desde-46 { grid-row-start: 46; } .hasta-47 { grid-row-end: 47; }
.fila-47 { grid-row: 47; } .desde-47 { grid-row-start: 47; } .hasta-48 { grid-row-end: 48; }
.fila-48 { grid-row: 48; } .desde-48 { grid-row-start: 48; } .hasta-49 { grid-row-end: 49; }
.fila-49 { grid-row: 49; } .desde-49 { grid-row-start: 49; } .hasta-50 { grid-row-end: 50; }
.fila-50 { grid-row: 50; } .desde-50 { grid-row-start: 50; } .hasta-51 { grid-row-end: 51; }
.fila-51 { grid-row: 51; } .desde-51 { grid-row-start: 51; } .hasta-52 { grid-row-end: 52; }
.fila-52 { grid-row: 52; } .desde-52 { grid-row-start: 52; } .hasta-53 { grid-row-end: 53; }
.fila-53 { grid-row: 53; } .desde-53 { grid-row-start: 53; } .hasta-54 { grid-row-end: 54; }
.fila-54 { grid-row: 54; } .desde-54 { grid-row-start: 54; } .hasta-55 { grid-row-end: 55; }
.fila-55 { grid-row: 55; } .desde-55 { grid-row-start: 55; } .hasta-56 { grid-row-end: 56; }
.fila-56 { grid-row: 56; } .desde-56 { grid-row-start: 56; } .hasta-57 { grid-row-end: 57; }
.fila-57 { grid-row: 57; } .desde-57 { grid-row-start: 57; } .hasta-58 { grid-row-end: 58; }
.fila-58 { grid-row: 58; } .desde-58 { grid-row-start: 58; } .hasta-59 { grid-row-end: 59; }
.fila-59 { grid-row: 59; } .desde-59 { grid-row-start: 59; } .hasta-60 { grid-row-end: 60; }
.fila-60 { grid-row: 60; } .desde-60 { grid-row-start: 60; } .hasta-61 { grid-row-end: 61; }
.fila-61 { grid-row: 61; } .desde-61 { grid-row-start: 61; } .hasta-62 { grid-row-end: 62; }
.fila-62 { grid-row: 62; } .desde-62 { grid-row-start: 62; } .hasta-63 { grid-row-end: 63; }
.fila-63 { grid-row: 63; } .desde-63 { grid-row-start: 63; } .hasta-64 { grid-row-end: 64; }

/* Calendario: vista mensual (días sin clase, clases y eventos de Microsoft 365) */
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; color: var(--suave); margin-bottom: .75rem; }
.punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: middle; margin-right: -.4rem; }
.punto-no_lectivo { background: var(--aviso-suave); border: 1px solid var(--aviso); }
.punto-clase { background: var(--azul-suave); border: 1px solid var(--azul); }
.punto-evento { background: var(--ok-suave); border: 1px solid var(--ok); }
.punto-cancelado { background: var(--error-suave); border: 1px solid var(--error); }
.mes { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.mes-cabecera, .mes-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mes-cabecera div { padding: .45rem .6rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: var(--hueso); border-bottom: 1px solid var(--borde); }
.mes-dia { min-height: 8.5rem; padding: .35rem .45rem; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); overflow: hidden; }
.mes-dia:nth-child(7n) { border-right: 0; }
.mes-dia.fuera { background: color-mix(in srgb, var(--hueso) 55%, transparent); }
.mes-dia.finde { background: color-mix(in srgb, var(--hueso) 35%, var(--tarjeta)); }
.mes-dia.sin-clase { background: color-mix(in srgb, var(--aviso-suave) 70%, var(--tarjeta)); }
.mes-dia.hoy .mes-numero { background: var(--azul); color: #fff; }
.mes-numero { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.mes-dia ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .15rem; }
.cosa { font-size: .74rem; line-height: 1.25; padding: .1rem .35rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.cosa-no_lectivo { background: var(--aviso-suave); color: var(--aviso); border-left-color: var(--aviso); font-weight: 600; }
.cosa-clase { background: var(--azul-suave); color: var(--azul); border-left-color: var(--azul); }
.cosa-evento { background: var(--ok-suave); color: var(--ok); border-left-color: var(--ok); }
.cosa-cancelado { background: var(--error-suave); color: var(--error); border-left-color: var(--error); text-decoration: line-through; }
.cosa-resumen { background: var(--hueso); color: var(--texto); border-left-color: var(--borde-fuerte); }
.punto-resumen { background: var(--hueso); border: 1px solid var(--borde-fuerte); }
.cosa.mas { color: var(--suave); background: none; }
.cosa-hora { font-variant-numeric: tabular-nums; opacity: .8; }
@media (max-width: 760px) {
  .mes-cabecera { display: none; }
  .mes-dias { grid-template-columns: 1fr; }
  .mes-dia { min-height: 0; border-right: 0; }
  .mes-dia.fuera { display: none; }
  .cosa { white-space: normal; }
}
@media print { .mes-dia { min-height: 6rem; } }
.texto-error { color: var(--error); }


/* ==========================================================================
   Panel de mando (15/10/2026): KPI con minigráfica, línea de tiempo del día y movimiento.
   Todo el movimiento se apaga con «reducir movimiento» (regla de accesibilidad de la hoja).
   ========================================================================== */

/* Transiciones suaves entre pantallas (navegadores que lo admiten; los demás, como siempre) */
@view-transition { navigation: auto; }
.contenido { view-transition-name: contenido; }
.lateral { view-transition-name: lateral; }
::view-transition-old(contenido) { animation: vt-salir var(--rapido) var(--curva) both; }
::view-transition-new(contenido) { animation: vt-entrar var(--medio) var(--curva) both; }
@keyframes vt-salir { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(10px); } }

/* Entrada escalonada de la portada, informes y tarjetas */
@keyframes aparecer { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.kpi, .panel-portada > .recuadro, .rejilla-informes > .recuadro, .rejilla-tarjetas > .tarjeta { animation: aparecer var(--lento) var(--curva) both; }
.kpis > :nth-child(2), .panel-portada > :nth-child(2), .rejilla-informes > :nth-child(2) { animation-delay: 50ms; }
.kpis > :nth-child(3), .panel-portada > :nth-child(3), .rejilla-informes > :nth-child(3) { animation-delay: 100ms; }
.kpis > :nth-child(4), .panel-portada > :nth-child(4), .rejilla-informes > :nth-child(4) { animation-delay: 150ms; }
.kpis > :nth-child(5), .panel-portada > :nth-child(5), .rejilla-informes > :nth-child(5) { animation-delay: 200ms; }
.kpis > :nth-child(6), .panel-portada > :nth-child(6), .rejilla-informes > :nth-child(6) { animation-delay: 250ms; }
.kpis > :nth-child(n+7), .panel-portada > :nth-child(n+7), .rejilla-informes > :nth-child(n+7) { animation-delay: 300ms; }

/* Cabecera de la portada con un degradado de marca muy suave */
.portada-cabecera { position: relative; padding: .4rem 0 .2rem; isolation: isolate; }
.portada-cabecera::before { content: ""; position: absolute; inset: -2.5rem -6rem auto; height: 13rem; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 18% 0%, color-mix(in srgb, var(--azul) 13%, transparent), transparent 70%),
              radial-gradient(40% 80% at 70% 0%, color-mix(in srgb, var(--verde) 12%, transparent), transparent 70%); }

/* Franja de KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem; margin-bottom: 1.25rem; }
.kpi { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: .2rem; padding: 1rem 1.15rem .9rem; min-height: 9.5rem; overflow: hidden;
  background: linear-gradient(180deg, var(--tarjeta), color-mix(in srgb, var(--tarjeta) 92%, var(--azul-suave)));
  border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
  transition: transform var(--medio) var(--curva-salto), box-shadow var(--medio) var(--curva), border-color var(--rapido); }
a.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--azul) 35%, var(--borde)); color: var(--texto); }
a.kpi:active { transform: translateY(-1px) scale(.995); }
.kpi-etiqueta { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.kpi-valor { white-space: nowrap; font-family: var(--letra-titulo); font-size: clamp(1.65rem, 1vw + 1.1rem, 2.6rem); line-height: 1.05; color: var(--ink-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; font-size: .8rem; }
.kpi-delta { display: inline-flex; align-items: baseline; gap: .25rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--hueso); color: var(--suave); white-space: nowrap; }
.kpi-comparar { color: var(--suave); }
.kpi-delta.tono-bien { background: var(--ok-suave); color: var(--ok); }
.kpi-delta.tono-mal { background: var(--aviso-suave); color: var(--aviso); }
.kpi-detalle { font-size: .82rem; color: var(--suave); align-self: end; }
.kpi-grafica { align-self: end; margin: .35rem -1.15rem -.9rem; height: 3rem; }
.minigrafica { width: 100%; height: 100%; display: block; overflow: visible; }
.mg-area { fill: color-mix(in srgb, var(--serie-1) 14%, transparent); }
.mg-linea { fill: none; stroke: var(--serie-1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* La minigráfica se descubre de izquierda a derecha (recorte; compatible con el trazo de grosor fijo) */
.kpi-grafica { animation: descubrir 1.1s .2s var(--curva) both; }
@keyframes descubrir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mg-punto { fill: var(--tarjeta); stroke: var(--serie-1); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Línea de tiempo del día (clases por aula) */
.tiempo-hoy { margin: .2rem 0 .6rem; overflow-x: auto; }
.linea-tiempo { width: 100%; min-width: 640px; height: auto; display: block; font-family: var(--letra); }
.lt-guia { stroke: var(--borde); stroke-width: 1; }
.lt-hora { fill: var(--suave); font-size: 11px; text-anchor: middle; }
.lt-fila { fill: var(--texto); font-size: 12px; font-weight: 600; }
.lt-bloque { fill: color-mix(in srgb, var(--area, var(--azul)) 18%, var(--tarjeta)); stroke: var(--area, var(--azul)); stroke-width: 1.2; transition: fill var(--rapido); }
.lt-bloque.pasada { opacity: .45; }
.lt-bloque.ahora { fill: color-mix(in srgb, var(--verde) 30%, var(--tarjeta)); stroke: var(--verde-oscuro); stroke-width: 2; }
a:hover > .lt-bloque, a:focus-visible > .lt-bloque { fill: color-mix(in srgb, var(--area, var(--azul)) 34%, var(--tarjeta)); }
.lt-texto { fill: var(--ink-titulo); font-size: 11.5px; font-weight: 600; pointer-events: none; }
.lt-texto.pasada { opacity: .55; }
.lt-ahora { stroke: var(--error); stroke-width: 2; stroke-dasharray: 3 3; }
.lt-ahora-punto { fill: var(--error); animation: latido 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes latido { 50% { transform: scale(1.5); opacity: .55; } }
.agenda-detalle > summary { font-size: .88rem; color: var(--azul); margin: .2rem 0 .5rem; }

/* Gráficas de Informes: las columnas y las barras crecen al aparecer */
.grafico rect[class^="serie-"] { transform-box: fill-box; transform-origin: bottom; animation: crecer .9s var(--curva) both; }
.grafico rect[class^="serie-"]:nth-of-type(3n+2) { animation-delay: 60ms; }
.grafico rect[class^="serie-"]:nth-of-type(3n) { animation-delay: 120ms; }
@keyframes crecer { from { transform: scaleY(0); } }
.barra-grafico .valor { transform-box: fill-box; transform-origin: left; animation: crecer-x 1s var(--curva) both; }
@keyframes crecer-x { from { transform: scaleX(0); } }

/* Recuadros y tarjetas: levantan un poco al pasar */
.recuadro, .tarjeta { transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva); }
.panel-portada > .recuadro:hover { box-shadow: var(--sombra-alta); }
.cifra-caja { transition: background-color var(--rapido), transform var(--medio) var(--curva-salto); }
a.cifra-caja:hover { transform: translateY(-2px); }

/* Paleta de órdenes (Ctrl+K) */
.paleta { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding-top: 12vh; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(4px); }
.paleta[hidden] { display: none; }
.paleta-caja { width: min(40rem, 92vw); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); overflow: hidden; animation: paleta-abrir var(--medio) var(--curva-salto); }
@keyframes paleta-abrir { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.paleta-caja input { width: 100%; border: 0; border-bottom: 1px solid var(--borde); padding: 1rem 1.2rem; font: inherit; font-size: 1.1rem; background: transparent; color: var(--texto); outline: none; }
.paleta-lista { list-style: none; margin: 0; padding: .4rem; max-height: 55vh; overflow-y: auto; }
.paleta-lista li a { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: var(--radio-p); color: var(--texto); text-decoration: none; }
.paleta-lista li a small { margin-left: auto; color: var(--suave); font-size: .78rem; }
.paleta-lista li.activa a { background: var(--azul-suave); color: var(--ink-titulo); }
.paleta-vacia { padding: .8rem 1.2rem; color: var(--suave); }
.paleta-pie { display: flex; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--borde); font-size: .78rem; color: var(--suave); }
.paleta-pie kbd { font: .75rem var(--letra); border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: 0 .3rem; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media print { .kpi { min-height: 0; box-shadow: none; } .kpi-grafica { height: 2rem; } .paleta { display: none; } }
.abrir-paleta { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .45rem .8rem; font-size: .88rem; color: var(--suave); white-space: nowrap; }
.abrir-paleta[hidden] { display: none; }
.abrir-paleta kbd { font: .72rem var(--letra); border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: 0 .3rem; }
@media (max-width: 900px) { .abrir-paleta { display: none; } }

/* Aulas: tarjetas, avisos y mapas de calor */
.rejilla-aulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.1rem; }
.aula-cabeza { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.aula-cifra { display: flex; align-items: baseline; gap: .5rem; margin: .2rem 0 .4rem; }
.tarjeta.aula.apagada { opacity: .6; }
.insignia-suave { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--azul-suave); color: var(--azul); }
.insignia-suave .icono { width: .9rem; height: .9rem; }
.tarjeta-aviso { border-color: color-mix(in srgb, var(--aviso) 40%, var(--borde)); background: color-mix(in srgb, var(--aviso-suave) 60%, var(--tarjeta)); margin-bottom: 1.1rem; }
.tarjeta-aviso h2 { display: flex; align-items: center; gap: .4rem; color: var(--aviso); }
.lista-avisos { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.mapa-envoltura { overflow-x: auto; margin: .3rem 0 .5rem; }
.mapa-calor { width: 100%; min-width: 760px; height: auto; display: block; font-family: var(--letra); }
.mc-hora { fill: var(--suave); font-size: 11px; text-anchor: middle; }
.mc-fila { fill: var(--texto); font-size: 12px; font-weight: 600; }
.mc-celda { fill: var(--hueso); transition: fill var(--rapido); }
.mc-celda.ocupada { fill: color-mix(in srgb, var(--area, var(--azul)) 70%, var(--tarjeta)); }
.mc-celda.choque { fill: var(--error); }
.mc-celda:hover { stroke: var(--ink-titulo); stroke-width: 1.5; }
.mc-celda.nivel-1 { fill: color-mix(in srgb, var(--serie-1) 25%, var(--hueso)); }
.mc-celda.nivel-2 { fill: color-mix(in srgb, var(--serie-1) 50%, var(--hueso)); }
.mc-celda.nivel-3 { fill: color-mix(in srgb, var(--serie-1) 75%, var(--hueso)); }
.mc-celda.nivel-4 { fill: var(--serie-1); }
.punto-libre { background: var(--hueso); border: 1px solid var(--borde-fuerte); }
.punto-area { background: color-mix(in srgb, var(--area) 70%, var(--tarjeta)); }
.punto-choque { background: var(--error); }
.leyenda .punto.nivel-0 { background: var(--hueso); border: 1px solid var(--borde); margin-right: 0; }
.leyenda .punto.nivel-1 { background: color-mix(in srgb, var(--serie-1) 25%, var(--hueso)); margin-right: 0; }
.leyenda .punto.nivel-2 { background: color-mix(in srgb, var(--serie-1) 50%, var(--hueso)); margin-right: 0; }
.leyenda .punto.nivel-3 { background: color-mix(in srgb, var(--serie-1) 75%, var(--hueso)); margin-right: 0; }
.leyenda .punto.nivel-4 { background: var(--serie-1); }
.lista-avisos li, .lista-avisos li a { display: inline; } .lista-avisos li { display: list-item; }

/* Exámenes: lista con cuenta atrás y su color de urgencia */
.mes-titulo { font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); margin: 1.2rem 0 .5rem; }
.lista-examenes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.examen { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .6rem .8rem; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde); }
.lista-examenes.compacta .examen { background: var(--hueso); border-color: transparent; padding: .45rem .6rem; }
.examen-fecha { display: grid; place-items: center; line-height: 1.05; font-size: .75rem; text-transform: uppercase; color: var(--suave); border-radius: var(--radio-p); padding: .3rem 0; background: var(--hueso); }
.examen-fecha strong { font-family: var(--letra-titulo); font-size: 1.5rem; color: var(--ink-titulo); font-weight: 500; }
.examen-texto { display: grid; min-width: 0; }
.examen-texto span, .examen-texto small { color: var(--suave); font-size: .85rem; }
.examen-cuenta { font-weight: 600; font-size: .85rem; padding: .15rem .6rem; border-radius: 999px; background: var(--hueso); white-space: nowrap; }
.examen-cerca .examen-cuenta { background: var(--error-suave); color: var(--error); }
.examen-cerca .examen-fecha { background: var(--error-suave); }
.examen-pronto .examen-cuenta { background: var(--aviso-suave); color: var(--aviso); }
.examen-pasado { opacity: .6; }
.examen-editar { grid-column: 1 / -1; }
.cosa-examen { background: var(--error-suave); color: var(--error); border-left-color: var(--error); font-weight: 600; }
.punto-examen { background: var(--error-suave); border: 1px solid var(--error); }
.examen-editar > summary { font-size: .8rem; color: var(--suave); margin-top: -.2rem; }
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { min-height: 0; padding: .75rem .8rem .7rem; }
  .kpi-valor { font-size: 1.55rem; }
  .kpi-comparar, .kpi-detalle { display: none; }
  .kpi-grafica { height: 2rem; margin: .25rem -.8rem -.7rem; }
}
.tarjeta-ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--borde)); background: color-mix(in srgb, var(--ok-suave) 60%, var(--tarjeta)); margin-bottom: 1.1rem; }

/* Ficha del alumno: resumen de un vistazo */
.resumen-ficha { display: flex; flex-wrap: wrap; gap: .6rem; margin: -.2rem 0 1rem; }
.resumen-dato { display: flex; align-items: baseline; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--borde); animation: aparecer var(--medio) var(--curva) both; }
.resumen-valor { font-family: var(--letra-titulo); font-size: 1.25rem; color: var(--ink-titulo); font-variant-numeric: tabular-nums; }
.resumen-texto { font-size: .82rem; color: var(--suave); }
.resumen-dato.tono-aviso { background: var(--aviso-suave); border-color: transparent; } .resumen-dato.tono-aviso .resumen-valor { color: var(--aviso); }
.resumen-dato.tono-ok .resumen-valor { color: var(--ok); }

/* Filtro instantáneo de las listas largas */
.filtro-rapido { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.filtro-rapido input { flex: 0 1 22rem; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); font: inherit; color: var(--texto); }
.filtro-rapido small { color: var(--suave); }

/* Interesados: arrastrar tarjetas entre columnas */
.tarjeta-interesado[draggable="true"] { cursor: grab; }
.tarjeta-interesado.arrastrando { opacity: .45; transform: rotate(-1.5deg); }
.tablero-columna.soltar-aqui { outline: 2px dashed var(--azul); outline-offset: -4px; background: color-mix(in srgb, var(--azul-suave) 60%, transparent); }

/* Avisar a un grupo */
.plantillas { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-left: .3rem; }
.plantilla { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; }
.enlaces-wa { display: flex; flex-wrap: wrap; gap: .4rem; }
.boton-wa { font-size: .85rem; padding: .3rem .7rem; border-color: color-mix(in srgb, #25D366 50%, var(--borde)); }
.boton-wa:hover { background: color-mix(in srgb, #25D366 14%, var(--tarjeta)); }
.lista-correos { width: 100%; font: .85rem var(--letra); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-p); padding: .5rem; background: var(--hueso); color: var(--texto); }
.mensaje-vista { background: var(--hueso); border-radius: var(--radio-p); padding: .7rem .9rem; font-size: .92rem; }
.lista-estado { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }

/* ==========================================================================
   Ayuda: manuales con vídeo (formato «vídeo y pasos a la vez», cámara que sigue)
   ========================================================================== */
.enlace-ayuda { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--azul); text-decoration: none; padding: .4rem .75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--azul) 35%, var(--borde)); white-space: nowrap; }
.enlace-ayuda:hover { background: var(--azul-suave); }
.enlace-ayuda .icono { width: 1rem; height: 1rem; }
@media (max-width: 900px) { .enlace-ayuda span { display: none; } }
.rejilla-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; }
.guia-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; text-decoration: none; color: var(--texto); align-items: start; }
.guia-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); color: var(--texto); }
.guia-icono { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); }
.guia-texto { display: grid; gap: .15rem; } .guia-texto strong { color: var(--ink-titulo); } .guia-texto span { font-size: .86rem; color: var(--suave); }
.guia-dur { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--suave); } .guia-dur .icono { width: .9rem; height: .9rem; }
.guia-para { max-width: 75ch; }
.guia-d { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { .guia-d { grid-template-columns: 1fr; } }
.guia-video { padding: .9rem; display: grid; gap: .55rem; }
.guia-no { display: flex; gap: .5rem; align-items: flex-start; margin: .2rem 0 0; padding: .6rem .8rem; border-radius: var(--radio-p); background: var(--aviso-suave); color: var(--aviso); font-size: .9rem; }
.guia-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.guia-paso { width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .7rem; align-items: start; text-align: left; padding: .7rem .8rem; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde); color: var(--texto); font: inherit; cursor: pointer; transition: border-color var(--rapido), background-color var(--rapido); }
.guia-paso:hover { border-color: var(--borde-fuerte); }
.guia-paso.on { border-color: var(--verde); background: color-mix(in srgb, var(--verde-suave) 75%, var(--tarjeta)); }
.guia-paso-n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 700; font-size: .9rem; }
.guia-paso.on .guia-paso-n { background: var(--verde-oscuro); }
.guia-paso-texto { display: grid; gap: .15rem; font-size: .9rem; color: var(--suave); } .guia-paso-texto strong { color: var(--ink-titulo); font-size: .97rem; }
.guia-paso-t { font-size: .75rem; color: var(--suave); font-variant-numeric: tabular-nums; padding-top: .25rem; }
.guia-extra { margin-top: 1.2rem; }
.guia-consejos { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.guia-pregunta { border-top: 1px solid var(--borde); padding: .6rem 0; } .guia-pregunta summary { cursor: pointer; font-weight: 600; color: var(--ink-titulo); } .guia-pregunta p { margin: .5rem 0 0; }

/* El vídeo */
.gv-escenario { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--papel); border: 1px solid var(--borde); }
.gv-lienzo { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; font-size: 16px; }
.gv-camara { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }
.gv-pantalla { position: absolute; inset: 0; }
.gv-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 28px; z-index: 30; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.gv-cursor path { fill: #fff; stroke: #111; stroke-width: 1.4; }
.gv-onda { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--verde); z-index: 29; pointer-events: none; }
.gv-foco { position: absolute; left: 0; top: 0; border: 3px solid #E6A85A; border-radius: 12px; z-index: 28; pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, #E6A85A 30%, transparent); }
.gv-nota { position: absolute; left: 0; top: 0; z-index: 31; display: flex; align-items: center; gap: 10px; max-width: 440px; background: var(--ink); color: #fff; font-size: 22px; font-weight: 600; padding: 12px 18px 12px 12px; border-radius: 16px; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); pointer-events: none; }
.gv-nota-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #1E2A0E; font-size: 17px; font-weight: 700; }
.gv-aviso { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 32; background: var(--ok); color: #fff; font-size: 20px; font-weight: 600; padding: 12px 22px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.gv-subtitulo { margin: 0; min-height: 2.6em; text-align: center; font-weight: 500; color: var(--ink-titulo); }
.gv-mandos { display: flex; align-items: center; gap: .7rem; }
.gv-play { min-width: 7.5rem; border-radius: 999px; }
.gv-barra { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--hueso); cursor: pointer; }
.gv-relleno { position: absolute; inset: 0 auto 0 0; background: var(--azul); border-radius: 999px; }
.gv-marca { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--borde-fuerte); }
.gv-tiempo { font-size: .8rem; color: var(--suave); font-variant-numeric: tabular-nums; min-width: 6rem; text-align: right; }
.guia-video.sin-video .gv-escenario { display: none; }

/* Réplica del CRM dentro del vídeo (tamaños fijos en px: el vídeo siempre es igual) */
.gv-app { position: absolute; inset: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--papel); color: var(--texto); font-family: var(--letra); font-size: 15px; line-height: 1.45; }
.gv-lado { background: var(--ink); color: var(--ink-texto); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.gv-logo { font-family: var(--letra-titulo); color: #fff; font-size: 21px; margin: 0 6px 12px; }
.gv-grupo { margin: 10px 8px 3px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-suave); }
.gv-item { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 8px; font-size: 13.5px; white-space: nowrap; }
.gv-item .icono { width: 16px; height: 16px; }
.gv-item.on { background: #42589B; color: #fff; }
.gv-principal { display: grid; grid-template-rows: 58px minmax(0, 1fr); min-width: 0; }
.gv-barra-arriba { display: flex; align-items: center; gap: 12px; padding: 0 26px; border-bottom: 1px solid var(--borde); background: color-mix(in srgb, var(--papel) 90%, var(--tarjeta)); }
.gv-buscar { flex: 0 1 420px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--suave); font-size: 13.5px; }
.gv-buscar .icono { width: 16px; height: 16px; }
.gv-rapida { font-size: 13px; color: var(--suave); border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 6px 12px; } .gv-rapida kbd { font: 11px var(--letra); border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: 0 4px; }
.gv-contenido { padding: 22px 26px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.gv-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gv-titulo h2 { font-family: var(--letra-titulo); font-weight: 500; font-size: 32px; color: var(--ink-titulo); margin: 0; } .gv-titulo h2 small { font-family: var(--letra); font-size: 16px; color: var(--suave); }
.gv-acciones { display: flex; gap: 8px; }
.gv-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 7px 13px; border-radius: 9px; white-space: nowrap; line-height: 1.3; }
.gv-btn .icono { width: 15px; height: 15px; }
span.boton.gv-btn { background: var(--azul); color: #fff; border: 1px solid var(--azul); }
span.secundario.gv-btn, span.claro.gv-btn { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde-fuerte); }
span.whats.gv-btn { background: var(--tarjeta); color: #1A8C47; border: 1px solid #1FA855; }
.gv-tarjeta { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.gv-tarjeta h3 { margin: 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.gv-campo { display: grid; gap: 4px; } .gv-etiqueta { font-size: 12.5px; color: var(--suave); }
.gv-valor { display: block; min-height: 36px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); font-size: 14px; color: var(--texto); white-space: pre-wrap; overflow: hidden; }
.gv-campo.alto .gv-valor { min-height: 74px; }
.gv-escribiendo::after { content: "|"; color: var(--azul); margin-left: 1px; }
.gv-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gv-tabla th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.gv-tabla td { padding: 8px; border-bottom: 1px solid var(--borde); }
.gv-tabla tr.sel td { background: var(--azul-suave); }
.gv-kpi { min-height: 0; padding: 12px 14px; animation: none; } .gv-kpi .kpi-valor { font-size: 34px; }
.gv-franja { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.gv-franja.tono-aviso { background: var(--aviso-suave); color: var(--aviso); } .gv-franja.tono-ok { background: var(--ok-suave); color: var(--ok); } .gv-franja.tono-error { background: var(--error-suave); color: var(--error); }
.gv-rejilla { display: grid; gap: 14px; } .gv-rejilla.col-2 { grid-template-columns: 1fr 1fr; } .gv-rejilla.col-3 { grid-template-columns: repeat(3, 1fr); } .gv-rejilla.col-4 { grid-template-columns: repeat(4, 1fr); } .gv-rejilla.col-21 { grid-template-columns: 2fr 1fr; }
.gv-pulsado { transform: translateY(1px) scale(.97); filter: brightness(.92); }
.gv-pantalla .estado { font-size: 11.5px; }
.gv-pantalla .tarjeta, .gv-pantalla .kpi { animation: none; }
.gv-columna { background: var(--hueso); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; }
.gv-columna h4 { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.gv-ficha { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; font-size: 13px; display: grid; gap: 3px; } .gv-ficha strong { color: var(--ink-titulo); }
.gv-ficha.mueve { outline: 2px dashed var(--azul); transform: rotate(-1.5deg); }
.gv-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; } .gv-mes span { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 6px; min-height: 52px; padding: 4px 6px; } .gv-mes span.sin { background: var(--aviso-suave); } .gv-mes span b { display: block; font-size: 10.5px; font-weight: 600; color: var(--azul); margin-top: 2px; }
.gv-marcas-lista { display: flex; gap: 5px; } .gv-marcas-lista span { width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--borde-fuerte); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--suave); background: var(--tarjeta); }
.gv-marcas-lista span.on-p { background: var(--ok); color: #fff; border-color: var(--ok); } .gv-marcas-lista span.on-f { background: var(--error); color: #fff; border-color: var(--error); } .gv-marcas-lista span.on-r { background: var(--aviso); color: #fff; border-color: var(--aviso); }
@media (prefers-reduced-motion: reduce) { .gv-escribiendo::after { content: none; } }

/* ==========================================================================
   Registro de jornada (fichaje, 16/10/2026): «Mi jornada» (CRM y Mi Elizalde) y los documentos para imprimir.
   ========================================================================== */
.insignia-bien { background: var(--ok-suave); color: var(--ok); }
.insignia-mal { background: var(--error-suave); color: var(--error); }
.aviso-suave { background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 35%, var(--borde)); }
.acciones-columna { display: grid; gap: .5rem; justify-items: start; }
.barra-guardar { margin: 1rem 0 0; }
button.enlace { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; font: inherit; }
.jornada-dia { margin-top: 1rem; }
.jornada-dia.confirmada { border-color: color-mix(in srgb, var(--ok) 40%, var(--borde)); }
.jornada-hecha { display: flex; gap: .6rem; align-items: center; font-size: 1.05rem; margin: .4rem 0 .6rem; }
.jornada-hecha .icono { width: 1.6rem; height: 1.6rem; color: var(--ok); flex: none; }
.jornada-hecha span { display: grid; } .jornada-hecha small { color: var(--suave); }
.jornada-dia details > summary { display: inline-flex; list-style: none; cursor: pointer; }
.jornada-dia details > summary::-webkit-details-marker { display: none; }
.jornada-form fieldset { border: 0; padding: 0; margin: .8rem 0 0; }
.jornada-form legend { font-weight: 700; margin-bottom: .3rem; }
.jornada-form legend small { font-weight: 400; color: var(--suave); }
.modo-jornada { margin-top: .6rem; }
.modo-jornada input:checked + label { background: var(--azul); color: #fff; }
.jornada-form:has(#modo-no:checked) .si-trabajo, .jornada-form:has(#modo-si:checked) .si-no-trabajo { display: none; }
.fila-jornada { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; align-items: end; margin-bottom: .4rem; }
.fila-jornada .campo { margin: 0; }
.hora-campo { display: grid; gap: .2rem; font-size: .85rem; color: var(--suave); }
.hora-con-ahora { display: flex; gap: .3rem; }
.hora-con-ahora input { flex: 1; min-width: 0; font-size: 1.05rem; }
.ahora { font-size: .78rem; padding: .25rem .5rem; border-radius: var(--radio-p); border: 1px solid var(--borde-fuerte); background: var(--hueso); color: var(--texto); cursor: pointer; }
.fila-extra > summary { color: var(--azul); cursor: pointer; font-size: .9rem; margin: .2rem 0 .5rem; }
.lista-dias { list-style: none; margin: .8rem 0 0; padding: 0; }
.lista-dias li { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .55rem .2rem; border-bottom: 1px solid var(--borde); }
.lista-dias li.actual { background: var(--azul-suave); border-radius: var(--radio-p); }
.lista-dias a { display: grid; text-decoration: none; color: var(--texto); min-width: 0; }
.lista-dias a span { color: var(--suave); font-size: .85rem; overflow-wrap: anywhere; }
.dia-derecha { display: grid; justify-items: end; gap: .2rem; flex: none; }
.historial { font-size: .82rem; margin-top: .3rem; } .historial ol { margin: .3rem 0 0; padding-left: 1.2rem; } .historial li { margin-bottom: .3rem; }
.documento-jornada { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem 1.6rem; max-width: 60rem; }
.documento-jornada h1 { font-size: 1.3rem; margin: 0 0 .4rem; }
.tabla-jornada { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .8rem; }
.tabla-jornada th, .tabla-jornada td { border-bottom: 1px solid var(--borde); padding: .3rem .4rem; text-align: left; vertical-align: top; }
.tabla-jornada .numero { text-align: right; }
.totales-jornada { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .2rem 1.2rem; margin: 1rem 0 .4rem; }
.totales-jornada dt { color: var(--suave); } .totales-jornada dd { margin: 0; font-weight: 700; }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.firmas p { border-top: 1px solid var(--texto); padding-top: .3rem; color: var(--suave); font-size: .85rem; }
@media print {
  .documento-jornada { border: 0; padding: 0; max-width: none; }
  .tabla-jornada { font-size: 9.5pt; } .tabla-jornada tr { break-inside: avoid; }
  .movil-cabecera, .pestanas { display: none !important; }
}
.cuadro-horario .campo { margin: 0; }
.cuadro-horario .campo > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cuadro-horario td { padding-top: .3rem; padding-bottom: .3rem; }
.insignia-aviso { background: var(--aviso-suave); color: var(--aviso); }