/* ============================================================================
   APP SHELL V1
   Capa visual común para que el sitio se sienta como una aplicación móvil.
   No reemplaza los estilos propios de Biblioteca, Tareas, Videos o Cuenta.
   ============================================================================ */

:root {
    --app-ink: #18233b;
    --app-muted: #71809a;
    --app-line: #e4e9f2;
    --app-surface: #ffffff;
    --app-bg: #f5f7fc;
    --app-blue: #3157d5;
    --app-purple: #7046d0;
    --app-green: #16866d;
    --app-red: #cf3151;
    --app-orange: #e39a18;
    --app-shadow: 0 18px 45px rgba(31, 47, 83, .10);
    --app-shadow-soft: 0 10px 28px rgba(31, 47, 83, .07);
}

html.app-shell-ready {
    background: var(--app-bg);
    scroll-behavior: smooth;
}

html.app-shell-ready body {
    color: var(--app-ink);
    background:
        radial-gradient(circle at 3% 7%, rgba(112, 70, 208, .09), transparent 23rem),
        radial-gradient(circle at 98% 15%, rgba(22, 134, 109, .08), transparent 22rem),
        var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

/* Encabezado con apariencia de barra superior de una app. */

html.app-shell-ready #encabezado .navbar {
    min-height: 68px;
    border-bottom: 1px solid rgba(32, 47, 78, .08) !important;
    background: rgba(255, 255, 255, .90) !important;
    box-shadow: 0 8px 25px rgba(32, 47, 78, .08) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html.app-shell-ready #encabezado .navbar .container {
    min-height: 58px;
}

html.app-shell-ready #encabezado .navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 5px 8px 5px 0 !important;
}

html.app-shell-ready #encabezado .navbar-brand img {
    max-height: 44px !important;
    border-radius: 12px;
}

html.app-shell-ready #encabezado .navbar-nav {
    gap: 4px;
}

html.app-shell-ready #encabezado .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px !important;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #5d6a83 !important;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .02em;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

html.app-shell-ready #encabezado .navbar-nav .nav-link:hover,
html.app-shell-ready #encabezado .navbar-nav .nav-link:focus-visible,
html.app-shell-ready #encabezado .navbar-nav .nav-link.active {
    color: var(--app-blue) !important;
    border-color: #dce3fa;
    background: #f0f3ff;
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

html.app-shell-ready #encabezado .menu-icono {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-blue), var(--app-purple));
    font-size: .72rem;
}

html.app-shell-ready #encabezado .navbar-toggler {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dfe5f0 !important;
    border-radius: 13px;
    background: #f7f9fd;
}

html.app-shell-ready #encabezado .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--app-line) !important;
    border-radius: 17px !important;
    box-shadow: var(--app-shadow) !important;
}

html.app-shell-ready #encabezado .dropdown-item {
    border-radius: 10px;
    color: #516079;
    font-size: .78rem;
    font-weight: 700;
}

html.app-shell-ready #encabezado .dropdown-item:hover,
html.app-shell-ready #encabezado .dropdown-item:focus {
    color: var(--app-blue);
    background: #f0f3ff;
}

/* Superficies principales: tarjetas consistentes en todas las secciones. */

html.app-shell-ready .panel-card,
html.app-shell-ready .stat,
html.app-shell-ready .library-controls,
html.app-shell-ready .library-section,
html.app-shell-ready .task-controls,
html.app-shell-ready .task-results-head,
html.app-shell-ready .task-empty,
html.app-shell-ready .video-player-panel,
html.app-shell-ready .empty-state,
html.app-shell-ready .comments-card,
html.app-shell-ready .comment-form {
    border-color: var(--app-line);
    box-shadow: var(--app-shadow-soft);
}

html.app-shell-ready .panel-card,
html.app-shell-ready .stat {
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
}

html.app-shell-ready .stat {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

html.app-shell-ready .stat::before {
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, var(--app-blue), var(--app-purple));
    content: "";
}

html.app-shell-ready .stat:hover {
    box-shadow: var(--app-shadow);
    transform: translateY(-2px);
}

html.app-shell-ready .library-controls,
html.app-shell-ready .library-section,
html.app-shell-ready .task-controls,
html.app-shell-ready .task-results-head {
    border-radius: 24px;
    background: rgba(255, 255, 255, .91);
}

