/* ==========================================================
   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:rgba(255,255,255,.72);
    --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;
}

*{
    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:11.6px 24px;
    position:sticky;
    top:0;
    z-index:100;
    background:#ffffff;
    border-bottom:1px solid var(--border-soft);
}

/* ---------- Calificaciones + campana de notificaciones (mismos
   componentes que el header de index.html, agregados al topnav de la
   lección) ---------- */
.topbar-icon-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34.9px;
    height:34.9px;
    border-radius:50%;
    color:var(--text-heading);
    flex-shrink:0;
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    transition:background .15s ease,transform .2s ease,opacity .2s ease;
}

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

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

.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(--lc-topnav-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;
}

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

.topnav-arrow,
.topnav-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34.9px;
    height:34.9px;
    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:8.3px 16px;
    }
    .topnav-arrow,
    .topnav-home{
        width:29.9px;
        height:29.9px;
    }
    .topbar-icon-link{
        width:29.9px;
        height:29.9px;
    }
    .topbar-icon-link svg{
        width:17px;
        height:17px;
    }
}

/* ========================================================
   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 rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.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:1;
    }
}

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

.lesson-main{
    max-width:1150px;
    margin:0 auto;
    padding:36px 24px 64px;
    container-type:inline-size;
    container-name:leccion;
}

.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-hero-image{
    max-width:600px;
    margin:0 auto 34px;
    border-radius:24px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.lesson-hero-image svg{
    display:block;
    width:100%;
    height:auto;
}

/* Banner con foto real (reemplaza al SVG decorativo en las lecciones
   que ya tienen imagen). Como la foto no trae el título "dibujado"
   adentro como el SVG, el título/subtítulo se superponen encima con
   un degradado oscuro abajo para que el texto blanco siempre se lea
   bien, sin importar qué tan clara sea la foto. Pensado para sentirse
   como la portada de un artículo (kicker + título grande), acorde al
   tono editorial de fotos reales en vez del look plano de los SVG. */
.lesson-hero-photo{
    position:relative;
    max-width:680px;
    margin:0 auto 40px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(15,23,42,.18);
    background:var(--bg-navy-900);
}

.lesson-hero-photo img{
    display:block;
    width:100%;
    height:300px;
    object-fit:cover;
}

.lesson-hero-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:46px 28px 24px;
    background:linear-gradient(to top, rgba(15,23,42,.92), rgba(15,23,42,.5) 55%, rgba(15,23,42,0));
}

.lesson-hero-kicker{
    display:inline-block;
    color:#fff;
    background:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    padding:4px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.lesson-hero-caption h1{
    color:#fff;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.5px;
    margin:0 0 6px;
    text-shadow:0 1px 6px rgba(0,0,0,.3);
}

.lesson-hero-caption p{
    color:rgba(255,255,255,.92);
    font-size:15px;
    margin:0;
    text-shadow:0 1px 4px rgba(0,0,0,.25);
}

@media(max-width:480px){
    .lesson-hero-photo img{
        height:220px;
    }
    .lesson-hero-caption{
        padding:32px 20px 18px;
    }
    .lesson-hero-caption h1{
        font-size:21px;
    }
}

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

.mistake-box{
    background:#fef2f2;
    padding:16px 18px;
    border-left:6px solid #ef4444;
    border-radius:var(--radius-lg);
    margin:14px 0;
    box-shadow:var(--shadow-sm);
}

.mistake-box .wrong{color:#b91c1c;text-decoration:line-through;}
.mistake-box .right{color:#15803d;font-weight:600;}

.lesson-section h2{
    position:relative;
    text-align:center;
    color:var(--text-heading);
    font-weight:700;
    letter-spacing:-.2px;
    margin:0 auto 28px;
    padding-bottom:14px;
    font-size:1.35rem;
}

.lesson-section h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:44px;
    height:4px;
    border-radius:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent-purple));
}

