/* ==========================================================
   ESTILOS COMPARTIDOS — Mi Aula
   Paleta clara con barra lateral, inspirada en interfaces
   tipo panel de administración (sidebar + topbar):
   Primario:       #4f46e5 (índigo)
   Primario claro: #6366f1
   Fondo:          #f4f6fb
   ========================================================== */

:root{
    --bg-navy-900:#0f172a;
    --bg-navy-800:#1e293b;
    --primary:#4f46e5;
    --primary-light:#6366f1;
    --primary-lighter:#818cf8;
    --primary-dark:#4338ca;
    --accent-purple:#7c3aed;
    --accent-purple-light:#8b5cf6;
    --accent-amber:#f59e0b;
    --accent-pink:#ec4899;
    --accent-blue:#2563eb;
    --accent-green:#16a34a;

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

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

    /* Sidebar oscuro tipo dashboard (inspirado en la imagen de referencia) */
    --sidebar-bg:#12131c;
    --sidebar-bg-soft:#1a1c29;
    --sidebar-text:#9497ac;
    --sidebar-text-heading:#f4f5fb;
    --sidebar-border:#23253406;
    --sidebar-active-bg:#ffffff;
    --sidebar-active-text:#12131c;

    --sidebar-width:250px;

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

html{
    max-width:100%;
    overflow-x:clip;
}

body{
    font-family:var(--font-main);
    color:var(--text-body);
    background:var(--bg-page);
    -webkit-font-smoothing:antialiased;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}

/* ========================================================
   ESTRUCTURA GENERAL: SIDEBAR + TOPBAR
   ======================================================== */

.app-shell{
    display:flex;
    align-items:stretch;
    min-height:100vh;
    max-width:100vw;
    overflow-x:clip;
}

.sidebar{
    width:var(--sidebar-width);
    flex:0 0 var(--sidebar-width);
    background:var(--sidebar-bg);
    border-right:1px solid rgba(255,255,255,.05);
    display:flex;
    flex-direction:column;
    padding:18px 16px;
    position:sticky;
    top:0;
    height:100vh;
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:120;
}

.sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:110;
    opacity:0;
    transition:opacity .2s ease;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16.5px;
    line-height:1.15;
    font-weight:700;
    color:var(--sidebar-text-heading);
    padding:2px 8px 12px;
    margin-bottom:10px;
    letter-spacing:.1px;
    flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-logo-icon{
    width:30px;
    height:30px;
    border-radius:9px;
    object-fit:cover;
    flex-shrink:0;
    display:block;
    box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.07);
}

.sidebar-logo-text em{
    font-style:normal;
    font-weight:600;
    color:var(--primary-lighter);
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex-shrink:0;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--sidebar-text);
    text-decoration:none;
    font-weight:500;
    font-size:14px;
    padding:9px 14px;
    border-radius:var(--radius-md);
    transition:.15s ease;
}

.sidebar-icon{
    font-size:17px;
    width:20px;
    text-align:center;
}

.sidebar-link:hover{
    background:var(--sidebar-bg-soft);
    color:var(--sidebar-text-heading);
}

.sidebar-badge{
    display:none;
    width:9px;
    height:9px;
    min-width:9px;
    margin-left:auto;
    background:#ef4444;
    border-radius:50%;
    flex:0 0 auto;
}

.sidebar-link.activo .sidebar-badge{
    background:var(--primary);
}

.sidebar-link.activo{
    background:var(--sidebar-active-bg);
    color:var(--sidebar-active-text);
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Enlace "Certificación" del sidebar: solo visible para instructores.
   Se apoya en la clase .sidebar-instructor que cada página ya alterna
   en protegerPagina() según el rol del usuario. */
.sidebar-link-instructor{
    display:none;
}

.sidebar.sidebar-instructor .sidebar-link-instructor{
    display:flex;
}

/* Enlace "Administración": solo visible para tipoclase "admin" (ni
   siquiera para instructores). Usa su propia clase .sidebar-admin,
   independiente de .sidebar-instructor. */
.sidebar-link-admin{
    display:none;
}

.sidebar.sidebar-admin .sidebar-link-admin{
    display:flex;
}

.sidebar-logout{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--sidebar-text);
    text-decoration:none;
    font-weight:500;
    font-size:14px;
    padding:9px 14px;
    border-radius:var(--radius-md);
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:8px;
    padding-top:13px;
    transition:.15s ease;
    flex-shrink:0;
}