html.app-shell-ready .library-hero,
html.app-shell-ready .task-hero,
html.app-shell-ready .hero-videos {
    border-radius: 30px;
    box-shadow: 0 22px 48px rgba(35, 46, 96, .15);
}

/* Portada: aspecto de pantalla de bienvenida, sin mover su contenido. */

html.app-shell-ready .caja-bienvenida {
    border-color: rgba(255, 255, 255, .78);
    border-radius: 32px;
    box-shadow: 0 24px 58px rgba(31, 47, 83, .12);
}

html.app-shell-ready .acciones-portada .boton-portada,
html.app-shell-ready .inicio-acceso-card,
html.app-shell-ready .creaciones-acceso-link {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

html.app-shell-ready .acciones-portada .boton-portada:hover,
html.app-shell-ready .inicio-acceso-card:hover,
html.app-shell-ready .creaciones-acceso-link:hover {
    filter: saturate(1.08);
    box-shadow: 0 14px 28px rgba(31, 47, 83, .12);
    transform: translateY(-3px);
}

/* Perfil del estudiante: hero y accesos más próximos a una app. */

html.app-shell-ready .account-shell {
    width: min(1120px, calc(100% - 28px));
}

html.app-shell-ready .student-profile-hero {
    border: 1px solid rgba(255, 255, 255, .65);
    background:
        radial-gradient(circle at 95% 10%, rgba(49, 87, 213, .12), transparent 10rem),
        linear-gradient(135deg, #fff 0%, #f6f3ff 54%, #eef9ff 100%);
    box-shadow: 0 22px 50px rgba(37, 51, 91, .12);
}

html.app-shell-ready .student-quick-nav {
    border-color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
}

html.app-shell-ready .student-quick-link {
    min-height: 46px;
    border-radius: 14px;
}

/* Botones pequeños para preparar lecturas y tareas sin conexión. */

html.app-shell-ready .js-offline-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #d7def1;
    border-radius: 10px;
    color: #4f3db5;
    background: #f5f3ff;
    font: 800 .68rem/1.1 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

html.app-shell-ready .js-offline-save:hover,
html.app-shell-ready .js-offline-save:focus-visible {
    border-color: #a99ce5;
    color: #fff;
    background: linear-gradient(135deg, #7046d0, #3157d5);
    outline: none;
    transform: translateY(-1px);
}

html.app-shell-ready .js-offline-save.is-saved {
    border-color: #bfe7d6;
    color: #087257;
    background: #effbf6;
    cursor: default;
}

html.app-shell-ready .js-offline-save:disabled {
    cursor: wait;
    opacity: .7;
}

html.app-shell-ready .bib-portada-columna .bib-guardar-offline,
html.app-shell-ready .task-card .task-save-offline {
    width: 100%;
    margin-top: 8px;
}

/* Estado de conectividad y cola local. */

#offline-status {
    position: fixed;
    top: 78px;
    left: 50%;
    z-index: 100004;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(580px, calc(100vw - 28px));
    min-height: 44px;
    padding: 8px 10px 8px 13px;
    border: 1px solid #d8e1f2;
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    color: #3e4c68;
    box-shadow: 0 14px 36px rgba(25, 42, 77, .14);
    font: 800 .74rem/1.25 'DM Sans', system-ui, sans-serif;
    transform: translate(-50%, -8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

#offline-status.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

#offline-status[hidden] {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
}

#offline-status .offline-status-icon {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-blue), var(--app-purple));
}

#offline-status.is-offline {
    border-color: #f0d5a6;
    background: #fffaf0;
}

#offline-status.is-offline .offline-status-icon {
    background: linear-gradient(135deg, #d97706, #e39a18);
}

#offline-status.is-error {
    border-color: #f2c9d2;
    background: #fff5f7;
}

#offline-status.is-error .offline-status-icon {
    background: linear-gradient(135deg, #cf3151, #e24e69);
}

#offline-status .offline-status-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#offline-status .offline-status-copy strong,
#offline-status .offline-status-copy small {
    display: block;
}

#offline-status .offline-status-copy small {
    margin-top: 2px;
    color: #78869d;
    font-size: .67rem;
    font-weight: 600;
}

