/* Tablero de Secundaria (openspec: secundaria-dashboard): ingles.html?modo=secundaria (body.secundaria).
   Tokens y componentes base: estilos/stald.css; colores por materia: estilos/materias.css. Todo en tokens, así que
   funciona en claro y oscuro. Botones de al menos 44 px; sin scroll horizontal a 360 px. */

/* ---------- Botones reales en el encabezado (← Inicio, 🎮 Juegos, Cerrar sesión) ---------- */
body.secundaria .app-top .enlaces { gap: 8px; }
body.secundaria .home-link {
  min-height: 44px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card);
  color: var(--text); font-size: .88rem; box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s, transform .12s;
}
body.secundaria .home-link:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-2); }
body.secundaria .home-link:active { transform: translateY(1px); }
body.secundaria .home-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.secundaria #logout-btn { min-height: 44px; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:disabled:hover { box-shadow: none; }

/* ---------- Pestañas (openspec: navegacion-mejoras) ----------
   Celular (< 720 px): la fila de pestañas se oculta y manda la barra inferior fija `.sec-barra` (estilos de `.nav-barra`
   en estilos/stald.css) con «☰ Más» (`#sec-mas`, estilos de `.nav-mas` en ingles/ingles.css). Desde 720 px: una sola
   fila (7 de la alumna o 9 del profe); hasta 1099 px el emoji sobre el nombre corto y desde 1100 px en línea (nombre
   largo con 7, corto con 9). Todas de 44 px o más. */
.sec-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 14px; overflow: visible; position: sticky; top: 0; z-index: 5; box-shadow: var(--shadow-1); }
.sec-tabs .tab { min-height: 48px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; min-width: 0; }
.sec-tabs .tab:hover:not([aria-selected="true"]) { background: var(--accent-soft); color: var(--accent); }
.sec-tab-emoji { font-size: 1.1rem; }
.sec-tab-largo { display: none; }
.sec-tab-corto { font-size: .72rem; overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  .sec-tabs .tab { flex-direction: row; gap: 6px; padding: 8px 8px; }
  .sec-tabs:not(.sec-tabs-muchas) .sec-tab-largo { display: inline; font-size: .86rem; }
  .sec-tabs:not(.sec-tabs-muchas) .sec-tab-corto { display: none; }
  .sec-tabs-muchas .tab { gap: 4px; padding: 8px 4px; }
  .sec-tabs-muchas .sec-tab-corto { font-size: .82rem; }
}
.sec-barra, .sec-barra-hueco { display: none; }
@media (max-width: 719.98px) {
  .sec-tabs { display: none; }
  .sec-barra { display: flex; }
  .sec-barra-hueco { display: block; height: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .sec-barra .nav-item.activo { color: var(--accent); }
}
@media (min-width: 720px) { .sec-mas { display: none !important; } }
.sec-panel > * + * { margin-top: 14px; }

/* ---------- Selector del admin ---------- */
.sec-admin-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--r-md); }
.sec-admin-barra label { font-weight: 700; font-size: .88rem; }
.sec-admin-barra select { min-height: 44px; min-width: 0; flex: 1 1 160px; font: inherit; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); }

