/* ==========================================================
   ESTILOS COMPARTIDOS — Mi Aula
   Paleta basada en login.html:
   Fondo oscuro:    #0f172a -> #1e293b
   Verde primario:  #16a34a
   Verde claro:     #22c55e
   Verde acento:    #4ade80
   (Antes esta paleta era azul (#2563eb/#3b82f6/#60a5fa); se cambió a
   verde para que las lecciones, ejercicios y botones de audio compartan
   el mismo verde que ya se usa en Tutoría Virtual para los Tutores
   hombres — ver version274 en CHANGELOG.md. El morado/índigo #4f46e5 del
   resto del sitio (menú, Admin, Tutoría Virtual) no cambia: nunca fue
   azul.) */

:root{
    --bg-navy-900:#0f172a;
    --bg-navy-800:#1e293b;
    --primary:#16a34a;
    --primary-light:#22c55e;
    --primary-lighter:#4ade80;
    --primary-dark:#15803d;
    --accent-purple:#7c3aed;
    --accent-purple-light:#8b5cf6;

    --text-body:#334155;
    --text-muted:#64748b;
    --text-heading:#0f172a;

    --bg-page:#f4f6fb;
    --bg-card:#ffffff;
    --border-soft:#e2e8f0;

    --radius-md:10px;
    --radius-lg:16px;
    --shadow-sm:0 1px 3px rgba(15,23,42,.06);
    --shadow-md:0 6px 20px rgba(15,23,42,.08);
    --shadow-lg:0 20px 45px rgba(15,23,42,.16);

    --font-main:"Poppins","Segoe UI",Arial,Helvetica,sans-serif;

    /* Altura del header fijo (.ej-topbar) — igual que --lc-topnav-h en
       lessons/estilos.css, para que el resto del layout (padding del
       body, altura de .contenedor en móvil) pueda reservarle su espacio
       exacto sin que se tape nada. */
    --ej-header-h:64px;
}

@media(max-width:768px){
    :root{
        --ej-header-h:56px;
    }
}

*{
    box-sizing:border-box;
}

body{
    font-family:var(--font-main);
    color:var(--text-body);
    background:var(--bg-page);
    margin:0;
    -webkit-font-smoothing:antialiased;
}

/* ========================================================
   NAVBAR
   ======================================================== */

header{
    width:100%;
    background:linear-gradient(120deg,var(--bg-navy-900),var(--bg-navy-800) 55%,var(--primary));
    color:#fff;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 2px 18px rgba(15,23,42,.18);
}

header.header-instructor{
    background:linear-gradient(120deg,var(--bg-navy-900),var(--bg-navy-800) 55%,var(--accent-purple));
}

nav{
    max-width:1300px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 28px;
}

.logo{
    font-size:21px;
    font-weight:600;
    letter-spacing:.3px;
}

.menu{
    display:flex;
    list-style:none;
    gap:8px;
    align-items:center;
}

.menu li a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
    font-weight:500;
    font-size:13.5px;
    letter-spacing:.4px;
    padding:8px 14px;
    border-radius:8px;
    transition:.2s ease;
    display:inline-block;
}

.menu li a:hover{
    color:#fff;
    background:rgba(255,255,255,.1);
}

.menu li a#btnCerrarSesion,
.menu li a[id="btnCerrarSesion"]{
    color:rgba(255,255,255,.7);
}

.menu li a#btnCerrarSesion:hover{
    color:#fca5a5;
    background:rgba(239,68,68,.12);
}

.hamburger{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:#fff;
}

@media(max-width:768px){

    .menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:linear-gradient(160deg,var(--bg-navy-900),var(--bg-navy-800));
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px 0;
        box-shadow:var(--shadow-lg);
    }

    header.header-instructor .menu{
        background:linear-gradient(160deg,var(--bg-navy-900),var(--bg-navy-800));
    }

    .menu.show{
        display:flex;
    }

    .menu li{
        text-align:center;
        padding:0;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .menu li a{
        display:block;
        padding:12px 8px;
        border-radius:0;
        margin-bottom:0;
    }

    .hamburger{
        display:block;
    }
}

/* ========================================================
   BARRA SUPERIOR DE LECCIÓN — flechas prev/next + home
   ======================================================== */

.lesson-topnav{
    max-width:1300px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 24px;
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(244,246,251,.9);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:var(--shadow-sm);
}