#offline-status .offline-status-action {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 9px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--app-blue);
    font: inherit;
    font-size: .66rem;
    cursor: pointer;
}

#offline-status .offline-status-action:disabled {
    cursor: wait;
    opacity: .65;
}

/* Navegación inferior fija y simétrica. Cada botón conserva su tamaño. */

@media (max-width: 991.98px) {
    html.app-shell-ready body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    html.app-shell-ready .mobile-bar {
        height: calc(82px + env(safe-area-inset-bottom)) !important;
        min-height: calc(82px + env(safe-area-inset-bottom)) !important;
        max-height: calc(82px + env(safe-area-inset-bottom)) !important;
        padding-top: 7px !important;
        background: rgba(255, 255, 255, .96) !important;
        border-top: 1px solid rgba(35, 49, 83, .10) !important;
        box-shadow: 0 -12px 34px rgba(35, 49, 83, .15) !important;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    html.app-shell-ready .mobile-bar > .app-link {
        height: 69px !important;
        min-height: 69px !important;
        max-height: 69px !important;
        padding: 4px 2px 3px !important;
        border-radius: 15px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    html.app-shell-ready .mobile-bar > .app-link .icon-container {
        flex-basis: 39px !important;
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        box-shadow: 0 7px 14px rgba(44, 57, 98, .10);
    }

    html.app-shell-ready .mobile-bar > .app-link.active {
        box-shadow: inset 0 0 0 1px rgba(49, 87, 213, .06);
    }

    html.app-shell-ready .mobile-bar > .app-link.active::after {
        bottom: 0 !important;
        height: 3px !important;
        left: 31% !important;
        right: 31% !important;
    }

    #offline-status {
        top: 73px;
        width: min(520px, calc(100vw - 20px));
        min-height: 42px;
        border-radius: 13px;
    }
}

@media (max-width: 560px) {
    html.app-shell-ready #encabezado .navbar {
        min-height: 61px;
    }

    html.app-shell-ready #encabezado .navbar .container {
        min-height: 52px;
    }

    html.app-shell-ready #encabezado .navbar-brand img {
        max-height: 38px !important;
    }

    html.app-shell-ready .account-shell {
        width: min(100% - 18px, 1120px);
    }

    html.app-shell-ready .student-profile-hero {
        border-radius: 22px;
    }

    html.app-shell-ready .student-quick-nav {
        border-radius: 17px;
    }

    #offline-status .offline-status-action {
        padding-inline: 8px;
        font-size: .61rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.app-shell-ready *,
    html.app-shell-ready *::before,
    html.app-shell-ready *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* V9: portada compacta, estado offline visible y navegación de aplicación. */

html.app-shell-ready #encabezado .navbar-brand {
    min-width: 0;
    gap: 8px;
    white-space: nowrap;
}

html.app-shell-ready .app-brand-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #e1ddfb;
    border-radius: 10px;
    color: #5634c4;
    background: linear-gradient(135deg, #f5f1ff, #eef5ff);
    font: 900 .66rem/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html.app-shell-ready .app-brand-label i {
    color: #3157d5;
    font-size: .82rem;
}

html.app-shell-ready .bienvenida-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    gap: clamp(20px, 3.5vw, 46px);
    padding: clamp(28px, 4vw, 46px);
}

html.app-shell-ready .bienvenida-visual {
    min-height: 362px !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    padding: 38px 12px 42px;
}

html.app-shell-ready .bienvenida-visual::before {
    inset: 9% 7% 8% !important;
}

html.app-shell-ready .bienvenida-video-wrap {
    width: 100%;
    min-height: 282px !important;
    height: min(33vw, 322px);
}

html.app-shell-ready .bienvenida-video {
    width: min(300px, 92%) !important;
    height: 100% !important;
    max-height: 322px;
}

html.app-shell-ready .bienvenida-visual .tarjeta-flotante {
    position: absolute !important;
    z-index: 3;
    width: max-content;
    max-width: min(190px, 78%);
    margin: 0 !important;
    padding: 9px 11px;
    border-radius: 13px;
    font-size: .72rem;
    box-shadow: 0 12px 24px rgba(31, 47, 83, .13);
}

html.app-shell-ready .bienvenida-visual .tarjeta-flotante--historia {
    top: 1px !important;
    left: 50% !important;
    transform: translateX(-50%);
}

