/* Aplicación del aula (alumno, Montesafe y fiscalizador). Reglas en aula/REGLAS_UI.md.
   Pensada primero para el celular: barra inferior con el pulgar, áreas de 44 px o más y texto de 16 px o más. */
:root {
  --barra-alto: 3.75rem;
  --nav-alto: 4.25rem;
  --vivo: #D9443C;              /* indicador "en vivo": rojo de transmisión, solo para ese estado */
  --ok-fondo: #E8F4EC; --ok-texto: #22663F;
  --riesgo-fondo: #FBF1DE; --riesgo-texto: #8A5A12;
  --no-fondo: #FBE9E8; --no-texto: #A1322D;
}
.app { min-height: 100vh; background: var(--fondo); color: var(--tinta); }
.app [hidden] { display: none !important; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* Cinta de muestra: siempre visible y discreta. */
.cinta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .35rem var(--gutter); background: var(--noche); color: var(--suave-sobre-noche);
  font: 500 .75rem/1.3 var(--f-texto); letter-spacing: .04em; text-align: center;
}
.cinta b { color: var(--claro-sobre-noche); font-weight: 600; }

/* Barra superior: marca, quién es y salir. Vidrio claro, como la barra de la presentación. */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--barra-alto); padding: .5rem max(var(--gutter), env(safe-area-inset-left));
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--linea);
}
.barra__lado { display: flex; align-items: center; gap: .5rem; }
.quien { display: flex; align-items: center; gap: .6rem; }
.quien__avatar {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, var(--azul) 0%, var(--marino) 100%); color: var(--blanco);
  font: 600 .8125rem/1 var(--f-texto); letter-spacing: .02em;
}
.quien__texto { display: none; line-height: 1.2; }
.quien__texto b { display: block; font-size: .9375rem; font-weight: 600; }
.quien__texto small { font-size: .8125rem; color: var(--texto-suave); }
.salir {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: var(--texto); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.salir:hover { background: var(--azul-050); color: var(--marino); }
@media (min-width: 560px) { .quien__texto { display: block; } }

/* Cuerpo: en el celular, contenido + barra de pestañas abajo; desde 1024 px, columna lateral. */
.app__cuerpo { display: block; }
.app__main {
  width: 100%; max-width: 68rem; margin-inline: auto; outline: none;
  padding: 1.25rem var(--gutter) calc(var(--nav-alto) + 2rem + env(safe-area-inset-bottom));
}
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -18px rgba(15, 30, 48, .25);
}
.nav a {
  flex: 1; min-width: 0; min-height: 3.5rem; max-width: 7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  border-radius: 14px; text-decoration: none; color: var(--texto-suave);
  font: 600 .6875rem/1.1 var(--f-texto); letter-spacing: .01em; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.nav a .ico { width: 1.4rem; height: 1.4rem; }
.nav a[aria-current] { color: var(--azul-600); }
.nav a[aria-current] .ico { stroke-width: 2.2; }
.nav a:hover { color: var(--marino); }
@media (min-width: 1024px) {
  .app__cuerpo { display: grid; grid-template-columns: 15.5rem 1fr; }
  .nav {
    position: sticky; top: var(--barra-alto); height: calc(100vh - var(--barra-alto)); align-self: start;
    flex-direction: column; justify-content: flex-start; gap: .25rem; padding: 1.5rem 1rem;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 0; box-shadow: none;
    border-right: 1px solid var(--linea);
  }
  .nav a { flex: none; max-width: none; min-height: 2.9rem; flex-direction: row; justify-content: flex-start; gap: .75rem; padding: 0 .9rem; font-size: .9375rem; font-weight: 500; }
  .nav a .ico { width: 1.25rem; height: 1.25rem; }
  .nav a[aria-current] { background: var(--blanco); color: var(--marino); box-shadow: var(--sombra-1); font-weight: 600; }
  .nav a[aria-current] .ico { color: var(--azul); }
  .app__main { padding: 2rem clamp(1.5rem, 3vw, 3rem) 4rem; }
}

/* Encabezado de cada pestaña */
.encabezado { margin-bottom: 1.25rem; }
.encabezado h1 { margin-top: .6rem; font-size: var(--t-xl); color: var(--tinta); }
.encabezado p { margin-top: .4rem; max-width: 60ch; color: var(--texto); }
.encabezado .etiqueta { line-height: 1.5; }

/* Superficies. En la aplicación sí van tarjetas: cada bloque es una herramienta distinta (REGLAS_UI.md). */
.tarjeta {
  position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra-1); padding: 1.25rem;
}
.tarjeta + .tarjeta, .rejilla + .tarjeta, .tarjeta + .rejilla, .rejilla + .rejilla { margin-top: 1rem; }
.rejilla > *, .cifras > * { margin-top: 0 !important; }   /* dentro de una rejilla, el espacio lo pone el gap */
.tarjeta__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.tarjeta__cabeza h2 { font-size: 1.125rem; letter-spacing: -.01em; }
.tarjeta__cabeza a, .enlace { color: var(--azul-600); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.tarjeta__cabeza a { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.6rem -.4rem; padding: 0 .4rem; white-space: nowrap; }
.tarjeta__cabeza a:hover, .enlace:hover { text-decoration: underline; }
.rejilla { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .tarjeta { padding: 1.5rem; }
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .rejilla--vivo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.nota { font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
.nota b { color: var(--texto); font-weight: 600; }

/* Clase en vivo: la tarjeta protagonista. Azul noche, con el punto rojo que late. */
.vivo {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); padding: 1.35rem 1.25rem 1.25rem; color: var(--claro-sobre-noche);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(37, 127, 204, .32), transparent 60%),
    linear-gradient(160deg, var(--noche-3) 0%, var(--noche) 70%);
  box-shadow: var(--sombra-2);
}
.vivo::before {   /* rejilla tenue, eco de la puerta */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background:
    linear-gradient(90deg, rgba(127, 182, 232, .06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(0deg, rgba(127, 182, 232, .06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.vivo__chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .55rem; border-radius: var(--r-pill);
  background: rgba(217, 68, 60, .16); color: #FFD9D6; font: 700 .6875rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
}
.vivo__punto { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: var(--vivo); }
.vivo__punto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--vivo); animation: late 1.6s ease-out infinite; }
@keyframes late { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.vivo h2 { margin-top: .85rem; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); color: var(--blanco); }
.vivo__datos { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .9375rem; color: var(--suave-sobre-noche); }
.vivo__datos span { display: inline-flex; align-items: center; gap: .4rem; }
.vivo__datos .ico { width: 1.05rem; height: 1.05rem; color: var(--azul-300); }
.vivo__accion { margin-top: 1.25rem; display: grid; gap: .75rem; }
.vivo__accion .boton { width: 100%; }
@media (min-width: 560px) { .vivo__accion .boton { width: auto; justify-self: start; } }
.vivo__registrado {
  display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: var(--r-md);
  background: rgba(46, 125, 79, .16); border: 1px solid rgba(120, 200, 150, .28); color: #CDEFD9;
}
.vivo__registrado .ico { width: 1.4rem; height: 1.4rem; color: #8FE0AE; margin-top: .1rem; }
.vivo__registrado b { display: block; color: var(--blanco); font-weight: 600; }
.vivo__registrado small { font-size: .875rem; }
.vivo__pie { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(232, 238, 244, .12); font-size: .8125rem; color: var(--suave-sobre-noche); }

/* Fila de conectados (Montesafe y fiscalizador) */
.conectados { display: grid; gap: .1rem; margin-top: 1rem; }
.conectado {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  padding: .55rem .25rem; border-bottom: 1px solid rgba(232, 238, 244, .1);
}
.conectado:last-child { border-bottom: 0; }
.conectado__avatar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(127, 182, 232, .14); color: var(--claro-sobre-noche); font: 600 .75rem/1 var(--f-texto); }
.conectado__nombre { color: var(--blanco); font-weight: 500; }
.conectado__hora { font: 600 .9375rem/1 var(--f-cifra); letter-spacing: .02em; color: var(--azul-300); font-variant-numeric: tabular-nums; }
.conectado--nuevo { animation: nuevo 1.6s var(--ease); }
@keyframes nuevo { 0% { background: rgba(143, 224, 174, .28); } 100% { background: transparent; } }

/* Anillo de asistencia */
.medidor { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.medidor__texto { flex: 1 1 13rem; }
@media (max-width: 559px) { .medidor { gap: 1rem; } .medidor .anillo { width: 112px; height: 112px; } .medidor__anillo > b { font-size: 1.75rem; } }
.medidor__anillo { position: relative; display: grid; place-items: center; }
.medidor__anillo > b { position: absolute; font: 600 2rem/1 var(--f-cifra); color: var(--tinta); font-variant-numeric: tabular-nums; }
.medidor__anillo > b small { font-size: .55em; margin-left: .05em; color: var(--texto-suave); }
.anillo { transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 10; }
.anillo__pista { stroke: #E7EDF3; }
.anillo__valor { stroke: var(--azul); stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease); }
.anillo--bajo .anillo__valor { stroke: var(--warning, #B7791F); }
.anillo__minimo { fill: var(--tinta) !important; stroke: var(--blanco) !important; stroke-width: 2 !important; }
.js .anillo__valor { animation: anillo-llena 1s var(--ease) both; }
@keyframes anillo-llena { from { stroke-dashoffset: var(--largo); } }
.medidor__texto h2 { font-size: 1.125rem; }
.medidor__texto p { margin-top: .35rem; color: var(--texto); }
.medidor__texto .nota { margin-top: .5rem; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 900px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra-tarjeta { padding: 1rem 1.1rem 1.1rem; overflow: hidden; }
.cifra-tarjeta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--azul), transparent 75%); }
.cifra-tarjeta--riesgo::before { background: linear-gradient(90deg, #D69A2D, transparent 75%); }
.cifra-tarjeta--no::before { background: linear-gradient(90deg, var(--no-texto), transparent 75%); }
.cifra-tarjeta small { display: block; font: 600 .6875rem/1.3 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.cifra-tarjeta .cifra { display: block; margin-top: .55rem; font-size: clamp(2.1rem, 1.6rem + 2vw, 2.75rem); }
.cifra-tarjeta span { display: block; margin-top: .35rem; font-size: .875rem; color: var(--texto); }

/* Chips de estado y modalidad. El color nunca va solo: siempre lleva texto. */
.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--r-pill);
  font: 600 .75rem/1.2 var(--f-texto); white-space: nowrap; background: #EEF2F6; color: var(--texto);
}
.chip .ico { width: .95rem; height: .95rem; }
.chip--virtual { background: var(--azul-050); color: var(--azul-600); }
.chip--presencial { background: #EFF1F4; color: var(--marino); }
.chip--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip--riesgo { background: var(--riesgo-fondo); color: var(--riesgo-texto); }
.chip--no { background: var(--no-fondo); color: var(--no-texto); }
.chip--vivo { background: #FCE9E8; color: #A3302A; }
.chip--vivo::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--vivo); }
.chip--obligatoria { background: transparent; border: 1px solid #D5DEE7; color: var(--texto); }

/* Lista de clases (calendario) */
.semana + .semana { margin-top: 1.5rem; }
.semana h2 { font: 600 .75rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: .6rem; }
.clases { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-1); overflow: hidden; }
.clase {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: .9rem; align-items: start;
  padding: .95rem 1.1rem; border-bottom: 1px solid var(--linea);
}
.clase:last-child { border-bottom: 0; }
.clase--vivo { background: linear-gradient(90deg, rgba(217, 68, 60, .05), transparent 60%); box-shadow: inset 3px 0 0 var(--vivo); }
.clase--pasada .clase__nombre { color: var(--texto); }
.clase__fecha { text-align: center; padding-top: .1rem; }
.clase__fecha b { display: block; font: 600 1.5rem/1 var(--f-cifra); color: var(--tinta); font-variant-numeric: tabular-nums; }
.clase__fecha span { display: block; margin-top: .25rem; font: 600 .6875rem/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.clase__nombre { font-weight: 600; line-height: 1.35; color: var(--tinta); }
.clase__datos { margin-top: .3rem; font-size: .875rem; color: var(--texto-suave); }
.clase__chips { grid-column: 2; margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 768px) {
  .clase { grid-template-columns: 3.6rem 1fr auto; align-items: center; }
  .clase__chips { grid-column: 3; margin-top: 0; justify-content: flex-end; }
}

/* Barra de asistencia (lista de alumnos) con la marca del 80 % */
.barra-asis { position: relative; height: .5rem; border-radius: 999px; background: #E7EDF3; overflow: visible; }
.barra-asis i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--azul); }
.barra-asis--riesgo i { background: #D69A2D; }
.barra-asis--no i { background: var(--no-texto); }
.barra-asis::after { content: ''; position: absolute; left: 80%; top: -.25rem; bottom: -.25rem; width: 2px; background: var(--tinta); border-radius: 2px; }

/* Alumnos: tarjetas en el celular, tabla desde 900 px */
.buscador { position: relative; margin-bottom: 1rem; }
.buscador .ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }
.buscador input { padding-left: 2.75rem; }
.alumnos { display: grid; gap: .6rem; }
.alumno {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .85rem; align-items: center; width: 100%;
  padding: .9rem 1rem; border-radius: var(--r-md); border: 1px solid var(--linea); background: var(--blanco);
  text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: var(--sombra-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.alumno:hover { border-color: #C9D6E3; box-shadow: var(--sombra-2); }
.alumno__avatar { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--azul-050); color: var(--marino); font: 600 .8125rem/1 var(--f-texto); }
.alumno__nombre { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.alumno__rut { font-size: .8125rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.alumno__asis { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 3rem 8.25rem; align-items: center; gap: .6rem; margin-top: .55rem; }
.alumno__asis .chip { justify-self: end; }
.alumno__pct { font: 600 1.05rem/1 var(--f-cifra); font-variant-numeric: tabular-nums; min-width: 2.8rem; text-align: right; }
@media (min-width: 900px) {
  .alumnos { gap: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-1); overflow: hidden; }
  .alumnos__cabeza, .alumno { display: grid; grid-template-columns: 2.5rem minmax(14rem, 1.4fr) 8.5rem minmax(10rem, 1fr) 3.2rem 9.5rem; gap: 1rem; align-items: center; }
  .alumnos__cabeza { padding: .75rem 1.25rem; border-bottom: 1px solid var(--linea); font: 600 .6875rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
  .alumno { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; box-shadow: none; padding: .8rem 1.25rem; }
  .alumno:last-child { border-bottom: 0; }
  .alumno:hover { background: #FAFBFD; box-shadow: none; }
  .alumno__avatar { grid-row: auto; }
  .alumno__asis { display: contents; }
  .alumno__asis .chip { justify-self: start; }
  .alumno__asis { margin-top: 0; }
}
@media (max-width: 899px) { .alumnos__cabeza { display: none; } }

/* Formularios */
.campo { display: grid; gap: .4rem; }
.campo + .campo { margin-top: .9rem; }
.campo label { font-weight: 600; font-size: .9375rem; color: var(--tinta); }
.campo small { font-size: .8125rem; color: var(--texto-suave); }
.entrada {
  width: 100%; min-height: 3rem; padding: .7rem .95rem; border-radius: var(--r-sm);
  border: 1px solid #C9D6E3; background: var(--blanco); color: var(--tinta);
  font: 400 1.0625rem/1.3 var(--f-texto);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 127, 204, .22); }
.entrada[aria-invalid="true"] { border-color: var(--no-texto); box-shadow: 0 0 0 3px rgba(161, 50, 45, .12); }
.campo__error { color: var(--no-texto); font-size: .875rem; font-weight: 500; }
.formulario__acciones { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.boton--chico { --alto: 2.75rem; padding: 0 1.1rem; font-size: .9375rem; }
.boton--bloque { width: 100%; }
.boton[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Diálogo (ficha del alumno, agregar alumno). En el celular sube desde abajo. */
.dialogo {
  width: min(40rem, 100%); max-height: min(90vh, 52rem); margin: auto auto 0; padding: 0;
  border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 -20px 60px -20px rgba(11, 21, 32, .5);
}
.dialogo::backdrop { background: rgba(11, 21, 32, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogo[open] { animation: sube var(--dur-2) var(--ease); }
@keyframes sube { from { transform: translateY(24px); opacity: 0; } }
.dialogo { max-width: 100%; }
@media (min-width: 768px) { .dialogo { margin: auto; border-radius: var(--r-lg); max-width: calc(100% - 2rem); } }
.dialogo__cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.dialogo__cabeza h2 { font-size: 1.125rem; }
.dialogo__cuerpo { padding: 1.25rem; }
.cerrar { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: #EEF2F6; color: var(--texto); cursor: pointer; }
.cerrar:hover { background: #E2E9F0; }

.ficha { display: grid; gap: .25rem 1rem; grid-template-columns: auto 1fr; font-size: .9375rem; }
.ficha dt { color: var(--texto-suave); }
.ficha dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.registro { margin-top: 1rem; display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.registro li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .75rem; align-items: center; padding: .6rem .85rem; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.registro li:last-child { border-bottom: 0; }
.registro small { display: block; color: var(--texto-suave); font-size: .8125rem; }

/* Pasar lista (clases presenciales) */
.lista-presentes { display: grid; gap: .1rem; margin-top: .75rem; }
.lista-presentes label { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .3rem .25rem; border-bottom: 1px solid var(--linea); cursor: pointer; }
.lista-presentes input { width: 1.3rem; height: 1.3rem; accent-color: var(--azul-boton); }

/* Documentos */
.documento { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: start; }
.documento__icono { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--azul-050); color: var(--azul-600); }
.documento h2 { font-size: 1.0625rem; }
.documento p { margin-top: .3rem; color: var(--texto); font-size: .9375rem; }
.documento__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 768px) { .documento__acciones { grid-column: 2; } }
.plazo { display: flex; align-items: flex-start; gap: .5rem; margin-top: .5rem; font-size: .875rem; color: var(--marino); font-weight: 600; }
.plazo .ico { width: 1rem; height: 1rem; margin-top: .15rem; color: var(--azul); }

/* Material */
.material { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.material:last-child { border-bottom: 0; }
.material:hover .material__titulo { color: var(--azul-600); }
.material__icono { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #EEF2F6; color: var(--marino); }
.material__titulo { font-weight: 600; line-height: 1.35; }
.material__datos { font-size: .8125rem; color: var(--texto-suave); }
.material .ico--externo { width: 1.1rem; height: 1.1rem; color: var(--texto-suave); }
.grabacion { position: relative; min-height: 12rem; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 1rem;
  background: radial-gradient(80% 80% at 50% 40%, var(--noche-3), var(--noche)); color: var(--suave-sobre-noche); }
@media (min-width: 560px) { .grabacion { aspect-ratio: 16 / 9; min-height: 0; } }
.grabacion__boton { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; margin: 0 auto .75rem; background: rgba(255, 255, 255, .12); color: var(--blanco); border: 1px solid rgba(255, 255, 255, .2); }
.grabacion__boton .ico { width: 1.6rem; height: 1.6rem; }

/* Ensayo de examen */
.ensayo__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ensayo__reloj { display: inline-flex; align-items: center; gap: .4rem; font: 600 1.25rem/1 var(--f-cifra); color: var(--marino); font-variant-numeric: tabular-nums; }
.progreso { height: .35rem; border-radius: 999px; background: #E7EDF3; overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--azul); border-radius: 999px; transition: width var(--dur-2) var(--ease); }
.pregunta { margin-top: 1.25rem; }
.pregunta legend { font: 700 1.1875rem/1.35 var(--f-titulo); color: var(--tinta); padding: 0; }
.pregunta fieldset { border: 0; margin: 0; padding: 0; }
.opciones { margin-top: 1rem; display: grid; gap: .6rem; }
.opcion { display: flex; align-items: center; gap: .85rem; min-height: 3.25rem; padding: .7rem 1rem; border-radius: var(--r-md); border: 1px solid #D5DEE7; background: var(--blanco); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.opcion:hover { border-color: var(--azul); }
.opcion input { width: 1.2rem; height: 1.2rem; accent-color: var(--azul-boton); flex: none; }
.opcion:has(input:checked) { border-color: var(--azul); background: var(--azul-050); }
.opcion--correcta { border-color: var(--success, #2E7D4F) !important; background: var(--ok-fondo) !important; }
.opcion--incorrecta { border-color: var(--no-texto) !important; background: var(--no-fondo) !important; }
.explicacion { margin-top: .9rem; padding: .85rem 1rem; border-radius: var(--r-md); background: #F3F6FA; font-size: .9375rem; color: var(--texto); }
.explicacion b { color: var(--tinta); }
.resultado { text-align: center; padding: 1rem 0 .5rem; }
.resultado .cifra { font-size: clamp(3.5rem, 3rem + 3vw, 5rem); }

/* Aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--nav-alto) + 1rem + env(safe-area-inset-bottom)); z-index: 50;
  max-width: min(28rem, calc(100% - 2rem)); padding: .85rem 1.1rem; border-radius: var(--r-md);
  background: var(--noche); color: var(--claro-sobre-noche); box-shadow: var(--sombra-2);
  font-size: .9375rem; line-height: 1.4; opacity: 0; pointer-events: none;
  transform: translate(-50%, 12px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.aviso[data-tipo="error"] { background: #5B1E1B; }
.aviso.es-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .aviso { bottom: 1.5rem; } }

/* Esqueleto mientras carga */
.cargando { display: grid; gap: 1rem; }
.cargando i { display: block; height: 7rem; border-radius: var(--r-lg); background: linear-gradient(90deg, #EDF1F5 25%, #F5F8FA 50%, #EDF1F5 75%) 0 0 / 200% 100%; animation: brilla 1.3s linear infinite; }
.cargando i:first-child { height: 13rem; }
@keyframes brilla { to { background-position: -200% 0; } }

.vacio { padding: 1.25rem; text-align: center; color: var(--texto-suave); }
.separador { height: 1px; background: var(--linea); margin: 1.1rem 0; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .vivo__punto::after, .js .anillo__valor, .cargando i, .conectado--nuevo, .dialogo[open] { animation: none; }
  .anillo__valor, .aviso, .alumno, .opcion, .progreso i { transition: none; }
}

/* Guía OTEC (panel de Montesafe) */
.guia__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.guia__avance { flex: 1 1 14rem; display: grid; gap: .5rem; font-size: .9375rem; color: var(--texto); }
.guia__avance b { font: 600 1.35rem/1 var(--f-cifra); color: var(--azul); }
.guia__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.guia__bloque + .guia__bloque { margin-top: 1rem; }
.guia__cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; }
.guia__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--azul-050); color: var(--azul-600); font: 600 1rem/1 var(--f-cifra); }
.guia__num--alerta { background: var(--riesgo-fondo); color: var(--riesgo-texto); }
.guia__num--alerta .ico { width: 1.1rem; height: 1.1rem; }
.guia__cabeza h2 { font-size: 1.125rem; line-height: 1.3; }
.guia__norma { margin-top: .2rem; font-size: .8125rem; color: var(--texto-suave); }
.guia__resumen { margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--r-sm); background: #F3F6FA; font-size: .9375rem; color: var(--texto); }
.guia__items { margin-top: .5rem; }
.guia__item { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: .8rem .25rem; border-bottom: 1px solid var(--linea); cursor: pointer; }
.guia__items li:last-child .guia__item { border-bottom: 0; }
.guia__item input { width: 1.35rem; height: 1.35rem; margin-top: .15rem; accent-color: var(--azul-boton); }
.guia__item b { display: block; font-weight: 500; color: var(--tinta); line-height: 1.5; }
.guia__item small { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
.guia__item:has(input:checked) b { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: rgba(94, 111, 130, .5); }
.guia__capacitadores { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.guia__capacitadores h4 { font: 700 1rem/1.3 var(--f-titulo); margin: 0 0 .6rem; }
.guia__capacitadores h4:not(:first-child) { margin-top: 1.25rem; }
.guia__generales { display: grid; gap: .35rem; padding-left: 1.1rem; list-style: disc; font-size: .9375rem; color: var(--texto); }
.guia__tabla-env { overflow-x: auto; }
.guia__tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.guia__tabla th, .guia__tabla td { padding: .6rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.guia__tabla thead th { font: 600 .75rem/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.guia__tabla tbody th { width: 38%; font-weight: 600; color: var(--tinta); }
.guia__tabla td { color: var(--texto); }
.guia__bloque--confirmar { border-color: #EBD9B4; background: #FFFCF5; }
.guia__confirmar { margin-top: .75rem; display: grid; gap: .9rem; }
.guia__confirmar li { padding-left: .9rem; border-left: 3px solid #D69A2D; }
.guia__confirmar p { margin-top: .25rem; font-size: .9375rem; color: var(--texto); }
.guia__aviso { margin-top: 1rem; }

/* Imprimir desde el panel (Guía OTEC y demás vistas): solo el contenido. */
@media print {
  @page { size: A4; margin: 14mm; }
  .app { background: none; }
  .cinta, .barra, .nav, .aviso, .guia__acciones, .saltar { display: none !important; }
  .app__cuerpo { display: block; }
  .app__main { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; break-inside: avoid-page; }
  .guia__bloque { break-inside: auto; }
  .guia__item { break-inside: avoid; }
  .guia__item input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}