.topnav-arrows{
    display:flex;
    align-items:center;
    gap:10px;
}

.topnav-arrow,
.topnav-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    transition:transform .2s ease,opacity .2s ease;
}

.topnav-arrow img{
    width:100%;
    height:100%;
    display:block;
}

.topnav-home svg{
    width:100%;
    height:100%;
    color:var(--text-heading);
}

.topnav-arrow:hover,
.topnav-home:hover{
    transform:translateY(-2px);
}

.topnav-arrow:active,
.topnav-home:active{
    transform:translateY(0);
}

@media(max-width:768px){
    .lesson-topnav{
        padding:10px 16px;
    }
    .topnav-arrow,
    .topnav-home{
        width:36px;
        height:36px;
    }
}

/* ========================================================
   COMPONENTES COMUNES
   ======================================================== */

.btn-primary,
.btn-nueva{
    background:var(--primary);
    color:#fff;
    border:none;
    padding:12px 24px;
    border-radius:var(--radius-md);
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    cursor:pointer;
    transition:.2s ease;
    box-shadow:0 4px 14px rgba(22,163,74,.25);
}

.btn-primary:hover,
.btn-nueva:hover{
    background:var(--primary-dark);
    box-shadow:0 6px 18px rgba(22,163,74,.32);
    transform:translateY(-1px);
}

.btn-primary:disabled,
.btn-nueva:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.card,
.form-card{
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
}

.section-title{
    color:var(--text-heading);
    font-weight:600;
    letter-spacing:-.3px;
}

/* ========================================================
   AJUSTE DE TAMAÑO — PANTALLAS GRANDES DE ESCRITORIO
   Reduce el tamaño del body (incluye la barra de navegación
   y los formularios de actividades/exámenes) en un 15%
   ======================================================== */

@media(min-width:1200px){
    body{
        zoom:.85;
    }
}

/* ==========================================================
   PÁGINAS DE LECCIONES — Vocabulario / Gramática
   ========================================================== */

.lesson-main{
    max-width:1150px;
    margin:0 auto;
    padding:36px 24px 64px;
}

.lesson-hero{
    text-align:center;
    margin-bottom:34px;
}

.lesson-hero h1{
    font-size:clamp(1.6rem,4vw,2.3rem);
    font-weight:700;
    color:var(--text-heading);
    letter-spacing:-.5px;
    margin:0 0 6px;
}

.lesson-hero p{
    color:var(--text-muted);
    font-size:15px;
    margin:0;
}

.lesson-section{
    margin-bottom:46px;
}

.lesson-section h2{
    text-align:center;
    color:var(--text-heading);
    font-weight:600;
    letter-spacing:-.2px;
    margin-bottom:22px;
    font-size:1.35rem;
}

/* ---- Tabla de vocabulario ---- */

.lesson-table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    background:var(--bg-card);
}

.lesson-table{
    width:100%;
    min-width:640px;
    border-collapse:collapse;
}

.lesson-table thead{
    background:linear-gradient(120deg,var(--bg-navy-900),var(--bg-navy-800));
    color:#fff;
}

.lesson-table th{
    padding:14px 12px;
    font-size:14px;
    font-weight:600;
    text-align:center;
    letter-spacing:.3px;
}

.lesson-table td{
    padding:12px;
    border-bottom:1px solid var(--border-soft);
    text-align:center;
    font-size:14.5px;
    color:var(--text-body);
}

.lesson-table tbody tr:last-child td{
    border-bottom:none;
}

.lesson-table tbody tr:nth-child(even){
    background:var(--bg-page);
}

.lesson-table tbody tr:hover{
    background:#eaf1ff;
    transition:background .2s ease;
}

.lesson-table td.word,
.lesson-table td .word{
    font-weight:600;
    color:var(--primary);
}

.lesson-table td.ipa,
.lesson-table td .ipa{
    font-family:"Times New Roman",serif;
    color:var(--accent-purple);
    font-weight:600;
}

.lesson-table td.example{
    text-align:left;
}

.lesson-table td.example em{
    color:var(--text-muted);
    font-style:italic;
}

/* ---- Botón de audio ---- */

.audio-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:.2s ease;
    box-shadow:0 4px 12px rgba(22,163,74,.25);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.audio-btn:hover{
    background:var(--primary-dark);
    transform:scale(1.08);
}

.audio-btn:active{
    transform:scale(.95);
}

.audio-btn-wide{
    width:auto;
    border-radius:var(--radius-md);
    padding:11px 20px;
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    gap:8px;
}

.audio-btn-sm{
    width:24px;
    height:24px;
    font-size:11px;
    background:#9ca3af;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.audio-btn-sm:hover{
    background:#6b7280;
    transform:scale(1.08);
}

/* ---- Grid del alfabeto (lesson1) ---- */

.alphabet-wrap{
    width:100%;
}

.alphabet-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:14px;
    width:100%;
}

.alphabet-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:18px 8px;
    transition:.2s ease;
}

.alphabet-cell:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.alphabet-letter{
    font-size:1.9rem;
    font-weight:700;
    color:var(--primary);
}

.alphabet-ipa{
    font-family:"Times New Roman",serif;
    color:var(--accent-purple);
    font-weight:600;
    font-size:14px;
}

@media(max-width:768px){
    .alphabet-grid{
        grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
        gap:10px;
    }
    .alphabet-letter{
        font-size:1.4rem;
    }
    .alphabet-ipa{
        font-size:12px;
    }
}

/* ---- Tarjetas de vocabulario en grilla ---- */

.vocab-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:20px;
}

.vocab-card{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:22px 18px;
    text-align:center;
    transition:.25s ease;
}

.vocab-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.vocab-card .emoji{
    font-size:42px;
    margin-bottom:8px;
}

.vocab-card .word{
    font-size:1.25rem;
    font-weight:700;
    color:var(--text-heading);
    margin-bottom:6px;
}

.vocab-card .ipa{
    font-family:"Times New Roman",serif;
    color:var(--accent-purple);
    font-weight:600;
    margin-bottom:8px;
}

.vocab-card .translation{
    color:var(--text-muted);
    margin-bottom:14px;
}

.vocab-card p{
    margin:0 0 8px;
    font-size:14px;
    line-height:1.5;
}

.vocab-card p:last-child{
    margin-bottom:0;
}

/* ---- Buscador ---- */

.lesson-search{
    width:100%;
    max-width:480px;
    display:block;
    margin:0 auto 32px;
    padding:13px 20px;
    border:1px solid var(--border-soft);
    border-radius:30px;
    font-family:var(--font-main);
    font-size:15px;
    background:var(--bg-card);
    box-shadow:var(--shadow-sm);
}

.lesson-search:focus{
    outline:none;
    border-color:var(--primary-light);
    box-shadow:0 0 0 3px rgba(22,163,74,.15);
}

/* ---- Tarjetas de verbo (afirmativo / negativo / pregunta) ---- */

.verb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
}

.verb-card{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:20px;
}

.verb-card h2{
    text-align:center;
    color:var(--primary-dark);
    margin:0 0 14px;
    font-size:1.25rem;
}

.verb-box{
    border-radius:var(--radius-md);
    padding:12px 14px;
    margin-bottom:10px;
    background:var(--bg-page);
}

.verb-box:last-child{
    margin-bottom:0;
}

.verb-box h3{
    font-size:13px;
    font-weight:600;
    margin:0 0 6px;
    color:var(--text-heading);
}

.verb-box.affirmative{border-left:4px solid #22c55e;}
.verb-box.negative{border-left:4px solid #ef4444;}
.verb-box.question{border-left:4px solid var(--primary-light);}

.verb-box .sentence{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--text-heading);
    margin:0 0 4px;
}

.verb-box .sentence .audio-btn{
    width:28px;
    height:28px;
    font-size:12px;
    flex-shrink:0;
}

.verb-box .ipa{
    font-family:"Times New Roman",serif;
    color:var(--accent-purple);
    font-size:13.5px;
    margin:0 0 4px;
}

.verb-box .translation{
    color:var(--text-muted);
    font-size:13.5px;
    margin:0;
}

/* ---- Pie de página de lección ---- */

.lesson-footer{
    text-align:center;
    color:var(--text-muted);
    font-size:13px;
    margin-top:44px;
    padding-top:20px;
    border-top:1px solid var(--border-soft);
}

@media(max-width:768px){

    .lesson-main{
        padding:24px 16px 48px;
    }

    .lesson-table{
        min-width:560px;
    }

    .lesson-table th,
    .lesson-table td{
        padding:8px;
        font-size:13px;
    }

    .audio-btn{
        width:34px;
        height:34px;
        font-size:14px;
    }

    /* Tabla de números (lesson5): que no sea tan ancha en pantallas pequeñas */
    .numbers-table{
        min-width:0;
        width:100%;
        table-layout:fixed;
    }

    .numbers-table th,
    .numbers-table td{
        padding:6px 3px;
        font-size:11.5px;
        word-break:break-word;
    }

    .numbers-table .audio-btn{
        width:26px;
        height:26px;
        font-size:11px;
    }
}

@media(max-width:930px) and (orientation:landscape){
    .numbers-table th,
    .numbers-table td{
        padding:4px 3px;
        font-size:11px;
    }

    .numbers-table .audio-btn{
        width:24px;
        height:24px;
        font-size:10px;
    }
}
/* ==========================================================
   ESTILOS — Ejercicio tipo Duolingo
   (antes en style.css, ahora combinado en un solo archivo)
   ========================================================== */

body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:calc(30px + var(--ej-header-h)) 30px 30px;
}