html.app-shell-ready .bienvenida-visual .tarjeta-flotante--mundo {
    right: 50% !important;
    bottom: 2px !important;
    transform: translateX(50%);
}

html.app-shell-ready .bienvenida-visual .tarjeta-flotante--historia i,
html.app-shell-ready .bienvenida-visual .tarjeta-flotante--mundo i {
    width: 29px;
    height: 29px;
    border-radius: 9px;
}

html.app-shell-ready .inicio-offline-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    width: min(1120px, calc(100% - 28px));
    margin: 18px auto 0;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #cbd5ff;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(115deg, #293ba8, #6041d4 52%, #238ec2);
    box-shadow: 0 18px 34px rgba(49, 65, 161, .20);
}

html.app-shell-ready .inicio-offline-card::after {
    position: absolute;
    right: -38px;
    bottom: -68px;
    width: 170px;
    height: 170px;
    border: 22px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html.app-shell-ready .inicio-offline-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font-size: 1.25rem;
    animation: offlinePulse 2.8s ease-in-out infinite;
}

html.app-shell-ready .inicio-offline-copy,
html.app-shell-ready .inicio-offline-action {
    position: relative;
    z-index: 1;
}

html.app-shell-ready .inicio-offline-copy small {
    display: block;
    color: #dfe4ff;
    font: 900 .62rem/1.2 'DM Sans', system-ui, sans-serif;
    letter-spacing: .12em;
}

html.app-shell-ready .inicio-offline-copy h2 {
    margin: 3px 0 3px;
    color: #fff;
    font: 800 1rem/1.2 'Manrope', system-ui, sans-serif;
}

html.app-shell-ready .inicio-offline-copy p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .74rem;
    line-height: 1.45;
}

html.app-shell-ready .inicio-offline-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .13);
    font-size: .63rem;
    font-weight: 800;
}

html.app-shell-ready .inicio-offline-state::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #72f0b4;
    content: "";
}

html.app-shell-ready .inicio-offline-card.is-offline .inicio-offline-state::before {
    background: #ffd166;
}

html.app-shell-ready .inicio-offline-card.has-pending .inicio-offline-state::before {
    background: #fff;
    animation: offlinePulse 1.1s ease-in-out infinite;
}

html.app-shell-ready .inicio-offline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    color: #283a9c;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17, 25, 80, .16);
    font-size: .7rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

html.app-shell-ready .inicio-offline-action:hover,
html.app-shell-ready .inicio-offline-action:focus-visible {
    color: #283a9c;
    box-shadow: 0 11px 23px rgba(17, 25, 80, .23);
    text-decoration: none;
    transform: translateY(-2px);
}

/* Resumen superior del estudiante: ruta, puntos, barras y niveles. */

html.app-shell-ready .student-top-progress {
    position: relative;
    margin: 16px 0 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #d9d5fb;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff 0%, #f7f4ff 55%, #eff9ff 100%);
    box-shadow: 0 15px 34px rgba(37, 51, 91, .09);
}