/* ---- 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);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.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;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

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

.vocab-card .emoji{
    font-size:34px;
    font-weight:600;
    color:var(--text-muted);
    letter-spacing:.5px;
    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;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.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);}

/* Variante de tarjeta con el mismo look que .vocab-card (lesson6/7):
   fondo tipo tarjeta, sombra suave y bordes más redondeados, en vez
   del fondo plano de .verb-box. Solo se activa en las lecciones con
   la clase "tarjetas-v2" en <body>, para no afectar otras lecciones
   que también usan .verb-box pero no pidieron este cambio. */
body.tarjetas-v2 .verb-box{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:16px 18px;
}

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

body.tarjetas-v2 .verb-box .sentence .audio-btn{
    width:38px;
    height:38px;
    font-size:16px;
}

.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;
}

/* ---- Variante de paleta neutra (gris) para .verb-grid ----
   Se activa agregando la clase "verb-grid--neutral" al contenedor;
   no afecta a otras páginas que usan .verb-card / .verb-box con
   los colores semánticos originales (verde/rojo/azul). ---- */

.verb-grid--neutral .verb-card h2{
    color:var(--text-heading);
}

.verb-grid--neutral .verb-box{
    background:var(--bg-page);
    border:1px solid var(--border-soft);
}

.verb-grid--neutral .verb-box.affirmative,
.verb-grid--neutral .verb-box.negative,
.verb-grid--neutral .verb-box.question{
    border-left:4px solid #94a3b8;
}

.verb-grid--neutral .verb-box .ipa{
    color:var(--text-muted);
}

/* ---- 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;
    }

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

    /* ========================================================
       TABLAS DE LECCIÓN -> TARJETAS RESPONSIVAS
       (se excluye .numbers-table, que conserva su formato
       de tabla compacta para pantallas pequeñas)
       ======================================================== */

    .lesson-table-wrap:has(.lesson-table:not(.numbers-table)){
        overflow:visible;
        background:transparent;
        box-shadow:none;
        border-radius:0;
    }

    .lesson-table:not(.numbers-table){
        display:block;
        width:100%;
        min-width:0;
    }

    .lesson-table:not(.numbers-table) thead{
        display:none;
    }

    .lesson-table:not(.numbers-table) tbody{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    /* Flexbox apilado en vez de grid-template-areas de posiciones
       fijas: así se ve bien sin importar el orden/cantidad exacta de
       columnas de cada tabla (no todas las lecciones siguen el mismo
       orden palabra/IPA/audio/traducción). El estilo de cada celda se
       decide por su CLASE o contenido real (.ipa, si trae un botón de
       audio, si es .example), no por en qué columna esté. */
    .lesson-table:not(.numbers-table) tbody tr{
        display:flex;
        flex-direction:column;
        gap:6px;
        background:var(--bg-card);
        border:1px solid var(--border-soft);
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-sm);
        padding:16px 18px;
    }

    .lesson-table:not(.numbers-table) tbody tr:nth-child(even),
    .lesson-table:not(.numbers-table) tbody tr:hover{
        background:var(--bg-card);
    }

    .lesson-table:not(.numbers-table) td{
        padding:0;
        border-bottom:none;
        text-align:left;
        font-size:14.5px;
    }

    .lesson-table:not(.numbers-table) td:first-child{
        font-size:1.1rem;
        font-weight:600;
        color:var(--text-heading);
    }

    .lesson-table:not(.numbers-table) td.ipa{
        font-size:13.5px;
        color:var(--text-muted);
    }

    .lesson-table:not(.numbers-table) td:has(.audio-btn){
        align-self:flex-start;
    }

    .lesson-table:not(.numbers-table) td.example{
        font-size:13.5px;
        line-height:1.5;
        padding-top:8px;
        border-top:1px dashed var(--border-soft);
        color:var(--text-body);
    }

    .lesson-table:not(.numbers-table) td:last-child:not(.ipa):not(:has(.audio-btn)){
        padding-top:8px;
        border-top:1px dashed var(--border-soft);
        color:var(--text-body);
    }

    /* 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;
    }
}

/* ========================================================
   MISMAS REGLAS DE ARRIBA, PERO POR ESPACIO REAL DISPONIBLE
   ========================================================
   El @media(max-width:768px) de arriba solo mira el ancho de la
   PANTALLA. Cuando el video se estira al costado (ver .lc-video-panel),
   la pantalla sigue siendo ancha pero el espacio real que le queda al
   contenido de la lección se angosta — por eso algunas tablas se
   recortaban ahí, aunque en el celular (pantalla angosta real) se
   veían bien. @container mide el espacio real disponible dentro de
   .lesson-main (que ya es container-type:inline-size arriba), sin
   importar qué tan ancha sea la pantalla completa, así que estas
   mismas reglas también se activan cuando el video deja poco espacio. */