/* ---------- Header fijo del ejercicio (mismo estilo que el header de
   index.html: barra blanca, ícono de Inicio a la izquierda, Calificaciones
   + campana de notificaciones a la derecha). Reemplaza el antiguo botón
   flotante "home-icon". Es position:fixed (en vez de sticky) porque el
   body de esta página usa flexbox para centrar .contenedor vertical y
   horizontalmente; el padding-top de arriba le reserva el espacio exacto
   (--ej-header-h) para que nunca quede tapado. ---------- */
.ej-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--ej-header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:var(--bg-card);
    border-bottom:1px solid var(--border-soft);
    padding:0 clamp(14px,4vw,28px);
    z-index:150;
    box-sizing:border-box;
}

.ej-topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.topbar-icon-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    color:var(--text-heading);
    flex-shrink:0;
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    transition:background .15s ease;
}

.topbar-icon-link:hover{
    background:var(--bg-page);
}

.topbar-icon-link svg{
    width:20px;
    height:20px;
}

/* ---------- Desplegable de Anuncios/Actividades (mismo que el resto del sitio) ---------- */
.topbar-notif-wrap{
    display:none;
    position:relative;
    flex-shrink:0;
}

.topbar-notif-badge{
    display:none;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:-2px;
    right:-2px;
    min-width:16px;
    height:16px;
    padding:0 3px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:1;
}

.topbar-notif-dropdown{
    display:none;
    position:absolute;
    top:46px;
    right:0;
    width:min(340px,90vw);
    max-height:70vh;
    overflow-y:auto;
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    z-index:200;
    padding:8px;
}

@media(max-width:600px){
    .topbar-notif-dropdown{
        position:fixed;
        top:calc(var(--ej-header-h) + 8px);
        left:50%;
        right:auto;
        transform:translateX(-50%);
        width:min(340px,92vw);
    }
}

.topbar-notif-dropdown.show{
    display:block;
}

.topbar-notif-empty{
    display:none;
    padding:24px 16px;
    text-align:center;
    color:var(--text-muted);
    font-size:13px;
}

.topbar-notif-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 10px;
    border-radius:var(--radius-md);
    text-decoration:none;
    color:inherit;
}

.topbar-notif-item.nuevo{
    background:rgba(22,163,74,.07);
}

.topbar-notif-item:hover{
    background:var(--bg-page);
}

.topbar-notif-icon{
    flex:0 0 auto;
    font-size:17px;
    margin-top:1px;
}

.topbar-notif-texto{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.topbar-notif-texto strong{
    font-size:13px;
    color:var(--text-heading);
}

.topbar-notif-texto span{
    font-size:12px;
    color:var(--text-muted);
    line-height:1.4;
}

@media(max-width:768px){
    .ej-topbar{
        padding:0 clamp(10px,4vw,20px);
    }
    .topbar-icon-link{
        width:32px;
        height:32px;
    }
    .topbar-icon-link svg{
        width:18px;
        height:18px;
    }
}

.contenedor{
    background:var(--bg-card);
    width:700px;
    max-width:95%;
    padding:32px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border-soft);
}

.contenedor h2{
    color:var(--text-heading);
    font-weight:700;
    letter-spacing:-.3px;
    font-size:1.4rem;
    margin-bottom:20px;
}

.progreso{
    font-size:14px;
    font-weight:600;
    color:var(--text-muted);
    background:var(--bg-page);
    border:1px solid var(--border-soft);
    border-radius:20px;
    padding:6px 14px;
    display:inline-block;
    margin-bottom:16px;
}