html.app-shell-ready .student-top-progress::after {
    position: absolute;
    top: -64px;
    right: -35px;
    width: 160px;
    height: 160px;
    border: 18px solid rgba(112, 70, 208, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html.app-shell-ready .student-top-progress-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

html.app-shell-ready .student-top-kicker {
    color: #7046d0;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .14em;
}

html.app-shell-ready .student-top-progress h2 {
    margin: 3px 0 3px;
    color: #25314a;
    font: 800 1.12rem/1.2 'Manrope', system-ui, sans-serif;
}

html.app-shell-ready .student-top-progress-head p {
    margin: 0;
    color: #71809a;
    font-size: .75rem;
}

html.app-shell-ready .student-top-points {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 6px;
    padding: 9px 11px;
    border: 1px solid #f4df9f;
    border-radius: 13px;
    color: #9a6100;
    background: #fff8df;
}

html.app-shell-ready .student-top-points i { color: #f59e0b; }
html.app-shell-ready .student-top-points strong { font: 900 1.08rem/1 'Manrope', system-ui, sans-serif; }
html.app-shell-ready .student-top-points small { grid-column: 2; color: #a67523; font-size: .62rem; font-weight: 800; }

html.app-shell-ready .student-progress-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

html.app-shell-ready .student-progress-item {
    --progress-color: #3157d5;
    padding: 11px;
    border: 1px solid #e2e5f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
}

html.app-shell-ready .student-progress-item--reading { --progress-color: #16866d; }
html.app-shell-ready .student-progress-item--games { --progress-color: #7046d0; }
html.app-shell-ready .student-progress-item--tasks { --progress-color: #cf3151; }
html.app-shell-ready .student-progress-item--creations { --progress-color: #e39a18; }
html.app-shell-ready .student-progress-label { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
html.app-shell-ready .student-progress-label span { min-width: 0; color: #53627c; font-size: .69rem; font-weight: 900; }
html.app-shell-ready .student-progress-label i { margin-right: 3px; color: var(--progress-color); }
html.app-shell-ready .student-progress-label b { color: var(--progress-color); font-size: .72rem; }
html.app-shell-ready .student-progress-track { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e8ebf3; }
html.app-shell-ready .student-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--progress-color); transition: width .45s ease; }
html.app-shell-ready .student-progress-item > small { display: block; margin-top: 5px; color: #8490a6; font-size: .61rem; }

html.app-shell-ready .student-level-road {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 17px 5px 0;
}

html.app-shell-ready .student-level-road-line {
    position: absolute;
    top: 14px;
    right: 9%;
    left: 9%;
    height: 3px;
    border-radius: 99px;
    background: #e3e6f1;
}

html.app-shell-ready .student-level-stop {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #9aa4b8;
    text-align: center;
}

html.app-shell-ready .student-level-stop b {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e4e8f1;
    box-shadow: 0 0 0 1px #d8deeb;
    font-size: .67rem;
}

html.app-shell-ready .student-level-stop small { font-size: .59rem; font-weight: 800; white-space: nowrap; }
html.app-shell-ready .student-level-stop.is-current { color: #5e3ac5; }
html.app-shell-ready .student-level-stop.is-current b { color: #fff; background: linear-gradient(135deg, #7046d0, #3157d5); box-shadow: 0 0 0 3px #e2dafa, 0 5px 12px #7046d044; }
html.app-shell-ready .student-level-stop.is-passed { color: #16866d; }
html.app-shell-ready .student-level-stop.is-passed b { color: #fff; background: #16866d; box-shadow: 0 0 0 2px #d2f1e7; }

html.app-shell-ready .student-mini-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

html.app-shell-ready .student-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 8px 5px 5px;
    border: 1px solid #e6dcff;
    border-radius: 999px;
    color: #6438c4;
    background: #fbf9ff;
}

html.app-shell-ready .student-mini-badge > i {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #7046d0, #3157d5);
    font-size: .64rem;
}

html.app-shell-ready .student-mini-badge strong,
html.app-shell-ready .student-mini-badge small { font-size: .62rem; font-weight: 900; }
html.app-shell-ready .student-mini-badge--empty { color: #8792a8; border-color: #e1e6f0; background: #f8faff; }
html.app-shell-ready .student-mini-badge--empty > i { color: #7e8aa1; background: #e9edf5; }

html.app-shell-ready .student-quick-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 13px;
}

html.app-shell-ready .student-quick-link {
    min-height: 52px;
    padding-inline: 5px;
    font-size: .68rem;
}

html.app-shell-ready .student-quick-link--green i { background: #16866d; }
html.app-shell-ready .student-quick-link--violet i { background: #7046d0; }

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

@media (max-width: 820px) {
    html.app-shell-ready .bienvenida-grid { grid-template-columns: 1fr; padding: 28px 24px 22px; }
    html.app-shell-ready .bienvenida-visual { width: min(100%, 410px); min-height: 340px !important; margin: 0 auto; }
    html.app-shell-ready .bienvenida-video-wrap { height: 270px; min-height: 270px !important; }
    html.app-shell-ready .student-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.app-shell-ready .student-quick-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    html.app-shell-ready #encabezado .navbar-brand { gap: 5px; }
    html.app-shell-ready #encabezado .navbar-brand img { max-height: 36px !important; }
    html.app-shell-ready .app-brand-label { min-height: 26px; padding: 5px 6px; font-size: .57rem; letter-spacing: .02em; }
    html.app-shell-ready .app-brand-label i { font-size: .68rem; }
    html.app-shell-ready .bienvenida-grid { padding: 25px 15px 18px; }
    html.app-shell-ready .bienvenida-visual { min-height: 296px !important; padding: 30px 5px 34px; }
    html.app-shell-ready .bienvenida-video-wrap { height: 230px; min-height: 230px !important; }
    html.app-shell-ready .bienvenida-video { width: min(245px, 88%) !important; max-height: 230px; }
    html.app-shell-ready .bienvenida-visual .tarjeta-flotante { padding: 7px 8px; font-size: .63rem; }
    html.app-shell-ready .bienvenida-visual .tarjeta-flotante i { width: 24px; height: 24px; }
    html.app-shell-ready .inicio-offline-card { grid-template-columns: auto minmax(0, 1fr); width: min(100% - 18px, 560px); gap: 10px; padding: 13px; border-radius: 18px; }
    html.app-shell-ready .inicio-offline-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
    html.app-shell-ready .inicio-offline-copy h2 { font-size: .86rem; }
    html.app-shell-ready .inicio-offline-copy p { font-size: .66rem; }
    html.app-shell-ready .inicio-offline-action { grid-column: 1 / -1; width: 100%; min-height: 35px; font-size: .66rem; }
    html.app-shell-ready .student-top-progress { padding: 14px 12px; border-radius: 19px; }
    html.app-shell-ready .student-top-progress-head p { font-size: .68rem; }
    html.app-shell-ready .student-top-points { padding: 8px 9px; }
    html.app-shell-ready .student-progress-grid { gap: 7px; margin-top: 12px; }
    html.app-shell-ready .student-progress-item { padding: 9px 8px; }
    html.app-shell-ready .student-progress-label span { font-size: .63rem; }
    html.app-shell-ready .student-level-road { margin-inline: 0; gap: 1px; }
    html.app-shell-ready .student-level-stop small { font-size: .52rem; }
    html.app-shell-ready .student-level-stop b { width: 26px; height: 26px; }
    html.app-shell-ready .student-level-road-line { top: 13px; }
    html.app-shell-ready .student-quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px; }
    html.app-shell-ready .student-quick-link { min-height: 45px; font-size: .63rem; }
    html.app-shell-ready .student-quick-link:last-child { grid-column: 1 / -1; }
}

/* V40: encabezado compacto y accesos vivos sin repetir contenido. */

html.app-shell-ready #encabezado .app-header-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex: 0 0 auto;
    margin-left: 7px;
}

html.app-shell-ready #encabezado .app-header-connectivity {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ccefe0;
    border-radius: 11px;
    color: #16866d;
    background: #f0fcf7;
    font-size: .82rem;
    line-height: 1;
}

html.app-shell-ready #encabezado .app-header-connectivity-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22b878;
    box-shadow: 0 0 0 1px #bfe8d7;
}

html.app-shell-ready #encabezado .app-header-connectivity.is-offline,
html.app-shell-ready #encabezado .app-header-connectivity.is-limited {
    border-color: #f1dfb0;
    color: #ad7411;
    background: #fff9e9;
}

html.app-shell-ready #encabezado .app-header-connectivity.is-offline .app-header-connectivity-dot,
html.app-shell-ready #encabezado .app-header-connectivity.is-limited .app-header-connectivity-dot {
    background: #e2a832;
    box-shadow: 0 0 0 1px #f0d795;
}

html.app-shell-ready #encabezado .app-header-connectivity.has-pending:not(.is-offline):not(.is-limited) {
    border-color: #d7d0fb;
    color: #7046d0;
    background: #f7f4ff;
}

html.app-shell-ready #encabezado .app-header-connectivity.has-pending:not(.is-offline):not(.is-limited) .app-header-connectivity-dot {
    background: #7046d0;
    box-shadow: 0 0 0 1px #d7d0fb;
}

html.app-shell-ready #encabezado .navbar-toggler {
    padding: 3px !important;
    overflow: hidden;
    background: #f6f8ff;
    box-shadow: 0 6px 14px rgba(49, 87, 213, .10);
}

html.app-shell-ready #encabezado .app-menu-button {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #3157d5, #7046d0);
    font-size: 1rem;
    transition: transform .18s ease, filter .18s ease;
}

html.app-shell-ready #encabezado .navbar-toggler:hover .app-menu-button,
html.app-shell-ready #encabezado .navbar-toggler:focus-visible .app-menu-button {
    filter: saturate(1.18) brightness(1.05);
    transform: scale(1.05);
}

html.app-shell-ready #encabezado .navbar-toggler:focus-visible {
    outline: 3px solid rgba(112, 70, 208, .22);
    outline-offset: 2px;
}

html.app-shell-ready #encabezado .app-brand-label {
    justify-content: center;
    min-width: 132px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .76rem;
    letter-spacing: .045em;
}

html.app-shell-ready #encabezado .app-brand-label span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Acceso de producciones: una sola línea, con icono y botón claros. */

html.app-shell-ready .creaciones-acceso--compact {
    width: min(860px, calc(100% - 32px));
    margin: 2px auto 0;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-link {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    min-height: 62px;
    padding: 10px 13px;
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(22, 58, 80, .16);
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy {
    gap: 1px;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy small {
    font-size: .58rem;
    letter-spacing: .055em;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy strong {
    font-size: .93rem;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy em {
    display: none;
}

html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font-size: .68rem;
    font-weight: 900;
    white-space: nowrap;
}

/* Resumen del dashboard: reemplaza las tarjetas largas repetidas. */

html.app-shell-ready .student-dashboard-brief {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    padding: 12px 14px;
    border: 1px solid #e0e6f2;
    border-radius: 16px;
    color: #53627c;
    background: linear-gradient(110deg, #f7f9ff, #fbf8ff);
}

html.app-shell-ready .student-dashboard-brief-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3157d5, #7046d0);
    box-shadow: 0 7px 14px rgba(49, 87, 213, .2);
}

html.app-shell-ready .student-dashboard-brief > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

html.app-shell-ready .student-dashboard-brief strong {
    color: #263553;
    font-size: .79rem;
}

html.app-shell-ready .student-dashboard-brief small {
    color: #7c89a2;
    font-size: .65rem;
}

html.app-shell-ready .student-dashboard-brief-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #16866d;
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

html.app-shell-ready .student-quick-link {
    border-color: #e0e5f0;
    box-shadow: 0 5px 12px rgba(38, 53, 83, .05);
}

html.app-shell-ready .student-quick-link i {
    box-shadow: 0 5px 10px rgba(38, 53, 83, .14);
}

html.app-shell-ready .student-quick-link--green { color: #087257; background: #f0fcf7; border-color: #ccefe0; }
html.app-shell-ready .student-quick-link--violet { color: #5e3ac5; background: #f8f4ff; border-color: #e0d5fc; }
html.app-shell-ready .student-quick-link--purple { color: #6030bd; background: #f7f1ff; border-color: #e2d6ff; }
html.app-shell-ready .student-quick-link--red { color: #b42343; background: #fff3f6; border-color: #f4d3dc; }
html.app-shell-ready .student-quick-link--blue { color: #106b9a; background: #eff9ff; border-color: #cbeafa; }
html.app-shell-ready .student-quick-link--gold { color: #a56200; background: #fff9e9; border-color: #f1dfb0; }

/* Mensaje introductorio más corto para que la portada respire. */

html.app-shell-ready .caja-bienvenida .mensaje-docente {
    min-height: 0;
    padding: 15px 22px;
}

html.app-shell-ready .caja-bienvenida .mensaje-docente .texto-bienvenida {
    max-width: 760px;
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 560px) {
    html.app-shell-ready #encabezado .navbar-brand {
        gap: 6px;
        max-width: calc(100% - 111px);
    }

    html.app-shell-ready #encabezado .navbar-brand img {
        max-height: 34px !important;
    }

    html.app-shell-ready #encabezado .app-header-tools {
        gap: 5px;
        margin-left: auto;
    }

    html.app-shell-ready #encabezado .app-header-connectivity {
        width: 29px;
        height: 29px;
        border-radius: 10px;
        font-size: .74rem;
    }

    html.app-shell-ready #encabezado .navbar-toggler {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    html.app-shell-ready #encabezado .app-brand-label {
        min-width: 116px;
        min-height: 36px;
        padding: 7px 9px;
        font-size: .70rem;
    }

    html.app-shell-ready .creaciones-acceso--compact {
        width: calc(100% - 22px);
    }

    html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-link {
        gap: 8px;
        min-height: 56px;
        padding: 8px 9px;
        border-radius: 15px;
    }

    html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy small {
        display: none;
    }

    html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-copy strong {
        font-size: .76rem;
    }

    html.app-shell-ready .creaciones-acceso--compact .creaciones-acceso-button {
        min-height: 31px;
        padding: 6px 7px;
        font-size: .59rem;
    }

    html.app-shell-ready .student-dashboard-brief {
        align-items: flex-start;
        padding: 10px;
    }

    html.app-shell-ready .student-dashboard-brief small {
        font-size: .61rem;
    }

    html.app-shell-ready .student-dashboard-brief-state {
        align-self: center;
        font-size: 0;
    }

    html.app-shell-ready .student-dashboard-brief-state i {
        font-size: .85rem;
    }
}

/* V46: encabezado estable, modo sin conexión junto al menú y accesos cuadrados. */

html.app-shell-ready #encabezado .navbar > .container {
    min-width: 0;
}

@media (min-width: 992px) {
    html.app-shell-ready #encabezado .navbar > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    html.app-shell-ready #encabezado .navbar-brand { order: 1; }
    html.app-shell-ready #encabezado .navbar-collapse {
        order: 2;
        min-width: 0;
    }
    html.app-shell-ready #encabezado .app-header-tools {
        order: 3;
        margin-left: 12px;
    }
}

@media (max-width: 991.98px) {
    html.app-shell-ready #encabezado .navbar > .container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
    }

    html.app-shell-ready #encabezado .navbar-brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    html.app-shell-ready #encabezado .app-header-tools {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        white-space: nowrap;
    }

    html.app-shell-ready #encabezado .navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }
}

html.app-shell-ready #encabezado .app-header-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d7def1;
    border-radius: 11px;
    color: #3157d5;
    background: linear-gradient(135deg, #f5f3ff, #eef6ff);
    box-shadow: 0 6px 14px rgba(49, 87, 213, .10);
    cursor: pointer;
    font-size: .78rem;
    line-height: 1;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

html.app-shell-ready #encabezado .app-header-action:hover,
html.app-shell-ready #encabezado .app-header-action:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #3157d5, #7046d0);
    box-shadow: 0 9px 18px rgba(49, 87, 213, .20);
    outline: none;
    transform: translateY(-1px);
}

html.app-shell-ready #encabezado .app-header-action[hidden] {
    display: none !important;
}

html.app-shell-ready .inicio-accesos {
    width: min(1120px, calc(100% - 28px));
}

html.app-shell-ready .inicio-acceso-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 15px;
    border-radius: 20px;
}