/* ---------- Encabezado del Inicio ---------- */
.sec-hero { padding: 18px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  background: linear-gradient(135deg, var(--accent-soft), var(--card) 75%); }
.sec-fecha { font-size: .82rem; font-weight: 700; color: var(--muted); }
.sec-hola { margin: 2px 0 0; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sec-vista-profe { margin-top: 8px; }
.sec-subtitulo { margin: 0 0 10px; font-size: 1.05rem; }

/* ---------- Hoy te toca ---------- */
.sec-hoy-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sec-hoy-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sec-tarjeta { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 16px 20px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden; min-width: 0; }
.sec-tarjeta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--mat); }
.sec-tarjeta-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.sec-tarjeta-tema { margin: 0; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.sec-tarjeta-meta { margin: 0; font-size: .82rem; color: var(--muted); }
.sec-btn-grande { width: 100%; min-height: 52px; font-size: 1rem; margin-top: auto; }
.sec-tarjeta .sec-btn-grande:not(.ghost) { background: var(--accent-bg); }
.sec-estado { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.est-hecha { background: var(--ok-soft); color: var(--ok); }
.est-en-curso { background: var(--accent-soft); color: var(--accent); }
.est-vence-hoy, .est-vence-manana { background: var(--warn-soft); color: var(--warn); }
.est-atrasada { background: var(--bad-soft); color: var(--bad); }
.est-pendiente, .est-proxima { background: var(--card-2); color: var(--muted); border: 1px solid var(--border); }
.sec-vacio-hoy { text-align: center; padding: 22px 16px; background: var(--card); border: 1px dashed var(--border); border-radius: var(--r-md); }
.sec-vacio-hoy p { margin: 4px 0; }
.sec-vacio-emoji { font-size: 2.2rem; }

/* ---------- Indicadores: progreso, racha y promedio ---------- */
.sec-kpis { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); min-width: 0; }
.sec-kpi .anillo { width: 64px; height: 64px; }
.sec-kpi .anillo .centro { font-size: .9rem; }
.sec-kpi-num { font-size: 1.35rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.sec-kpi-txt { min-width: 0; }
.sec-kpi-titulo { font-weight: 800; font-size: .92rem; }
.sec-kpi-detalle { font-size: .82rem; color: var(--muted); }

/* ---------- Promedio por materia ---------- */
.sec-prom-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sec-prom { display: grid; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) auto; align-items: center; gap: 10px; }
.sec-prom .chip { white-space: nowrap; }
.sec-prom-barra > span { background: var(--mat); }
.sec-prom-num { font-variant-numeric: tabular-nums; font-size: .9rem; }

/* ---------- Accesos ---------- */
.sec-accesos { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .sec-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-acceso { min-height: 52px; font-size: .95rem; justify-content: flex-start; padding: 10px 16px; }
.sec-acceso::after { content: "→"; margin-left: auto; color: var(--accent); }

/* ---------- Mis materias ---------- */
.sec-materias { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sec-materias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-materia { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-top: 5px solid var(--mat);
  border-radius: var(--r-md); box-shadow: var(--shadow-1); min-width: 0; }
.sec-materia-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-materia-top h3 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sec-materia-emoji { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--mat-soft); flex-shrink: 0; }
.sec-materia-avance { display: grid; gap: 6px; font-size: .85rem; font-weight: 700; }
.sec-materia-avance .barra > span { background: var(--mat); }
.sec-materia-ultimo, .sec-materia-nota { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.sec-materia-nota { color: var(--muted); }
.sec-secuencia { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-size: .82rem; }
.sec-secuencia li { display: inline-flex; align-items: center; }
.sec-secuencia li + li::before { content: "→"; margin: 0 4px; color: var(--muted); }
.sec-etapa { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); color: var(--muted); }
.sec-secuencia li.actual .sec-etapa { background: var(--mat-soft); color: var(--mat); border-color: var(--mat); font-weight: 800; }
.sec-ahora { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }

/* ---------- Estilo «RPG educativo» del Inicio (openspec: secundaria-dashboard) ----------
   Referencia visual del profe (no versionada): neón índigo, morado y esmeralda sobre azul noche, Inter para el texto
   y Orbitron para números y títulos de misión. Sin Tailwind ni íconos externos: tokens propios y emojis. */
body.secundaria { font-family: "Inter", var(--font); }
/* Tokens --rpg-* y componentes rpg- compartidos: estilos/ui.css (openspec: juegos-diseno-rpg). */
.rpg > * + * { margin-top: 14px; }
.rpg .card, .rpg .sec-kpi, .rpg .sec-tarjeta { background: var(--rpg-panel); border-color: var(--rpg-borde); }

/* Barra de estado: nivel, XP, insignias y racha */
.rpg-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: center; padding: 12px 14px;
  background: var(--rpg-panel); border: 1px solid var(--rpg-borde); border-radius: var(--r-md); box-shadow: var(--rpg-glow); }
.rpg-nivel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rpg-nivel-num { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-weight: 900; font-size: 1.15rem;
  color: var(--rpg-indigo); background: var(--accent-soft); border: 1.5px solid var(--rpg-indigo); }
.rpg-nivel-txt { flex: 1; min-width: 0; }
.rpg-rango { font-weight: 800; font-size: .86rem; overflow-wrap: anywhere; }
/* «Nv. 3» (nivel del juego) para no confundirlo con «Inglés A1» (openspec: fix-e2e-rpg); sin subrayado de <abbr>. */
.rpg-rango abbr, .sec-nivel abbr { text-decoration: none; cursor: help; }
.rpg-xp-linea { display: flex; justify-content: space-between; font-size: .72rem; color: var(--rpg-texto-suave); margin: 2px 0 4px; }
.rpg-xp-linea .rpg-num { color: var(--rpg-indigo); font-weight: 700; }
@media (max-width: 479.98px) { .rpg-stats { grid-template-columns: 1fr 1fr; } .rpg-nivel { grid-column: 1 / -1; } }

/* Misión principal activa (incluye el saludo) */
.rpg-mision { position: relative; overflow: hidden; padding: 18px 16px; border-radius: var(--r-lg); border: 1px solid var(--rpg-borde);
  background: var(--rpg-hero); box-shadow: var(--rpg-glow); }
.rpg-mision::after { content: "🐉"; position: absolute; right: -6px; bottom: -14px; font-size: 6rem; opacity: .08; pointer-events: none; }
.rpg-mision .sec-hero { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 12px; }
.rpg-mision-t { margin: 8px 0 4px; font-size: 1.2rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.rpg-mision-d { margin: 0 0 12px; font-size: .85rem; color: var(--rpg-texto-suave); overflow-wrap: anywhere; }
.rpg-mision-acciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; z-index: 1; }
@media (min-width: 480px) { .rpg-mision-acciones { grid-template-columns: auto auto; justify-content: start; } }
.rpg-btn-mision { min-height: 52px; font-size: 1rem; padding: 10px 20px; background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.rpg-btn-sec { min-height: 52px; }

/* Retos diarios */
.rpg-seccion-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rpg-seccion-top .sec-subtitulo { margin: 0; }
.rpg-bonus { margin: 6px 0 10px; font-size: .85rem; font-weight: 700; color: var(--rpg-purple); }
.sec-tarjeta-premio { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rpg-mundo-mini { font-size: .78rem; color: var(--rpg-texto-suave); font-weight: 600; }
.rpg .sec-tarjeta { box-shadow: var(--rpg-glow); }

/* Actividad reciente y promedios en dos columnas en pantallas anchas */
.rpg-dos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .rpg-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpg-dos > .card + .card { margin-top: 0; } }
.rpg-actividad-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rpg-act { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); border-left: 4px solid var(--mat); }
.rpg-act-ico { font-size: 1rem; }
.rpg-act-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rpg-act-txt b { font-size: .86rem; overflow-wrap: anywhere; }
.rpg-act-txt span { font-size: .75rem; color: var(--rpg-texto-suave); }
.rpg-general { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text); }