.pregunta{
    font-size:22px;
    color:var(--text-body);
    background:var(--bg-page);
    border-radius:var(--radius-md);
    padding:16px 18px;
    box-shadow:var(--shadow-sm);
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:76px; /* reserva espacio para preguntas de 1 o 2 líneas */
}

.pregunta #preguntaTexto{
    flex:1;
}

.pregunta .audio-btn{
    flex-shrink:0;
}

.respuesta{
    min-height:80px;
    border:2px dashed var(--border-soft);
    padding:14px;
    border-radius:var(--radius-md);
    margin-bottom:30px;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:10px;
    overflow:visible; /* la caja crece con el contenido, sin barra de scroll */
}

.palabras{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:10px;
    margin-bottom:30px;
    height:140px; /* altura fija: no cambia si hay 6 u 10 opciones */
    overflow-y:auto;
}

button.palabra{
    padding:12px 18px;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    background:var(--bg-card);
    color:var(--text-heading);
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    font-family:var(--font-main);
    font-size:16px;
    font-weight:500;
    transition:.2s ease;
}

button.palabra:hover{
    background:var(--bg-page);
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

.acciones-ejercicio{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#comprobar{
    width:100%;
    padding:16px;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-main);
    font-size:16px;
    font-weight:600;
    letter-spacing:.2px;
    border:none;
    border-radius:var(--radius-md);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(22,163,74,.25);
    transition:.2s ease;
}

#btnSaltar{
    width:100%;
    padding:12px;
    background:transparent;
    color:var(--accent-purple);
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    border:1.5px dashed var(--accent-purple-light);
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:.2s ease;
}

#btnSaltar:hover{
    background:rgba(124,58,237,.08);
    border-color:var(--accent-purple);
}

#comprobar:hover{
    background:var(--primary-dark);
    box-shadow:0 6px 18px rgba(22,163,74,.32);
    transform:translateY(-1px);
}

#comprobar.listo{
    background:#28a745;
    box-shadow:0 4px 14px rgba(40,167,69,.35);
}

#comprobar.listo:hover{
    background:#218838;
    box-shadow:0 6px 18px rgba(40,167,69,.42);
}

#mensaje{
    min-height:26px;
    margin:20px 0 0;
    font-size:18px;
    font-weight:600;
}

.correcto{
    color:#16a34a;
}

.incorrecto{
    color:#dc2626;
}

@media(max-width:768px){
    body{
        padding:calc(16px + var(--ej-header-h)) 10px 16px;
        align-items:center;
    }

    .contenedor{
        width:100%;
        max-width:100%;
        height:calc(95dvh - var(--ej-header-h));
        display:flex;
        flex-direction:column;
        padding:18px;
        overflow-y:auto;
    }

    .contenedor h2{
        font-size:1.15rem;
        margin-bottom:14px;
    }

    .progreso{
        font-size:12px;
        padding:5px 12px;
        margin-bottom:12px;
    }

    .pregunta{
        font-size:17px;
        padding:12px 14px;
        margin-bottom:16px;
        min-height:60px;
    }

    .respuesta{
        min-height:60px;
        padding:10px;
        margin-bottom:16px;
    }

    .palabras{
        flex:1;
        height:auto;
        min-height:90px;
        margin-bottom:16px;
    }

    button.palabra{
        padding:9px 14px;
        font-size:14px;
    }

    #comprobar{
        padding:13px;
        font-size:15px;
    }

    #btnSaltar{
        padding:10px;
        font-size:13px;
    }

    #mensaje{
        min-height:20px;
        margin-top:14px;
        font-size:16px;
    }
}

/* Pantallas móviles bajas (landscape o celulares pequeños) */
@media(max-width:768px) and (max-height:650px){
    body{
        padding:calc(12px + var(--ej-header-h)) 10px 12px;
    }
    .contenedor{
        height:calc(95dvh - var(--ej-header-h));
        padding:14px;
    }
    .contenedor h2{
        margin-bottom:10px;
    }
    .pregunta{
        margin-bottom:10px;
        min-height:48px;
    }
    .respuesta{
        min-height:44px;
        margin-bottom:10px;
    }
    .palabras{
        min-height:64px;
        margin-bottom:10px;
    }
}
.correcto-palabra{
    background:#28a745 !important;
    color:white;
    transform:scale(1.05);
    transition:.2s;
}