html.app-shell-ready .inicio-acceso-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
}

html.app-shell-ready .inicio-acceso-arrow {
    margin-left: 0;
}

/* La animación de bienvenida gana presencia sin desplazar el texto. */

html.app-shell-ready .bienvenida-visual {
    min-height: 414px !important;
}

html.app-shell-ready .bienvenida-video-wrap {
    height: min(38vw, 370px) !important;
    min-height: 330px !important;
}

html.app-shell-ready .bienvenida-video {
    width: min(350px, 94%) !important;
    max-height: 370px;
}

@media (max-width: 820px) {
    html.app-shell-ready .bienvenida-visual {
        min-height: 400px !important;
    }

    html.app-shell-ready .bienvenida-video-wrap {
        height: 350px !important;
        min-height: 350px !important;
    }

    html.app-shell-ready .bienvenida-video {
        max-height: 350px;
    }
}

@media (max-width: 600px) {
    html.app-shell-ready .inicio-acceso-card {
        padding: 12px;
        border-radius: 17px;
    }

    html.app-shell-ready .inicio-acceso-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        font-size: .96rem;
    }
}

@media (max-width: 560px) {
    html.app-shell-ready #encabezado .app-header-action {
        width: 29px;
        height: 29px;
        border-radius: 10px;
        font-size: .72rem;
    }

    html.app-shell-ready .bienvenida-visual {
        min-height: 352px !important;
    }

    html.app-shell-ready .bienvenida-video-wrap {
        height: 310px !important;
        min-height: 310px !important;
    }

    html.app-shell-ready .bienvenida-video {
        width: min(285px, 90%) !important;
        max-height: 310px;
    }
}