/* Interfaz editorial académica. Mobile-first, accesible y sin estilos inline. */

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--c-regla) transparent; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--c-fondo); color: var(--c-tinta); font: 400 var(--t-m)/1.58 var(--f-base); font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; caret-color: var(--c-primario-texto); }
main { min-width: 0; flex: 1 0 auto; }
::selection { background: var(--c-secundario); color: #fff; }
h1, h2, h3, h4 { margin: 0 0 var(--e-3); color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0 0 var(--e-3); }
a { color: var(--c-primario-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
small { font-size: .8em; }
code { padding: 2px 6px; border: 1px solid var(--c-primario-tinte-2); border-radius: var(--r-xs); background: var(--c-primario-tinte); color: var(--c-primario-texto); font: .9em var(--f-mono); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-secundario); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--c-regla); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.saltar { position: absolute !important; left: -9999px; }
.saltar:focus { left: var(--e-4); top: var(--e-3); z-index: 100; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--c-hoja); box-shadow: var(--sombra-flotante); }
.flecha { display: inline-block; width: .78em; height: .78em; flex: none; vertical-align: -.04em; background: currentColor; -webkit-mask: url("../img/flecha.47d1da10446d.svg") center / contain no-repeat; mask: url("../img/flecha.47d1da10446d.svg") center / contain no-repeat; }

/* Navegación -------------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--c-regla); background: color-mix(in srgb, var(--c-hoja) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.barra__interior { width: min(100%, var(--ancho)); min-height: 66px; margin: 0 auto; padding: 10px var(--e-4); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); }
.marca { min-width: 0; display: inline-flex; align-items: center; gap: 11px; color: var(--c-tinta); text-decoration: none; font-family: var(--f-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.marca:hover { text-decoration: none; }
.marca__sello { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-primario); color: #fff; font: 700 .7rem var(--f-display); letter-spacing: .03em; }
.marca__nombre { min-width: 0; display: grid; gap: 3px; }
.marca__nombre small { color: var(--c-tinta-3); font: 400 var(--t-xs) var(--f-base); letter-spacing: 0; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-s); font-weight: 700; }
.nav > a { min-height: 40px; padding: 9px 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-s); color: var(--c-tinta-2); text-decoration: none; }
.nav > a:hover, .nav > a[aria-current="page"] { background: var(--c-primario-tinte); color: var(--c-primario-texto); }
.contador { min-width: 21px; height: 21px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--c-acento); color: #fff; font-size: var(--t-xs); }
.nav__salir { margin-left: var(--e-2); }

/* Estructura --------------------------------------------------------------- */
.contenedor { width: min(100%, var(--ancho)); margin: 0 auto; padding: var(--e-6) var(--e-4) var(--e-8); }
.contenedor--angosto { max-width: 620px; }
.contenedor--ingreso { width: 100%; max-width: none; padding: 0; }
.contenedor--ingreso > .mensajes { width: min(100%, var(--ancho)); margin: var(--e-4) auto 0; padding: 0 var(--e-4); }
.pie { padding: var(--e-5) var(--e-4); border-top: 1px solid var(--c-regla); color: var(--c-tinta-3); font-size: var(--t-xs); }
.pie__interior { width: min(100%, var(--ancho)); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--e-2) var(--e-4); flex-wrap: wrap; }
.pie strong { color: var(--c-tinta-2); }