@container leccion (max-width:720px){

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

    .lesson-table-wrap:has(.lesson-table:not(.numbers-table)){
        overflow:visible;
        background:transparent;
        box-shadow:none;
        border-radius:0;
    }

    .lesson-table:not(.numbers-table){
        display:block;
        width:100%;
        min-width:0;
    }

    .lesson-table:not(.numbers-table) thead{
        display:none;
    }

    .lesson-table:not(.numbers-table) tbody{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    /* Flexbox apilado en vez de grid-template-areas de posiciones
       fijas: así se ve bien sin importar el orden/cantidad exacta de
       columnas de cada tabla (no todas las lecciones siguen el mismo
       orden palabra/IPA/audio/traducción). El estilo de cada celda se
       decide por su CLASE o contenido real (.ipa, si trae un botón de
       audio, si es .example), no por en qué columna esté. */
    .lesson-table:not(.numbers-table) tbody tr{
        display:flex;
        flex-direction:column;
        gap:6px;
        background:var(--bg-card);
        border:1px solid var(--border-soft);
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-sm);
        padding:16px 18px;
    }

    .lesson-table:not(.numbers-table) tbody tr:nth-child(even),
    .lesson-table:not(.numbers-table) tbody tr:hover{
        background:var(--bg-card);
    }

    .lesson-table:not(.numbers-table) td{
        padding:0;
        border-bottom:none;
        text-align:left;
        font-size:14.5px;
    }

    .lesson-table:not(.numbers-table) td:first-child{
        font-size:1.1rem;
        font-weight:600;
        color:var(--text-heading);
    }

    .lesson-table:not(.numbers-table) td.ipa{
        font-size:13.5px;
        color:var(--text-muted);
    }

    .lesson-table:not(.numbers-table) td:has(.audio-btn){
        align-self:flex-start;
    }

    .lesson-table:not(.numbers-table) td.example{
        font-size:13.5px;
        line-height:1.5;
        padding-top:8px;
        border-top:1px dashed var(--border-soft);
        color:var(--text-body);
    }

    .lesson-table:not(.numbers-table) td:last-child:not(.ipa):not(:has(.audio-btn)){
        padding-top:8px;
        border-top:1px dashed var(--border-soft);
        color:var(--text-body);
    }

    .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;
    }
}

/* Red de seguridad: cualquier tabla que por alguna razón no entre en
   el patrón de arriba (u otro contenido ancho suelto) nunca debe
   desaparecer detrás del video — como último recurso, se puede
   desplazar horizontalmente dentro de su propia caja. */
@container leccion (max-width:720px){
    .lesson-table-wrap{
        overflow-x:auto;
    }
}

@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;
    }
}

/* ========================================================
   VENTANAS EMERGENTES DE LA LECCIÓN
   (modal de "Actividades de esta lección" + modal de
   información). Antes este bloque estaba duplicado dentro
   de cada lessonN.html; ahora vive una sola vez aquí para
   que todas las lecciones usen exactamente el mismo estilo
   de ventana emergente.
   ======================================================== */

.lc-seccion-leccion{
    max-width:720px;
    margin:32px auto 0;
    padding:20px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
}

.lc-seccion-titulo{
    font-size:18px;
    color:#0f172a;
    margin-bottom:6px;
}

.lc-seccion-desc{
    font-size:13.5px;
    color:#475569;
    margin-bottom:14px;
}