.incorrecto-palabra{
    background:#dc3545 !important;
    color:white;
    transition:.2s;
}

/* ---- Botones finales: repetir ejercicio / volver a ejercicios ---- */

.acciones-final{
    display:flex;
    gap:12px;
    margin-top:10px;
}

#btnRepetir,
#btnVolver{
    flex:1;
    padding:16px;
    font-family:var(--font-main);
    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:.2s ease;
}

#btnVolver{
    background:var(--primary);
    color:#fff;
    border:none;
    box-shadow:0 4px 14px rgba(22,163,74,.25);
}

#btnVolver:hover{
    background:var(--primary-dark);
    box-shadow:0 6px 18px rgba(22,163,74,.32);
    transform:translateY(-1px);
}

#btnRepetir{
    background:var(--bg-card);
    color:var(--primary);
    border:2px solid var(--primary);
}

#btnRepetir:hover{
    background:var(--bg-page);
    transform:translateY(-1px);
}

@media(max-width:768px){
    .acciones-final{
        flex-direction:column;
    }

    #btnRepetir,
    #btnVolver{
        padding:13px;
        font-size:15px;
    }
}

/* ========================================================
   MODO OSCURO
   Se activa agregando la clase "dark-mode" a <html> — lo hace auth.js
   (aplicarModoOscuroGuardado) en TODAS las páginas que lo cargan,
   incluidos los 16 ejercicios desde version279 (antes ya cargaban auth.js
   por otros motivos, pero esta hoja de estilos no tenía ningún soporte de
   modo oscuro todavía: la clase se agregaba en <html> sin que nada
   cambiara visualmente). El botón para alternarlo (ícono sol/luna) se
   agrega en ".ej-topbar" — ver .btn-modo-oscuro más abajo, mismo
   componente que ya usaba el resto del sitio (login.html, terminos.html).

   Como ".ej-topbar", ".contenedor", ".progreso", ".pregunta", ".respuesta"
   y "button.palabra" ya usaban var(--bg-card)/var(--text-heading)/etc. en
   vez de colores fijos, redefinir esas variables acá abajo ya adapta casi
   toda la página sola. El resto de las reglas de acá abajo son los pocos
   lugares que sí usaban un color fijo. Nada de esto toca ninguna regla del
   modo claro (que se queda igual que antes): todo se agrega como reglas
   nuevas con el prefijo "html.dark-mode". El verde/morado de acento
   (--primary, --accent-purple, etc.) no cambia a propósito — ya tiene buen
   contraste sobre fondo claro u oscuro con el texto blanco de los botones.
   ======================================================== */
html.dark-mode{
    --text-body:#cbd5e1;
    --text-muted:#94a3b8;
    --text-heading:#f1f5f9;

    --bg-page:#0b1220;
    --bg-card:#141c2f;
    --border-soft:#28334a;
}

html.dark-mode .lesson-table tbody tr:hover{
    background:rgba(129,140,248,.16);
}

html.dark-mode .audio-btn-sm{
    background:#28334a;
}
html.dark-mode .audio-btn-sm:hover{
    background:#3a4763;
}

html.dark-mode .correcto{
    color:#4ade80;
}
html.dark-mode .incorrecto{
    color:#f87171;
}

html.dark-mode ::selection{
    background:rgba(74,222,128,.3);
}

/* ---------- Botón de alternar modo oscuro (mismo componente que el
   resto del sitio — ver estilos.css raíz — copiado acá porque esta hoja
   de estilos es independiente y no la importa) ---------- */
.btn-modo-oscuro{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:none;
    color:var(--text-heading);
    cursor:pointer;
    flex-shrink:0;
    transition:background .15s ease;
}

.btn-modo-oscuro:hover{
    background:var(--bg-page);
}

.btn-modo-oscuro svg{
    width:20px;
    height:20px;
}

.btn-modo-oscuro .icono-luna{
    display:none;
}

html.dark-mode .btn-modo-oscuro .icono-sol{
    display:none;
}

html.dark-mode .btn-modo-oscuro .icono-luna{
    display:block;
}

@media(max-width:768px){
    .btn-modo-oscuro{
        width:32px;
        height:32px;
    }
    .btn-modo-oscuro svg{
        width:18px;
        height:18px;
    }
}