/* ============================================================================
   SAI · Sistema de Aprendizaje Inclusivo · Hoja de estilos única
   Identidad E.S.T. N° 75 · Contraste WCAG 2.1 AA · Modos de accesibilidad
   © 2026 I.S.C. José Adolfo López Gamboa
   ============================================================================ */
@font-face { font-family: 'Panton'; src: url('../fonts/Panton.ttf') format('truetype'); font-display: swap; }

:root {
  --rojo: #BC2251; --rojo-osc: #7A0C2E; --rojo-suave: #FBEAF0;
  --dorado: #C9A35D; --dorado-suave: #F8F0DF; --dorado-texto: #6B4E12;
  --verde: #12704F; --verde-suave: #E3F4EC;
  --alerta: #B3261E; --alerta-suave: #FCE8E6;
  --azul: #1F5FAD; --azul-suave: #E6EFFA;
  --ambar: #8A5A00; --ambar-suave: #FFF4D6;
  --fondo: #F4F5F8; --superficie: #FFFFFF; --tinta: #1A1D20; --suave: #545D69; --borde: #DCE0E7;
  --foco: #1F5FAD;
  --sombra: 0 2px 10px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-alta: 0 12px 32px rgba(16, 24, 40, .14);
  --r: 16px; --r-sm: 10px; --r-pill: 999px;
  --fuente: 'Panton', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --lateral: 272px;
  --toque: 44px;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(16px * var(--escala, 1)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--tinta); line-height: 1.55; min-height: 100vh; }
img { max-width: 100%; height: auto; }
a { color: var(--rojo); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: 1.25rem; } h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.5rem 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -300px; z-index: 1000; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; }
.saltar:focus { top: 12px; }
[hidden] { display: none !important; }