.lc-btn-abrir{
    background:linear-gradient(135deg,var(--primary,#4f46e5),#4338ca);
    color:#fff;
    border:none;
    padding:11px 18px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:bold;
    cursor:pointer;
}

.lc-btn-abrir:disabled{
    background:#cbd5e1;
    color:#64748b;
    cursor:not-allowed;
}

.lc-seccion-video{
    background:#fff5f0;
    border-color:#fed7aa;
}

.lc-video-botones{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.lc-btn-video{
    background:linear-gradient(135deg,#ea580c,#dc2626);
}

.lc-video-embed-wrap{
    flex:1;
    width:100%;
    background:#000;
}

.lc-video-embed-wrap iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

/* ---------- Panel de examen (ya no es un modal a pantalla completa) ----------
   Antes .lc-overlay tapaba toda la pantalla con un fondo oscuro y una
   caja centrada de 920px — no dejaba ver ni recorrer la lección
   mientras se presentaba el examen. Ahora funciona igual que el panel
   de video: se acopla a una parte de la pantalla (arriba en vertical,
   al costado en horizontal/pantallas grandes), sin fondo oscuro, para
   poder seguir moviéndose por la lección y presentar el examen a la
   vez. Solo ocupa el espacio necesario: en vertical su alto se ajusta
   al contenido (hasta un máximo, con scroll propio si hay muchas
   preguntas) en vez de una franja fija. Usa sus propias variables
   (--lc-exam-h / --lc-exam-w), independientes de las del video, para
   que ambos paneles puedan funcionar sin pisarse. */
.lc-overlay{
    display:none;
    position:fixed;
    top:var(--lc-topnav-h);
    left:0;
    right:0;
    max-height:var(--lc-exam-h);
    z-index:80;
    background:transparent;
    padding:0;
    pointer-events:none;
}

.lc-overlay.show{
    display:flex;
}

.lc-modal-iframe{
    position:relative;
    pointer-events:auto;
    background:var(--bg-card);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-radius:0 0 20px 20px;
    width:100%;
    max-width:none;
    height:auto;
    max-height:var(--lc-exam-h);
    min-height:0;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(15,23,42,.22);
}

.lc-modal-iframe-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px;
    border-bottom:1px solid var(--border-soft);
    font-weight:700;
    color:var(--text-heading);
    flex:0 0 auto;
    background:linear-gradient(90deg,rgba(79,70,229,.07),rgba(124,58,237,.07));
}

.lc-cerrar{
    border:none;
    background:none;
    font-size:20px;
    cursor:pointer;
    color:#64748b;
}

:root{
    --lc-exam-h:min(78vh,720px);
    --lc-exam-h:min(78dvh,720px);
    --lc-exam-w:clamp(340px,38vw,620px);
}

body.lc-examen-abierto .lesson-main{
    padding-top:calc(var(--lc-exam-h) + 36px);
    transition:padding .25s ease;
}

body.lc-examen-redimensionando .lesson-main{
    transition:none;
}

.lc-exam-resize{
    display:none;
}

@media (min-width:900px), (orientation:landscape){
    .lc-overlay{
        left:auto;
        right:0;
        bottom:0;
        max-height:none;
        height:auto;
        width:var(--lc-exam-w);
    }

    .lc-modal-iframe{
        max-height:none;
        height:100%;
        border-radius:20px 0 0 20px;
    }

    .lc-exam-resize{
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:12px;
        height:100%;
        cursor:ew-resize;
        z-index:5;
        background:transparent;
    }

    .lc-exam-resize::after{
        content:"";
        position:absolute;
        top:50%;
        left:3px;
        width:4px;
        height:48px;
        transform:translateY(-50%);
        border-radius:4px;
        background:rgba(15,23,42,.18);
        transition:background .15s ease;
    }

    .lc-exam-resize:hover::after,
    body.lc-examen-redimensionando .lc-exam-resize::after{
        background:var(--primary);
    }

    body.lc-examen-abierto .lesson-main{
        padding-top:36px;
        padding-right:calc(var(--lc-exam-w) + 24px);
    }
}

/* ---------- Panel de video (no es un modal a pantalla completa) ----------
   A diferencia de .lc-overlay (examen), el video NO debe tapar el resto
   de la lección: se acopla a una parte de la pantalla, sin fondo oscuro
   de por medio, para poder seguir recorriendo/leyendo la lección con el
   video abierto. El tamaño del panel se guarda en variables CSS
   (--lc-video-h / --lc-video-w) para que .lesson-main pueda reservar
   exactamente ese mismo espacio (padding) y así el contenido nunca
   quede tapado ni recortado detrás del video.
   - Pantallas angostas en vertical (celular): mitad del espacio debajo
     del menú superior, a lo ancho completo.
   - Pantallas grandes u horizontales (computador, o celular en
     landscape): panel angosto pegado al costado derecho, debajo del
     menú superior, dejando el resto de la lección visible al lado. */
:root{
    --lc-topnav-h:64px;
    --lc-video-h:calc((100vh - var(--lc-topnav-h)) * 0.5);
    --lc-video-h:calc((100dvh - var(--lc-topnav-h)) * 0.5);
    /* clamp() en vez de min()+min-width por separado: así el ancho real
       del panel SIEMPRE es el mismo valor que usa .lesson-main para
       reservar espacio, sin importar qué tan angosta sea la pantalla.
       Antes el min-width:320px del panel no se reflejaba en el cálculo
       del padding, y en celulares en horizontal el panel terminaba más
       ancho que el espacio reservado, tapando contenido. */
    --lc-video-w:clamp(220px,30vw,50vw);
}

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

.lc-video-panel{
    display:none;
    position:fixed;
    top:var(--lc-topnav-h);
    left:0;
    right:0;
    height:var(--lc-video-h);
    z-index:90;
    background:transparent;
    padding:0;
    pointer-events:none;
}

.lc-video-panel.show{
    display:block;
}

.lc-video-panel .lc-modal-iframe{
    position:relative;
    pointer-events:auto;
    width:100%;
    height:100%;
    max-width:none;
    margin:0;
    border-radius:0 0 16px 16px;
    box-shadow:0 12px 34px rgba(15,23,42,.35);
}

/* Manija para arrastrar y cambiar el ancho del video en modo lateral.
   En modo apilado arriba (vertical) no aplica, así que queda oculta. */
.lc-video-resize{
    display:none;
}

/* El contenido de la lección se corre para dejarle su espacio al video
   en vez de quedar tapado o cortado detrás de él. */
body.lc-video-abierto .lesson-main{
    padding-top:calc(var(--lc-video-h) + 36px);
    transition:padding .25s ease;
}

body.lc-video-redimensionando .lesson-main{
    transition:none;
}

body.lc-video-redimensionando{
    cursor:ew-resize;
    -webkit-user-select:none;
    user-select:none;
}

@media (min-width:900px), (orientation:landscape){
    .lc-video-panel{
        left:auto;
        bottom:0;
        height:auto;
        width:var(--lc-video-w);
    }

    .lc-video-panel .lc-modal-iframe{
        border-radius:16px 0 0 16px;
    }

    .lc-video-resize{
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:12px;
        height:100%;
        cursor:ew-resize;
        z-index:5;
        background:transparent;
    }

    .lc-video-resize::after{
        content:"";
        position:absolute;
        top:50%;
        left:3px;
        width:4px;
        height:48px;
        transform:translateY(-50%);
        border-radius:4px;
        background:rgba(15,23,42,.18);
        transition:background .15s ease;
    }

    .lc-video-resize:hover::after,
    body.lc-video-redimensionando .lc-video-resize::after{
        background:var(--primary);
    }

    body.lc-video-redimensionando .lc-video-panel .lc-modal-iframe{
        transition:none;
    }

    /* En modo lateral el video ya no ocupa una franja arriba, sino al
       costado. Antes .lesson-main seguía centrado con margin:auto como
       si el video no existiera, y solo le sumaba padding-right — eso
       dejaba dos franjas vacías: el margen izquierdo del centrado
       normal, y el hueco entre el contenido y el video (porque el
       centrado no sabe que el video le "come" espacio a la derecha).
       Aquí en cambio se usa TODO el ancho que le queda a la izquierda
       del video, sin centrar, para aprovechar ese espacio. */
    body.lc-video-abierto .lesson-main{
        max-width:none;
        width:calc(100% - var(--lc-video-w));
        margin-left:0;
        margin-right:0;
        padding-top:36px;
        padding-right:32px;
    }
}

.lc-iframe{
    flex:1;
    width:100%;
    border:none;
}

.topnav-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.topnav-icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:29.9px;
    height:29.9px;
    border:none;
    background:none;
    color:#0f172a;
    cursor:pointer;
    padding:0;
}

.topnav-icon-btn svg{
    width:22px;
    height:22px;
}
.topnav-icon-btn:disabled{
    opacity:.4;
    cursor:default;
}

.topnav-video-wrap{
    position:relative;
}

.topnav-video-dropdown{
    display:none;
    position:absolute;
    top:37px;
    right:0;
    min-width:190px;
    max-width:260px;
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    box-shadow:0 10px 30px rgba(15,23,42,.18);
    padding:8px;
    z-index:200;
}
.topnav-video-dropdown.show{
    display:block;
}
.topnav-video-dropdown button{
    display:block;
    width:100%;
    text-align:left;
    padding:9px 12px;
    border:none;
    background:none;
    border-radius:8px;
    cursor:pointer;
    font-size:13.5px;
    font-family:var(--font-main);
    color:var(--text-body);
}
.topnav-video-dropdown button:hover{
    background:var(--bg-page);
}

.topnav-exam-btn{
    display:flex;
    align-items:center;
    gap:6px;
    height:29.9px;
    padding:0 12px;
    border:none;
    border-radius:999px;
    background:rgba(15,23,42,.06);
    color:#0f172a;
    cursor:pointer;
    font-family:var(--font-main);
}
.topnav-exam-btn:disabled{
    opacity:.5;
    cursor:default;
}
.topnav-exam-btn svg{
    width:18px;
    height:18px;
    flex-shrink:0;
}
.topnav-exam-btn .topnav-exam-label{
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
    color:inherit;
}
.topnav-exam-btn.lc-examen-resumen-ok{
    background:#dcfce7;
    color:#15803d;
}
.topnav-exam-btn.lc-examen-resumen-pendiente{
    background:#fef3c7;
    color:#b45309;
}

@media(max-width:480px){
    .topnav-exam-btn{
        padding:0 9px;
    }
    .topnav-exam-btn .topnav-exam-label{
        font-size:11.5px;
    }
}

#lcCertificadoLink{
    color:#d97706;
    animation:lcCertificadoPulso 1.8s ease-in-out infinite;
}

@keyframes lcCertificadoPulso{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.12); }
}