.sidebar-logout:hover{
    color:#f87171;
    background:rgba(248,113,113,.12);
}

.main-wrap{
    flex:1;
    min-width:0;
    max-width:100%;
    display:flex;
    flex-direction:column;
}

header{
    width:100%;
    max-width:100%;
    background:#ffffff;
    color:var(--text-heading);
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid var(--border-soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:8px;
    padding:14px clamp(14px,4vw,28px);
}

header.header-instructor{
    background:#ffffff;
}

/* ---------- Aviso de suscripción anual (inyectado por auth.js) ---------- */
.aviso-suscripcion{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    background:#fffbeb;
    border-bottom:1px solid #fcd34d;
    color:#92400e;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 16px;
    padding:10px clamp(14px,4vw,28px);
    font-size:13.5px;
    line-height:1.5;
    text-align:center;
}

.aviso-suscripcion-texto{
    font-weight:600;
}

.aviso-suscripcion-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#25D366;
    color:#fff;
    border-radius:20px;
    padding:6px 16px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    flex-shrink:0;
}

.aviso-suscripcion-btn:hover{
    filter:brightness(0.95);
}

.sidebar.sidebar-instructor{
    background:var(--sidebar-bg);
}

/* ---------- Calificaciones: ahora vive en el header, para todos los roles ---------- */
.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;
    transition:background .15s ease;
}

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

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

.topbar-icon-link.activo{
    background:rgba(79,70,229,.12);
    color:var(--primary);
}

/* ---------- Desplegable de Anuncios/Actividades (solo estudiantes) ---------- */
.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;
}

/* En pantallas angostas (celulares en vertical) el botón de la campana
   no siempre está pegado al borde derecho real de la pantalla (el
   nombre del usuario y otros íconos pueden quedar a su derecha), así
   que anclar el desplegable a la campana con right:0 lo empujaba muy
   hacia la izquierda y lo dejaba mal ubicado. En vez de depender de la
   posición de la campana, aquí se fija respecto a toda la pantalla y
   se centra horizontalmente. */
@media(max-width:600px){
    .topbar-notif-dropdown{
        position:fixed;
        top:73px;
        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(79,70,229,.06);
}

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

.topbar-notif-marcar{
    flex:0 0 auto;
    align-self:center;
    background:none;
    border:1px solid var(--border-soft);
    color:var(--text-muted);
    font-size:11px;
    font-weight:600;
    padding:5px 9px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
}

.topbar-notif-marcar:hover{
    border-color:var(--primary);
    color:var(--primary);
}

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

/* ---------- Enlaces solo para instructor/admin (ocultos para estudiantes) ---------- */
.sidebar-link-staff{
    display:none;
}

.sidebar.sidebar-instructor .sidebar-link-staff,
.sidebar.sidebar-admin .sidebar-link-staff{
    display:flex;
}

/* ---------- Certificación: oculta hasta que aplique ---------- */
.sidebar-link-cert{
    display:none;
}

.sidebar.sidebar-instructor .sidebar-link-cert,
.sidebar.sidebar-admin .sidebar-link-cert{
    display:flex;
}

/* ---------- "Valida tu inglés" con botón de ocultar ---------- */
.sidebar-link.sidebar-link-validar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding-right:10px;
}

.sidebar-validar-enlace{
    display:flex;
    align-items:center;
    gap:12px;
    color:inherit;
    text-decoration:none;
    flex:1;
    min-width:0;
}

.sidebar-validar-cerrar{
    background:none;
    border:none;
    color:inherit;
    opacity:.55;
    cursor:pointer;
    font-size:12px;
    flex:0 0 auto;
    padding:4px;
}

.sidebar-validar-cerrar:hover{
    opacity:1;
}

.topbar-rol-profesor{
    display:none;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--primary);
    background:rgba(79,70,229,.1);
    padding:7px 13px;
    border-radius:999px;
    white-space:nowrap;
    flex-shrink:0;
}

header .topbar-left{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

header .topbar-title{
    font-size:15px;
    font-weight:600;
    color:var(--text-heading);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.topbar-usuario{
    font-size:13.5px;
    font-weight:600;
    color:var(--text-heading);
    max-width:40vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.hamburger{
    display:none;
    font-size:24px;
    cursor:pointer;
    color:var(--text-heading);
}

@media(max-width:900px){

    .sidebar{
        position:fixed;
        left:-100%;
        top:0;
        height:100vh;
        height:100dvh;
        max-height:100dvh;
        transition:left .2s ease;
        box-shadow:var(--shadow-lg);
    }

    .sidebar.show{
        left:0;
    }

    .sidebar-backdrop.show{
        display:block;
        opacity:1;
    }

    .hamburger{
        display:block;
    }
}

/* Modo compacto del sidebar: se activa por ALTURA de pantalla, no por
   ancho, así que funciona tanto en computadores con ventanas bajas como
   en celulares en orientación horizontal (landscape), donde el alto
   disponible es poco aunque el ancho sea grande. Evita que aparezca
   una barra de scroll dentro del sidebar cuando hay muchos enlaces
   (por ejemplo, la cuenta de administrador, que ve todos los enlaces).
   Tres niveles progresivos en vez de uno solo, para que la reducción
   sea gradual y el sidebar siga viéndose ordenado en cualquier alto
   de ventana, no solo en pantallas completas o muy pequeñas. */
@media(max-height:820px){

    .sidebar{
        padding:14px 14px;
    }

    .sidebar-logo{
        padding:2px 8px 10px;
        margin-bottom:8px;
        font-size:15.5px;
    }

    .sidebar-logo-icon{
        width:28px;
        height:28px;
    }

    .sidebar-nav{
        gap:1px;
    }

    .sidebar-link{
        padding:7px 12px;
        font-size:13.5px;
    }

    .sidebar-logout{
        padding:7px 12px;
        margin-top:6px;
        padding-top:10px;
    }
}

@media(max-height:620px){

    .sidebar{
        padding:10px 12px;
    }

    .sidebar-logo{
        padding:2px 8px 8px;
        margin-bottom:6px;
        font-size:14.5px;
    }

    .sidebar-logo-icon{
        width:24px;
        height:24px;
    }

    .sidebar-link{
        padding:6px 12px;
        font-size:13px;
    }

    .sidebar-icon{
        font-size:15px;
    }

    .sidebar-logout{
        padding:6px 12px;
        margin-top:4px;
        padding-top:8px;
    }
}

@media(max-height:460px){

    .sidebar{
        padding:8px 10px;
    }

    .sidebar-logo{
        padding:0 6px 6px;
        margin-bottom:4px;
        font-size:13px;
        gap:8px;
    }

    .sidebar-logo-icon{
        width:20px;
        height:20px;
    }

    .sidebar-nav{
        gap:0;
    }

    .sidebar-link{
        padding:5px 10px;
        font-size:12px;
        gap:9px;
    }

    .sidebar-icon{
        font-size:13px;
        width:16px;
    }

    .sidebar-logout{
        padding:5px 10px;
        margin-top:2px;
        padding-top:6px;
        gap:9px;
    }
}

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

.btn-primary,
.btn-nueva{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    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(79,70,229,.25);
}

.btn-primary:hover,
.btn-nueva:hover{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary-dark));
    box-shadow:0 6px 18px rgba(79,70,229,.32);
    transform:translateY(-1px);
}

.btn-outline{
    background:#fff;
    color:var(--text-heading);
    border:1px solid var(--border-soft);
    padding:11px 22px;
    border-radius:var(--radius-md);
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.15s ease;
}

.btn-outline:hover{
    background:#f4f6fb;
    border-color:#cbd5e1;
}

.badge-pill{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
}

.badge-actividad{
    background:#dcfce7;
    color:var(--accent-green);
}

.badge-examen{
    background:#dbeafe;
    color:var(--primary-light);
}

.badge-comprension{
    background:#ccfbf1;
    color:#0d9488;
}

.badge-publicado{
    background:#dcfce7;
    color:var(--accent-green);
}

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

/*========== MODAL DE CONFIRMACIÓN / ALERTA (reemplaza confirm()/alert() nativos) ==========*/

.confirm-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

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

.confirm-box{
    background:#fff;
    border-radius:16px;
    max-width:420px;
    width:100%;
    padding:26px 24px;
    box-shadow:0 20px 45px rgba(15,23,42,.25);
    animation:confirmPop .15s ease;
}

@keyframes confirmPop{
    from{ transform:scale(.96); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.confirm-titulo{
    font-size:17px;
    font-weight:700;
    color:#0f172a;
    margin:0 0 10px;
}

.confirm-mensaje{
    font-size:14px;
    color:#475569;
    line-height:1.65;
    margin:0 0 22px;
}

.confirm-mensaje strong{
    color:#0f172a;
}

.confirm-botones{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.confirm-btn{
    border:none;
    border-radius:10px;
    padding:10px 18px;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
}

.confirm-btn-cancelar{
    background:#f1f5f9;
    color:#475569;
}

.confirm-btn-cancelar:hover{
    background:#e2e8f0;
}

/* ---------- Campos de texto dentro de un modal (mostrarFormulario, ver auth.js) ---------- */
.confirm-campos{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:18px;
}

.confirm-campo-grupo{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.confirm-campo-label{
    font-size:13px;
    font-weight:600;
    color:var(--text-muted,#64748b);
}

.confirm-campo-input{
    width:100%;
    padding:10px 12px;
    border:1.5px solid var(--border-soft,#e2e8f0);
    border-radius:var(--radius-md,10px);
    font-family:inherit;
    font-size:14px;
    color:var(--text-heading,#0f172a);
}

.confirm-campo-input:focus{
    outline:none;
    border-color:var(--primary,#4f46e5);
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

.confirm-campo-ayuda{
    font-size:12px;
    color:var(--text-muted,#64748b);
}

.confirm-campo-error{
    margin:0 0 14px;
}

.confirm-btn-confirmar{
    background:#4f46e5;
    color:#fff;
}

.confirm-btn-confirmar:hover{
    background:#4338ca;
}

.confirm-btn-confirmar.peligroso{
    background:#ef4444;
}

.confirm-btn-confirmar.peligroso:hover{
    background:#dc2626;
}

/* ========================================================
   MODO OSCURO
   Se activa agregando la clase "dark-mode" a <html> (ver auth.js:
   alternarModoOscuro/aplicarModoOscuroGuardado, que lee/escribe la
   preferencia en localStorage y agrega la clase lo antes posible, antes
   de que se pinte la página, para evitar un parpadeo claro→oscuro).
   Redefine las variables del tema en :root para que todo lo que ya usa
   var(--bg-page), var(--bg-card), var(--text-heading), etc. cambie
   automáticamente; el resto son los pocos lugares de estilos.css que
   usaban un color fijo en vez de una variable. La barra lateral ya es
   oscura en ambos modos, así que no necesita cambios.
   ======================================================== */
html.dark-mode{
    --text-body:#cbd5e1;
    --text-muted:#94a3b8;
    --text-heading:#f1f5f9;

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

    --primary:#818cf8;
    --primary-light:#a5b4fc;
    --primary-dark:#6366f1;
}

html.dark-mode header,
html.dark-mode header.header-instructor{
    background:var(--bg-card);
    border-bottom-color:var(--border-soft);
}

html.dark-mode .topbar-icon-link:hover{
    background:rgba(255,255,255,.06);
}

html.dark-mode .btn-outline{
    background:var(--bg-card);
}

html.dark-mode .btn-outline:hover{
    background:#1b2540;
    border-color:var(--border-soft);
}

html.dark-mode .confirm-box{
    background:var(--bg-card);
}

html.dark-mode .confirm-titulo,
html.dark-mode .confirm-mensaje strong{
    color:var(--text-heading);
}

html.dark-mode .confirm-mensaje{
    color:var(--text-body);
}

html.dark-mode .confirm-btn-cancelar{
    background:#1b2540;
    color:var(--text-body);
}

html.dark-mode .confirm-btn-cancelar:hover{
    background:#25324f;
}

html.dark-mode .confirm-campo-input{
    background:#0b1220;
    color:var(--text-heading);
}

html.dark-mode .aviso-suscripcion{
    background:#3a2f0d;
    border-bottom-color:#7a5c10;
    color:#fde68a;
}

html.dark-mode ::selection{
    background:rgba(129,140,248,.35);
}

/* ---------- Botón de alternar modo oscuro (barra lateral y encabezados sin barra lateral) ---------- */
.sidebar-toggle-tema{
    background:none;
    border:none;
    width:100%;
    text-align:left;
    font:inherit;
    cursor:pointer;
}

.sidebar-toggle-tema .icono-luna{
    display:none;
}

html.dark-mode .sidebar-toggle-tema .icono-sol{
    display:none;
}

html.dark-mode .sidebar-toggle-tema .icono-luna{
    display:inline-flex;
}

.btn-modo-oscuro{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--border-soft);
    background:var(--bg-card);
    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:18px;
    height:18px;
}

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