/* Panel docente lateral ---------------------------------------------------- */
.barra--docente { background: var(--c-primario); border-color: rgba(255,255,255,.12); }
.barra--docente .marca { color: #fff; }
.barra--docente .marca__sello { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.barra--docente .marca__nombre small { color: rgba(255,255,255,.66); }
.barra--docente .nav > a { color: rgba(255,255,255,.76); }
.barra--docente .nav > a:hover, .barra--docente .nav > a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.barra--docente .boton--discreto { border-color: rgba(255,255,255,.24); background: transparent; color: rgba(255,255,255,.82); }
.barra--docente .boton--discreto:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; }

/* Encabezado de contexto --------------------------------------------------- */
.banda { border-bottom: 1px solid var(--c-regla); background: var(--c-hoja); color: var(--c-tinta); }
.banda__interior { width: min(100%, var(--ancho)); margin: 0 auto; padding: var(--e-5) var(--e-4) 0; }
.banda--sola .banda__interior { padding-bottom: var(--e-5); }
.banda__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4) var(--e-5); flex-wrap: wrap; }
.banda h1, .banda h2 { max-width: 28ch; margin-bottom: var(--e-2); color: var(--c-tinta); }
.banda__meta { margin: 0 0 var(--e-4); color: var(--c-tinta-3); font-size: var(--t-s); }
.banda__meta span + span::before { content: "\00b7"; margin: 0 .65em; }
.migas { margin: 0 0 var(--e-2); color: var(--c-tinta-3); font-size: var(--t-xs); }
.migas a { color: inherit; }
.migas__sep { margin: 0 .55em; opacity: .65; }
.pestanas { display: flex; gap: var(--e-1); margin: 0 calc(-1 * var(--e-2)); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { min-height: 45px; padding: 12px 11px 10px; border-bottom: 3px solid transparent; color: var(--c-tinta-3); font-size: var(--t-s); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pestanas a:hover { color: var(--c-tinta); border-bottom-color: var(--c-regla); }
.pestanas a[aria-current="page"] { color: var(--c-primario-texto); border-bottom-color: var(--c-secundario); }

/* El portal usa una cabecera narrativa, no la cabecera operativa docente. */
body:has(.barra--portal) .banda { border: 0; background: linear-gradient(120deg, var(--c-primario-hondo), var(--c-primario)); color: #fff; }
body:has(.barra--portal) .banda h1, body:has(.barra--portal) .banda h2 { color: #fff; }
body:has(.barra--portal) .banda a { color: #fff; }
body:has(.barra--portal) .banda__meta, body:has(.barra--portal) .banda .migas { color: var(--c-sobre-banda-2); }
body:has(.barra--portal) .pestanas a { color: var(--c-sobre-banda-2); }
body:has(.barra--portal) .pestanas a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
body:has(.barra--portal) .pestanas a[aria-current="page"] { color: #fff; border-bottom-color: var(--c-acento); }

/* Encabezados y composición ------------------------------------------------ */
.cabecera { margin: 0 0 var(--e-5); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4) var(--e-5); flex-wrap: wrap; }
.cabecera h1, .cabecera h2, .cabecera p:last-child { margin-bottom: 0; }
.cabecera__texto { max-width: 72ch; }
.cabecera__texto p { margin: var(--e-2) 0 0; color: var(--c-tinta-3); font-size: var(--t-s); }
.acciones { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.acciones__aparte { margin-left: auto; }
h2.seccion { margin: var(--e-7) 0 var(--e-4); display: flex; align-items: center; gap: var(--e-3); }
h2.seccion::after { content: ""; flex: 1; height: 1px; background: var(--c-regla); }

/* Superficies -------------------------------------------------------------- */
.tarjeta { padding: var(--e-5); border: 1px solid var(--c-regla); border-radius: var(--r-m); background: var(--c-hoja); box-shadow: var(--sombra-hoja); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta--sin-relleno { padding: 0; overflow: hidden; }
.tarjeta--sin-relleno > .acciones, .tarjeta--sin-relleno > p { padding-inline: var(--e-5); }
.tarjeta--sin-relleno > :last-child:not(table) { padding-bottom: var(--e-5); }
.tarjeta--sin-relleno > .acciones:first-of-type { padding-top: var(--e-4); }
.etiqueta { margin: 0 0 var(--e-1); color: var(--c-tinta-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.texto-2 { color: var(--c-tinta-2); }
.texto-3 { color: var(--c-tinta-3); font-size: var(--t-s); }
.medida { max-width: 74ch; }
.vacio { padding: clamp(30px, 6vw, 58px); border-style: dashed; box-shadow: none; text-align: center; }
.vacio::before { content: ""; width: 38px; height: 3px; margin: 0 auto var(--e-4); display: block; border-radius: 3px; background: var(--c-secundario); }
.vacio p { max-width: 62ch; margin-inline: auto; color: var(--c-tinta-2); }
.vacio .acciones { justify-content: center; }

/* Formularios -------------------------------------------------------------- */
.campo { margin-bottom: var(--e-4); }
.campo label, .campo > .etiqueta { display: block; margin-bottom: 6px; color: var(--c-tinta); font-size: var(--t-s); font-weight: 700; letter-spacing: 0; text-transform: none; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input:not([type]), select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--c-regla); border-radius: var(--r-s); background: var(--c-hoja); font-size: .97rem; line-height: 1.4; transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background var(--t-rapida); }
textarea { min-height: 94px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--c-tinta-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-secundario); box-shadow: 0 0 0 3px var(--c-secundario-tinte); }
input[type="checkbox"], input[type="radio"] { width: 1.12rem; height: 1.12rem; accent-color: var(--c-secundario); }
input[type="file"] { width: 100%; padding: var(--e-4); border: 1px dashed var(--c-secundario); border-radius: var(--r-s); background: var(--c-secundario-tinte); font-size: var(--t-s); }
input[type="file"]::file-selector-button { margin-right: var(--e-3); padding: 8px 13px; border: 0; border-radius: var(--r-xs); background: var(--c-primario); color: #fff; font: 700 var(--t-s) var(--f-base); cursor: pointer; }
::placeholder { color: var(--c-tinta-3); opacity: 1; }
fieldset { min-width: 0; margin: 0; }
fieldset[disabled] { opacity: .68; }
legend { padding: 0 var(--e-1); }
fieldset.tarjeta > legend { float: left; width: 100%; margin: 0 0 var(--e-5); padding: 0; color: var(--c-tinta); font-family: var(--f-display); font-size: var(--t-l); font-weight: 700; letter-spacing: -.02em; text-transform: none; }
fieldset.tarjeta > legend + * { clear: both; }
.campo--casilla { display: flex; align-items: center; gap: var(--e-2); }
.campo--casilla label { margin: 0; font-weight: 400; }
.campo__ayuda { margin: 6px 0 0; color: var(--c-tinta-3); font-size: var(--t-xs); }
.campo__error, .errorlist { margin: 6px 0 0; padding: 0; color: var(--c-mal); font-size: var(--t-s); font-weight: 700; list-style: none; }
.campo--numero input { padding: 12px; text-align: center; font-size: 1.75rem; font-weight: 700; letter-spacing: .34em; }
.form-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 var(--e-4); }
.form-en-linea { display: inline; margin: 0; }
.fecha-sesion { margin-bottom: var(--e-4); display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.fecha-sesion label { font-size: var(--t-s); font-weight: 700; }
.fecha-sesion input { width: auto; }

/* Botones ----------------------------------------------------------------- */
.boton { min-height: 42px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); border: 1px solid var(--c-primario); border-radius: var(--r-s); background: var(--c-primario); color: #fff; font-size: var(--t-s); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida); }
.boton:hover { border-color: var(--c-primario-hondo); background: var(--c-primario-hondo); text-decoration: none; transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.boton--bloque { width: 100%; }
.boton--sec { border-color: var(--c-regla); background: var(--c-hoja); color: var(--c-primario-texto); }
.boton--sec:hover { border-color: var(--c-primario-tinte-2); background: var(--c-primario-tinte); color: var(--c-primario-texto); }
.boton--lima { border-color: var(--c-secundario); background: var(--c-secundario); color: #fff; }
.boton--lima:hover { border-color: var(--c-secundario-hondo); background: var(--c-secundario-hondo); }
.boton--sobre-banda { border-color: rgba(255,255,255,.42); background: transparent; color: #fff; }
.boton--sobre-banda:hover { border-color: #fff; background: rgba(255,255,255,.1); }
/* En encabezados docentes claros, la misma clase se vuelve una acción discreta. */
body:has(.barra--docente) .banda .boton--sobre-banda { border-color: var(--c-regla); background: var(--c-hoja); color: var(--c-primario-texto); }
body:has(.barra--docente) .banda .boton--sobre-banda:hover { background: var(--c-primario-tinte); }
.boton--peligro { border-color: var(--c-mal); background: transparent; color: var(--c-mal); }
.boton--peligro:hover { border-color: var(--c-mal); background: var(--c-mal-fondo); color: var(--c-mal); }
.boton--discreto { min-height: 36px; padding: 6px 11px; border-color: var(--c-regla); background: transparent; color: var(--c-tinta-2); }
.boton--discreto:hover { border-color: var(--c-primario-tinte-2); background: var(--c-primario-tinte); color: var(--c-primario-texto); }
.boton-texto { padding: 5px 2px; border: 0; background: none; color: var(--c-primario-texto); font-size: var(--t-s); font-weight: 700; text-decoration: underline transparent; text-underline-offset: 3px; cursor: pointer; }
.boton-texto:hover { text-decoration-color: currentColor; }
.boton-texto--peligro { color: var(--c-mal); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; text-decoration: none; }
.enlace-flecha .flecha { transition: transform var(--t-rapida); }
.enlace-flecha:hover .flecha { transform: translate(2px, -2px); }

/* Estados y avisos --------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--r-xs); font-size: .67rem; font-weight: 700; letter-spacing: .045em; line-height: 1.45; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.chip--bien { background: var(--c-bien-fondo); color: var(--c-bien); }
.chip--medio { background: var(--c-medio-fondo); color: var(--c-medio); }
.chip--mal { background: var(--c-mal-fondo); color: var(--c-mal); }
.chip--neutro { border-color: var(--c-regla); background: var(--c-neutro-fondo); color: var(--c-neutro); }
.chip--marca { background: var(--c-secundario-tinte); color: var(--c-secundario-hondo); }
body:has(.barra--portal) .banda .chip { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.alerta { max-width: 92ch; margin: 0 0 var(--e-4); padding: 13px 15px; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--r-s); font-size: var(--t-s); }
.alerta > :last-child { margin-bottom: 0; }
.alerta ul { margin: var(--e-2) 0 0; padding-left: 1.2em; }
.alerta--error { border-color: color-mix(in srgb, var(--c-mal) 26%, transparent); border-left-color: var(--c-mal); background: var(--c-mal-fondo); color: var(--c-mal); }
.alerta--info { border-color: var(--c-primario-tinte-2); border-left-color: var(--c-primario-texto); background: var(--c-primario-tinte); color: var(--c-tinta); }
.alerta--exito, .alerta--success { border-color: color-mix(in srgb, var(--c-bien) 26%, transparent); border-left-color: var(--c-bien); background: var(--c-bien-fondo); color: var(--c-bien); }
.alerta--warning { border-left-color: var(--c-medio); background: var(--c-medio-fondo); color: var(--c-medio); }
.mensajes { margin-bottom: var(--e-4); }

/* Cursos y cifras ---------------------------------------------------------- */
.filas { margin: 0; padding: 0; display: grid; gap: var(--e-3); list-style: none; }
.fila { min-height: 94px; padding: 18px 20px; display: grid; grid-template-columns: minmax(230px, 1fr) auto auto; align-items: center; gap: var(--e-4) var(--e-6); border: 1px solid var(--c-regla); border-radius: var(--r-m); background: var(--c-hoja); box-shadow: var(--sombra-hoja); transition: border-color var(--t-rapida), box-shadow var(--t-rapida); }
.fila:hover { border-color: var(--c-primario-tinte-2); box-shadow: var(--sombra-flotante); }
.fila__titulo { margin: 0; font-size: var(--t-l); }
.fila__titulo a { color: var(--c-tinta); text-decoration: none; }
.fila__titulo a:hover { color: var(--c-primario-texto); }
.fila__meta { margin: 5px 0 0; color: var(--c-tinta-3); font-size: var(--t-xs); }
.fila__meta span + span::before { content: "\00b7"; margin: 0 .55em; }
.fila__cifras { display: flex; gap: var(--e-5); }
.fila__cifras > div { min-width: 68px; display: grid; }
.fila__cifras b { color: var(--c-primario-texto); font: 700 1.45rem/1 var(--f-display); }
.fila__cifras span { margin-top: 5px; color: var(--c-tinta-3); font-size: var(--t-xs); }
.fila__accesos { display: flex; gap: var(--e-2); flex-wrap: wrap; justify-content: flex-end; }
.fila--enlace { grid-template-columns: 1fr auto; color: inherit; text-decoration: none; }
.fila--enlace > .flecha { color: var(--c-secundario); font-size: 1.15rem; transition: transform var(--t-rapida); }
.fila--enlace:hover { text-decoration: none; }
.fila--enlace:hover > .flecha { transform: translate(2px, -2px); }
.cifras { margin: 0 0 var(--e-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); }
.cifras > div { min-height: 100px; padding: var(--e-4); display: grid; align-content: space-between; gap: var(--e-2); border: 1px solid var(--c-regla); border-top: 3px solid var(--c-secundario); border-radius: var(--r-s); background: var(--c-hoja); }
.cifras > div > span:first-child { color: var(--c-tinta-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.cifras b { font: 700 1.45rem var(--f-display); letter-spacing: -.03em; }

/* Tablas ------------------------------------------------------------------ */
.tabla-envoltura { overflow: auto; scrollbar-gutter: stable; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
.tabla th, .tabla td { padding: 11px 13px; border-bottom: 1px solid var(--c-regla-suave); text-align: left; vertical-align: middle; }
.tabla thead th { position: relative; z-index: 2; padding-block: 12px; border-bottom: 1px solid var(--c-regla); background: var(--c-hoja-2); color: var(--c-tinta-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; vertical-align: bottom; }
.tabla thead th .texto-3 { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tabla tbody tr:hover > * { background: var(--c-primario-tinte); }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tr.inactiva > * { color: var(--c-tinta-3); }
.tabla tr.inactiva td:nth-child(2) { text-decoration: line-through; }
.tabla tr.separador > * { padding-block: 8px; border-bottom-color: var(--c-primario-tinte-2); background: var(--c-primario-tinte); color: var(--c-primario-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.tabla tr.separador:hover > * { background: var(--c-primario-tinte); }
.tabla th[scope="row"] { min-width: 205px; color: var(--c-tinta); font-weight: 700; letter-spacing: 0; text-transform: none; }
.tabla th[scope="row"] .texto-3 { font-weight: 400; }
.tabla .num, .num { text-align: right; white-space: nowrap; }
.tabla .centro, .centro { text-align: center; }
.tabla td.acciones { display: table-cell; text-align: right; white-space: nowrap; }
.tabla td.acciones > * + * { margin-left: var(--e-3); }
.tarjeta--sin-relleno .tabla th:first-child, .tarjeta--sin-relleno .tabla td:first-child { padding-left: var(--e-5); }
.tarjeta--sin-relleno .tabla th:last-child, .tarjeta--sin-relleno .tabla td:last-child { padding-right: var(--e-5); }
.planilla-envoltura { max-height: 72vh; }
.planilla { min-width: 840px; }
.planilla thead th { position: sticky; top: 0; z-index: 4; }
.planilla .planilla__fija { position: sticky; left: 0; z-index: 3; background: var(--c-hoja); box-shadow: 1px 0 0 var(--c-regla); }
.planilla thead .planilla__fija { z-index: 6; background: var(--c-hoja-2); }
.celda { min-width: 78px; }
input.celda__input { min-height: 34px; padding: 5px 7px; border: 1px solid transparent; border-bottom-color: var(--c-regla); border-radius: var(--r-xs); background: transparent; text-align: right; font-size: var(--t-s); font-weight: 700; }
input.celda__input:hover { border-color: var(--c-regla); background: var(--c-hoja); }
input.celda__input:focus { border-color: var(--c-secundario); background: var(--c-hoja); box-shadow: 0 0 0 3px var(--c-secundario-tinte); }
.celda--guardada input.celda__input { border-color: var(--c-secundario); background: var(--c-secundario-tinte); animation: guardado 600ms var(--curva); }
.celda--error input.celda__input { border-color: var(--c-mal); background: var(--c-mal-fondo); color: var(--c-mal); }
.celda__error { max-width: 10em; display: block; color: var(--c-mal); font-size: var(--t-xs); font-weight: 700; text-align: left; white-space: normal; }
.htmx-request .celda__input, .htmx-request.celda__input { opacity: .5; }
@keyframes guardado { from { box-shadow: 0 0 0 4px var(--c-secundario); } to { box-shadow: 0 0 0 0 transparent; } }
.situacion strong { font-size: var(--t-m); }
.tabla--lista input[type="radio"] { width: 1.22rem; height: 1.22rem; cursor: pointer; }
.tabla--lista td.centro:has(input:checked:not([value="A"])) { background: var(--c-medio-fondo); }
.tabla--lista td.centro:has(input[value="F"]:checked) { background: var(--c-mal-fondo); }
.tabla--tablero th, .tabla--tablero td { padding-inline: 8px; }
.tabla--tablero th[scope="row"] { min-width: 180px; }
.tabla--tablero thead th { white-space: normal; }
.ayuda-teclado { margin: var(--e-2) 0 0; padding: 0; display: flex; gap: var(--e-2) var(--e-4); flex-wrap: wrap; color: var(--c-tinta-3); font-size: var(--t-xs); list-style: none; }
.tecla { min-width: 1.65em; padding: 1px 5px; display: inline-block; border: 1px solid var(--c-regla); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--c-hoja); color: var(--c-tinta-2); font: .94em var(--f-mono); text-align: center; }

/* Ingreso ----------------------------------------------------------------- */
.ingreso { min-height: calc(100vh - 54px); display: grid; grid-template-columns: 1fr; background: var(--c-hoja); }
.ingreso__marca { position: relative; min-height: 260px; padding: clamp(32px, 6vw, 72px); display: grid; align-content: end; gap: var(--e-3); overflow: hidden; background: var(--c-primario); color: #fff; }
.ingreso__marca::before { content: ""; position: absolute; width: 290px; height: 290px; right: -80px; top: -110px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.035), 0 0 0 88px rgba(255,255,255,.025); }
.ingreso__marca h1 { position: relative; z-index: 1; max-width: 13ch; margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -.045em; }
.ingreso__marca > p:not(.ingreso__etiqueta) { position: relative; z-index: 1; max-width: 42ch; margin: 0; color: var(--c-sobre-banda-2); }
.ingreso__etiqueta { position: relative; z-index: 1; margin: 0 0 var(--e-2); color: #fff; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ingreso__firma { padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.78) !important; font-size: var(--t-xs); }
.ingreso__formulario { padding: clamp(38px, 7vw, 80px) clamp(24px, 6vw, 72px); display: grid; align-content: center; background: var(--c-hoja); }
.ingreso__formulario > * { width: 100%; max-width: 410px; margin-inline: auto; }
.ingreso__formulario h2 { margin-bottom: var(--e-5); font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem); }
.ingreso__formulario .texto-3 { margin-top: var(--e-4); }
.ingreso__otro { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--c-regla); font-size: var(--t-s); text-align: center; }

/* Portal del estudiante --------------------------------------------------- */
.marcador { padding-bottom: var(--e-6); display: grid; gap: var(--e-4); }
.marcador__cifra { margin: 0; display: flex; align-items: baseline; gap: var(--e-2) var(--e-3); flex-wrap: wrap; }
.marcador__valor { color: #fff; font: 700 var(--t-cifra)/.92 var(--f-display); letter-spacing: -.055em; }
.marcador__total { color: #8fd4cf; font: 700 var(--t-xl) var(--f-display); }
.marcador__texto { max-width: 72ch; margin: 0; color: var(--c-sobre-banda-2); font-size: var(--t-s); }
.marcador__texto strong { color: #fff; }
.regla { display: grid; gap: 7px; }
.regla__svg { width: 100%; height: 30px; display: block; overflow: visible; }
.regla__fondo { fill: rgba(255,255,255,.15); }
.regla__lleno { fill: #65b8b3; }
.regla__marca { stroke: #fff; stroke-width: 2; }
.regla__cortes { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; color: var(--c-sobre-banda-2); font-size: var(--t-xs); }
.regla__cortes td { padding: 0 var(--e-2) 0 6px; vertical-align: top; }
.regla__cortes td:first-child { padding-left: 0; }
.regla__cortes b { display: block; color: #fff; font-size: var(--t-m); }
.regla__leyenda { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; color: var(--c-sobre-banda-2); font-size: var(--t-xs); }
.regla__muestra { width: 2px; height: 14px; background: #fff; }
.sin-corte { white-space: nowrap; }
.resumen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.resumen > * > section:first-child > h2.seccion { margin-top: 0; }
.lista-datos { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.lista-datos dt, .lista-datos dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--c-regla-suave); }
.lista-datos dt { padding-right: var(--e-4); color: var(--c-tinta-2); }
.lista-datos dd { text-align: right; font-weight: 700; }
.lista-datos > :nth-last-child(-n+2) { border-bottom: 0; }
.refuerzo { margin: 0; padding: 0; display: grid; gap: var(--e-3); list-style: none; }
.refuerzo__item { padding: var(--e-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px var(--e-4); border: 1px solid var(--c-regla); border-left: 3px solid var(--c-acento); border-radius: var(--r-s); background: var(--c-hoja); }
.refuerzo__item h3 { margin: 0; font-family: var(--f-base); font-size: var(--t-m); }
.refuerzo__meta, .refuerzo__texto, .refuerzo__material { grid-column: 1 / -1; }
.refuerzo__meta { margin: 0; color: var(--c-tinta-3); font-size: var(--t-xs); }
.refuerzo__texto { margin: var(--e-2) 0 0; overflow-wrap: anywhere; }
.refuerzo__material { margin: var(--e-2) 0 0; display: flex; gap: 8px; color: var(--c-tinta-2); font-size: var(--t-s); overflow-wrap: anywhere; }
.refuerzo__material .flecha { color: var(--c-secundario); }

/* Exámenes y comentarios --------------------------------------------------- */
.examen { margin-bottom: var(--e-5); padding: 0; overflow: hidden; }
.examen__cabeza { padding: var(--e-5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); border-bottom: 1px solid var(--c-regla); background: var(--c-hoja-2); }
.examen__cabeza h3 { margin: 0 0 var(--e-2); }
.examen__sellos { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.examen__nota { text-align: right; }
.examen__nota b { display: block; font: 700 2.35rem/1 var(--f-display); letter-spacing: -.045em; }
.examen__nota span { color: var(--c-tinta-3); font-size: var(--t-xs); }
.examen__cuerpo { padding: var(--e-5); }
.examen--actualizado { border-color: var(--c-secundario); box-shadow: 0 0 0 3px var(--c-secundario-tinte), var(--sombra-hoja); }
.retro { max-width: 74ch; margin: 0 0 var(--e-4); }
.retro p { overflow-wrap: anywhere; }
.firma { margin: var(--e-4) 0 0; padding-top: var(--e-3); display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--c-regla); color: var(--c-tinta-3); font-size: var(--t-xs); }
.firma .flecha { color: var(--c-secundario); }
.firma strong { color: var(--c-tinta-2); }
.preguntas { margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-3); list-style: none; }
.pregunta { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 4px var(--e-3); }
.pregunta__p { color: var(--c-primario-texto); font-size: var(--t-s); font-weight: 700; }
.pregunta__tema { color: var(--c-tinta-2); font-size: var(--t-s); }
.pregunta__pts { font-size: var(--t-s); font-weight: 700; white-space: nowrap; }
.pregunta__barra { grid-column: 2 / 4; }
details.detalle { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--c-regla-suave); }
details.detalle summary, details.tarjeta > summary { display: flex; align-items: center; gap: 9px; color: var(--c-primario-texto); font-size: var(--t-s); font-weight: 700; list-style: none; cursor: pointer; }
details.detalle summary::-webkit-details-marker, details.tarjeta > summary::-webkit-details-marker { display: none; }
details.detalle summary::before, details.tarjeta > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-rapida); }
details.detalle[open] summary::before, details.tarjeta[open] > summary::before { transform: rotate(45deg); }
.item { padding: var(--e-2) 0; display: grid; grid-template-columns: 6rem 4.5rem minmax(0, 1fr); gap: var(--e-2); border-bottom: 1px solid var(--c-regla-suave); font-size: var(--t-s); }
.item__id, .item__pts { font-weight: 700; }
.item__id, .item__razon { overflow-wrap: anywhere; }
.item__razon { color: var(--c-tinta-2); }
.lectura { margin-top: var(--e-4); }
.hilo { margin-top: var(--e-3); display: grid; gap: var(--e-2); }
.hilo__mensaje { max-width: 74ch; padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--c-neutro-fondo); }
.hilo__mensaje--docente { margin-left: min(8%, 56px); border-left: 3px solid var(--c-secundario); background: var(--c-secundario-tinte); }
.hilo__mensaje p:last-child { margin: 0; }
.hilo__mensaje .etiqueta { margin-bottom: 4px; }
.hilo label { display: block; margin: var(--e-3) 0 6px; font-size: var(--t-s); font-weight: 700; }
meter.medidor { width: 100%; height: 7px; display: block; border: 0; border-radius: 999px; background: var(--c-primario-tinte-2); -webkit-appearance: none; appearance: none; }
meter.medidor::-webkit-meter-bar { height: 7px; border: 0; border-radius: 999px; background: var(--c-primario-tinte-2); }
meter.medidor::-webkit-meter-optimum-value { border-radius: 999px; background: var(--c-secundario); }
meter.medidor::-webkit-meter-suboptimum-value { border-radius: 999px; background: var(--c-acento); }
meter.medidor::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--c-mal); }
meter.medidor::-moz-meter-bar { border-radius: 999px; background: var(--c-secundario); }
.medidor--mini { min-width: 70px; height: 6px; margin: 5px 0 0; }

/* Páginas auxiliares y utilidades ------------------------------------------ */
.aviso-pagina { max-width: 620px; margin: var(--e-6) auto; padding: clamp(30px, 6vw, 58px); border: 1px solid var(--c-regla); border-radius: var(--r-l); background: var(--c-hoja); box-shadow: var(--sombra-hoja); text-align: center; }
.aviso-pagina::before { content: ""; width: 44px; height: 3px; margin: 0 auto var(--e-4); display: block; background: var(--c-acento); }
.mt-3 { margin-top: var(--e-3); }
.mt-5 { margin-top: var(--e-5); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }
.derecha { text-align: right; }

/* Responsive -------------------------------------------------------------- */
@media (min-width: 720px) {
  .barra__interior, .banda__interior, .contenedor { padding-left: var(--e-5); padding-right: var(--e-5); }
  .banda__interior { padding-top: var(--e-6); }
  .banda--sola .banda__interior { padding-bottom: var(--e-6); }
}
@media (min-width: 860px) {
  .resumen { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items: start; }
}
@media (min-width: 900px) {
  .ingreso { grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); }
  .ingreso__marca { min-height: calc(100vh - 54px); }
}
@media (min-width: 960px) {
  body:has(.barra--docente) { display: grid; grid-template-columns: var(--ancho-barra) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  body:has(.barra--docente) > .barra--docente { grid-column: 1; grid-row: 1 / -1; }
  body:has(.barra--docente) > main { grid-column: 2; grid-row: 1; }
  body:has(.barra--docente) > .pie { grid-column: 2; grid-row: 2; }
  .barra--docente { position: sticky; top: 0; height: 100vh; border: 0; border-right: 1px solid rgba(255,255,255,.1); }
  .barra--docente .barra__interior { width: 100%; height: 100%; padding: var(--e-5) var(--e-4); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .barra--docente .marca { padding: 0 var(--e-2) var(--e-5); }
  .barra--docente .nav { width: 100%; display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: var(--e-1); }
  .barra--docente .nav > a { width: 100%; min-height: 44px; padding: 11px 12px; }
  .barra--docente .nav__salir { width: 100%; margin: auto 0 0; }
  .barra--docente .nav__salir .boton { width: 100%; }
  body:has(.barra--docente) .banda__interior, body:has(.barra--docente) .contenedor, body:has(.barra--docente) .pie__interior { max-width: var(--ancho); }
}
@media (max-width: 980px) {
  .fila { grid-template-columns: minmax(220px, 1fr) auto; }
  .fila__accesos { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .barra__interior { min-height: 60px; }
  .marca__nombre small { display: none; }
  .nav > a { padding-inline: 9px; }
  .nav__salir { margin-left: 0; }
  .banda__interior { padding-top: var(--e-5); }
  .contenedor { padding-top: var(--e-5); }
  .fila { grid-template-columns: 1fr; padding: var(--e-4); }
  .fila__cifras { justify-content: flex-start; }
  .fila__accesos { grid-column: auto; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .fila__accesos .boton { flex: 0 0 auto; }
  .acciones__aparte { margin-left: 0; }
  .examen__cabeza { grid-template-columns: 1fr; }
  .examen__nota { text-align: left; }
  .item { grid-template-columns: 1fr auto; }
  .item__razon { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .barra--portal .barra__interior { flex-wrap: nowrap; }
  .nav__secundario { display: none !important; }
  .nav { gap: 0; }
  .nav > a { font-size: var(--t-xs); }
  .banda__meta span { display: block; }
  .banda__meta span + span::before { display: none; }
  .cabecera { align-items: stretch; }
  .cabecera > .acciones { width: 100%; }
  .cabecera > .acciones .boton { flex: 1 1 auto; }
  .regla__cortes { font-size: .64rem; }
  .refuerzo__item { grid-template-columns: 1fr; }
  .refuerzo__item .chip { justify-self: start; }
  .pregunta { grid-template-columns: 2.4rem 1fr; }
  .pregunta__pts, .pregunta__barra { grid-column: 2; }
  .pie__interior { display: grid; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .barra, .pie, .no-imprimir, .pestanas, .lectura, details.detalle form { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  .banda { border-bottom: 2px solid #000; background: #fff !important; color: #000; }
  .banda h1, .banda h2, .banda__meta { color: #000 !important; }
  .tarjeta { break-inside: avoid; box-shadow: none; }
}