@media print{
    .lesson-topnav,
    .lc-seccion-leccion,
    .lc-overlay,
    .lc-video-panel{
        display:none !important;
    }
}

/* ========================================================
   LEGIBILIDAD EN TODO TIPO DE PANTALLAS
   ======================================================== */

.lesson-hero p,
.card p,
.example .en,
.example .es,
.example .ipa,
.note p,
.tip p,
.exercise p{
    overflow-wrap:break-word;
    word-break:break-word;
}

@media(max-width:480px){

    /* Las bocinas de audio en las lecciones solo muestran el
       ícono 🔊 en celulares; el texto "Escuchar"/"Listen" se
       oculta para que el botón no se vea apretado. */
    .audio-btn-label{
        display:none;
    }

    .audio-btn-wide{
        padding:11px 14px;
    }

    .lesson-hero p{
        font-size:14px;
    }

    .card,
    div.example,
    .note,
    .tip,
    .exercise{
        padding:14px 16px;
    }
}

/* ========================================================
   COMPONENTES DE EXPLICACIÓN GRAMATICAL (tarjetas de regla,
   ejemplo, nota, tip, patrón, ejercicio y respuesta).
   Antes cada lección los repetía en su propio <style>; ahora
   viven una sola vez aquí para que todas las lecciones que
   los usan se vean exactamente igual.
   ======================================================== */