/* ── Marco general ─────────────────────────────────────────────────────── */
.marco { display: flex; flex-direction: column; min-height: 100vh; }
.barra-lateral { background: linear-gradient(165deg, var(--rojo) 0%, var(--rojo-osc) 100%); color: #fff; padding: 14px 16px; position: sticky; top: 0; z-index: 50; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca-logo { font-size: 1.9rem; font-weight: 900; letter-spacing: 3px; color: #fff; text-decoration: none; line-height: 1; }
.marca-sub { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
.menu-movil { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-weight: 700; min-height: var(--toque); cursor: pointer; }
.usuario-chip { display: none; }
.nav { display: none; margin-top: 12px; }
.nav.abierto { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nav a, .nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--toque); padding: 10px 14px; border-radius: var(--r-sm); color: #fff; text-decoration: none; font: inherit; font-weight: 700; font-size: .92rem; background: transparent; border: 0; cursor: pointer; text-align: left; }
.nav a:hover, .nav-btn:hover { background: rgba(255,255,255,.14); }
.nav a.activo { background: #fff; color: var(--rojo); }
.nav-ico { width: 1.5em; text-align: center; font-size: 1.1rem; }
.insignia { margin-left: auto; background: var(--dorado); color: #2B1F00; font-size: .75rem; font-weight: 900; border-radius: var(--r-pill); padding: 2px 9px; min-width: 24px; text-align: center; }
.nav a.activo .insignia { background: var(--rojo); color: #fff; }
.nav-pie { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); display: grid; gap: 6px; }
.contenido { flex: 1; padding: 20px 16px 120px; max-width: 1240px; width: 100%; margin: 0 auto; }
.contenido:focus { outline: none; }
.pie { text-align: center; font-size: .78rem; color: var(--suave); padding: 16px; }

@media (min-width: 992px) {
  .marco { flex-direction: row; }
  .barra-lateral { width: var(--lateral); height: 100vh; flex-shrink: 0; padding: 28px 20px; display: flex; flex-direction: column; overflow-y: auto; }
  .barra-lateral::after { content: ''; position: absolute; right: -50px; bottom: -40px; width: 230px; height: 230px; background: url('../img/logo.png') no-repeat center/contain; opacity: .07; filter: brightness(0) invert(1); pointer-events: none; }
  .marca { flex-direction: column; align-items: flex-start; gap: 2px; }
  .marca-logo { font-size: 2.6rem; }
  .menu-movil { display: none; }
  .usuario-chip { display: block; margin: 16px 0 18px; background: rgba(255,255,255,.14); border-radius: var(--r-sm); padding: 9px 12px; font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
  .nav { display: flex !important; flex-direction: column; flex: 1; margin: 0; }
  .nav-pie { margin-top: auto; }
  .contenido { padding: 34px 40px 120px; }
  .pie { padding-left: var(--lateral); }
}

/* ── Encabezados de página ─────────────────────────────────────────────── */
.migas { font-size: .85rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.migas a { color: var(--suave); }
.encabezado { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.titulo { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; letter-spacing: .3px; margin: 0; }
.subtitulo { color: var(--suave); font-weight: 600; margin: 4px 0 0; }
.encabezado-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.seccion-titulo { font-size: .8rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rojo); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

/* ── Tarjetas y rejillas ───────────────────────────────────────────────── */
.tarjeta { background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra); padding: 22px; margin-bottom: 20px; border: 1px solid var(--borde); }
.tarjeta-plana { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 16px; margin-bottom: 14px; }
.tarjeta > :last-child, .tarjeta-plana > :last-child { margin-bottom: 0; }
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dos-col { display: grid; gap: 20px; }
@media (min-width: 1100px) { .dos-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .dos-col.igual { grid-template-columns: 1fr 1fr; } }
.pila > * + * { margin-top: 12px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila-fin { justify-content: flex-end; }
.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.nota { font-size: .86rem; color: var(--suave); }
.texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Estadísticas */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 24px; }
.stat { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sombra); text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--rojo); }
.stat-num { font-size: 2rem; font-weight: 900; color: var(--rojo); line-height: 1.1; }
.stat-et { font-size: .78rem; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .8px; }
.stat.alerta-stat .stat-num { color: var(--alerta); }
.stat.ok-stat .stat-num { color: var(--verde); }

/* Tarjeta de actividad */
.actividad { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; border-top: 5px solid var(--borde); }
.actividad.nueva { border-top-color: var(--rojo); }
.actividad.hecha { border-top-color: var(--verde); }
.actividad.vencida { border-top-color: #9AA1AB; }
.actividad.devuelta { border-top-color: var(--ambar); }
.actividad.borrador { border-top-color: var(--dorado); }
.actividad-cuerpo { padding: 18px; flex: 1; }
.actividad-titulo { font-size: 1.12rem; font-weight: 900; margin: 10px 0 8px; }
.actividad-meta { font-size: .86rem; color: var(--suave); font-weight: 600; display: grid; gap: 4px; margin: 0; }
.actividad-pie { padding: 14px 18px; background: #FAFAFB; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px; }
.actividad-pie .btn { flex: 1 1 auto; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); padding: 10px 18px; border-radius: var(--r-sm); border: 2px solid transparent; font: inherit; font-weight: 800; font-size: .95rem; letter-spacing: .2px; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s, transform .1s; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--rojo); color: #fff; }
.btn-primario:hover { background: var(--rojo-osc); }
.btn-secundario { background: var(--superficie); color: var(--rojo); border-color: var(--rojo); }
.btn-secundario:hover { background: var(--rojo-suave); }
.btn-dorado { background: var(--dorado); color: #2B1F00; }
.btn-dorado:hover { background: #B8904A; }
.btn-fantasma { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.btn-fantasma:hover { border-color: var(--tinta); }
.btn-peligro { background: var(--superficie); color: var(--alerta); border-color: var(--alerta); }
.btn-peligro:hover { background: var(--alerta); color: #fff; }
.btn-exito { background: var(--verde); color: #fff; }
.btn-exito:hover { filter: brightness(.9); }
.btn-chico { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.btn-xl { min-height: 58px; font-size: 1.1rem; padding: 14px 24px; }
.btn-bloque { width: 100%; }
.btn-icono { padding: 8px 12px; }
.btn.activo, .btn[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ── Formularios ───────────────────────────────────────────────────────── */
label, .etiqueta { display: block; font-weight: 800; font-size: .9rem; margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], input:not([type]), select, textarea {
  width: 100%; min-height: var(--toque); padding: 10px 14px; border: 2px solid var(--borde); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; background: var(--superficie); color: var(--tinta); }
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--foco); outline: 3px solid rgba(31,95,173,.25); outline-offset: 0; }
input[type=file] { width: 100%; padding: 10px; border: 2px dashed var(--borde); border-radius: var(--r-sm); background: #FAFAFB; font: inherit; }
.ayuda { font-size: .84rem; color: var(--suave); margin: 4px 0 0; font-weight: 600; }
fieldset { border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 14px 16px; margin: 16px 0; }
legend { font-weight: 900; padding: 0 6px; }
.casillas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin: 0; padding: 10px 12px; border: 2px solid var(--borde); border-radius: var(--r-sm); cursor: pointer; background: var(--superficie); }
.casilla:has(input:checked) { border-color: var(--rojo); background: var(--rojo-suave); }
.casilla input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; accent-color: var(--rojo); }
.casilla small { display: block; font-weight: 600; color: var(--suave); font-size: .8rem; }
.campo-clave { display: flex; gap: 8px; }
.btn-ver-clave { flex-shrink: 0; border: 2px solid var(--borde); background: var(--superficie); border-radius: var(--r-sm); padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.bloque-recurso { border: 2px dashed var(--borde); border-radius: var(--r); padding: 18px; margin: 16px 0; background: #FCFCFD; }
.bloque-recurso > h3 { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.estado-proceso { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: .92rem; }
.estado-proceso.cargando { background: var(--ambar-suave); color: var(--ambar); }
.estado-proceso.ok { background: var(--verde-suave); color: var(--verde); }
.estado-proceso.error { background: var(--alerta-suave); color: var(--alerta); }
.vista-previa { max-height: 260px; border-radius: var(--r-sm); border: 1px solid var(--borde); display: block; margin: 12px 0; }

/* ── Alertas, chips y estados ──────────────────────────────────────────── */
.avisos:empty { display: none; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 14px; font-weight: 700; border-left: 5px solid; }
.alerta-ok { background: var(--verde-suave); color: var(--verde); border-color: var(--verde); }
.alerta-error { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta); }
.alerta-info { background: var(--azul-suave); color: var(--azul); border-color: var(--azul); }
.alerta-aviso { background: var(--ambar-suave); color: var(--ambar); border-color: var(--ambar); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); background: #EEF0F4; color: #394150; white-space: nowrap; }
.chip-materia { background: var(--rojo-suave); color: var(--rojo-osc); }
.chip-cond { background: var(--azul-suave); color: #17467F; white-space: normal; }
.chip-ok, .estado-calificada { background: var(--verde-suave); color: var(--verde); }
.chip-alerta { background: var(--alerta-suave); color: var(--alerta); }
.estado-entregada { background: var(--azul-suave); color: var(--azul); }
.estado-curso { background: #EEF0F4; color: #394150; }
.estado-devuelta, .chip-aviso { background: var(--ambar-suave); color: var(--ambar); }
.chip-dorado { background: var(--dorado-suave); color: var(--dorado-texto); }
.calif { font-weight: 900; font-size: 1.3rem; }
.calif-ok { color: var(--verde); }
.calif-baja { color: var(--alerta); }
.calif-grande { font-size: 3.4rem; font-weight: 900; line-height: 1; }

/* ── Tablas y listas ───────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .75rem; letter-spacing: .8px; text-transform: uppercase; color: var(--suave); background: #F7F8FA; padding: 10px 12px; font-weight: 900; }
td { padding: 10px 12px; border-top: 1px solid var(--borde); vertical-align: top; }
tr:hover td { background: #FBFBFC; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 4px; border-top: 1px solid var(--borde); }
.lista > li:first-child { border-top: 0; }
.lista-diag { list-style: none; padding: 0; }
.lista-diag li { padding: 8px 12px; border-radius: var(--r-sm); margin-bottom: 6px; background: var(--verde-suave); }
.lista-diag li.mal { background: var(--alerta-suave); }
.vacio { text-align: center; padding: 40px 20px; color: var(--suave); font-weight: 700; }
.vacio-ico { font-size: 2.8rem; display: block; margin-bottom: 8px; }
.mensaje { border-left: 5px solid var(--borde); }
.mensaje.no-leido { border-left-color: var(--rojo); }
.mensaje-meta { font-size: .82rem; color: var(--suave); font-weight: 700; }
.mensaje-cuerpo { background: #F7F8FA; border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0; }
.respuesta-docente { background: var(--verde-suave); border-radius: var(--r-sm); padding: 10px 14px; }

/* Pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 20px; overflow-x: auto; }
.pestanas a, .pestanas button { padding: 12px 16px; font: inherit; font-weight: 800; color: var(--suave); text-decoration: none; border: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; cursor: pointer; min-height: var(--toque); }
.pestanas [aria-current="page"], .pestanas [aria-selected="true"] { color: var(--rojo); border-bottom-color: var(--rojo); }

/* ── Diálogos y avisos flotantes ───────────────────────────────────────── */
.dialogo-fondo { position: fixed; inset: 0; background: rgba(16, 20, 28, .55); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialogo { background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-alta); padding: 24px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.dialogo h2 { margin-bottom: 10px; }
.dialogo-acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.dialogo-ancho { max-width: 760px; }
.toast-zona { position: fixed; top: 16px; right: 16px; z-index: 950; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--sombra-alta); font-weight: 700; }
.toast.ok { background: var(--verde); } .toast.error { background: var(--alerta); }

/* ── Voz: barra de audio y lectura sincronizada ────────────────────────── */
.barra-audio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: var(--tinta); color: #fff; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; box-shadow: 0 -6px 20px rgba(0,0,0,.2); }
@media (min-width: 992px) { .barra-audio { left: var(--lateral); } }
.barra-audio button, .barra-audio select { min-height: var(--toque); min-width: var(--toque); border-radius: var(--r-sm); border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 800; padding: 6px 12px; cursor: pointer; }
.barra-audio button:hover { background: rgba(255,255,255,.2); }
.barra-audio .audio-principal { background: var(--rojo); border-color: var(--rojo); min-width: 150px; }
.barra-audio select { width: auto; min-height: var(--toque); }
.barra-audio select option { color: var(--tinta); }
.barra-audio-estado { font-size: .82rem; opacity: .85; min-width: 120px; text-align: center; }
.leyendo { background: #FFF2A8 !important; color: #1A1D20 !important; box-shadow: 0 0 0 4px #FFF2A8; border-radius: 4px; }
.aviso-activar { position: fixed; inset: auto 16px 120px 16px; z-index: 850; background: var(--rojo); color: #fff; border: 0; border-radius: var(--r); padding: 18px; font: inherit; font-size: 1.15rem; font-weight: 900; box-shadow: var(--sombra-alta); cursor: pointer; }
@media (min-width: 992px) { .aviso-activar { left: calc(var(--lateral) + 40px); right: 40px; } }

/* ── Lección (vista del alumno) ────────────────────────────────────────── */
.leccion { max-width: 820px; margin: 0 auto; }
.leccion-bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 22px; margin-bottom: 18px; box-shadow: var(--sombra); }
.leccion-bloque h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--rojo); display: flex; gap: 8px; align-items: center; }
.leccion-texto { font-size: 1.08rem; line-height: 1.85; }
.leccion-texto p { margin-bottom: 1em; }
.agenda { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.agenda li { counter-increment: paso; display: flex; gap: 12px; align-items: center; font-weight: 700; padding: 10px 12px; background: #F7F8FA; border-radius: var(--r-sm); }
.agenda li::before { content: counter(paso); width: 32px; height: 32px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; flex-shrink: 0; font-weight: 900; }
.agenda li.hecho::before { content: '✓'; background: var(--verde); }
.video-marco { position: relative; padding-top: 56.25%; border-radius: var(--r-sm); overflow: hidden; background: #000; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video { width: 100%; border-radius: var(--r-sm); background: #000; max-height: 480px; }
.descripcion-accesible { background: #F7F8FA; border-left: 4px solid var(--rojo); border-radius: var(--r-sm); padding: 14px 16px; margin: 12px 0; }
.descripcion-accesible > strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--rojo); margin-bottom: 6px; }
.diapositiva { border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 14px; margin-bottom: 10px; }
.reto { background: linear-gradient(135deg, #FFF8E6, #FDEFD2); border: 2px solid var(--dorado); }

/* ── Cuestionario ──────────────────────────────────────────────────────── */
.examen { max-width: 760px; margin: 0 auto; }
.progreso { height: 12px; background: #E4E7EC; border-radius: var(--r-pill); overflow: hidden; }
.progreso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--rojo), var(--dorado)); transition: width .4s; }
.progreso-txt { font-weight: 800; font-size: .9rem; color: var(--suave); margin: 8px 0 18px; }
.pregunta-card { background: var(--superficie); border-radius: var(--r); padding: 24px; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.pregunta-num { font-size: .8rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--rojo); }
.pregunta-enunciado { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; line-height: 1.4; margin: 8px 0 18px; }
.opciones { display: grid; gap: 12px; }
.opcion { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; min-height: 64px; padding: 14px 18px; border: 3px solid var(--borde); border-radius: var(--r); background: var(--superficie); font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--tinta); }
.opcion:hover:not(:disabled) { border-color: var(--rojo); background: var(--rojo-suave); }
.opcion-letra { width: 40px; height: 40px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; font-weight: 900; flex-shrink: 0; }
.opcion.elegida { border-color: var(--azul); background: var(--azul-suave); }
.opcion.correcta { border-color: var(--verde); background: var(--verde-suave); }
.opcion.incorrecta { border-color: var(--alerta); background: var(--alerta-suave); }
.opcion:disabled { cursor: default; }
.navegacion-examen { display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; }
.retro-inmediata { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); font-weight: 800; font-size: 1.05rem; }
.retro-inmediata.bien { background: var(--verde-suave); color: var(--verde); }
.retro-inmediata.mal { background: var(--alerta-suave); color: var(--alerta); }
.grabadora { display: grid; gap: 12px; justify-items: center; text-align: center; }
.btn-mic { width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(188,34,81,.35); }
.btn-mic .mic-ico { font-size: 2.6rem; display: block; }
.btn-mic.grabando { background: var(--alerta); animation: latido 1.2s infinite; }
@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 rgba(179,38,30,.5); } 50% { box-shadow: 0 0 0 18px rgba(179,38,30,0); } }
.transcripcion { width: 100%; }
.resumen-respuestas li { align-items: center; }

/* ── Braille ───────────────────────────────────────────────────────────── */
.perkins { border: 2px solid var(--borde); border-radius: var(--r); padding: 16px; background: #FAFAFB; }
.perkins:focus-within { border-color: var(--foco); }
.perkins-celda { display: grid; grid-template-columns: repeat(2, 84px); grid-template-rows: repeat(3, 84px); gap: 12px; justify-content: center; margin: 12px auto; }
.punto { border-radius: 50%; border: 3px solid var(--tinta); background: var(--superficie); font: inherit; font-weight: 900; font-size: 1.2rem; cursor: pointer; color: var(--tinta); }
.punto[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.perkins-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.braille-salida { font-size: 2.2rem; letter-spacing: 4px; line-height: 1.6; min-height: 1.6em; overflow-wrap: anywhere; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 8px 12px; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; }
.braille-traduccion { font-size: 1.2rem; font-weight: 800; background: var(--dorado-suave); border-radius: var(--r-sm); padding: 12px 14px; min-height: 2.6em; overflow-wrap: anywhere; white-space: pre-wrap; }
.braille-grande { font-size: 3rem; letter-spacing: 10px; }
.foto-braille-lienzo { max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--borde); }

/* ── Calificación (docente) ────────────────────────────────────────────── */
.resp { border: 1px solid var(--borde); border-left: 5px solid var(--borde); border-radius: var(--r-sm); padding: 16px; margin-bottom: 14px; background: var(--superficie); }
.resp.bien { border-left-color: var(--verde); }
.resp.mal { border-left-color: var(--alerta); }
.resp.manual { border-left-color: var(--azul); }
.resp-respuesta { background: #F7F8FA; border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.resp-grid { display: grid; gap: 10px; grid-template-columns: 120px 1fr; align-items: start; margin-top: 10px; }
@media (max-width: 600px) { .resp-grid { grid-template-columns: 1fr; } }
.puntos-input { max-width: 120px; text-align: center; font-weight: 900; font-size: 1.1rem !important; }
.panel-calificar { position: sticky; top: 16px; }
.calif-final-input { font-size: 2rem !important; font-weight: 900; text-align: center; max-width: 140px; }
audio { width: 100%; margin-top: 6px; }

/* ── Acceso (index.php) ────────────────────────────────────────────────────
   El mismo diseño que el acceso de la intranet: a la izquierda la placa guinda con la red animada de
   elementos de inclusión; a la derecha una hoja con el formulario. Los colores de la hoja salen de las
   variables de SAI, así respeta el modo oscuro y el alto contraste de las preferencias de accesibilidad. */
.pagina-login { background: var(--superficie); }
.lg {
  --lg-placa-1: #8f1238; --lg-placa-2: #5c0822; --lg-pista: #c9a35d; --lg-pulso: #fff1cc; --lg-crema: #f4d99a;
  --lg-acento: var(--rojo); --lg-acento-osc: var(--rojo-osc); --lg-acento-txt: #a51d47;
  display: grid; grid-template-columns: clamp(340px, 36vw, 580px) minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 540px;
}
.a11y-oscuro .lg { --lg-acento-txt: #f06b93; --lg-acento-osc: #ff9cbc; }
.a11y-contraste .lg { --lg-acento-txt: var(--rojo); }

/* La placa */
.lg-placa {
  order: -1;   /* en el código va después del formulario (lectores de pantalla); en pantalla, primero */
  position: relative; overflow: hidden; color: #fff; height: 100%; min-height: 0;
  display: flex; flex-direction: column; padding: clamp(20px, 4.5vh, 40px) clamp(24px, 3vw, 44px) clamp(18px, 4vh, 36px);
  background: radial-gradient(120% 90% at 30% 25%, var(--lg-placa-1) 0%, var(--lg-placa-2) 70%);
}
.lg-placa::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.6px); background-size: 26px 26px;
  mask-image: radial-gradient(90% 80% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 40%, transparent 100%);
}
.lg-marca { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.lg-marca img { width: clamp(56px, 9vh, 80px); height: clamp(56px, 9vh, 80px); object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.lg-marca .lg-escuela { margin: 0; font-size: clamp(1.1rem, 1.55vw, 1.45rem); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; color: #fff; }
.lg-marca p:not(.lg-escuela) { margin: 5px 0 0; font-size: clamp(.82rem, 1vw, .95rem); font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .02em; }
.lg-arte { position: relative; z-index: 1; flex: 1; min-height: 0; margin: clamp(6px, 2vh, 20px) 0; }
.lg-arte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.lg-datos { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; font-size: clamp(.95rem, 2vh, 1.1rem); font-weight: 600; color: rgba(255,255,255,.88); }
.lg-datos b { display: block; font-size: clamp(1.05rem, 2.4vh, 1.3rem); font-weight: 800; color: #fff; letter-spacing: -.005em; }

/* La hoja de acceso */
.lg-acceso { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; padding: clamp(16px, 3.5vh, 32px) clamp(24px, 4vw, 56px) clamp(12px, 2.5vh, 24px); background: var(--superficie); color: var(--tinta); }
@media (min-width: 961px) {
  .lg-arte { margin-right: 30px; }   /* la hoja cubre 30 px de la placa: la red se centra en la parte visible */
  .lg-acceso { margin-left: -30px; border-radius: 30px 0 0 30px; z-index: 2; box-shadow: -14px 0 36px rgba(40, 4, 16, .22), -2px 0 0 rgba(255,255,255,.06); }
  .a11y-oscuro .lg-acceso { box-shadow: -14px 0 40px rgba(0,0,0,.55), -1px 0 0 rgba(255,255,255,.06); }
}
.lg-cab { position: absolute; top: clamp(14px, 3vh, 28px); right: clamp(14px, 2vw, 28px); z-index: 2; }
.lg-tema {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde); background: transparent; color: var(--tinta);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s ease, border-color .2s ease;
}
.lg-tema:hover { transform: scale(1.06); border-color: var(--lg-acento); }
.lg-tema svg { width: 18px; height: 18px; }
.lg-tema .lg-sol { display: none; }
.a11y-oscuro .lg-tema .lg-sol { display: block; }
.a11y-oscuro .lg-tema .lg-luna { display: none; }

.lg-zona { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; padding: clamp(8px, 2vh, 24px) 0; }
.lg-zona h1 { margin: 0; font-size: clamp(1.45rem, 3.6vh, 1.95rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--tinta); }
.lg-sub { margin: clamp(4px, .9vh, 8px) 0 clamp(14px, 3vh, 26px); font-size: clamp(.9rem, 1.9vh, 1rem); line-height: 1.45; color: var(--suave); }
.lg-zona .alerta { margin-bottom: clamp(10px, 2vh, 16px); font-size: .9rem; }
.lg-fg { margin-bottom: clamp(10px, 2vh, 16px); }
.lg-fg label { display: block; margin: 0 0 clamp(4px, .8vh, 7px); font-size: .86rem; font-weight: 700; color: var(--tinta); }
.lg-campo { position: relative; }
.lg-campo > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.lg-campo input[type=text], .lg-campo input[type=password] {
  width: 100%; height: clamp(42px, 6vh, 50px); min-height: 0; padding: 0 46px 0 44px; border-radius: 12px; border: 1.5px solid var(--borde);
  background: var(--fondo); color: var(--tinta); font-family: inherit; font-size: 1rem; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lg-campo input::placeholder { color: var(--suave); opacity: .75; }
.lg-campo input:focus { border-color: var(--lg-acento); background: var(--superficie); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-acento) 16%, transparent); }
.lg-campo:focus-within > svg { color: var(--lg-acento); }
.lg-ver { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px; padding: 0; border: none; border-radius: 10px; background: none; color: var(--suave); cursor: pointer; display: grid; place-items: center; }
.lg-ver:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.lg-ver svg { width: 18px; height: 18px; }
.lg-ver .lg-ojo-no { display: none; }
.lg-ver[aria-pressed="true"] .lg-ojo { display: none; }
.lg-ver[aria-pressed="true"] .lg-ojo-no { display: block; }
.lg-btn {
  width: 100%; height: clamp(44px, 6.2vh, 52px); margin-top: clamp(2px, .8vh, 8px); border: none; border-radius: 12px; cursor: pointer;
  background: var(--lg-acento); color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 800; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 10px 22px -10px var(--lg-acento); transition: background-color .3s ease, transform .15s ease;
}
.lg-btn:hover { background: var(--lg-acento-osc); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lg-acento) 45%, transparent); outline-offset: 2px; }
.lg-btn svg { width: 19px; height: 19px; }
.a11y-oscuro .lg-btn { color: #1A0710; }
.a11y-contraste .lg-btn { background: #000; }
.lg-ayuda { margin: clamp(10px, 2vh, 16px) 0 0; font-size: .84rem; color: var(--suave); text-align: center; }

/* Pie: enlaces discretos, logotipo del Gobierno y créditos */
.lg-pie { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); padding-top: clamp(6px, 1.5vh, 12px); }
.lg-pie img { height: clamp(40px, 7.6vh, 74px); width: auto; max-width: min(400px, 92%); object-fit: contain; }
.a11y-oscuro .lg-pie img { filter: brightness(0) invert(1); opacity: .9; }
.lg-copy { margin: 0; font-size: .78rem; color: var(--suave); text-align: center; line-height: 1.5; }
.lg-copy strong { color: var(--lg-acento-txt); }
.lg-sitios { display: flex; justify-content: center; gap: clamp(20px, 3vw, 36px); margin-bottom: clamp(2px, .8vh, 8px); }
.lg-sitio { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 10px; color: var(--suave); font-size: .7rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: color .2s ease; }
.lg-sitio-ico { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); display: grid; place-items: center; transition: border-color .2s ease, color .2s ease, transform .15s ease; }
.lg-sitio-ico svg { width: 16px; height: 16px; }
.lg-sitio:hover, .lg-sitio:focus-visible { color: var(--lg-acento-txt); }
.lg-sitio:hover .lg-sitio-ico, .lg-sitio:focus-visible .lg-sitio-ico { border-color: var(--lg-acento); color: var(--lg-acento); transform: translateY(-1px); }

/* Perfil de acceso (paquete 1 de inclusión): el alumno elige qué le ayuda y la pantalla se adapta */
.lg-zona[data-paso="perfil"] { max-width: 600px; }
.lg-zona[data-paso="perfil"] #lg-form { display: none; }
.lg-perfiles-t { margin: 0 0 10px; font-size: 1rem; font-weight: 800; color: var(--tinta); }
.lg-perfiles-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lg-perfil {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 112px; padding: 12px 8px 10px;
  border: 1.5px solid var(--borde); border-radius: 16px; background: var(--superficie); color: var(--tinta); font: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lg-perfil svg { width: 28px; height: 28px; color: var(--lg-acento); margin-bottom: 2px; }
.lg-perfil-nom { font-size: .95rem; font-weight: 800; line-height: 1.15; }
.lg-perfil-desc { font-size: .72rem; line-height: 1.3; color: var(--suave); }
.lg-perfil:hover { border-color: var(--lg-acento); transform: translateY(-2px); box-shadow: 0 8px 18px -12px var(--lg-acento); }
.lg-perfil:focus-visible { outline: 3px solid var(--lg-acento); outline-offset: 2px; }
.lg-perfiles-otros { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; }
.lg-otro { min-height: 44px; padding: 6px 10px; border: none; border-radius: 10px; background: none; color: var(--lg-acento-txt); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lg-otro:hover { background: color-mix(in srgb, var(--lg-acento) 8%, transparent); }
.lg-elegido { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 clamp(10px, 2vh, 16px); padding: 6px 6px 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--lg-acento) 8%, transparent); font-size: .9rem; color: var(--tinta); }
.lg-elegido strong { color: var(--lg-acento-txt); }
.lg-cambiar { min-height: 40px; padding: 4px 14px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.lg-instrucciones { margin: 0 0 clamp(10px, 2vh, 16px); padding: 10px 14px 10px 34px; border-radius: 12px; border: 1.5px dashed var(--borde); font-size: .95rem; font-weight: 700; line-height: 1.7; color: var(--tinta); }
.lg-interruptor { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; font-size: .9rem; font-weight: 700; color: var(--tinta); cursor: pointer; }
.lg-interruptor input { width: 22px; height: 22px; accent-color: var(--lg-acento); flex-shrink: 0; margin: 0; }
.lg-picto { margin: 0 0 clamp(8px, 1.6vh, 14px); padding: 0; border: none; }
.lg-picto legend { margin-bottom: 8px; padding: 0; font-size: .86rem; font-weight: 700; color: var(--tinta); }
.lg-picto-ranuras { display: flex; gap: 8px; margin-bottom: 10px; }
.lg-ranura { width: 52px; height: 52px; border-radius: 12px; border: 2px dashed var(--borde); display: grid; place-items: center; font-size: 1.7rem; }
.lg-ranura.llena { border-style: solid; border-color: var(--lg-acento); }
.lg-picto-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lg-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 6px 2px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); font: inherit; cursor: pointer; }
.lg-pic span { font-size: 1.7rem; line-height: 1; }
.lg-pic small { font-size: .7rem; font-weight: 700; }
.lg-pic:hover, .lg-pic:focus-visible { border-color: var(--lg-acento); }
.lg-pic:focus-visible { outline: 3px solid var(--lg-acento); outline-offset: 2px; }
.lg-siguiente { margin-top: 4px; }
#lg-atras { display: block; margin: 6px auto 0; }
/* Moverme: todo más grande para tocar sin errores */
.lg[data-perfil="moverme"] .lg-campo input[type=text], .lg[data-perfil="moverme"] .lg-campo input[type=password] { height: 64px; font-size: 1.15rem; }
.lg[data-perfil="moverme"] .lg-btn { height: 68px; font-size: 1.2rem; }
.lg[data-perfil="moverme"] .lg-pic { min-height: 88px; }
.lg[data-perfil="moverme"] .lg-ver { width: 56px; }
/* Calma y Sentirme bien: sin movimiento ni transiciones en la pantalla */
.lg-calma .lg *, .lg-calma .lg *::before { transition: none !important; animation: none !important; }
.lg-calma .lg-perfil:hover { transform: none; }
@media (max-width: 960px) {
  .lg-perfiles-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lg-perfil { min-height: 0; flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 12px; }
  .lg-perfil svg { flex-shrink: 0; margin: 0; width: 24px; height: 24px; }
  .lg-perfil-desc { display: none; }
}
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .lg-perfiles-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg-perfiles-t { font-size: .9rem; margin-bottom: 6px; }
}

/* Tabletas y celulares: la placa arriba, la hoja abajo */
@media (max-width: 960px) {
  .lg { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 480px; }
  .lg-placa { flex: 1 1 auto; height: auto; min-height: 0; padding: clamp(14px, 2.6vh, 22px) 20px clamp(30px, 5vh, 40px); }
  .lg-marca { gap: 12px; }
  .lg-marca img { width: clamp(44px, 7vh, 58px); height: clamp(44px, 7vh, 58px); }
  .lg-marca .lg-escuela { font-size: clamp(1.02rem, 2.4vh, 1.2rem); }
  .lg-marca p:not(.lg-escuela) { font-size: .82rem; margin-top: 3px; }
  .lg-arte { flex: 1 1 auto; min-height: 0; margin: clamp(4px, 1.2vh, 10px) 0; }
  .lg-datos { font-size: .9rem; gap: 1px; }
  .lg-datos b { font-size: 1.02rem; }
  .lg-acceso { flex: 0 0 auto; height: auto; overflow: visible; margin-top: -22px; border-radius: 22px 22px 0 0;
               padding: clamp(12px, 2.2vh, 18px) 20px max(clamp(10px, 1.8vh, 16px), env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.12); z-index: 2; }
  .lg-cab { top: clamp(10px, 1.8vh, 14px); right: 14px; }
  .lg-tema { width: 36px; height: 36px; }
  .lg-zona { flex: 0 0 auto; padding: clamp(2px, .8vh, 8px) 0 clamp(6px, 1.4vh, 12px); justify-content: flex-start; max-width: 520px; }
  .lg-zona h1 { font-size: clamp(1.25rem, 3.2vh, 1.5rem); padding-right: 46px; }
  .lg-sub { font-size: clamp(.84rem, 1.9vh, .95rem); margin: 3px 0 clamp(10px, 2vh, 16px); }
  .lg-fg { margin-bottom: clamp(7px, 1.4vh, 12px); }
  .lg-fg label { margin-bottom: 4px; font-size: .84rem; }
  .lg-campo input[type=text], .lg-campo input[type=password] { height: clamp(40px, 5.8vh, 48px); }
  .lg-btn { height: clamp(42px, 6vh, 50px); margin-top: 2px; }
  .lg-ayuda { margin-top: clamp(6px, 1.4vh, 12px); font-size: .78rem; }
  .lg-pie { gap: 4px; padding-top: clamp(4px, 1vh, 8px); }
  .lg-pie img { height: clamp(34px, 6vh, 52px); max-width: 92%; }
  .lg-copy { font-size: .72rem; line-height: 1.4; }
  .lg-sitio-ico { width: 30px; height: 30px; }
  .lg-sitio { font-size: .66rem; gap: 3px; }
}
/* Celulares de poca altura: la red se oculta para dejar todo el acceso a la vista */
@media (max-width: 960px) and (max-height: 600px) {
  .lg-arte { display: none; }
  .lg-placa { flex: 0 0 auto; }
  .lg-datos { margin-top: 8px; }
  .lg-acceso { flex: 1 0 auto; }
  .lg-pie { margin-top: auto; }
}
/* Celular acostado: placa angosta a la izquierda y la hoja compacta a la derecha */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .lg { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; height: 100dvh; min-height: 0; }
  .lg-placa { padding: 16px 18px; }
  .lg-marca { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lg-acceso { margin-top: 0; border-radius: 0; box-shadow: none; height: 100%; overflow-y: auto; padding: 10px 24px 8px; }
  .lg-zona { justify-content: center; flex: 1 0 auto; padding: 0; }
  .lg-zona h1 { font-size: 1.15rem; }
  .lg-sub, .lg-ayuda { display: none; }
  .lg-fg { margin-bottom: 6px; }
  .lg-fg label { margin-bottom: 2px; font-size: .78rem; }
  .lg-campo input[type=text], .lg-campo input[type=password] { height: 38px; }
  .lg-btn { height: 40px; }
  .lg-pie { flex-direction: row; justify-content: center; gap: 12px; padding-top: 6px; }
  .lg-pie img { height: 30px; }
  .lg-copy { font-size: .66rem; }
  .lg-sitios { gap: 8px; margin: 0; }
  .lg-sitio-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Mis herramientas (alumno, paquete 1 de inclusión) ─────────────────── */
.mis-herr {
  position: sticky; top: 8px; z-index: 600; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 8px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra);
}
.mis-herr-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 64px; padding: 8px 12px;
  border: 2px solid transparent; border-radius: var(--r-sm); background: var(--fondo); color: var(--tinta); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.mis-herr-btn:hover { border-color: var(--rojo); }
.mis-herr-btn[aria-pressed="true"] { background: var(--rojo); color: #fff; }
.mis-herr-ico { font-size: 1.25rem; line-height: 1; }
@media (max-width: 560px) { .mis-herr-btn { flex-direction: column; gap: 2px; font-size: .78rem; padding: 6px 4px; } }
/* Botones de al menos 44 × 44 px en todas las pantallas del alumno (WCAG 2.5.8) */
.rol-alumno .btn-chico { min-height: var(--toque); }
.herr-fondo { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(16, 24, 40, .55); }
.herr-caja { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border-radius: var(--r); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-alta); }
.herr-caja:focus { outline: none; }
.herr-titulo { margin: 0 0 6px; font-size: 1.35rem; }
.herr-nota { color: var(--suave); }
.herr-opciones { display: grid; gap: 10px; margin: 6px 0 14px; }
.herr-opcion { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.herr-opcion span { font-size: 1.4rem; }
.herr-opcion[aria-pressed="true"] { border-color: var(--rojo); background: var(--rojo-suave); }
.herr-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.herr-pausa { background: linear-gradient(160deg, #e6f0ef, #f3eef6); }
.a11y-oscuro .herr-pausa { background: linear-gradient(160deg, #10201f, #1c1724); }
.herr-pausa-caja { text-align: center; box-shadow: none; background: transparent; }
.herr-pausa-caja .herr-acciones { justify-content: center; }
.herr-respira { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle, #9ad1c9 0%, #6aa9a1 70%); animation: herr-respira 8s ease-in-out infinite; }
@keyframes herr-respira { 0%, 100% { transform: scale(.7); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .herr-respira { animation: none; } }
.ayuda-motivo { font-weight: 800; }

/* ── Páginas simples (error, instalador) ───────────────────────────────── */
.pagina-simple { display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.caja-error { max-width: 560px; text-align: center; }
.caja-error-ico { font-size: 3rem; }
.instalador { max-width: 760px; width: 100%; }
.registro { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; max-height: 340px; overflow: auto; }

/* ── Panel de accesibilidad ────────────────────────────────────────────── */
.a11y-opciones { display: grid; gap: 12px; }
.a11y-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.a11y-fila .etiqueta { margin: 0; }
.segmentado { display: inline-flex; border: 2px solid var(--borde); border-radius: var(--r-sm); overflow: hidden; }
.segmentado button { border: 0; background: var(--superficie); padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer; min-height: 40px; color: var(--tinta); }
.segmentado button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.interruptor { display: flex; gap: 12px; align-items: center; font-weight: 800; margin: 0; cursor: pointer; }
.interruptor input { width: 24px; height: 24px; accent-color: var(--rojo); }

/* ════════════════════════════════════════════════════════════════════════
   MODOS DE ACCESIBILIDAD (se activan por perfil o por el usuario)
   ════════════════════════════════════════════════════════════════════════ */
/* Alto contraste (baja visión) */
.a11y-contraste { --fondo: #FFFFFF; --superficie: #FFFFFF; --tinta: #000000; --suave: #1F1F1F; --borde: #000000; --rojo: #A0003A; --foco: #0000CC; }
.a11y-contraste .tarjeta, .a11y-contraste .actividad, .a11y-contraste .leccion-bloque, .a11y-contraste .pregunta-card, .a11y-contraste .stat { border-width: 2px; box-shadow: none; }
.a11y-contraste .btn, .a11y-contraste .opcion { border-width: 3px; }
.a11y-contraste .btn-primario { background: #000; border-color: #000; }
.a11y-contraste a { text-decoration: underline; }
.a11y-contraste :focus-visible { outline: 5px solid #0000CC; outline-offset: 3px; }
/* Tema oscuro de bajo brillo (fotosensibilidad, fatiga visual) */
.a11y-oscuro { --fondo: #0F1115; --superficie: #1A1D24; --tinta: #F3F4F6; --suave: #C5CAD3; --borde: #3A404C; --rojo: #FF7EA6; --rojo-suave: #3A1422; --verde: #6EE7B7; --verde-suave: #0F2E24; --alerta: #FF8A80; --alerta-suave: #3A1715; --azul: #93C5FD; --azul-suave: #13233A; --ambar: #FCD34D; --ambar-suave: #33280A; --dorado-suave: #33280A; --dorado-texto: #FCD34D; --foco: #93C5FD; }
.a11y-oscuro .btn-primario { color: #1A0710; }
.a11y-oscuro .actividad-pie, .a11y-oscuro th, .a11y-oscuro .resp-respuesta, .a11y-oscuro .descripcion-accesible, .a11y-oscuro .agenda li, .a11y-oscuro .mensaje-cuerpo, .a11y-oscuro .bloque-recurso, .a11y-oscuro .perkins { background: #232833; }
.a11y-oscuro .leyendo { background: #FDE047 !important; }
/* Tipografía legible (dislexia) */
.a11y-legible body, body.a11y-legible { font-family: Verdana, Tahoma, 'Atkinson Hyperlegible', Arial, sans-serif; letter-spacing: .04em; word-spacing: .14em; }
body.a11y-legible .leccion-texto, body.a11y-legible .pregunta-enunciado { line-height: 2; max-width: 65ch; }
body.a11y-legible p { text-align: left; }
/* Sin movimiento (TEA, psicosocial, epilepsia fotosensible) */
body.a11y-quieto *, body.a11y-quieto *::before, body.a11y-quieto *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* Modo enfoque (TDAH, intelectual): oculta lo secundario */
body.a11y-enfoque .pie, body.a11y-enfoque .secundario { display: none !important; }
body.a11y-enfoque .leccion-bloque:not(.enfocado):not(:focus-within) { opacity: .92; }
/* Controles grandes (motriz, baja visión) */
body.a11y-grande { --toque: 60px; }
body.a11y-grande .btn { font-size: 1.1rem; padding: 14px 22px; }
body.a11y-grande .opcion { min-height: 84px; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Impresión */
@media print {
  .barra-lateral, .barra-audio, .pie, .encabezado-acciones, .btn, .saltar { display: none !important; }
  .contenido { padding: 0; }
  .tarjeta { box-shadow: none; }
}

/* Ficha USAER · Herramientas (paquete 1 de inclusión) */
.herr-grupo { margin-top: 14px; }
.herr-grupo-suyo { border-color: var(--rojo); }
.herr-grupo-suyo legend { color: var(--rojo); }
.pc-elegir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .pc-elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.casillas-compactas { grid-template-columns: 1fr; max-height: 260px; overflow-y: auto; }
.ayudas { border-left: 5px solid var(--ambar); }

/* ════════════════════════════════════════════════════════════════════════
   PAQUETE 2 DE INCLUSIÓN · Calma y Sentirme bien
   ════════════════════════════════════════════════════════════════════════ */
/* Modo calma: colores suaves, nada se mueve solo y se oculta lo secundario */
body.herr-calma:not(.a11y-contraste):not(.a11y-oscuro) {
  --rojo: #2E6B66; --rojo-osc: #1E4A46; --rojo-suave: #E3F0EE; --fondo: #F2F5F4; --borde: #D5DEDC;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05); --sombra-alta: 0 8px 24px rgba(16, 24, 40, .10);
}
body.herr-calma.a11y-oscuro { --rojo: #8FD3C9; --rojo-suave: #15302D; }
body.herr-calma *, body.herr-calma *::before, body.herr-calma *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.herr-calma .pie, body.herr-calma .secundario { display: none !important; }

/* Temporizador visual (flotante; sigue al cambiar de pantalla) */
.temp { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra-alta); }
.temp-disco { position: relative; width: 104px; height: 104px; }
.temp-disco svg { width: 100%; height: 100%; display: block; }
.temp-fondo { fill: var(--fondo); stroke: var(--borde); stroke-width: 2; }
.temp-resto { fill: none; stroke: var(--azul); }
.temp-poco .temp-resto { stroke: var(--ambar); }
.temp-num { position: absolute; inset: 0; display: none; place-items: center; font-weight: 900; font-size: 1.15rem; color: var(--tinta); text-shadow: 0 0 4px var(--superficie), 0 0 8px var(--superficie); }
.temp-con-num .temp-num, .temp-fin .temp-num { display: grid; }
.temp-fin { border: 3px solid var(--azul); }
.temp-fin .temp-num { font-size: 1rem; }
.temp-botones { display: flex; gap: 6px; }
.temp-btn { min-width: var(--toque); min-height: var(--toque); padding: 0 8px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; }
.temp-btn[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-suave); }
.temp-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.temp-op { justify-content: center; flex-direction: column; gap: 2px; min-height: 84px; font-size: 1.8rem; text-align: center; }
.temp-op small { font-size: .85rem; font-weight: 700; color: var(--suave); }
@media (max-width: 560px) { .temp { right: 10px; bottom: 10px; padding: 8px; } .temp-disco { width: 80px; height: 80px; } }

/* Rincón de calma */
.herr-rincon { background: linear-gradient(160deg, #e6f0ef, #f3eef6); }
.a11y-oscuro .herr-rincon { background: linear-gradient(160deg, #10201f, #1c1724); }
.rc-caja { text-align: center; }
.rc-modo { margin: 6px 0 4px; }
.rc-escena { display: grid; place-items: center; height: 230px; }
.rc-circulo { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, #9ad1c9 0%, #6aa9a1 70%); transform: scale(1); }
.rc-circulo.rc-grande { transform: scale(2.2); }
/* La respiración guiada la inicia el alumno y es el propósito de la herramienta: se conserva aun sin animaciones */
body .herr-rincon .rc-escena .rc-circulo { transition-property: transform !important; transition-duration: var(--rc-dur, 4s) !important; transition-timing-function: ease-in-out !important; }
.rc-indica { margin: 4px 0 0; font-size: 1.6rem; font-weight: 900; }
.rc-cuenta { min-height: 2.4rem; margin: 0; font-size: 2rem; font-weight: 900; color: var(--suave); }
.rc-control, .rc-sentidos .herr-acciones { justify-content: center; }
.rc-paso { padding: 18px 8px 4px; }
.rc-paso-ico { display: block; font-size: 4.5rem; line-height: 1.1; }
.rc-paso-txt { margin: 10px 0 4px; font-size: 1.45rem; font-weight: 800; }
.rc-paso-num { margin: 0; color: var(--suave); }
.rc-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--borde); }

/* Agenda visual */
.agv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agv-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
.agv-ico { flex: 0 0 48px; font-size: 2rem; line-height: 1; text-align: center; }
.agv-txt { flex: 1; display: grid; gap: 2px; font-weight: 800; font-size: 1.08rem; }
.agv-hora { font-size: .88rem; color: var(--suave); }
.agv-sigue { justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--azul-suave); color: var(--azul); font-size: .82rem; }
.agv-item.ahora { border-color: var(--azul); }
.agv-item.hecho { background: var(--fondo); }
.agv-item.hecho .agv-ico, .agv-item.hecho .agv-txt { opacity: .6; }
.agv-marca { flex: 0 0 auto; width: var(--toque); height: var(--toque); min-width: 48px; min-height: 48px; border: 2px solid var(--borde); border-radius: 50%; background: var(--superficie); color: transparent; font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.agv-marca:hover { border-color: var(--verde); color: var(--verde); }
.agv-marca[aria-pressed="true"] { border-color: var(--verde); background: var(--verde); color: #fff; }
.agv-semana summary { cursor: pointer; padding: 4px 0; }
.agv-semana .agv { box-shadow: none; border: 0; padding: 12px 0 0; margin: 0; }
.agv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.agv-form > div { min-width: 150px; }
.agv-form > .crece { flex: 1 1 240px; }
.agv-form-btn { min-width: 0 !important; }
.agv-form .casilla { margin: 0; }

/* Termómetro de emociones */
.termo-opciones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.termo-btn { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 104px; padding: 10px 6px; border: 2px solid var(--borde); border-top-width: 6px; border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 800; cursor: pointer; }
.termo-cara { font-size: 2.5rem; line-height: 1; }
.termo-nom { font-size: .92rem; text-align: center; }
.termo-1, .termo-2 { border-top-color: var(--verde); }
.termo-3 { border-top-color: var(--ambar); }
.termo-4, .termo-5 { border-top-color: var(--alerta); }
.termo-btn:hover { border-color: var(--rojo); }
.termo-btn[aria-pressed="true"] { border-color: var(--rojo); background: var(--rojo-suave); }
.termo-respuesta { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fondo); font-weight: 800; }
.termo-respuesta p { margin: 0 0 8px; }
.termo-respuesta p:last-child { margin: 0; }
@media (max-width: 560px) {
  .termo-opciones { grid-template-columns: 1fr; }
  .termo-btn { grid-template-columns: auto 1fr; justify-items: start; min-height: 60px; border-top-width: 2px; border-left-width: 6px; text-align: left; }
  .termo-1, .termo-2 { border-left-color: var(--verde); } .termo-3 { border-left-color: var(--ambar); } .termo-4, .termo-5 { border-left-color: var(--alerta); }
  .termo-cara { font-size: 2rem; }
}

/* Aviso de cambios */
.cambio { border-left: 5px solid var(--azul); }
.cambio-titulo { margin: 0 0 6px; font-size: 1.1rem; }
.cambio-txt { font-size: 1.08rem; font-weight: 700; }

/* Primero / después */
.pd { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 16px; }
.pd-paso { flex: 1 1 200px; display: grid; justify-items: start; gap: 4px; padding: 12px 14px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
.pd-despues { border-color: var(--verde); background: var(--verde-suave); }
.pd-et { font-size: .85rem; font-weight: 800; color: var(--suave); }
.pd-ico { font-size: 2rem; line-height: 1; }
.pd-paso strong { font-size: 1.1rem; }
.pd-flecha { align-self: center; font-size: 1.8rem; color: var(--suave); }
.pd-ahora { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--verde-suave); font-size: 1.15rem; }
.pd-ahora span { font-size: 1.8rem; }

/* Historias sociales */
.hs-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hs-tarjeta { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.hs-tarjeta:hover { border-color: var(--rojo); }
.hs-tarjeta small { display: block; color: var(--suave); font-weight: 600; }
.hs-ico { font-size: 2.4rem; line-height: 1; }
.hs-lector { max-width: 760px; margin: 0 auto; }
.hs-pag { margin-bottom: 14px; padding: 28px 22px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); text-align: center; }
.hs-pag:focus { outline: 3px solid var(--foco); outline-offset: 3px; }
.hs-dibujo { font-size: 6rem; line-height: 1.15; }
.hs-texto { max-width: 34ch; margin: 14px auto 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.hs-num { margin: 0; color: var(--suave); }
.hs-controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hs-controles .btn:disabled { visibility: hidden; }
.hs-fin { margin-top: 14px; }
.hs-ultima .hs-fin { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.hs-editor { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.hs-editor h3 { margin: 0 0 6px; }
.hs-ia { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

/* USAER: registros del termómetro */
.emo-alertas { border-left-color: var(--alerta); }
.emo-cara { font-size: 1.8rem; line-height: 1; }
.emo-linea { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.emo-linea li { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; }
.emo-linea .emo-1, .emo-linea .emo-2 { background: var(--verde-suave); }
.emo-linea .emo-3 { background: var(--ambar-suave); }
.emo-linea .emo-4, .emo-linea .emo-5 { background: var(--alerta-suave); }

/* ════════════════════════════════════════════════════════════════════════
   PAQUETE 3 DE INCLUSIÓN · Concentrarme
   ════════════════════════════════════════════════════════════════════════ */
/* Tareas en pasos */
.pasos-cuenta { margin: 0 0 6px; font-weight: 800; }
.pasos-barra { height: 10px; margin-bottom: 12px; border-radius: var(--r-pill); background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; }
.pasos-barra span { display: block; height: 100%; background: var(--verde); }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paso { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
.paso-num { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--fondo); font-weight: 900; }
.paso-txt { flex: 1; display: grid; gap: 4px; font-weight: 800; }
.paso.ahora { border-color: var(--azul); }
.paso.ahora .paso-num { background: var(--azul); color: #fff; }
.paso.hecho { background: var(--fondo); }
.paso.hecho .paso-txt, .paso.hecho .paso-num { opacity: .6; }
.pasos-mini { padding: 12px 16px; }
.pasos-mini summary { cursor: pointer; min-height: var(--toque); display: flex; align-items: center; }
.pasos-mini[open] summary { margin-bottom: 10px; }

/* Recordatorios */
.recordatorios { border-left: 5px solid var(--ambar); }
.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rec-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.rec-item:last-child { border-bottom: 0; }
.rec-item a { color: var(--tinta); }

/* Estrellas */
.mis-estrellas .mis-herr-txt { white-space: nowrap; }
.mis-estrellas-meta { font-weight: 600; color: var(--suave); }
.mis-estrellas.est-gana { animation: est-gana .9s ease-out 1; }
@keyframes est-gana { 0% { transform: scale(1); } 35% { transform: scale(1.12); background: var(--ambar-suave); } 100% { transform: scale(1); } }
.est-num { margin: 4px 0 8px; font-size: 1.3rem; }
.est-num strong { font-size: 2.2rem; }
.est-barra span { background: var(--dorado); }
.est-meta { padding: 10px 12px; border-radius: var(--r-sm); background: var(--ambar-suave); font-weight: 800; }
.est-como { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; color: var(--suave); }

/* Trabajo por bloques (usa el disco del temporizador visual) */
.temp-fase { margin: 0; font-weight: 900; font-size: .9rem; }
.temp-en-pausa .temp-resto { stroke: var(--verde); }
.bl-pausa { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-sm); background: var(--verde-suave); font-size: 1.2rem; font-weight: 800; }
.bl-pausa span { font-size: 2.6rem; line-height: 1; }

/* Autorregistro: tarjeta que no quita el foco ni tapa el trabajo */
.autoreg { position: fixed; left: 16px; bottom: 16px; z-index: 880; width: min(380px, calc(100vw - 32px)); padding: 14px 44px 14px 16px; border: 2px solid var(--azul); border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra-alta); }
@media (min-width: 992px) { .autoreg { left: calc(var(--lateral) + 16px); } }
.autoreg-t { margin: 0 0 10px; font-size: 1.1rem; font-weight: 900; }
.autoreg-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.autoreg-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--suave); font-size: 1.1rem; cursor: pointer; }
.autoreg-x:hover { background: var(--fondo); }
@media (max-width: 560px) { .autoreg { left: 10px; width: calc(100vw - 20px); } }

/* ════════════════════════════════════════════════════════════════════════
   PAQUETE 4 DE INCLUSIÓN · Entender y Leer
   ════════════════════════════════════════════════════════════════════════ */
/* Pictogramas sobre las palabras clave */
.pk { display: inline-flex; flex-direction: column; align-items: center; vertical-align: bottom; margin: 0 .1em; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1.2; }
.pk-img, .pk .picto-emoji { width: 2.4em; height: 2.4em; object-fit: contain; font-size: 1em; line-height: 2.4em; text-align: center; }
.pk-txt { font-weight: 800; }
.pk-btn { cursor: pointer; border-radius: 6px; }
.pk-btn .pk-txt { text-decoration: underline dotted 2px; text-underline-offset: 3px; color: var(--azul); }
.pk-btn:hover { background: var(--azul-suave); }
.opcion-picto { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; border-radius: 8px; background: #fff; }
.picto-credito { margin: 18px 0 0; font-size: .72rem; color: var(--suave); }
.dicc-toque #principal { cursor: help; }
.dicc-toque #principal :is(p, li, h1, h2, h3, td, .frase) { text-decoration: underline dotted 1px var(--borde); text-underline-offset: 4px; }

/* Diccionario visual */
.dicc-caja { text-align: center; }
.dicc-picto { display: grid; place-items: center; min-height: 150px; }
.dicc-img { width: 150px; height: 150px; object-fit: contain; background: #fff; border-radius: var(--r-sm); }
.dicc-picto .picto-emoji { font-size: 5rem; }
.dicc-palabra { font-size: 1.8rem; }
.dicc-def { font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
.dicc-caja .herr-acciones { justify-content: center; }

/* Tablero de comunicación */
.caa-caja { width: min(860px, 100%); }
.caa-frase-caja { min-height: 92px; padding: 8px; border: 2px dashed var(--borde); border-radius: var(--r-sm); background: var(--fondo); }
.caa-frase { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.caa-frase li { display: grid; justify-items: center; gap: 2px; padding: 4px 6px; border-radius: 8px; background: var(--superficie); font-weight: 800; font-size: .9rem; }
.caa-img-chica, .caa-frase .picto-emoji { width: 52px; height: 52px; object-fit: contain; font-size: 2.2rem; line-height: 52px; text-align: center; }
.caa-vacia { margin: 22px 0; text-align: center; color: var(--suave); }
.caa-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.caa-cats { flex-wrap: wrap; margin-bottom: 10px; }
.caa-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.caa-item { display: grid; justify-items: center; gap: 4px; min-height: 120px; padding: 8px 4px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 800; cursor: pointer; }
.caa-item:hover { border-color: var(--rojo); }
.caa-img, .caa-item .picto-emoji { width: 76px; height: 76px; object-fit: contain; font-size: 3rem; line-height: 76px; text-align: center; }

/* Regla de lectura */
.regla-arriba, .regla-abajo { position: fixed; left: 0; right: 0; z-index: 860; background: rgba(10, 14, 20, .5); pointer-events: none; }
.regla-arriba { top: 0; }
.regla-abajo { bottom: 0; }
.regla-banda { position: fixed; left: 0; right: 0; z-index: 860; border-top: 2px solid var(--dorado); border-bottom: 2px solid var(--dorado); pointer-events: none; }
.regla-ctl { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 870; display: grid; gap: 6px; padding: 6px; border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra-alta); }
.regla-ctl button { width: var(--toque); height: var(--toque); border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 900; cursor: pointer; }

/* Espaciado del texto (WCAG 1.4.12) */
body.herr-espaciado #principal :is(p, li, label, td, th, h2, h3, .pregunta-enunciado, .opcion-texto, .frase, textarea) { letter-spacing: var(--esp-l, 0); word-spacing: var(--esp-p, 0); line-height: var(--esp-r, 1.6); }
.esp-grupo { margin: 10px 0 0; }
.esp-muestra { margin-top: 14px; padding: 12px; border-radius: var(--r-sm); background: var(--fondo); letter-spacing: var(--esp-l, 0); word-spacing: var(--esp-p, 0); line-height: var(--esp-r, 1.6); }

/* Apoyos de cálculo: panel lateral que no tapa la pregunta */
.calc { position: fixed; right: 16px; top: 16px; bottom: 16px; z-index: 890; width: min(380px, calc(100vw - 32px)); overflow-y: auto; padding: 14px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra-alta); }
.calc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calc-cab h2 { margin: 0; font-size: 1.15rem; }
.calc-x { width: var(--toque); height: var(--toque); border: 0; border-radius: 50%; background: var(--fondo); color: var(--tinta); font-size: 1.1rem; cursor: pointer; }
.calc-pest { margin: 10px 0; }
.calc-pantalla { display: block; min-height: 58px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--tinta); color: #fff; font-size: 1.8rem; font-weight: 900; text-align: right; word-break: break-all; }
.calc-teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.calc-teclas button { min-height: 56px; border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-size: 1.4rem; font-weight: 900; cursor: pointer; }
.calc-teclas .calc-igual { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.calc-teclas .calc-borrar { grid-column: span 2; font-size: 1.1rem; }
.calc-hist { margin: 10px 0 0; padding-left: 1.2em; color: var(--suave); font-weight: 700; }
.recta { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 6px; padding-bottom: 8px; border-bottom: 3px solid var(--tinta); }
.recta button { min-width: var(--toque); min-height: var(--toque); border: 2px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 900; cursor: pointer; }
.recta button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.recta-txt, .tabla-txt { font-size: 1.15rem; font-weight: 800; }
.calc-tabla { width: 100%; border-collapse: collapse; }
.calc-tabla td { padding: 1px; border: 0; }
.calc-tabla button { width: 100%; min-height: 32px; border: 1px solid var(--borde); border-radius: 4px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.calc-tabla .fila-sel button { background: var(--azul-suave); }
.calc-tabla .cel-sel button { background: var(--azul); color: #fff; }
@media (max-width: 560px) { .calc { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 70vh; } }
/* Barra «Mis herramientas»: con muchas herramientas se acomoda en renglones sin encimar los nombres */
.mis-herr { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.mis-herr-btn { min-width: 0; }
@media (max-width: 560px) { .mis-herr { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); } }

/* ════════════════════════════════════════════════════════════════════════
   PAQUETE 5 DE INCLUSIÓN · Moverme
   ════════════════════════════════════════════════════════════════════════ */
/* Barrido: la opción iluminada se ve desde lejos; la zona, con borde punteado */
.barrido-foco { outline: 6px solid #FFB300 !important; outline-offset: 3px; box-shadow: 0 0 0 12px rgba(255, 179, 0, .35) !important; }
.barrido-grupo { outline: 6px dashed #FFB300 !important; outline-offset: 4px; background-color: rgba(255, 179, 0, .10) !important; }
.barrido-ctl { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 1300; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: calc(100vw - 20px); padding: 8px 12px; border-radius: var(--r-pill); background: var(--tinta); color: #fff; box-shadow: var(--sombra-alta); }
.barrido-ctl .btn { min-height: 40px; }
.barrido-estado { font-weight: 800; font-size: .92rem; }
@media (min-width: 561px) { .barrido-ctl { flex-wrap: nowrap; white-space: nowrap; } }
body.con-barrido .contenido { padding-top: 84px; }
body.con-barrido .mis-herr { top: 84px; }
@media (max-width: 560px) { .barrido-ctl { border-radius: var(--r); top: auto; bottom: 8px; } body.con-barrido .contenido { padding-top: 0; padding-bottom: 110px; } body.con-barrido .mis-herr { top: 8px; } }

/* Clic por permanencia: un anillo se llena junto al cursor */
.perm-anillo { position: fixed; z-index: 1400; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--azul) calc(var(--p, 0) * 1turn), rgba(31, 95, 173, .15) 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }

/* Teclado en pantalla */
.teclado { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #1d2128; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.tk-sug, .tk-teclas { max-width: 980px; margin: 0 auto; }
.tk-sug { display: flex; gap: 6px; min-height: 48px; margin-bottom: 6px; }
.tk-s { flex: 1 1 0; min-height: 48px; border: 0; border-radius: 10px; background: #FFF4D6; color: #1A1D20; font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.tk-sug-vacia { align-self: center; color: #C5CAD3; font-size: .9rem; }
.tk-fila { display: flex; gap: 6px; margin-bottom: 6px; }
.tk-k { flex: 1 1 0; min-width: 0; min-height: 54px; border: 0; border-radius: 10px; background: #fff; color: #1A1D20; font: inherit; font-size: 1.35rem; font-weight: 800; cursor: pointer; }
.tk-k:active { background: #dfe6f3; }
.tk-ancha { flex-grow: 1.6; background: #c9cfda; font-size: 1.1rem; }
.tk-k[aria-pressed="true"] { background: #1F5FAD; color: #fff; }
.tk-espacio { flex-grow: 6; }
.tk-listo { flex-grow: 2; background: #12704F; color: #fff; font-size: 1.1rem; }
@media (max-width: 560px) { .tk-k { min-height: 46px; font-size: 1.1rem; } .tk-fila, .tk-sug { gap: 4px; } .tk-s { font-size: .95rem; } }

/* Control por voz */
.vozctl { position: fixed; left: 16px; bottom: 16px; z-index: 1240; display: flex; align-items: center; gap: 8px; max-width: min(460px, calc(100vw - 32px)); padding: 10px 14px; border: 2px solid var(--azul); border-radius: var(--r-pill); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-alta); font-weight: 800; }
@media (min-width: 992px) { .vozctl { left: calc(var(--lateral) + 16px); } }
.vozctl[data-estado="ok"] { border-color: var(--verde); }
.vozctl[data-estado="error"] { border-color: var(--alerta); }
.vozctl-ico { font-size: 1.3rem; }
.mv-ordenes { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }