/* ─── Archivo Variable, servida desde acá ─────────────────────────────
   No desde Google Fonts, y no por gusto: el service worker descarta toda
   respuesta cuyo `type` no sea `basic` (service-worker.js), y la de un CDN es
   `cors`. La fuente no podía entrar al caché ni aunque se la nombrara — así que
   en una app pensada para funcionar sin red, la tipografía de la marca era
   justo lo que desaparecía al quedarse sin red.

   Además el <link> era una petición a otro dominio que bloquea el primer
   pintado. En una conexión de escuela eso son cientos de milisegundos antes de
   ver nada.

   Es el subconjunto latino con el eje de peso, 34,9 KB. La URL anterior pedía
   además el eje de ancho (wdth) y hasta el peso 800: 90 KB, de los que nada en
   este proyecto usa el ancho y ningún elemento pasa de 700. El latino cubre el
   español entero, acentos, ñ, ¿ y ¡ incluidos.

   Licencia OFL 1.1; el texto va al lado, en fonts/OFL.txt, como exige.
   ──────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* Reset y variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── Identidad ───────────────────────────────────────────────────────
   La paleta de `doc/colores.png`, la misma que usan `apps/adm` y los tres
   sitios de `web/`. El juego venía con la de `doc/images/paleta-hex-objetos`
   —azul #003893 y verde #007A3D—, que es la variante que `doc/doc.md` marca
   como NO coincidente: al lado de cualquier otra pantalla del proyecto, el
   azul se veía de otro tono.

   Los grises tampoco eran de marca: #1F2937 y #4B5563 son los neutros de
   Tailwind. Los de la identidad tiran a azul (#26355C, #5A6C90), que es lo
   que hace que el texto se sienta parte de la misma paleta y no encima de
   ella.
   ──────────────────────────────────────────────────────────────────── */
:root {
    --primary: #002b7f;          /* azul */
    --primary-dark: #001b52;     /* hondo */
    --secondary: #fcd116;        /* amarillo */
    --success: #006847;          /* verde */
    --warning: #fcd116;
    --danger: #ce1126;           /* rojo */
    --disabled: #8a97b3;
    --bg: #f2f6fc;               /* nieve */
    --card-bg: #ffffff;
    --text: #26355c;
    --text-light: #5a6c90;       /* gris */
    /* Dos bordes, porque son dos trabajos distintos.
       `--border` separa: tarjetas, filas, divisores. Ahí un trazo tenue basta.
       `--border-control` dibuja el contorno de algo que se toca —el botón de
       respuesta, los campos—, y eso tiene que verse: 3.37:1 sobre blanco. El
       celeste que había antes se quedaba en 2.41:1 y #d6e1f2 en 1.32:1, así que
       ni el original cumplía. En una app para niños, un botón de respuesta sin
       borde visible es un botón que no parece un botón. */
    --border: #d6e1f2;
    --border-control: #7a8cb4;
    /* Los mismos colores en decimal, porque rgba() no acepta un hex y hacen
       falta con transparencia. Escritos una vez: la última vez que cambió la
       paleta hubo que editar a mano siete copias en este archivo, y una se
       quedó atrás — la de abajo, que era el celeste que habíamos quitado. */
    --azul-rgb: 0, 43, 127;
    --celeste-rgb: 116, 172, 223;
    --verde-rgb: 0, 104, 71;
    --rojo-rgb: 206, 17, 38;

    --primary-soft: rgba(var(--azul-rgb), 0.1);
    --primary-soft-strong: rgba(var(--azul-rgb), 0.7);
    /* Celeste al 22%: es el resaltado de «este resultado casa con tu búsqueda».
       Como fondo tenue sí funciona; como borde no llegaba al contraste, y por
       eso dejó de serlo. */
    --info-soft: rgba(var(--celeste-rgb), 0.22);
    --warning-soft: #fff7d6;
    --warning-text: #7a5c00;
    --danger-soft: #fdebec;
    --danger-text-strong: #b50f22;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   ACCESSIBILITY STYLES
   ============================================ */

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -70px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Focus indicators for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Enhanced focus for interactive elements */
.tema-card:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.respuesta-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    transform: scale(1.02);
}

/* Dot navigation focus */
.dot:focus-visible,
.pregunta-dot:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    transform: scale(1.3);
}

/* Toast notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: white;
    color: var(--text);
    padding: 16px 20px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: slideIn 0.3s ease-out;
}

.toast.error {
    border-left: 4px solid var(--danger);
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.info {
    border-left: 4px solid var(--primary);
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideOut {
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Loading indicator */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

html {
    height: 100%;
}

body {
    font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    justify-content: center;
    height: 100%;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}
#catalogo,
#mis-temas{
    padding:10px;
}
.app-container {
    width: 100vw;
    max-width: 768px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative; /* Reference for marcador-puntos */
    background: var(--bg);
}

/* Controls container */
.controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 768px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1000;
    height: auto;
    min-height: 60px;
    flex-shrink: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.controls-left,
.controls-center,
.controls-right {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
}

.controls-left {
    justify-content: flex-start;
}

.controls-center {
    justify-content: center;
}

.controls-right {
    justify-content: flex-end;
}

/* Indicador de vistas */
.view-indicator {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: var(--transition);
}

.dot.active {
    background: var(--primary);
    width: 24px;
    border-radius: 4px;
}

/* Slider */
.slider-container {
    flex: 1;
    overflow: hidden;
    position: relative; /* Reference for marcador-puntos */
    margin-bottom: 4em;
}

.slides-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Headers */
.slide-header {
    text-align: center;
    margin-bottom: 10px;
}

.slide-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.subtitle {
    font-size: 14px;
    color: var(--text-light);
}

/* Progress stats */
.progress-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 13px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-label {
    color: var(--text-light);
    font-weight: 500;
}

.stat-value {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.stat-divider {
    color: var(--text-light);
    opacity: 0.5;
}

/* Filtro de Nivel */
.nivel-filter {
    background: var(--card-bg);
    padding: 8px 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.nivel-filter label {
    font-weight: 600;
    color: var(--text);
}

.nivel-filter select {
    flex: 1;
    padding: 8px 12px;
    max-width:132px;
    border: 2px solid var(--border-control);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.nivel-filter select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Buscador de temas */
.search-container {
    flex: 1;
}

.search-container input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-control);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    transition: var(--transition);
}

.search-container input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-container input::placeholder {
    color: var(--text-light);
}

/* Highlight para resultados de búsqueda */
.tema-card.search-match {
    background: var(--info-soft);
    border-color: var(--border-control);
    box-shadow: 0 0 0 2px var(--border-control);
}

.temas-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.tema-tree-item {
    margin-bottom: 2px;
}

.tema-card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tema-card:active {
    transform: scale(0.98);
}

.tema-card.in-collection {
    border-color: var(--primary);
    background: var(--info-soft);
}

.tema-card.in-collection::after {
    content: '✓';
    position: absolute;
    right: 6px;
    background: var(--primary);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

.tema-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tema-card.disabled .tema-titulo,
.tema-card.disabled .tema-info {
    color: var(--text-light);
}

.tema-card .tema-info.tema-progreso-pendiente {
    color: var(--primary);
    font-weight: 600;
}

.tema-card .tema-info.tema-completado {
    color: var(--success);
    font-weight: 700;
}

.tema-card .tema-info.tema-subtemas {
    font-weight: 700;
}

/* Highlight animation for incomplete child requirement */
.tema-card.highlight-required {
    animation: highlightPulse 0.6s ease-in-out 3;
    border-color: var(--primary-dark) !important;
    background: var(--primary-soft) !important;
}

@keyframes highlightPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--primary-soft-strong);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(var(--azul-rgb), 0);
    }
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(var(--azul-rgb), 0.3);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 4px 20px rgba(var(--azul-rgb), 0.5);
    }
}

.btn-pulse {
    animation: buttonPulse 0.4s ease-in-out 2;
}