.card{
    padding:20px 22px;
    margin:18px 0;
}

div.example{
    background:#eef2ff;
    padding:16px 18px;
    border-left:6px solid var(--primary);
    border-radius:var(--radius-lg);
    margin:14px 0;
    box-shadow:var(--shadow-sm);
}

.note{
    background:#fff7ed;
    padding:16px 18px;
    border-left:6px solid #f59e0b;
    border-radius:var(--radius-lg);
    margin:14px 0;
    box-shadow:var(--shadow-sm);
}

.tip{
    background:#fff7ed;
    padding:16px 18px;
    border-left:6px solid #f59e0b;
    border-radius:var(--radius-lg);
    margin:14px 0;
    box-shadow:var(--shadow-sm);
}

.pattern{
    background:#eef2ff;
    padding:12px 16px;
    border-left:6px solid var(--primary);
    border-radius:10px;
    font-weight:600;
    margin:12px 0;
    overflow:auto;
}

.exercise{
    background:var(--bg-page);
    border:1px solid var(--border-soft);
    padding:16px 18px;
    border-radius:var(--radius-lg);
    margin:14px 0;
}

.answer{
    display:none;
    margin-top:12px;
    padding:10px 14px;
    background:#ecfdf5;
    border-left:4px solid #22c55e;
    border-radius:8px;
    font-weight:600;
    color:#15803d;
}

.example .en{
    font-size:1.1rem;
    font-weight:700;
    color:var(--text-heading);
}

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

.example .es,
.example .translation{
    color:var(--text-muted);
}

.example ul, .note ul, .tip ul, .card ul{
    margin-left:20px;
    line-height:1.9;
}

.lesson-section select{
    padding:10px 14px;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    font-family:var(--font-main);
    font-size:14.5px;
    background:var(--bg-card);
    margin:6px 0;
}

/* ========================================================
   EXAMEN DE LA LECCIÓN
   ======================================================== */

.lc-examen-resumen{
    font-size:13.5px;
    color:var(--text-muted);
    margin:0 0 14px;
}

.lc-examen-resumen-ok{
    color:#15803d;
    font-weight:600;
}

.lc-examen-resumen-pendiente{
    color:#b45309;
    font-weight:600;
}

.lc-examen-body{
    flex:1;
    min-height:0;
    width:100%;
    overflow-y:auto;
    padding:20px;
}

.lc-examen-intro{
    font-size:13.5px;
    color:var(--text-muted);
    margin:0 0 18px;
    line-height:1.5;
}

.lc-examen-progreso{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--primary);
    background:rgba(79,70,229,.08);
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    margin:0 0 16px;
}

.lc-examen-pregunta{
    margin-bottom:16px;
    padding:16px 18px;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.5);
}

.lc-examen-pregunta-texto{
    font-weight:700;
    color:var(--text-heading);
    margin-bottom:12px;
    font-size:14.5px;
}

.lc-examen-audio{
    margin-bottom:12px;
}

.lc-examen-opciones{
    display:flex;
    flex-direction:column;
    gap:8px;
    counter-reset:lc-opcion;
}

.lc-examen-opcion{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px 10px 10px;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    cursor:pointer;
    font-size:14px;
    background:rgba(255,255,255,.55);
    transition:.15s ease;
}

.lc-examen-opcion::before{
    counter-increment:lc-opcion;
    content:counter(lc-opcion, upper-alpha);
    flex:0 0 auto;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(79,70,229,.1);
    color:var(--primary);
    font-size:11.5px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lc-examen-opcion:hover{
    background:#eef2ff;
    border-color:var(--primary);
}

.lc-examen-opcion input{
    accent-color:var(--primary);
    width:16px;
    height:16px;
    flex:0 0 auto;
}

.lc-examen-botones{
    display:flex;
    gap:10px;
    margin-top:6px;
}

.lc-examen-enviar{
    flex:1;
}

.lc-btn-secundario{
    flex:0 0 auto;
    background:#f1f5f9;
    color:var(--text-body);
    border:1px solid var(--border-soft);
    padding:11px 18px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:bold;
    cursor:pointer;
}

.lc-btn-secundario:hover{
    background:#e2e8f0;
}

.lc-examen-resultado{
    text-align:center;
    padding:20px 10px 6px;
}

.lc-examen-resultado-emoji{
    font-size:48px;
    margin-bottom:6px;
}

.lc-examen-resultado-nota{
    font-size:36px;
    font-weight:800;
    color:var(--text-heading);
    margin-bottom:8px;
}

.lc-examen-resultado-ok .lc-examen-resultado-nota{
    color:#15803d;
}

.lc-examen-resultado-bajo .lc-examen-resultado-nota{
    color:#b45309;
}

.lc-examen-resultado-mensaje{
    color:var(--text-muted);
    font-size:14px;
    margin:10px 0 20px;
}

#lcExamenReintentar{
    margin:0 auto;
}

/* ========================================================
   MODO OSCURO
   Se activa agregando la clase "dark-mode" a <html> — lo hace auth.js
   (aplicarModoOscuroGuardado, ver el bloque que corre de una vez al
   principio del archivo) en TODAS las páginas que lo cargan, incluidas
   las 54 lecciones 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 el
   topnav de cada lección — ver .btn-modo-oscuro más abajo, mismo
   componente que ya usaba el resto del sitio (login.html, terminos.html).

   Redefine las variables del tema para que todo lo que ya usa
   var(--bg-page), var(--bg-card), var(--text-heading), etc. en esta hoja
   cambie automáticamente; el resto de las reglas de acá abajo son los
   pocos lugares que usaban un color fijo en vez de una variable. 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-topnav{
    background:var(--bg-card);
}

html.dark-mode .lc-seccion-leccion{
    background:var(--bg-card);
    border-color:var(--border-soft);
}
html.dark-mode .lc-seccion-titulo{ color:var(--text-heading); }
html.dark-mode .lc-seccion-desc{ color:var(--text-muted); }
html.dark-mode .lc-seccion-video{
    background:rgba(234,88,12,.14);
    border-color:rgba(234,88,12,.4);
}
html.dark-mode .lc-btn-abrir:disabled{
    background:#28334a;
    color:var(--text-muted);
}

html.dark-mode .mistake-box{
    background:rgba(239,68,68,.14);
}
html.dark-mode .mistake-box .wrong{ color:#fca5a5; }
html.dark-mode .mistake-box .right{ color:#4ade80; }

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

html.dark-mode .topnav-exam-btn{
    background:rgba(255,255,255,.08);
    color:var(--text-heading);
}
html.dark-mode .topnav-exam-btn.lc-examen-resumen-ok{
    background:rgba(34,197,94,.18);
    color:#4ade80;
}
html.dark-mode .topnav-exam-btn.lc-examen-resumen-pendiente{
    background:rgba(245,158,11,.2);
    color:#fbbf24;
}

html.dark-mode div.example,
html.dark-mode .pattern{
    background:rgba(99,102,241,.16);
}
html.dark-mode .note,
html.dark-mode .tip{
    background:rgba(245,158,11,.13);
}
html.dark-mode .answer{
    background:rgba(34,197,94,.15);
    color:#4ade80;
}

html.dark-mode .lc-examen-pregunta{
    /* En claro esta tarjeta es blanco translúcido (rgba(255,255,255,.5))
       sobre un fondo claro, así que se nota apenas más clara que el fondo
       y el texto (heredado, oscuro) se lee bien. En oscuro ese mismo
       blanco translúcido queda como un rectángulo gris claro flotando
       sobre el modal oscuro — y el texto de las opciones, que no fija su
       propio color (hereda var(--text-body), claro en este tema), quedaba
       casi invisible encima de ese gris claro. Se reemplaza por un tinte
       oscuro apenas más claro que el fondo del modal. */
    background:rgba(255,255,255,.04);
}
html.dark-mode .lc-examen-opcion{
    background:rgba(255,255,255,.05);
    border-color:var(--border-soft);
    color:var(--text-body);
}
html.dark-mode .lc-examen-opcion::before{
    background:rgba(129,140,248,.2);
}
html.dark-mode .lc-examen-opcion:hover{
    background:rgba(99,102,241,.16);
}
html.dark-mode .lc-btn-secundario{
    background:#1b2540;
}
html.dark-mode .lc-btn-secundario:hover{
    background:#25324f;
}

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:inline-flex;
    align-items:center;
    justify-content:center;
    width:34.9px;
    height:34.9px;
    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:19px;
    height:19px;
}

.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:29.9px;
        height:29.9px;
    }
    .btn-modo-oscuro svg{
        width:17px;
        height:17px;
    }
}