/* Insignias */
.rpg-insignia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.rpg-insignia { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; text-align: center; border-radius: var(--r-sm); border: 1px dashed var(--border); color: var(--muted); }
.rpg-insignia.ganada { border: 1.5px solid var(--rpg-purple); background: var(--accent-soft); color: var(--text); box-shadow: var(--rpg-glow); }
.rpg-insignia-ico { font-size: 1.5rem; }
.rpg-insignia:not(.ganada) .rpg-insignia-ico { filter: grayscale(1); opacity: .7; }
.rpg-insignia-n { font-size: .72rem; font-weight: 700; line-height: 1.2; }

/* Mis materias: camino de mundos */
.rpg-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: .78rem; color: var(--muted); }
.sec-etapa small { font-weight: 600; opacity: .85; }
.sec-secuencia li.mundo-completado .sec-etapa { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.sec-secuencia li.mundo-bloqueado .sec-etapa { opacity: .75; }

/* ===============================================================================================
   Misiones principales, mapa, árbol y bandeja del profe (openspec: rpg-fase2-misiones; ingles/secundaria-misiones.js).
   Tokens del tablero RPG: claro y oscuro; botones ≥ 44 px; sin scroll horizontal a 360 px; sin animaciones grandes.
   ====================================================================================================== */
.mis-pre { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.mis-btn-chico { min-height: 44px; padding: 6px 12px; font-size: .85rem; }
.mis-estado { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); color: var(--text); }
.mis-estado.est-evaluada, .mis-estado.est-dominado, .mis-estado.est-completado { color: var(--rpg-emerald); border-color: var(--rpg-emerald); background: var(--ok-soft); }
.mis-estado.est-lista { color: var(--rpg-indigo); border-color: var(--rpg-indigo); background: var(--accent-soft); }
.mis-estado.est-correccion { color: var(--rpg-amber); border-color: var(--rpg-amber); }
.mis-estado.est-bloqueado { opacity: .8; }

/* Inicio */
.mis-inicio { background: var(--rpg-hero); border-color: var(--rpg-borde); box-shadow: var(--rpg-glow); }
.mis-inicio .rpg-xp-barra { margin: 4px 0; }
.mis-semana-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mis-semana-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); }
.mis-semana-item.completa { border-color: var(--rpg-emerald); }
.mis-semana-t { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }

/* Lista y detalle de misiones */
.mis-lista { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mis-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mis-detalle > * + * { margin-top: 14px; }
.mis-hero { padding: 16px; }
.mis-hero::after { content: "⚔️"; }
.mis-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mis-paso { padding: 14px; border-radius: var(--r-md); background: var(--rpg-panel); border: 1px solid var(--rpg-borde); box-shadow: var(--shadow-1); min-width: 0; }
.mis-paso h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; overflow-wrap: anywhere; }
.mis-paso-meta { margin: 0 0 8px; font-size: .8rem; color: var(--rpg-texto-suave); }
.mis-ejemplo, .mis-entregado, .mis-zonas, .ent-paso, .ent-corr { margin-top: 8px; }
.mis-ejemplo summary, .mis-entregado summary, .mis-zonas summary, .ent-paso summary, .ent-corr summary, .mis-teoria summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mis-ejemplo .mis-pre, .mis-entregado .mis-pre, .ent-paso .mis-pre { padding: 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px dashed var(--rpg-borde); font-size: .88rem; }
.mis-correccion { padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--rpg-amber); background: var(--rpg-panel-2); }
.mis-entrega { display: grid; gap: 6px; margin-top: 10px; }
.mis-label { font-weight: 700; font-size: .9rem; }
.mis-aviso { margin: 0; font-size: .82rem; font-weight: 600; color: var(--rpg-purple); }
.mis-entrega textarea, .ent-evaluar textarea, .mis-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--text); min-height: 44px; }
.mis-entrega textarea { resize: vertical; min-height: 160px; }
.mis-entrega textarea:focus-visible, .mis-input:focus-visible, .ent-evaluar textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.mis-entrega-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mis-cuenta { font-size: .8rem; color: var(--rpg-texto-suave); font-variant-numeric: tabular-nums; }
.mis-cuenta.lleno { color: var(--rpg-amber); font-weight: 700; }
.mis-res { margin: 0; font-size: .86rem; min-height: 1em; }
.mis-res.ok { color: var(--rpg-emerald); font-weight: 700; }
.mis-criterio + .mis-criterio { margin-top: 10px; }
.mis-niveles { margin: 4px 0 0; padding-left: 18px; font-size: .85rem; }
.mis-niveles li.elegido { font-weight: 700; color: var(--rpg-emerald); }
.mis-comentario { font-style: italic; overflow-wrap: anywhere; }

/* Práctica de la teoría */
.mis-practicas { margin-top: 12px; display: grid; gap: 10px; }
.mis-practicas h4 { margin: 0; }
.mis-practica { padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--rpg-borde); background: var(--rpg-panel-2); display: grid; gap: 6px; }
.mis-practica p { margin: 0; overflow-wrap: anywhere; }
.mis-opciones { display: grid; gap: 4px; }
.mis-opcion { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.mis-opcion input { width: 20px; height: 20px; flex-shrink: 0; }
.mis-practica-res.ok { color: var(--rpg-emerald); font-weight: 700; }
.mis-practica-res.casi { color: var(--rpg-amber); font-weight: 700; }

/* Mapa */
.mis-mundos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mis-mundo { padding: 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); border-left: 4px solid var(--mat, var(--rpg-indigo)); min-width: 0; }
.mis-mundo.est-bloqueado { opacity: .78; }
.mis-mundo-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mis-mundo-n { font-weight: 800; overflow-wrap: anywhere; }
.mis-mundo-n small { font-weight: 600; color: var(--rpg-texto-suave); }
.mis-mundo .meta { margin: 4px 0 0; }
.mis-mundo-mision { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; overflow-wrap: anywhere; }
.mis-zona ul { margin: 4px 0 8px; padding-left: 4px; list-style: none; display: grid; gap: 2px; }
.mis-zona li { display: flex; align-items: center; gap: 6px; min-height: 44px; overflow-wrap: anywhere; }
.mis-capitulo { background: none; border: 0; padding: 6px 0; min-height: 44px; text-align: left; cursor: pointer; font: inherit; color: var(--accent); text-decoration: underline; }