.tree-icon {
    font-size: 12px;
    color: var(--text-light);
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tree-icon.expandable {
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
    padding: 4px 10px;
    margin-left: 0.5em;
    font-size: 14px;
    color: var(--primary);
    font-weight: bold;
    pointer-events: auto;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.tree-icon.expandable:hover {
    color: white;
    background: var(--primary);
    border-color: var(--primary);
}

.tema-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0.5em;
    pointer-events: none; /* Let clicks pass through to tema-card */
}

.tema-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.tema-info {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
    margin-right: 3em;
}

/* Mis Temas */
.mis-temas-container {
    min-height: 400px;
}

.empty-state {
    text-align: center;
    padding: 20px 10px;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 16px;
}

.empty-state .btn-primary {
    margin-top: 10px;
}

.temas-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.mi-tema-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mi-tema-card:active {
    transform: scale(0.98);
    border-color: var(--primary);
}

.mi-tema-info {
    flex: 1;
}

.mi-tema-titulo {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.mi-tema-progress {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s ease;
}

.play-icon {
    font-size: 32px;
    opacity: 0.5;
    transition: var(--transition);
}

.mi-tema-card:active .play-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Juego/Lección */
.game-container {
    height:100%;
}

.game-empty-state {
    text-align: center;
    padding: 20px 10px;
}

.tema-actual-header {
    text-align: center;
    padding: 10px;
    background:  var(--primary);
    box-shadow: var(--shadow-lg);
}

.tema-actual-titulo {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Examen */
.examen-container {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

.examen-header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}

.examen-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.examen-info {
    font-size: 14px;
    color: var(--text-light);
}

.pregunta-numero {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.pregunta-origen {
    font-size: 13px;
    color: var(--primary);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--primary-soft);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

.resultado-examen {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}

.resultado-correcto {
    color: var(--success);
}

.resultado-incorrecto {
    color: var(--danger);
}

.leccion-container {
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    min-height:100%;
    display: flex;
    flex-direction: column;
}

.leccion-header {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.leccion-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    width: 100%;
}

.leccion-numero {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.leccion-contenido{
    padding:10px;
}
.contenido-item {
    margin-bottom: 20px;
}

.contenido-texto {
    font-size: 32px;
    line-height: 1.4;
    padding: 0.5em 0;
    color: var(--text);
}

.contenido-imagen {
    width: 100%;
    border-radius: var(--radius);
    margin: 16px 0;
}

.pregunta-header {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.pregunta-titulo {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    width: 100%;
}

.pregunta-indicador {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#pregunta-contador {
    white-space: nowrap;
}

.pregunta-container {
    padding: 0 10px;
}

@media (min-width: 576px) {
    .pregunta-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pregunta-titulo {
        flex: 1;
        width: auto;
    }
}

.respuestas-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.respuesta-btn {
    background: var(--card-bg);
    border: 2px solid var(--border-control);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text);
}

.respuesta-btn:active {
    transform: scale(0.98);
}

.respuesta-btn:hover {
    border-color: var(--primary);
}

.respuesta-btn.correcta {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.respuesta-btn.incorrecta {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.respuesta-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.explicacion {
    margin-top: 16px;
    padding: 16px;
    background: white;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.respuesta-item {
    display: flex;
    flex-direction: column;
}

.explicacion-inline {
    padding: 12px;
    background: var(--bg);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

/* Botones */
button {
    font-family: inherit;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary);
    color: white;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 16px;
    width: 100%;
}

.btn-primary:active {
    background: var(--primary-dark);
    transform: scale(0.98);
}

.btn-fixed-bottom {
    box-shadow: var(--shadow-lg);
}

.btn-fixed-bottom:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 15px;
}

.btn-secondary:active {
    background: var(--primary);
    color: white;
}

/* Botón volver al catálogo */
.btn-back-catalog {
    background: var(--card-bg);
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.btn-back-catalog:active {
    background: var(--primary);
    color: white;
    transform: scale(0.95);
}

/* Navegación */
.nav-btn {
    position: fixed;
    bottom: 20px;
    background: var(--primary);
    color: white;
    padding: 14px 24px;
    border-radius: var(--radius);
    font-size: 15px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
}

.nav-btn-left {
    left: 20px;
}

.nav-btn-right {
    right: 20px;
}

.nav-btn:active {
    background: var(--primary-dark);
    transform: scale(0.98);
}

.nav-buttons {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 50;
}

/* Responsive - Tablet y Desktop */
@media (min-width: 768px) {
    .slide {
    }

    .temas-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .slide-header h1 {
        font-size: 36px;
    }

    .subtitle {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .slide {
    }

    .temas-grid {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .temas-list {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Caja de diálogo de resultado del examen */
.resultado-dialogo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 200;
    max-width: 400px;
    width: calc(100% - 40px);
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.resultado-dialogo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.resultado-icono {
    font-size: 64px;
    margin-bottom: 16px;
}

.resultado-titulo {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}

.resultado-titulo.aprobado {
    color: var(--success);
}

.resultado-titulo.reprobado {
    color: var(--danger);
}

.resultado-detalles {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.6;
}

.resultado-tema {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 16px;
    margin-bottom: 16px;
    font-style: italic;
}

.resultado-warning {
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--warning-text);
    line-height: 1.5;
}

.resultado-dialogo .btn-primary {
    margin-top: 0;
}

.resultado-errores-por-tema {
    margin-top: 16px;
    padding: 12px;
    background: var(--danger-soft);
    border-radius: 8px;
    border-left: 3px solid var(--danger);
    text-align: left;
}

.resultado-errores-por-tema strong {
    display: block;
    margin-bottom: 8px;
    color: var(--danger);
}

.resultado-errores-por-tema ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.resultado-errores-por-tema li {
    padding: 4px 0;
    color: var(--text);
    font-size: 14px;
}

.resultado-errores-por-tema li::before {
    content: "• ";
    color: var(--danger);
    font-weight: bold;
    margin-right: 8px;
}

.resultado-errores-por-tema a {
    color: var(--danger);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.resultado-errores-por-tema a:hover {
    color: var(--danger-text-strong);
    text-decoration: underline;
}

/* Slider de preguntas */
.pregunta-slider {
    position: relative;
    margin-bottom: 2em;
}

.pregunta-slider .pregunta-container {
    display: none;
}

.pregunta-slider .pregunta-container:first-child {
    display: block;
}

/* Indicador de preguntas con bolitas */
/* Navigation header for exam questions (number + slider dots) */
.pregunta-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

.pregunta-numero-exam {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pregunta-slider-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Hide the individual question numbers inside exam questions */
.widget-examen .pregunta-numero {
    display: none;
}

.pregunta-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.pregunta-dot:hover:not(.disabled) {
    transform: scale(1.2);
    background: var(--text-light);
}

.pregunta-dot.active {
    background: var(--primary);
    width: 28px;
    border-radius: 5px;
    transform: scale(1);
}

.pregunta-dot.completed:not(.active) {
    background: var(--success);
}

.pregunta-dot.completed:not(.active)::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 8px;
    font-weight: bold;
}

.pregunta-dot.failed:not(.active) {
    background: var(--danger);
}

.pregunta-dot.failed:not(.active)::after {
    content: '✗';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.pregunta-dot.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pregunta-dot.disabled:hover {
    transform: none;
    background: var(--border);
}

/* Indicador de navegación de lecciones con dots (reutiliza estilos de preguntas) */
.leccion-slider-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.leccion-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--disabled);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.leccion-dot:hover:not(.disabled) {
    transform: scale(1.2);
    background: var(--text-light);
}

.leccion-dot.active {
    background: var(--primary);
    width: 28px;
    border-radius: 5px;
    transform: scale(1);
}

.leccion-dot.completed:not(.active) {
    background: var(--success);
}

.leccion-dot.completed:not(.active)::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 8px;
    font-weight: bold;
}

.leccion-dot.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.leccion-dot.disabled:hover {
    transform: none;
    background: var(--border);
}

/* Animaciones suaves */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .resultado-dialogo,
    .resultado-dialogo-overlay {
        animation: none !important;
    }
}

.widget-examen{
    padding: 20px 0;
}
/* ============================================
   AUTHENTICATION MODAL
   ============================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    background: var(--bg);
    color: var(--text);
}

.modal-body {
    padding: 20px;
}

.input-field {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 2px solid var(--border-control);
    border-radius: 8px;
    margin: 10px 0;
    box-sizing: border-box;
}

.input-field:focus {
    outline: none;
    border-color: var(--success);
}

.help-text {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 5px 0 15px 0;
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    margin: 5px;
}

.btn-secondary:hover {
    background: var(--border);
}

.success-icon {
    font-size: 4rem;
    text-align: center;
    color: var(--success);
    margin: 20px 0;
}

.error-message {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid var(--danger);
}

.loading-message {
    text-align: center;
    color: var(--text-light);
    padding: 10px;
    font-style: italic;
}

@media (min-width: 576px) {
    .leccion-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .leccion-titulo {
        flex: 1;
        width: auto;
    }
}

/* ============================================
   TOP BAR (Points + Sync)
   ============================================ */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    border-bottom: 2px solid var(--danger);
    box-shadow: var(--shadow);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-badge-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.14);
}

.app-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-title {
    color: var(--card-bg);
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.2px;
}

.app-title a {
    color: inherit;
    text-decoration: none;
}

.app-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    line-height: 1.1;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-sync {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--card-bg);
    padding: 8px 12px;
    border-radius: 20px;
    box-shadow: none;
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-sync:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.btn-sync:active {
    transform: scale(0.95);
}

/* ============================================
   POINTS SCOREBOARD
   ============================================ */

.marcador-puntos {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card-bg);
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* El isotipo de estrella de la identidad, en vez del emoji ⭐. El emoji lo
   dibuja cada sistema a su manera —amarillo en Android, dorado en Apple, plano
   en Windows— así que el único icono que la niña ve siempre igual era, hasta
   ahora, el que no controlábamos. */
.puntos-icono {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.puntos-valor {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    min-width: 30px;
    text-align: center;
    transition: color 0.3s ease, transform 0.2s ease;
}

@media (max-width: 520px) {
    .app-subtitle {
        display: none;
    }

    .top-bar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .top-bar-actions {
        gap: 6px;
    }

    .btn-sync {
        padding: 7px 10px;
    }

    .marcador-puntos {
        padding: 7px 10px;
    }
}

/* Correct answer animation - green */
.marcador-puntos.puntos-correcto {
    background: var(--success);
    box-shadow: 0 0 20px rgba(var(--verde-rgb), 0.5);
}

.marcador-puntos.puntos-correcto .puntos-valor {
    color: white;
}

.marcador-puntos.puntos-correcto .puntos-icono {
    transform: scale(1.3);
}

/* Incorrect answer animation - red */
.marcador-puntos.puntos-incorrecto {
    background: var(--danger);
    box-shadow: 0 0 20px rgba(var(--rojo-rgb), 0.5);
}

.marcador-puntos.puntos-incorrecto .puntos-valor {
    color: white;
}

.marcador-puntos.puntos-incorrecto .puntos-icono {
    transform: scale(0.8);
}

/* Animation pulse */
.marcador-puntos.puntos-animando {
    animation: puntosPulse 0.6s ease;
}

@keyframes puntosPulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   AUTH MODAL STYLES
   ============================================ */

.auth-description {
    color: var(--text);
    margin-bottom: 16px;
    line-height: 1.5;
}

.code-input {
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    font-family: monospace;
}

.error-text {
    color: var(--danger);
    font-size: 13px;
    min-height: 20px;
    margin: 8px 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    margin-top: 12px;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--primary-dark);
}

#auth-step-success .success-icon {
    font-size: 64px;
    color: var(--success);
    text-align: center;
    margin-bottom: 16px;
}

#auth-modal .btn-primary {
    margin-top: 8px;
}

.feedback-textarea {
    min-height: 110px;
    resize: vertical;
}

.feedback-counter {
    text-align: right;
    font-size: 12px;
    color: var(--text-light);
    margin-top: -4px;
    margin-bottom: 8px;
}

/* ─── La invitación a instalar ────────────────────────────────────────
   Se apoya sobre la barra fija de abajo; el alto de esa barra lo mide el JS
   y lo deja en --alto-barra, porque cambia entre teléfono y escritorio y ya
   trae sumado el safe-area del iPhone.

   Discreta a propósito: es una sugerencia, no una puerta. Ocupa una línea, no
   tapa nada que se necesite, y la X la retira para siempre. */
/* Esta regla tiene que ir ANTES de la de abajo, y existe porque `display: flex`
   le gana a `hidden`.
   El atributo `hidden` funciona por la hoja del navegador, que dice
   `[hidden] { display: none }` con la especificidad de un selector de atributo;
   cualquier regla nuestra con `display` lo pisa. Resultado: la franja no se
   ocultaba nunca — ni al arrancar, ni al tocar la X. Se veía desde el primer
   pintado y no había forma de sacarla. */
.invitacion-instalar[hidden] {
    display: none;
}

.invitacion-instalar {
    position: fixed;
    bottom: var(--alto-barra, 64px);
    left: 0;
    right: 0;
    z-index: 90;               /* debajo de los modales, encima del contenido */
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(var(--azul-rgb), 0.08);
}

.invitacion-icono {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.invitacion-texto {
    flex: 1;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
}

.invitacion-glifo {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.2em;
    color: var(--primary);
}

.invitacion-accion {
    /* .btn-primary trae width:100%, que acá se come la línea entera y deja el
       texto en una columna de cuatro palabras. En esta franja el botón mide lo
       que dice. */
    width: auto;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
}

.invitacion-cerrar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--text-light);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.invitacion-cerrar:hover,
.invitacion-cerrar:focus-visible {
    background: var(--bg);
    color: var(--text);
}

/* En pantallas angostas el icono se va: el texto es lo que informa, y con 36 px
   menos entra en dos líneas en vez de tres. */
@media (max-width: 420px) {
    .invitacion-icono {
        display: none;
    }

    .invitacion-texto {
        font-size: 12.5px;
    }
}

/* ─── Aventura ────────────────────────────────────────────────────────
   El cuarto panel, a la izquierda del catálogo. Está a la izquierda a
   propósito: el recorrido lineal —catálogo, mis temas, jugar— se lee de
   izquierda a derecha, así que el modo lúdico queda fuera de esa corriente y no
   se cruza con ella por accidente. */
#practica .slide-header {
    text-align: center;
}

/* La vuelta al catálogo desde Aventura vive en la ranura derecha, que estaba
   pensada para el botón azul de acción. Sin esto se estira a todo el ancho:
   .btn-back-catalog no trae ancho propio y el contenedor es flex. */
.controls-right .btn-back-catalog {
    margin-left: auto;
}

/* ─── Aventura: vencer al villano ─────────────────────────────────────
   Todo se mide para 360 px de ancho: el villano es chico, las barras finas y
   el globo de diálogo ocupa el ancho útil. Lo que no puede encogerse son los
   botones de respuesta, que los dibuja el widget de siempre. */
.villano-escena {
    padding: 12px;
    max-width: 640px;
    margin: 0 auto;
}

.villano-figura {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.villano-figura.ataca {
    transform: scale(1.12) rotate(-4deg);
}

/* Vencido: los ojos y la boca se dan vuelta. Sin dibujos nuevos. */
.villano-figura.vencido {
    opacity: 0.55;
    transform: rotate(180deg);
}

.villano-figura.gana {
    transform: scale(1.2);
}

/* Dentro del villano, la explicación la dice ÉL y nadie más. El widget la pinta
   igual debajo del botón elegido —es lo correcto en una lección— y acá saldría
   dos veces, el mismo texto a cinco centímetros de sí mismo. Se apaga por CSS y
   no tocando el widget: el widget no tiene por qué saber quién lo hospeda.

   El `:not()` no es adorno: la escena de Ronda lleva las dos clases
   —`villano-escena equipos-escena`, para heredar el marco— así que sin él esta
   regla también le apagaba la explicación a Ronda, que sí la quiere. */
.villano-escena:not(.equipos-escena) .explicacion-inline {
    display: none !important;
}

/* El globo: acá es donde la explicación de la respuesta incorrecta deja de ser
   un recuadro gris y pasa a ser lo que dice el villano. */
.villano-globo {
    background: var(--danger-soft);
    border: 2px solid var(--danger);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--danger-text-strong);
}

.villano-barras {
    margin: 12px 0 4px;
}

.villano-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Sitio para la X de salir, que va absoluta en la esquina del tablero. Sin
       esto el villano le quedaba justo debajo: con un equipo y un jugador la
       etiqueta del turno no se dibuja, la fila sube y los dos se pisan. Lo que
       cede el ancho es la barra, que es de goma. */
    padding-right: 56px;
}

/* Grandes: con una sola fila hay sitio, y a este tamaño dejan de ser iconos y
   se leen como personajes. */
.villano-figura.grande,
.jugador-figura.grande {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

/* La barra es el terreno. El relleno verde es lo que ganó el héroe; el fondo
   rojo, lo que le queda al villano. La línea entre los dos es el marcador. */
.tira-afloja {
    flex: 1;
    height: 18px;
    background: var(--danger);
    border-radius: 9px;
    overflow: hidden;
}

.tira-afloja-heroe {
    height: 100%;
    background: var(--success);
    border-radius: 9px 0 0 9px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.villano-pregunta {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 10px 0 12px;
    color: var(--text);
}

/* De dónde salió la pregunta. Va arriba, pegado a ella y alineado con ella: es
   su encabezado, no un pie. Alto de línea corto y margen chico para no comerle
   sitio a lo que de verdad hay que leer. */
.villano-origen {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* Y la pregunta arranca pegada a su encabezado, no despegada como cuando no lo
   tenía encima. */
.villano-origen + .villano-pregunta {
    margin-top: 0;
}

.villano-centro {
    padding: 24px 16px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.villano-centro .villano-figura {
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
}

.villano-informe {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    text-align: left;
}

.villano-informe-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.villano-informe-fila.dominado {
    color: var(--success);
}

.villano-marca {
    flex-shrink: 0;
    font-weight: 700;
}

.villano-consejo {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
}

.villano-otra {
    width: auto;
    padding: 10px 20px;
    margin-top: 8px;
}

.villano-nota {
    font-size: 12px;
    color: var(--text-light);
}

.aventura-lanzador {
    padding: 8px 16px 0;
    text-align: center;
}

.aventura-empezar {
    width: auto;
    padding: 12px 24px;
}

/* Como en la franja de instalar: `hidden` no puede contra un `display` nuestro.
   Acá el contenedor no declara display, pero la regla queda escrita para que el
   día que se le ponga uno no vuelva a pasar lo mismo. */
.aventura-lanzador[hidden] {
    display: none;
}

/* ─── Aventura: por equipos ───────────────────────────────────────────
   Pensado para el dispositivo del docente, que puede ser cualquiera. Todo lo
   que hay que ver desde lejos —de quién es el turno, el marcador— va grande;
   lo demás se ordena en una columna que cabe en 360. */
.equipos-preparacion {
    padding: 20px 16px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.equipos-campo-titulo {
    margin: 18px 0 4px;
    font-weight: 700;
    color: var(--text);
}

.equipos-ayuda {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-light);
}

.equipos-opciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.equipos-opcion {
    width: 46px;
    height: 46px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    background: var(--card-bg);
    border: 2px solid var(--border-control);
    border-radius: var(--radius);
    cursor: pointer;
}

.equipos-opcion.elegida {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.equipos-resumen {
    margin: 18px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.equipos-empezar {
    width: auto;
    padding: 12px 28px;
}

/* De quién es el turno: lo más grande de la pantalla, y pegado arriba.
   Al desplazarse para leer la explicación se iba de la vista, y es justo el
   dato que el aula necesita mirar en cualquier momento — sobre todo cuando la
   pregunta es larga y hay que bajar. */
.equipos-cabecera {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding-bottom: 4px;
    box-shadow: 0 6px 10px -8px rgba(var(--azul-rgb), 0.35);
}

.equipos-turno {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0;
}

/* Del mismo tamaño los dos: son la misma información —a quién le toca— y uno
   más chico se lee como secundario, que es justo lo que no es. El color lo pone
   el equipo.

   18px y no 24: al ponerlo al lado de las fichas, «Equipo 1 Jugador 1» a 24px
   se llevaba solo 187 de los 290px útiles a 360, y la fila se partía en dos
   —que es exactamente el renglón que se quería ahorrar. */
.equipos-turno-equipo,
.equipos-turno-jugador {
    font-size: 18px;
    font-weight: 800;
}

.equipos-turno-equipo {
    color: var(--color-equipo, var(--primary));
}

.equipos-turno-jugador {
    color: var(--text);
}

/* La cabecera son dos renglones: el texto arriba y las fichas debajo.

        Equipo 1  Jugador 1 - Pregunta 1 de 12
        [0] [0] [0]

   El texto va primero porque es lo que cambia en cada turno y lo que el aula
   necesita para saber a quién le toca; el marcador se consulta, no se sigue. */
.equipos-turno-fila {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
}

/* El guion solo si hay turno delante. Con un equipo y un jugador la etiqueta no
   se dibuja, y un renglón que empiece con «- Pregunta 1 de 8» no dice nada. */
.equipos-turno + .equipos-avance::before {
    content: "- ";
}

.equipos-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

/* Las fichas: el número manda y el color dice de quién es. Se ven desde el
   fondo del salón, que es donde está la mitad del aula. */
.equipos-marcador {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.equipos-ficha {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 7px;
    background: var(--color-equipo);
    border-radius: var(--radius);
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* El que juega se levanta del resto; los demás quedan presentes pero apagados,
   que es lo que hace que se vea de quién es el turno sin leer. */
.equipos-ficha.activo {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(var(--azul-rgb), 0.25);
}

/* El número lo pinta el propio color del equipo. Era blanco fijo con un parche
   por selector de atributo para el amarillo; con ocho colores eso no escala —el
   celeste quedaba en 2.2:1 y el blanco habría sido invisible— así que cada color
   dice con qué tinta se escribe encima. */
.equipos-ficha-puntos {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--texto-equipo, #fff);
}

/* El blanco necesita contorno o desaparece contra el fondo, que también es
   claro. Va por dentro para no cambiar el tamaño de la ficha ni desalinear la
   fila. */
.equipos-ficha--blanco {
    box-shadow: inset 0 0 0 2px var(--border-control);
}

.equipos-ficha--blanco.activo {
    box-shadow: inset 0 0 0 2px var(--border-control),
                0 4px 14px rgba(var(--azul-rgb), 0.25);
}

.equipos-avance {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-light);
}

/* El pie de respuesta: acá es donde el aula se detiene a entender. Por eso el
   avance es un botón y no un temporizador. */
/* El pie ya no es una caja: es el botón para pasar el turno, y nada más. El
   veredicto lo da la opción elegida —verde o roja— y el motivo, la explicación
   que el widget despliega debajo de ella. */
.equipos-pie {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.equipos-siguiente {
    width: auto;
    padding: 8px 20px;
    font-size: 15px;
}

/* La explicación va DENTRO de la opción elegida: el mismo bloque de color, con
   el texto de la respuesta arriba y el motivo debajo.

        ┌──────────────────────────────────────┐
        │ Necesitas más tiempo cada vez        │
        │ Tener un horario fijo no significa…  │
        └──────────────────────────────────────┘

   No se mueve nada en el DOM —un <div> dentro de un <button> no es HTML válido
   y rompe el foco— sino que se le quitan las esquinas de abajo al botón y se le
   ponen al hermano de al lado, que ya vive pegado: `.respuesta-item` es una
   columna sin separación. El `+` toma el color del estado del botón.

   Esto es solo de Ronda. En la lección la explicación se lee sola y con calma;
   acá comparte pantalla con el marcador, la pregunta, cuatro opciones y el
   botón del turno. */
.equipos-escena .respuesta-btn.correcta,
.equipos-escena .respuesta-btn.incorrecta {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 10px;
}

.equipos-escena .respuesta-btn.correcta + .explicacion-inline,
.equipos-escena .respuesta-btn.incorrecta + .explicacion-inline {
    /* 16 de padding, igual que el botón — que también tiene 2 de borde, así que
       los dos textos arrancan a 18 del canto y se leen como un solo párrafo. */
    padding: 0 16px 12px;
    border: 2px solid;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    line-height: 1.35;
    color: #fff;
}

.equipos-escena .respuesta-btn.correcta + .explicacion-inline {
    background: var(--success);
    border-color: var(--success);
}

.equipos-escena .respuesta-btn.incorrecta + .explicacion-inline {
    background: var(--danger);
    border-color: var(--danger);
}



.equipos-titulo-orden {
    margin: 22px 0 6px;
    font-size: 15px;
    color: var(--text-light);
}

.equipos-orden {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
}

.equipos-orden-fila {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.equipos-orden-fila.primero {
    font-weight: 800;
}

.equipos-orden-nombre::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 3px;
    background: var(--color-equipo, var(--primary));
    /* Contorno para todos, que es lo que hace visible al cuadrito blanco sin
       tener que darle un caso aparte. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Durante una partida, el panel se queda solo con el juego: se van el título,
   la formación y los botones de elegir. Todo lo que está en pantalla y no es el
   juego compite por la atención, y en un aula eso se paga caro — la formación
   además invita a tocarla en mitad de una partida, que reiniciaría la vuelta. */
#practica.en-partida .slide-header,
#practica.en-partida .aventura-formacion,
#practica.en-partida .aventura-lanzador {
    display: none;
}

/* El resultado global y el de equipos son un solo bloque: el número del aula
   arriba, el reparto debajo. Antes tenían la evaluación por temas en medio, y
   eso los volvía dos cosas sueltas en vez de un resultado. */
.equipos-titulo-resultados {
    margin: 0 0 12px;
}

.equipos-global {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 0 16px;
}

.equipos-global-numero {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}

.equipos-global-de {
    font-size: 26px;
    color: var(--text-light);
}

.equipos-global-texto {
    font-size: 14px;
    color: var(--text-light);
}

/* La salida de un juego. Arriba a la derecha del tablero, discreta pero
   siempre presente: en un aula el docente tiene que poder cortar sin buscar. */
.aventura-salir {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 8;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--text-light);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.aventura-salir:hover,
.aventura-salir:focus-visible {
    color: var(--text);
    border-color: var(--border-control);
}

/* El tablero es el marco de referencia del botón. */
#aventura-tablero {
    position: relative;
}

/* La cabecera pegajosa de Ronda se desliza por debajo de la salida, no encima:
   el botón para cortar tiene que estar siempre alcanzable. */
.equipos-escena .aventura-salir {
    z-index: 9;
}

/* Y el renglón del texto le deja sitio, en los dos juegos. Solo ese renglón: la
   X vive arriba, y quitarle esos 56px también a la fila de las fichas era
   regalarlos — con ocho equipos son justo los que faltan para que entren todas
   en un renglón. */
.villano-escena .equipos-turno-fila {
    padding-right: 56px;
}

/* ─── El informe en semáforo ──────────────────────────────────────────
   Ordenado por urgencia: arriba lo que se falló entero, abajo lo que se supo.
   El color va en un punto y no en el texto — el amarillo de la paleta sobre
   blanco no se lee, y un texto amarillo sería peor que no marcar nada. */
.villano-informe-fila {
    align-items: center;
}

.informe-punto {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    margin-right: 10px;
}

.informe-titulo {
    flex: 1;
}

.sem-rojo .informe-punto     { background: var(--danger); }
.sem-amarillo .informe-punto { background: var(--secondary); }
.sem-verde .informe-punto    { background: var(--success); }

.sem-verde .informe-titulo { color: var(--text-light); }

/* ─── Los botones de elegir juego ─────────────────────────────────────
   Cada juego con su color de la paleta. Todos azules se leían como una lista
   de opciones intercambiables; con color propio, cada uno es un lugar al que
   se va. */
.aventura-empezar {
    border: none;
}

.aventura-empezar.juego-villano {
    background: var(--danger);
}

.aventura-empezar.juego-ronda {
    background: var(--success);
}

/* ─── El informe que lleva a algún lado ───────────────────────────────
   Las filas que se fallaron son botones: llevan a estudiar ese tema. Las que se
   supieron no — mandar a repasar lo que ya se domina es hacer perder el tiempo
   a quien acertó. */
.informe-ir,
.informe-fija {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
}

.informe-ir {
    cursor: pointer;
}

.informe-ir:hover .informe-titulo,
.informe-ir:focus-visible .informe-titulo {
    text-decoration: underline;
}

.informe-flecha {
    margin-left: 8px;
    font-size: 20px;
    line-height: 1;
    color: var(--text-light);
}

.informe-podar {
    display: block;
    width: 100%;
    margin: 4px 0 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--success);
    background: rgba(var(--verde-rgb), 0.08);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    cursor: pointer;
}

.informe-podados {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--success);
}

/* ─── La formación ────────────────────────────────────────────────────
   Tres filas de 1 a 8. Está en el panel y no dentro de cada juego porque se
   acomoda una vez —como se organiza el aula— y después solo se elige a qué
   jugar. Preguntarlo al empezar cada partida son treinta segundos de treinta
   chicos esperando. */
.aventura-formacion {
    max-width: 520px;
    margin: 0 auto;
    padding: 4px 16px 0;
}

.formacion-fila {
    margin-bottom: 10px;
}

.formacion-etiqueta {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.formacion-ayuda {
    margin-left: 6px;
    font-weight: 400;
    color: var(--text-light);
}

.formacion-opciones {
    display: flex;
    gap: 5px;
}

/* Los ocho tienen que entrar en 360 px sin envolverse: si se parten en dos
   líneas, la fila deja de leerse como una escala. */
.formacion-opcion {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.formacion-opcion.elegida {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.formacion-total {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--text-light);
}

.formacion-aviso {
    margin: 6px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    text-align: center;
    color: var(--warning-text);
    background: var(--warning-soft);
    border-radius: 8px;
}

/* ─── La formación, plegada ───────────────────────────────────────────
   Cerrada de fábrica: se acomoda una vez y después estorba. Pero el resumen
   queda a la vista, porque entrar a una partida sin saber para cuántos está
   configurada es peor que el estorbo. */
.formacion-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.formacion-resumen {
    flex: 1;
    font-weight: 700;
}

.formacion-cantidad {
    flex-shrink: 0;
    color: var(--text-light);
}

.formacion-flecha {
    flex-shrink: 0;
    width: 14px;
    font-size: 14px;
    line-height: 1;
    color: var(--text-light);
}

/* `hidden` contra un display nuestro: la misma regla que hizo falta en la franja
   de instalar. Acá el cuerpo no declara display, pero queda escrita para que el
   día que se le ponga uno no vuelva a pasar. */
#formacion-cuerpo[hidden] {
    display: none;
}

#formacion-cuerpo {
    padding-top: 10px;
}

/* ─── El buscador, en pantallas angostas ──────────────────────────────
   Los tres controles —buscar, nivel y plan— comparten una fila. Los dos
   selectores no se encogen porque su ancho lo fija su contenido, así que el
   buscador se comía todo lo que faltaba: en 360 px quedaba en 27 px de ancho,
   sin sitio ni para el cursor.

   Buscar es la acción principal de esta pantalla —hay 733 temas— así que se
   queda con una línea entera y los dos selectores se reparten la de abajo. */
@media (max-width: 560px) {
    .nivel-filter {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .search-container {
        flex: 1 0 100%;
    }

    /* Cada selector con su etiqueta, repartiéndose la línea en partes iguales.
       El :not() no es adorno: el buscador también es un div hijo de esta fila, y
       `.nivel-filter > div` le gana en especificidad a `.search-container`, así
       que sin excluirlo le pisaba el ancho y la línea propia no ocurría. */
    .nivel-filter > div:not(.search-container) {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .nivel-filter select {
        max-width: none;
        min-width: 0;
    }

    .nivel-filter label {
        flex-shrink: 0;
        font-size: 13px;
    }
}