/* Árbol */
.mis-arbol-mundo { margin: 10px 0 6px; font-size: .92rem; }
.mis-nodos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mis-nodo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); min-width: 0; flex-wrap: wrap; }
.mis-nodo.est-dominado { border-color: var(--rpg-emerald); }
.mis-nodo.est-reforzar { border-color: var(--rpg-amber); }
.mis-nodo.est-no-visto { opacity: .8; }
.mis-nodo-ico { font-size: 1.2rem; }
.mis-nodo-t { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.mis-nodo-t small { color: var(--rpg-texto-suave); }

/* Bandeja del profe */
.ent-card > * + * { margin-top: 8px; }
.ent-card.est-lista { border-color: var(--rpg-indigo); box-shadow: var(--rpg-glow); }
.ent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ent-top h3 { margin: 0; overflow-wrap: anywhere; }
.ent-evaluar, .ent-correccion { display: grid; gap: 6px; }
.ent-criterio { border: 1px solid var(--rpg-borde); border-radius: var(--r-sm); padding: 6px 10px; margin: 0; min-width: 0; }
.ent-criterio legend { font-weight: 700; padding: 0 4px; overflow-wrap: anywhere; }
.ent-total { font-weight: 800; color: var(--rpg-indigo); margin: 0; }
.ent-borrar { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .rpg-xp-barra > span { transition: none; }
}

/* PC (openspec: navegacion-dispositivos): Secundaria usa el ancho; las 7 pestañas caben en una fila. */
@media (min-width: 1100px) {
  body.secundaria .app-top, body.secundaria .shell { max-width: 1100px; }
}

/* Revisión del profe que ve la alumna (openspec: revision-profe): calificación, comentario y final. Tokens de
   estilos/stald.css: el modo oscuro sale de --ok/--ok-soft sin reglas aparte. */
.sec-rev-pill { display: block; width: fit-content; max-width: 100%; margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.sec-rev-pill .sec-revision-coment { color: var(--text); font-weight: 600; }
.sec-tarjeta .sec-rev-pill { margin: 0 0 8px; }
.sec-rev-bloque { border-left: 4px solid var(--ok); }
.sec-revision-t { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.sec-revision-t b { color: var(--ok); font-size: 1.15rem; }
.sec-rev-bloque .meta { margin: 6px 0 0; }
.sec-rev-aviso { border-left: 4px solid var(--ok); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sec-rev-aviso p { margin: 0; overflow-wrap: anywhere; }
.sec-rev-ir { max-width: 100%; white-space: normal; }
.sec-materia-rev h4 { margin: 10px 0 6px; font-size: .9rem; }
.sec-materia-rev ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sec-rev-abrir { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; text-align: left; }
button.sec-rev-abrir { cursor: pointer; }
button.sec-rev-abrir:hover { border-color: var(--ok); }
.sec-rev-abrir .sec-rev-tema { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.sec-rev-abrir small { color: var(--muted); white-space: nowrap; }
.sec-rev-abrir small b { color: var(--ok); }
@media (max-width: 420px) { .sec-rev-abrir { flex-wrap: wrap; } .sec-rev-abrir small { white-space: normal; } }
=======
/* ---------- 📋 Revisión del profe (openspec: revision-profe; ingles/secundaria-revision.js) ----------
   Celular: una columna. Desde 560 px: resumen en una fila y calificación junto al comentario. Desde 900 px: días en 2
   columnas. Botones, casillas y campos de 44 px o más; todo en tokens (claro y oscuro); sin scroll horizontal a 360 px. */
.rev { min-width: 0; }
.rev > * + * { margin-top: 14px; }
.rev-cabeza h3 { margin: 0 0 10px; overflow-wrap: anywhere; }
.rev-cabeza h3:focus { outline: none; }
.rev-cabeza h3:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rev-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rev .btn { min-height: 44px; }
.rev-nav .btn { padding: 8px 6px; font-size: .84rem; white-space: normal; line-height: 1.15; }
.rev-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rev-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: var(--r-md);
  background: var(--rpg-panel-2); border: 1px solid var(--rpg-borde); min-width: 0; }
.rev-kpi b { font-size: 1.4rem; color: var(--rpg-indigo); font-variant-numeric: tabular-nums; }
.rev-kpi span { font-size: .78rem; color: var(--muted); }
#rev-k-pendientes b { color: var(--warn); }
#rev-k-promedio { grid-column: 1 / -1; }
#rev-k-promedio b { color: var(--rpg-emerald); }
.rev-materias { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rev-aviso { margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: .86rem; }
.rev-dias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.rev-dia { min-width: 0; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); }
.rev-dia.es-hoy { border-color: var(--accent); box-shadow: var(--rpg-glow); }
.rev-dia h4 { margin: 0 0 8px; }
.rev-dia > * + * { margin-top: 10px; }
.rev-libre { margin: 0; }
.rev-card { margin: 0; min-width: 0; border-left: 5px solid var(--mat, var(--rpg-indigo)); display: grid; gap: 10px; }
.rev-card.rev-hecha { background: linear-gradient(135deg, var(--ok-soft), var(--card) 40%); }
.rev-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.rev-card-top .t { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
/* Tarjetas plegables (openspec: revision-profe-plegar): la cabecera es el botón; plegada = una línea. */
.rev-plegar { width: 100%; min-height: 44px; margin: 0; padding: 4px 2px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rev-plegar:hover { background: var(--accent-soft); }
.rev-plegar:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rev-linea-fin { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rev-final-corta { font-size: .86rem; color: var(--rpg-emerald); font-variant-numeric: tabular-nums; }
.rev-final-corta:empty { display: none; }
.rev-flecha { font-size: .9rem; color: var(--muted); width: 1em; text-align: center; }
.rev-cuerpo { display: grid; gap: 10px; min-width: 0; }
.rev-cuerpo[hidden] { display: none; }
.rev-card[data-plegada="1"] { padding-top: 8px; padding-bottom: 8px; }
.rev-modo { display: flex; justify-content: flex-end; }
.rev-sello { font-size: .8rem; font-weight: 800; color: var(--muted); }
.rev-hecha .rev-sello { color: var(--ok); }
.rev-linea { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rev-acciones, .rev-guardar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rev-manual { display: grid; gap: 10px; min-width: 0; }
.rev-libreta { margin: 0; padding: 6px 10px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 0; }
.rev-libreta legend { font-weight: 800; font-size: .86rem; padding: 0 4px; }
.rev-extras { display: grid; gap: 4px; }
.rev-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; overflow-wrap: anywhere; }
.rev-check:hover { background: var(--accent-soft); }
.rev-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--rpg-emerald); }
.rev-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rev-campos { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.rev-cal, .rev-com { display: grid; gap: 4px; font-weight: 700; font-size: .86rem; min-width: 0; }
.rev-cal select, .rev-com textarea { font: inherit; font-weight: 400; min-height: 44px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box; }
.rev-com textarea { resize: vertical; }
.rev-cal select:focus-visible, .rev-com textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rev-final { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--rpg-panel-2); border: 1px dashed var(--rpg-borde); }
.rev-guardado { font-size: .86rem; font-weight: 700; }
.rev-guardado.ok { color: var(--ok); }
.rev-guardado.error { color: var(--bad); }
.rev-guardado.pendiente, .rev-guardado.guardando { color: var(--muted); }
.rev-misiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rev-mision { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.rev-mision > div { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .rev-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #rev-k-promedio { grid-column: auto; }
  .rev-campos { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); }
}
@media (min-width: 900px) { .rev-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rev-nav { max-width: 640px; } }