@import url("./liquid-bento.css?v=20260930-darkrisk1");

/* =========================================================
   UNIPARCHADO PRO
   styles.css
========================================================= */


/* =========================================================
   1. VARIABLES GLOBALES
========================================================= */

:root {
    --bg-dark: #0a0f1d;
    --bg-soft: #111827;

    --nav-bg: rgba(15, 23, 42, 0.92);
    --card-bg: rgba(30, 41, 59, 0.52);
    --card-bg-strong: rgba(30, 41, 59, 0.78);

    --accent-cyan: #00f0ff;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;

    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.14);

    --text-main: #f8fafc;
    --text-muted: #94a3b8;

    --glass-border:
        1px solid rgba(255, 255, 255, 0.08);

    --glass-border-strong:
        1px solid rgba(255, 255, 255, 0.13);

    --nav-height: 78px;
}


/* =========================================================
   2. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family:
        "Plus Jakarta Sans",
        sans-serif;
}

html {
    width: 100%;
    min-height: 100%;
    background: var(--bg-dark);

    overflow-x: hidden;
}

body {
    width: 100%;

    min-height: 100dvh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background-color:
        var(--bg-dark);

    background-image:
        radial-gradient(
            circle at 15% 0%,
            rgba(0, 240, 255, 0.08) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 10%,
            rgba(16, 185, 129, 0.08) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 0%,
            #1e293b 0%,
            var(--bg-dark) 62%
        );

    color:
        var(--text-main);
}


/*
    Solo reservamos espacio inferior
    cuando realmente está visible la navegación.
*/

body.nav-visible {
    padding-bottom:
        calc(
            var(--nav-height)
            + env(safe-area-inset-bottom)
        );
}


/* =========================================================
   3. TIPOGRAFÍA
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--text-main);
}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

p {
    line-height: 1.5;
}

a {
    color:
        var(--accent-cyan);

    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =========================================================
   4. UTILIDADES
========================================================= */

.glass-card {
    background:
        var(--card-bg);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border:
        var(--glass-border);

    border-radius:
        18px;

    padding:
        1.5rem;

    box-shadow:
        0 10px 38px
        rgba(0, 0, 0, 0.24);
}


.muted-text {
    color:
        var(--text-muted);

    line-height:
        1.5;
}


.full-width {
    width:
        100%;
}


.mt-1 {
    margin-top:
        1rem;
}


.brand-logo {
    display:
        block;

    width:
        min(220px, 68vw);

    height:
        auto;

    margin:
        0 auto 1rem;
}


.brand-logo-inline {
    margin-top:
        1.15rem;
}


.brand-logo-register {
    width:
        min(200px, 60vw);

    margin-bottom:
        0.85rem;
}


.center-screen {
    width:
        100%;

    min-height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.form-stack {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


.brand-title {
    margin-bottom:
        0.5rem;

    color:
        var(--accent-cyan);

    text-align:
        center;
}


.brand-subtitle {
    margin-bottom:
        2rem;

    color:
        var(--text-muted);

    text-align:
        center;
}


/* =========================================================
   5. VISTAS
========================================================= */

.view {
    display:
        none;

    animation:
        fadeIn
        0.28s
        ease;
}


.view.active {
    display:
        block;
}


.view.hidden {
    display:
        none
        !important;
}


@keyframes fadeIn {
    from {
        opacity:
            0;

        transform:
            translateY(8px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   6. LAYOUT GENERAL
========================================================= */

.app-container {
    width:
        100%;

    max-width:
        940px;

    margin:
        0 auto;

    padding:
        1.5rem;
}


.app-header {
    width:
        100%;

    margin-bottom:
        2rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    flex-wrap:
        wrap;
}


/* =========================================================
   7. SPLASH
========================================================= */

.splash-screen {
    width:
        100%;

    min-height:
        100dvh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1.5rem;

    position:
        relative;

    overflow:
        hidden;
}


.splash-card {
    width:
        100%;

    max-width:
        430px;

    position:
        relative;

    z-index:
        2;

    padding:
        2rem;

    text-align:
        center;
}


.splash-card h1 {
    margin-bottom:
        0.75rem;

    font-size:
        2.15rem;

    color:
        var(--accent-cyan);
}


.splash-card p {
    color:
        var(--text-muted);
}


.splash-logo {
    width:
        112px;

    height:
        112px;

    margin:
        0 auto 1.15rem;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    animation:
        floatLogo
        2.4s
        ease-in-out
        infinite;
}


.splash-logo img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        drop-shadow(0 10px 24px rgba(0, 240, 255, 0.10));
}


.splash-progress {
    width:
        100%;

    height:
        9px;

    margin:
        1.5rem auto 1rem;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.11);
}


.splash-progress-bar {
    width:
        42%;

    height:
        100%;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent-cyan),
            var(--accent-emerald)
        );

    animation:
        loadingMove
        1.2s
        infinite
        ease-in-out;
}


.splash-hint {
    margin-top:
        0.8rem;

    font-size:
        0.82rem;
}


.splash-orb {
    position:
        absolute;

    border-radius:
        999px;

    filter:
        blur(12px);

    opacity:
        0.55;

    pointer-events:
        none;
}


.splash-orb-one {
    width:
        260px;

    height:
        260px;

    top:
        12%;

    left:
        8%;

    background:
        rgba(0, 240, 255, 0.12);

    animation:
        orbMoveOne
        7s
        ease-in-out
        infinite;
}


.splash-orb-two {
    width:
        240px;

    height:
        240px;

    right:
        10%;

    bottom:
        10%;

    background:
        rgba(16, 185, 129, 0.11);

    animation:
        orbMoveTwo
        8s
        ease-in-out
        infinite;
}


@keyframes loadingMove {
    0% {
        transform:
            translateX(-130%);
    }

    50% {
        transform:
            translateX(85%);
    }

    100% {
        transform:
            translateX(250%);
    }
}


@keyframes floatLogo {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


@keyframes orbMoveOne {
    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(25px, 18px);
    }
}


@keyframes orbMoveTwo {
    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-22px, -16px);
    }
}


/* =========================================================
   8. INPUTS
========================================================= */

input,
select,
textarea {
    width:
        100%;

    padding:
        13px 15px;

    border:
        var(--glass-border);

    border-radius:
        10px;

    outline:
        none;

    background:
        rgba(15, 23, 42, 0.64);

    color:
        var(--text-main);

    font-size:
        1rem;

    transition:
        border-color
        0.25s,
        box-shadow
        0.25s,
        background
        0.25s;
}


input::placeholder,
textarea::placeholder {
    color:
        rgba(148, 163, 184, 0.72);
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--accent-cyan);

    box-shadow:
        0 0 0 3px
        rgba(0, 240, 255, 0.08);
}


/*
    Corrige Chrome autofill blanco.
*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color:
        var(--text-main)
        !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #111827
        inset
        !important;

    box-shadow:
        0 0 0 1000px
        #111827
        inset
        !important;

    caret-color:
        var(--text-main);

    border:
        var(--glass-border);

    transition:
        background-color
        9999s
        ease-out;
}


.input-row {
    display:
        flex;

    gap:
        10px;

    margin-top:
        10px;
}


/* =========================================================
   9. BOTONES
========================================================= */

button {
    cursor:
        pointer;

    border:
        none;

    border-radius:
        10px;

    font-weight:
        700;

    transition:
        transform
        0.18s ease,
        filter
        0.18s ease,
        background
        0.18s ease,
        border-color
        0.18s ease;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;
}


button:disabled {
    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none
        !important;
}


.btn-primary {
    padding:
        13px 20px;

    background:
        var(--accent-cyan);

    color:
        var(--bg-dark);
}


.btn-primary:hover {
    filter:
        brightness(1.06);
}


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


.btn-secondary {
    width:
        100%;

    padding:
        13px;

    border:
        var(--glass-border);

    background:
        rgba(255, 255, 255, 0.09);

    color:
        var(--text-main);
}


.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.13);
}


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


.btn-icon {
    padding:
        7px;

    background:
        transparent;

    color:
        white;

    font-size:
        1.5rem;
}


.icon-button {
    min-width:
        48px;
}


.btn-danger {
    padding:
        10px 14px;

    border:
        1px solid
        rgba(239, 68, 68, 0.18);

    border-radius:
        9px;

    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.btn-danger:hover {
    background:
        rgba(239, 68, 68, 0.22);
}


.btn-icon-danger {
    padding:
        8px;

    background:
        transparent;

    color:
        #ff6b6b;

    font-size:
        1.2rem;
}


.link-button {
    display:
        inline;

    padding:
        0;

    background:
        transparent;

    color:
        var(--accent-cyan);

    font:
        inherit;

    font-weight:
        700;
}


.link-button:hover {
    text-decoration:
        underline;
}


/* =========================================================
   10. LOGIN
========================================================= */

#view-auth {
    width:
        100%;
}


#view-auth .app-container {
    width:
        100%;

    min-height:
        100dvh;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.auth-card {
    width:
        100%;

    max-width:
        460px;

    margin:
        0 auto;

    padding:
        30px;
}


.auth-extra-links {
    margin-top:
        1.25rem;

    text-align:
        center;
}


.auth-extra-links a {
    color:
        var(--accent-cyan);

    font-size:
        0.9rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.auth-extra-links a:hover {
    text-decoration:
        underline;
}


/* =========================================================
   11. REGISTRO
========================================================= */

#view-register {
    width:
        100%;
}


.register-container {
    width:
        100%;

    min-height:
        100dvh;

    padding:
        28px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.register-card {
    width:
        100%;

    max-width:
        540px;

    padding:
        30px;

    margin:
        0 auto;
}


.register-header {
    margin-bottom:
        24px;

    text-align:
        center;
}


.register-header h1 {
    margin:
        0 0 8px;

    color:
        var(--accent-cyan);
}


.register-back {
    width:
        auto;

    margin-bottom:
        20px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor:
        pointer;
}


.register-back:hover {
    color:
        var(--accent-cyan);
}


.register-login-text {
    margin-top:
        20px;

    color:
        var(--text-muted);

    text-align:
        center;
}


/* =========================================================
   12. PAYWALL
========================================================= */

#view-paywall {
    width:
        100%;
}


#view-paywall .app-container {
    width:
        100%;

    min-height:
        100dvh;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.paywall-card {
    width:
        100%;

    max-width:
        540px;

    margin:
        0 auto;

    border-left:
        4px solid
        var(--accent-amber);

    text-align:
        center;
}


.paywall-card h2 {
    margin-bottom:
        1rem;

    color:
        var(--accent-amber);
}


.paywall-card p {
    margin-bottom:
        1rem;
}


/* =========================================================
   13. NAVEGACIÓN
========================================================= */

.glass-nav {
    width:
        100%;

    min-height:
        var(--nav-height);

    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        1000;

    padding:
        0.75rem 0.4rem
        calc(
            0.75rem
            + env(safe-area-inset-bottom)
        );

    display:
        flex;

    justify-content:
        space-around;

    align-items:
        center;

    background:
        var(--nav-bg);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    border-top:
        var(--glass-border);
}


.nav-btn {
    min-width:
        72px;

    padding:
        0.25rem;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        0.73rem;
}


.nav-btn i {
    margin-bottom:
        3px;

    font-size:
        1.45rem;
}


.nav-btn.active {
    color:
        var(--accent-cyan);
}


/* =========================================================
   14. RESUMEN DE SEMESTRE
========================================================= */

.semester-overview {
    margin-bottom:
        24px;
}


.semester-overview-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.semester-overview-label {
    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.semester-overview-title-row {
    margin-top:
        5px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.semester-overview-title-row h2 {
    margin:
        0;
}


.semester-current-badge {
    padding:
        5px 9px;

    border:
        1px solid
        rgba(0, 240, 255, 0.28);

    border-radius:
        999px;

    background:
        rgba(0, 240, 255, 0.10);

    color:
        var(--accent-cyan);

    font-size:
        0.72rem;

    font-weight:
        700;
}


.semester-navigation {
    display:
        flex;

    gap:
        8px;
}


.semester-nav-button {
    width:
        auto;

    min-width:
        116px;
}


.semester-nav-button:disabled {
    opacity:
        0.38;

    cursor:
        not-allowed;
}


.semester-overview .semester-summary {
    margin-top:
        20px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        transparent;
}


.semester-summary {
    width:
        100%;

    margin-top:
        1rem;

    display:
        flex;

    justify-content:
        space-around;

    gap:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.66),
            rgba(15, 23, 42, 0.86)
        );
}


.summary-col {
    min-width:
        0;

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    align-items:
        center;
}


.summary-col .label {
    color:
        var(--text-muted);

    font-size:
        0.78rem;

    letter-spacing:
        1px;

    text-align:
        center;

    text-transform:
        uppercase;
}


.summary-col .value {
    font-size:
        1.85rem;

    font-weight:
        700;
}


.summary-col .value.accent {
    color:
        var(--accent-cyan);
}


/* =========================================================
   15. SEMESTRES
========================================================= */

.semester-section {
    margin:
        24px 0;
}


.semester-header {
    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.semester-header h2 {
    margin-bottom:
        4px;
}


.semester-add-button {
    width:
        auto;

    min-width:
        160px;
}


.semester-tabs {
    width:
        100%;

    padding:
        4px 2px 10px;

    display:
        flex;

    gap:
        10px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0, 240, 255, 0.28)
        transparent;
}


.semester-tabs::-webkit-scrollbar {
    height:
        5px;
}


.semester-tabs::-webkit-scrollbar-track {
    background:
        transparent;
}


.semester-tabs::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(0, 240, 255, 0.25);
}


.semester-tab {
    flex-shrink:
        0;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.04);

    color:
        var(--text-muted);

    font-family:
        inherit;

    font-weight:
        700;

    white-space:
        nowrap;
}


.semester-tab:hover {
    border-color:
        rgba(0, 240, 255, 0.30);

    color:
        var(--text-main);
}


.semester-tab.active {
    border-color:
        rgba(0, 240, 255, 0.35);

    background:
        rgba(0, 240, 255, 0.12);

    color:
        var(--accent-cyan);
}


/* =========================================================
   16. AGREGAR MATERIA
========================================================= */

.add-course-container {
    margin-top:
        18px;
}


.add-course-container > input {
    margin-bottom:
        4px;
}


/* =========================================================
   17. MATERIAS
========================================================= */

.courses-grid {
    margin-top:
        2rem;

    display:
        grid;

    gap:
        15px;
}


.course-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    transition:
        transform
        0.2s,
        border-color
        0.2s;
}


.course-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0, 240, 255, 0.18);
}


.course-click-area {
    min-width:
        0;

    flex:
        1;

    cursor:
        pointer;
}


.course-click-area h3 {
    margin:
        0;

    overflow-wrap:
        anywhere;

    color:
        var(--accent-cyan);

    font-size:
        1.1rem;
}


.course-click-area p {
    margin:
        5px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.85rem;
}


/* =========================================================
   18. NOTAS / PREDICCIÓN
========================================================= */

.prediction-box {
    margin-bottom:
        2rem;

    border-left:
        4px solid
        var(--accent-amber);

    transition:
        border-color
        0.25s ease;
}


.ai-stats {
    margin-bottom:
        10px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        8px;

    flex-wrap:
        wrap;

    color:
        var(--text-muted);

    font-size:
        0.85rem;
}


#ai-prediction {
    color:
        var(--accent-amber);

    font-size:
        1.1rem;

    font-weight:
        700;

    transition:
        color
        0.25s ease;
}


/*
    Nombre | % | Nota | Guardar | Eliminar
*/

.grades-header {
    display:
        grid;

    grid-template-columns:
        minmax(130px, 2fr)
        minmax(70px, 1fr)
        minmax(70px, 1fr)
        96px;

    gap:
        10px;

    padding:
        0 10px;

    margin-bottom:
        10px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;
}


.grade-row {
    display:
        grid;

    grid-template-columns:
        minmax(130px, 2fr)
        minmax(70px, 1fr)
        minmax(70px, 1fr)
        44px
        44px;

    gap:
        10px;

    margin-bottom:
        10px;

    align-items:
        center;
}


.grade-row input {
    min-width:
        0;

    padding:
        10px;

    font-size:
        0.94rem;
}


.grade-save-button {
    width:
        44px;

    min-width:
        44px;

    height:
        44px;

    padding:
        0;
}


.grade-delete-button {
    width:
        44px;

    min-width:
        44px;

    height:
        44px;

    padding:
        0;

    grid-column:
        5;
}


/* =========================================================
   18.1 ESTADO / EDICIÓN DE MATERIA
========================================================= */

.course-card-title-row {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.course-status-badge {
    padding:
        5px 9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px solid
        rgba(148, 163, 184, 0.22);

    border-radius:
        999px;

    background:
        rgba(148, 163, 184, 0.08);

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        700;
}


.course-status-badge.status-cursando {
    border-color:
        rgba(0, 240, 255, 0.24);

    background:
        rgba(0, 240, 255, 0.08);

    color:
        var(--accent-cyan);
}


.course-status-badge.status-aprobada {
    border-color:
        rgba(16, 185, 129, 0.28);

    background:
        rgba(16, 185, 129, 0.10);

    color:
        #6ee7b7;
}


.course-status-badge.status-perdida {
    border-color:
        rgba(248, 113, 113, 0.28);

    background:
        rgba(248, 113, 113, 0.10);

    color:
        #fca5a5;
}


.course-status-badge.status-retirada {
    border-color:
        rgba(251, 191, 36, 0.28);

    background:
        rgba(251, 191, 36, 0.10);

    color:
        #fcd34d;
}


.course-settings-card {
    margin-bottom:
        1.25rem;
}


.course-settings-header,
.grades-section-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        1rem;
}


.course-settings-header h2,
.grades-section-header h2 {
    margin:
        0 0 4px;

    font-size:
        1.05rem;
}


.course-settings-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


.course-settings-grid label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    font-weight:
        700;
}


.course-save-button {
    margin-top:
        14px;
}


.prediction-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


.prediction-item {
    padding:
        12px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.025);
}


.prediction-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

    font-size:
        0.76rem;
}


#pass-prediction,
#ai-prediction {
    margin:
        0;

    font-size:
        0.95rem;

    line-height:
        1.45;
}


#pass-prediction {
    color:
        var(--accent-cyan);
}


.grades-section-header {
    margin-top:
        1.5rem;
}


.grades-section-header .btn-secondary {
    width:
        auto;

    flex-shrink:
        0;
}


/* =========================================================
   19. ESTADÍSTICAS
========================================================= */

.chart-container {
    width:
        100%;

    height:
        360px;

    position:
        relative;
}


/* =========================================================
   20. CUENTA
========================================================= */

.account-grid {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;
}


.account-profile-card {
    text-align:
        center;
}


.account-avatar {
    width:
        92px;

    height:
        92px;

    margin:
        0 auto 18px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border:
        2px solid
        rgba(148, 163, 184, 0.22);

    border-radius:
        50%;

    background:
        rgba(15, 23, 42, 0.24);

    box-shadow:
        0 10px 28px rgba(2, 8, 23, 0.18);
}


.account-avatar span {
    font-size:
        2rem;

    font-weight:
        700;

    color:
        var(--accent-cyan);
}


.account-profile-card h2 {
    margin-bottom:
        5px;
}


.account-details-card h3 {
    margin-bottom:
        8px;
}


.account-detail {
    width:
        100%;

    min-height:
        48px;

    padding:
        14px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.account-detail:last-child {
    border-bottom:
        none;
}


.account-detail span {
    flex-shrink:
        0;

    color:
        var(--text-muted);
}


.account-detail strong {
    overflow-wrap:
        anywhere;

    text-align:
        right;
}


.danger-zone {
    border:
        1px solid
        rgba(239, 68, 68, 0.20);
}


.danger-zone h3 {
    margin-bottom:
        8px;

    color:
        #fca5a5;
}


.danger-zone p {
    margin-bottom:
        18px;
}


/*
    Compatibilidad con el account antiguo.
*/

.account-card {
    display:
        flex;

    flex-direction:
        column;

    gap:
        1.1rem;
}


.account-row {
    padding-bottom:
        1rem;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.account-row span {
    display:
        block;

    margin-bottom:
        0.35rem;

    color:
        var(--text-muted);
}


.account-row strong {
    font-size:
        1.08rem;
}


.info-box {
    padding:
        1rem;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    border:
        1px solid
        rgba(0, 240, 255, 0.12);

    border-radius:
        14px;

    background:
        rgba(0, 240, 255, 0.06);

    color:
        var(--text-muted);

    line-height:
        1.5;
}


.info-box i {
    margin-top:
        2px;

    color:
        var(--accent-cyan);

    font-size:
        1.25rem;
}


/* =========================================================
   21. ESTADOS VACÍOS
========================================================= */

.empty-state {
    grid-column:
        1 / -1;

    padding:
        2rem 1rem;

    color:
        var(--text-muted);

    text-align:
        center;
}


.empty-state i {
    margin-bottom:
        0.6rem;

    color:
        var(--accent-cyan);

    font-size:
        2.4rem;
}


.empty-state h3 {
    margin-bottom:
        0.4rem;

    color:
        var(--text-main);
}


.empty-state.compact {
    margin:
        1rem 0;

    border:
        var(--glass-border);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.035);
}


/* =========================================================
   22. PANTALLA PROCESANDO PAGO
========================================================= */

#view-payment-processing {
    width:
        100%;

    min-height:
        100dvh;

    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


#view-payment-processing .app-container {
    width:
        100%;

    max-width:
        none;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.payment-processing-card {
    width:
        100%;

    max-width:
        460px;

    margin:
        0;

    padding:
        32px;

    text-align:
        center;
}


.payment-processing-icon {
    width:
        68px;

    height:
        68px;

    margin:
        0 auto 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(0, 240, 255, 0.28);

    border-radius:
        50%;

    background:
        rgba(0, 240, 255, 0.08);
}


.payment-processing-icon i {
    color:
        var(--accent-cyan);

    font-size:
        30px;
}


.payment-processing-card h1 {
    margin:
        0 0 12px;

    font-size:
        clamp(
            1.6rem,
            4vw,
            2rem
        );
}


.payment-processing-card > .muted-text {
    margin:
        0;

    line-height:
        1.6;
}


.payment-loader {
    width:
        46px;

    height:
        46px;

    margin:
        30px auto;
}


.payment-loader-circle {
    width:
        100%;

    height:
        100%;

    border:
        4px solid
        rgba(255, 255, 255, 0.12);

    border-top-color:
        var(--accent-cyan);

    border-radius:
        50%;

    animation:
        payment-spin
        0.8s
        linear
        infinite;
}


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


.payment-status-box {
    width:
        100%;

    margin:
        0;

    padding:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.035);

    text-align:
        left;
}


.payment-status-box > i {
    flex-shrink:
        0;

    color:
        var(--accent-cyan);

    font-size:
        25px;
}


.payment-status-box strong {
    display:
        block;

    margin-bottom:
        3px;
}


.payment-status-box p {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.85rem;
}


.payment-processing-hint {
    margin:
        20px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.5;
}


#payment-retry-button {
    width:
        100%;

    margin-top:
        18px;
}


.payment-processing-success
.payment-loader {
    display:
        none;
}


.payment-processing-success
.payment-processing-icon {
    border-color:
        rgba(16, 185, 129, 0.35);

    background:
        rgba(16, 185, 129, 0.10);
}


.payment-processing-success
.payment-processing-icon i {
    color:
        var(--accent-emerald);
}


/* =========================================================
   23. TOASTS
========================================================= */

#toast-container {
    position:
        fixed;

    top:
        max(18px, calc(18px + env(safe-area-inset-top)));

    right:
        18px;

    z-index:
        2000;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    pointer-events:
        none;
}


.toast {
    min-width:
        260px;

    max-width:
        360px;

    padding:
        13px 14px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    border:
        var(--glass-border);

    border-radius:
        14px;

    background:
        rgba(15, 23, 42, 0.96);

    color:
        var(--text-main);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.28);

    animation:
        toastIn
        0.25s
        ease;

    pointer-events:
        auto;
}


.toast i {
    margin-top:
        1px;

    font-size:
        1.2rem;
}


.toast-success i {
    color:
        var(--accent-emerald);
}


.toast-error i {
    color:
        var(--danger);
}


.toast-warning i {
    color:
        var(--accent-amber);
}


.toast-info i {
    color:
        var(--accent-cyan);
}


.toast-hide {
    animation:
        toastOut
        0.25s
        ease
        forwards;
}


@keyframes toastIn {
    from {
        opacity:
            0;

        transform:
            translateX(16px);
    }

    to {
        opacity:
            1;

        transform:
            translateX(0);
    }
}


@keyframes toastOut {
    from {
        opacity:
            1;

        transform:
            translateX(0);
    }

    to {
        opacity:
            0;

        transform:
            translateX(16px);
    }
}


/* =========================================================
   24. COLORES DINÁMICOS
========================================================= */

.text-success {
    color:
        var(--accent-emerald)
        !important;
}


.text-warning {
    color:
        var(--accent-amber)
        !important;
}


.text-danger {
    color:
        var(--danger)
        !important;
}


.border-success {
    border-left-color:
        var(--accent-emerald)
        !important;
}


.border-danger {
    border-left-color:
        var(--danger)
        !important;
}


/* =========================================================
   25. LINKS LEGALES
========================================================= */

.legal-links {
    margin-top:
        1.5rem;

    display:
        flex;

    justify-content:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;

    font-size:
        0.82rem;
}


.legal-links a {
    color:
        var(--text-muted);

    text-decoration:
        none;
}


.legal-links a:hover {
    color:
        var(--accent-cyan);

    text-decoration:
        none;
}


/* =========================================================
   26. PÁGINAS LEGALES
========================================================= */

.legal-page {
    padding-top:
        2rem;

    padding-bottom:
        4rem;
}


.legal-card {
    max-width:
        820px;

    margin:
        0 auto;
}


.legal-card h1 {
    margin-top:
        1.5rem;

    margin-bottom:
        0.7rem;

    color:
        var(--text-main);
}


.legal-card h2 {
    margin-top:
        2rem;

    margin-bottom:
        0.7rem;

    color:
        var(--accent-cyan);

    font-size:
        1.15rem;
}


.legal-card p {
    margin-bottom:
        1rem;

    color:
        var(--text-main);

    line-height:
        1.7;
}


.legal-card .muted-text {
    color:
        var(--text-muted);
}


.legal-card ul {
    margin:
        0.5rem 0
        1rem 1.3rem;

    color:
        var(--text-main);

    line-height:
        1.7;
}


.legal-card li {
    margin-bottom:
        0.45rem;
}


.legal-card a {
    color:
        var(--accent-cyan);

    text-decoration:
        none;
}


.legal-card a:hover {
    text-decoration:
        underline;
}


.legal-back-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text-muted)
        !important;

    font-weight:
        700;
}


.legal-back-link:hover {
    color:
        var(--accent-cyan)
        !important;

    text-decoration:
        none
        !important;
}


.support-email {
    padding:
        0.9rem 1rem;

    display:
        inline-flex;

    border:
        1px solid
        rgba(0, 240, 255, 0.16);

    border-radius:
        12px;

    background:
        rgba(0, 240, 255, 0.10);

    font-weight:
        700;
}


/* =========================================================
   27. RESPONSIVE - TABLET
========================================================= */

@media (
    max-width: 720px
) {

    .semester-overview-header {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .semester-navigation {
        width:
            100%;
    }


    .semester-nav-button {
        flex:
            1;

        min-width:
            0;
    }


    .semester-overview .semester-summary {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .account-grid {
        grid-template-columns:
            1fr;
    }


    .semester-header {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .semester-add-button {
        width:
            100%;
    }


    .register-card {
        padding:
            24px 20px;
    }


    .auth-card {
        padding:
            24px 20px;
    }


    .payment-processing-card {
        padding:
            26px 22px;
    }
}


/* =========================================================
   28. RESPONSIVE - MÓVIL
========================================================= */

@media (
    max-width: 640px
) {

    .app-container {
        padding:
            1rem;
    }


    .glass-card {
        padding:
            1.15rem;
    }


    h1 {
        font-size:
            1.65rem;
    }


    .splash-card h1 {
        font-size:
            1.9rem;
    }


    .input-row {
        flex-direction:
            column;
    }


    #view-auth .app-container,
    #view-paywall .app-container {
        padding:
            16px;

        padding-top:
            max(16px, calc(16px + env(safe-area-inset-top)));
    }


    .register-container {
        padding:
            16px;

        padding-top:
            max(16px, calc(16px + env(safe-area-inset-top)));
    }


    .auth-card,
    .register-card {
        border-radius:
            16px;
    }


    .semester-summary {
        gap:
            10px;
    }


    .summary-col .label {
        font-size:
            0.68rem;
    }


    .summary-col .value {
        font-size:
            1.5rem;
    }


    /*
       En móvil ponemos las notas
       en una cuadrícula más compacta.
    */

    .grades-header {
        display:
            none;
    }


    .grade-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(72px, 0.42fr)
            minmax(72px, 0.42fr)
            42px
            42px;

        gap:
            6px;
    }


    .grade-row input {
        padding:
            9px 8px;

        font-size:
            0.82rem;
    }


    .grade-save-button,
    .grade-delete-button {
        width:
            42px;

        min-width:
            42px;

        height:
            42px;
    }


    #toast-container {
        top:
            max(12px, calc(12px + env(safe-area-inset-top)));

        left:
            12px;

        right:
            12px;
    }


    .toast {
        width:
            100%;

        min-width:
            0;

        max-width:
            none;
    }


    .nav-btn {
        min-width:
            60px;

        font-size:
            0.68rem;
    }


    .nav-btn i {
        font-size:
            1.32rem;
    }


    #view-payment-processing {
        padding:
            16px;
    }


    .payment-processing-card {
        padding:
            24px 20px;
    }


    .account-detail {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;
    }


    .account-detail strong {
        text-align:
            left;
    }
}


/* =========================================================
   29. RESPONSIVE - MÓVIL PEQUEÑO
========================================================= */

@media (
    max-width: 470px
) {

    .grade-row {
        grid-template-columns:
            1fr 1fr;

        padding:
            12px;

        border:
            var(--glass-border);

        border-radius:
            12px;

        background:
            rgba(255, 255, 255, 0.025);
    }


    .grade-name {
        grid-column:
            1 / -1;
    }


    .grade-percentage {
        grid-column:
            1;
    }


    .grade-score {
        grid-column:
            2;
    }


    .grade-save-button {
        width:
            100%;

        grid-column:
            1;
    }


    .grade-delete-button {
        width:
            100%;

        grid-column:
            2;
    }


    .semester-summary {
        flex-direction:
            column;
    }


    .semester-overview .semester-summary {
        grid-template-columns:
            1fr;
    }


    .summary-col {
        padding:
            6px 0;
    }


    .payment-status-box {
        align-items:
            flex-start;
    }


    .legal-links {
        gap:
            10px;
    }
}
/* Ajustes de las nuevas herramientas académicas */
@media (max-width: 640px) {
    .course-settings-grid,
    .prediction-grid {
        grid-template-columns: 1fr;
    }

    .course-settings-header,
    .grades-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .course-settings-header .course-status-badge {
        align-self: flex-start;
    }

    .course-save-button,
    .grades-section-header .btn-secondary {
        width: 100%;
    }
}

/* =========================================================
   30. ANALÍTICAS ACADÉMICAS
========================================================= */

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.analytics-metric-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.analytics-metric-label {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.analytics-metric-value {
    font-size: 2rem;
    line-height: 1;
}

.analytics-metric-value.accent {
    color: var(--accent-cyan);
}

.analytics-metric-help {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.analytics-progress-card {
    justify-content: center;
}

.analytics-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.analytics-progress-header strong {
    color: var(--accent-emerald);
}

.goal-progress-track {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.goal-progress-bar {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-emerald));
    transition: width 0.25s ease;
}

.analytics-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    gap: 18px;
    margin-bottom: 18px;
}

.analytics-section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.goal-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.goal-setting-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.goal-setting-block label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.goal-setting-block button {
    margin-top: 4px;
}

.goal-result-box {
    min-height: 56px;
    padding: 11px 12px;
    border: var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.comparison-stat-list {
    display: grid;
    gap: 12px;
}

.comparison-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.comparison-stat:last-child {
    border-bottom: 0;
}

.comparison-stat span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.comparison-stat strong {
    text-align: right;
}

.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.analytics-chart-card {
    min-width: 0;
}

.analytics-distribution-card {
    grid-column: 1 / -1;
}

.chart-container-compact {
    max-width: 520px;
    margin: 0 auto;
}

.analytics-lists-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-ranking-list {
    display: grid;
    gap: 9px;
}

.analytics-ranking-item {
    width: 100%;
    padding: 12px;
    border: var(--glass-border);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.analytics-ranking-item:hover {
    background: rgba(255, 255, 255, 0.055);
}

.analytics-ranking-position {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 240, 255, 0.1);
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: 700;
}

.analytics-ranking-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.analytics-ranking-main strong,
.analytics-ranking-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-ranking-main small {
    color: var(--text-muted);
}

.analytics-ranking-value {
    max-width: 220px;
    color: var(--accent-emerald);
    font-weight: 700;
    text-align: right;
}

.analytics-ranking-value.risk {
    color: var(--accent-amber);
    font-size: 0.78rem;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .analytics-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analytics-two-column,
    .analytics-lists-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .analytics-summary-grid,
    .analytics-charts-grid,
    .goal-settings-grid {
        grid-template-columns: 1fr;
    }

    .analytics-distribution-card {
        grid-column: auto;
    }

    .analytics-metric-card {
        min-height: auto;
    }

    .analytics-ranking-item {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .analytics-ranking-value {
        grid-column: 2;
        max-width: none;
        text-align: left;
    }

    .chart-container {
        height: 300px;
    }
}

/* =========================================================
   SIMULADOR ACADÉMICO
========================================================= */

.simulator-header {
    align-items: flex-start;
    gap: 16px;
}

.simulator-safe-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-emerald);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.simulator-selector-card,
.simulation-builder-card {
    margin-bottom: 18px;
}

.simulator-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.simulator-selector-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simulator-selector-grid label > span {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.simulator-current-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.simulator-current-card {
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.simulator-current-card span,
.simulator-result-label,
.simulator-goal-card span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.simulator-current-card strong {
    font-size: 1.35rem;
}

.simulation-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.simulation-builder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.simulation-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.simulation-presets button {
    min-width: 48px;
    min-height: 36px;
    padding: 6px 10px;
    border: var(--glass-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    font-weight: 700;
}

.simulation-presets button:hover {
    border-color: rgba(0, 240, 255, 0.35);
    color: var(--accent-cyan);
}

.simulation-table-header,
.simulation-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) 44px;
    gap: 10px;
    align-items: center;
}

.simulation-table-header {
    padding: 0 4px 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.simulation-rows {
    display: grid;
    gap: 9px;
}

.simulation-row {
    padding: 10px;
    border: var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.simulation-row input {
    min-width: 0;
    width: 100%;
}

.simulation-remove {
    width: 40px;
    min-width: 40px;
    height: 40px;
}

.simulation-validation {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.08);
    color: var(--accent-amber);
    font-size: 0.82rem;
}

.simulator-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.simulator-result-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simulator-result-card strong {
    color: var(--accent-cyan);
    font-size: 1.8rem;
}

.simulator-result-card small {
    color: var(--text-muted);
    line-height: 1.4;
}

.simulator-goals-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.simulator-goal-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.simulator-goal-card strong {
    line-height: 1.45;
}

.simulator-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .simulator-current-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .simulator-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .simulator-header,
    .simulation-builder-header {
        flex-direction: column;
    }

    .simulator-safe-badge {
        align-self: flex-start;
    }

    .simulator-selector-grid,
    .simulator-goals-grid,
    .simulator-results-grid {
        grid-template-columns: 1fr;
    }

    .simulator-current-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simulation-builder-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .simulation-builder-actions button {
        flex: 1 1 150px;
    }

    .simulation-table-header {
        display: none;
    }

    .simulation-row {
        grid-template-columns: 1fr 1fr 44px;
    }

    .simulation-name {
        grid-column: 1 / -1;
    }

    .simulation-remove {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 420px) {
    .simulator-current-grid {
        grid-template-columns: 1fr;
    }

    .simulation-row {
        grid-template-columns: 1fr 44px;
    }

    .simulation-name,
    .simulation-percentage,
    .simulation-score {
        grid-column: 1 / -1;
    }

    .simulation-remove {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
}


/* =========================================================
   RECORDATORIOS Y CALENDARIO
========================================================= */

.glass-nav .nav-btn {
    flex: 1 1 0;
    min-width: 0;
}

.grade-field {
    min-width: 0;
}

.grade-field > span {
    display: none;
}

.grades-header {
    grid-template-columns:
        minmax(150px, 1.7fr)
        minmax(105px, 0.85fr)
        minmax(135px, 1fr)
        minmax(78px, 0.62fr)
        minmax(78px, 0.62fr)
        98px;
}

.grade-row {
    grid-template-columns:
        minmax(150px, 1.7fr)
        minmax(105px, 0.85fr)
        minmax(135px, 1fr)
        minmax(78px, 0.62fr)
        minmax(78px, 0.62fr)
        98px;
}

.grade-row input,
.grade-row select {
    min-width: 0;
    padding: 10px;
    font-size: 0.9rem;
}

.grade-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-upcoming-card {
    margin-bottom: 22px;
}

.dashboard-upcoming-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.dashboard-upcoming-list,
.calendar-reminder-list {
    display: grid;
    gap: 8px;
}

.calendar-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.calendar-summary-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.calendar-summary-card span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.calendar-summary-card strong {
    color: var(--accent-cyan);
    font-size: 1.7rem;
}

.calendar-summary-danger strong {
    color: var(--danger);
}

.calendar-card {
    margin-bottom: 18px;
    overflow-x: auto;
}

.calendar-toolbar {
    min-width: 720px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.calendar-month-title {
    min-width: 0;
    flex: 1;
}

.calendar-month-title span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-month-title h2 {
    margin-top: 2px;
    text-transform: capitalize;
}

.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-month-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
}

.calendar-course-legend {
    min-width: 720px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-course-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    font-size: 0.73rem;
}

.calendar-weekdays,
.calendar-grid {
    min-width: 720px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    border: var(--glass-border);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.calendar-weekdays span {
    padding: 9px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.calendar-grid {
    border-left: var(--glass-border);
    border-top: var(--glass-border);
}

.calendar-day {
    min-width: 0;
    min-height: 116px;
    padding: 8px;
    border-right: var(--glass-border);
    border-bottom: var(--glass-border);
    background: rgba(255, 255, 255, 0.016);
}

.calendar-day.is-outside {
    opacity: 0.42;
}

.calendar-day.is-today {
    background: rgba(0, 240, 255, 0.055);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.25);
}

.calendar-day-number {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.calendar-day.is-today .calendar-day-number {
    background: var(--accent-cyan);
    color: var(--bg-dark);
}

.calendar-day-events {
    display: grid;
    gap: 5px;
}

.calendar-event {
    min-width: 0;
    width: 100%;
    padding: 5px 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: var(--glass-border);
    border-left: 2px solid var(--course-color);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-main);
    font-size: 0.67rem;
    text-align: left;
}

.calendar-event span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-dot,
.calendar-reminder-dot {
    width: 7px;
    min-width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--course-color);
}

.calendar-event.is-completed {
    opacity: 0.48;
}

.calendar-event.is-completed span:last-child {
    text-decoration: line-through;
}

.calendar-event.is-overdue {
    border-color: rgba(239, 68, 68, 0.28);
}

.calendar-event-more {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.calendar-course-1 { --course-color: #00f0ff; }
.calendar-course-2 { --course-color: #10b981; }
.calendar-course-3 { --course-color: #fbbf24; }
.calendar-course-4 { --course-color: #a78bfa; }
.calendar-course-5 { --course-color: #fb7185; }
.calendar-course-6 { --course-color: #60a5fa; }

.calendar-reminders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.calendar-reminder-card {
    min-width: 0;
}

.calendar-reminder-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.calendar-reminder-heading > i {
    color: var(--accent-cyan);
    font-size: 1.45rem;
}

.calendar-overdue-card .calendar-reminder-heading > i {
    color: var(--danger);
}

.calendar-reminder-item {
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: var(--glass-border);
    border-left: 2px solid var(--course-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-main);
    text-align: left;
}

.calendar-reminder-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.calendar-reminder-item.is-overdue {
    border-top-color: rgba(239, 68, 68, 0.24);
    border-right-color: rgba(239, 68, 68, 0.24);
    border-bottom-color: rgba(239, 68, 68, 0.24);
}

.calendar-reminder-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-reminder-main strong,
.calendar-reminder-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-reminder-main strong {
    font-size: 0.82rem;
}

.calendar-reminder-main small,
.calendar-reminder-date {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.calendar-reminder-date {
    white-space: nowrap;
    font-weight: 600;
}

@media (max-width: 900px) {
    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-reminders-grid {
        grid-template-columns: 1fr;
    }

    .grade-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
        border: var(--glass-border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
    }

    .grades-header {
        display: none;
    }

    .grade-field > span {
        display: block;
        margin-bottom: 5px;
        color: var(--text-muted);
        font-size: 0.68rem;
        font-weight: 600;
    }

    .grade-name-field {
        grid-column: 1 / -1;
    }

    .grade-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {
    .dashboard-upcoming-header {
        flex-direction: column;
    }

    .dashboard-upcoming-header button {
        width: 100%;
    }

    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .calendar-summary-card {
        padding: 14px;
    }

    .calendar-reminder-item {
        grid-template-columns: 8px minmax(0, 1fr);
    }

    .calendar-reminder-date {
        grid-column: 2;
    }

    .grade-row {
        grid-template-columns: 1fr;
    }

    .grade-name-field,
    .grade-actions {
        grid-column: 1;
    }

    .grade-actions {
        justify-content: stretch;
    }

    .grade-actions button {
        flex: 1;
    }

    .glass-nav .nav-btn {
        font-size: 0.58rem;
    }

    .glass-nav .nav-btn i {
        font-size: 1.18rem;
    }
}

/* ==========================================
   GAMIFICACIÓN
   ========================================== */

.gamification-section {
    margin-top: 20px;
}

.gamification-heading {
    margin-bottom: 14px;
}

.gamification-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.gamification-stat-card {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.gamification-stat-card > i {
    color: var(--accent-cyan);
    font-size: 1.4rem;
}

.gamification-stat-card span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.gamification-stat-card strong {
    font-size: 1.2rem;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.achievement-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.achievement-card.is-locked {
    opacity: 0.62;
}

.achievement-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font-size: 1.25rem;
}

.achievement-card.is-unlocked .achievement-icon {
    background: rgba(0, 240, 255, 0.09);
    color: var(--accent-cyan);
}

.achievement-main {
    min-width: 0;
    flex: 1;
}

.achievement-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.achievement-title-row strong {
    min-width: 0;
}

.achievement-status {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.achievement-card.is-unlocked .achievement-status {
    color: var(--accent-cyan);
}

.achievement-main p {
    margin: 5px 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.achievement-main small {
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* ==========================================
   DATOS / EXPORTACIONES
   ========================================== */

.data-header {
    align-items: flex-start;
    gap: 14px;
}

.data-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.data-tool-card {
    min-width: 0;
}

.data-tool-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.data-tool-heading > i {
    color: var(--accent-cyan);
    font-size: 1.55rem;
}

.data-tool-heading h2 {
    margin-bottom: 4px;
}

.data-tool-card > label {
    display: block;
    margin: 14px 0 7px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.data-tool-card select,
.data-tool-card input[type="file"] {
    width: 100%;
}

.data-tool-card input[type="file"] {
    padding: 11px;
    border: var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-main);
}

.data-action-list {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.data-action-list button {
    width: 100%;
    justify-content: center;
}

.data-tool-note,
.data-format-help {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.data-format-help {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.data-format-help code {
    overflow-wrap: anywhere;
    color: var(--accent-cyan);
}

.account-data-card button {
    margin-top: 14px;
}

@media (max-width: 980px) {
    .gamification-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .data-tools-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .gamification-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .data-header {
        flex-direction: column;
    }

    .data-header button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .gamification-stats-grid {
        grid-template-columns: 1fr;
    }

    .achievement-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* PERSONALIZACIÓN / TEMA / PLANES */
.account-avatar img,.personal-avatar-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:inherit}.account-avatar span,.personal-avatar-preview span{display:grid;place-items:center;width:100%;height:100%}.account-avatar span[hidden],.personal-avatar-preview span[hidden],.account-avatar img[hidden],.personal-avatar-preview img[hidden]{display:none!important}.personalization-grid{display:grid;gap:1rem}.personalization-card{display:grid;gap:1rem}.personal-avatar-editor{display:grid;grid-template-columns:92px minmax(0,1fr);gap:1rem;align-items:center}.personal-avatar-preview{width:92px;height:92px;border-radius:50%;overflow:hidden;border:2px solid rgba(148,163,184,.22);background:var(--card-bg-strong);box-shadow:0 10px 28px rgba(2,8,23,.12);color:var(--accent-cyan);font-size:2rem;font-weight:700}.personal-avatar-url,.personal-form-grid label{display:grid;gap:.45rem}.personal-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.personalization-note{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border:var(--glass-border);border-radius:14px;color:var(--text-muted);line-height:1.5}.personalization-note i{color:var(--accent-cyan);font-size:1.2rem;margin-top:.1rem}.personalization-save{justify-self:start}.pricing-page{padding-top:2rem;padding-bottom:2rem}.pricing-header{max-width:760px;margin:0 auto 1.5rem;text-align:center}.pricing-eyebrow{display:inline-block;margin-bottom:.55rem;color:var(--accent-cyan);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:900px;margin:0 auto}.pricing-card{display:flex;flex-direction:column;gap:1rem}.pricing-card-pro{border:1px solid rgba(0,240,255,.35)}.pricing-plan-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.pricing-plan-name{font-size:1.05rem;font-weight:700}.pricing-price{display:block;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.05}.pricing-badge{padding:.3rem .65rem;border-radius:999px;background:rgba(16,185,129,.12);color:var(--accent-emerald);font-size:.75rem;font-weight:700}.pricing-features{list-style:none;display:grid;gap:.7rem;flex:1}.pricing-features li{display:flex;gap:.55rem;align-items:flex-start;color:var(--text-muted)}.pricing-features i{color:var(--accent-emerald);margin-top:.15rem}.pricing-legal{justify-content:center;margin-top:1.25rem}@media(max-width:720px){.personal-form-grid,.pricing-grid{grid-template-columns:1fr}.personal-avatar-editor{grid-template-columns:1fr}.personalization-save{width:100%}}


/* RENDIMIENTO / LOADING STATES */
.skeleton{display:inline-block;position:relative;overflow:hidden;background:rgba(148,163,184,.14);border-radius:8px;color:transparent!important;pointer-events:none}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:uniparchado-skeleton 1.25s ease-in-out infinite}.skeleton-value{width:64px;height:28px}.skeleton-pill{width:110px;height:38px;border-radius:999px;margin-right:8px}.skeleton-course-card{display:grid;gap:13px;min-height:145px}.skeleton-line{display:block;width:72%;height:13px}.skeleton-line-lg{width:88%;height:18px}.skeleton-line-sm{width:46%}.skeleton-reminder{display:grid;gap:10px;padding:12px 0}@keyframes uniparchado-skeleton{100%{transform:translateX(100%)}}@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none}}


/* =========================================================
   EXPERIENCIA MÓVIL / PWA
========================================================= */
button,.btn-primary,.btn-secondary,.btn-danger,.link-button{min-height:44px}
.glass-nav .nav-btn{flex:1;min-width:0;min-height:52px}
.pwa-account-card button,.account-session-card button{margin-top:14px}
@media(max-width:760px){
    .app-header{margin-bottom:1.25rem;align-items:flex-start}
    .app-container{max-width:100%;padding-top:1rem;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
    .center-screen{justify-content:flex-start;padding-top:max(1.35rem,calc(1.35rem + env(safe-area-inset-top)));padding-bottom:max(1rem,calc(1rem + env(safe-area-inset-bottom)));box-sizing:border-box}
    input,select,textarea{font-size:16px;min-height:46px}
    input[type="date"]{min-width:0}
    .chart-container{height:260px;min-width:0}
    .chart-container-compact{height:250px}
    .analytics-chart-card{min-width:0;overflow:hidden}
    .calendar-grid{min-width:0}
    .calendar-day{min-width:0}
    .semester-tabs{scroll-padding-inline:1rem}
}
@media(max-width:560px){
    :root{--nav-height:72px}
    .glass-nav{padding:7px 4px calc(7px + env(safe-area-inset-bottom));gap:0}
    .glass-nav .nav-btn{font-size:.58rem;padding:4px 2px;gap:2px}
    .glass-nav .nav-btn i{font-size:1.2rem}
    .semester-navigation{display:grid;grid-template-columns:1fr 1fr}
    .semester-navigation button{width:100%}
    .semester-tabs{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
    .calendar-toolbar{align-items:stretch;flex-direction:column}
    .calendar-month-navigation{width:100%;justify-content:space-between}
    .calendar-month-button{flex:1}
}
@media(max-width:360px){
    .glass-nav .nav-btn{font-size:.52rem}
    .glass-nav .nav-btn i{font-size:1.12rem}
    .semester-overview .semester-summary{grid-template-columns:1fr 1fr}
    .summary-col{min-width:0}
}


/* =========================================================
   AJUSTES UI — PAYWALL, TEMA CLARO Y AVATAR
========================================================= */

/* La regla histórica de #view-paywall .app-container convertía toda la
   página de precios en una fila flex. El contenido del paywall debe apilarse. */
#view-paywall .app-container.pricing-page {
    display: block;
    min-height: auto;
    max-width: 1040px;
    padding: 2.25rem 1.5rem 2.75rem;
}

#view-paywall .pricing-header {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 1.75rem;
    display: block;
    text-align: center;
}

#view-paywall .pricing-grid {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    align-items: stretch;
}

#view-paywall .pricing-card {
    min-width: 0;
    padding: 1.6rem;
}

#view-paywall .pricing-price {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

#view-paywall .pricing-features {
    margin: .15rem 0 .5rem;
}

#view-paywall .pricing-card .full-width {
    margin-top: auto;
}

#view-paywall .pricing-legal {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: center;
    justify-content: center;
    margin: 1.4rem auto 0;
}

.avatar-field-status {
    min-height: 1.25rem;
    margin-top: .1rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.avatar-field-status.is-error {
    color: var(--danger);
}

.avatar-field-status.is-success {
    color: var(--accent-emerald);
}

/* Tema claro: menos “blanco azulado”, más contraste y acentos legibles. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-dark: #f5f7fb;
    --bg-soft: #edf2f7;
    --nav-bg: rgba(255, 255, 255, .96);
    --card-bg: rgba(255, 255, 255, .94);
    --card-bg-strong: #ffffff;
    --accent-cyan: #087b91;
    --accent-emerald: #087a57;
    --accent-amber: #a85b08;
    --danger: #c93636;
    --danger-soft: rgba(201, 54, 54, .10);
    --text-main: #172033;
    --text-muted: #637083;
    --glass-border: 1px solid #dce3ed;
    --glass-border-strong: 1px solid #cbd5e1;
}

:root[data-theme="light"] html {
    background: var(--bg-dark);
}

:root[data-theme="light"] body {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(circle at 12% -5%, rgba(8, 123, 145, .08) 0%, transparent 29%),
        radial-gradient(circle at 88% 0%, rgba(8, 122, 87, .06) 0%, transparent 25%),
        linear-gradient(180deg, #f8fafc 0%, #f3f6fa 46%, #eef2f7 100%);
}

:root[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, .94);
    border-color: #dce3ed;
    box-shadow: 0 8px 24px rgba(42, 55, 76, .07);
    backdrop-filter: blur(10px);
}

:root[data-theme="light"] .glass-nav {
    background: rgba(255, 255, 255, .96);
    border-top-color: #dce3ed;
    box-shadow: 0 -8px 28px rgba(42, 55, 76, .06);
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
    background: #f8fafc;
    border-color: #d7dee9;
    color: #172033;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #8a96a8;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
    border-color: #0b879d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 123, 145, .12);
}

:root[data-theme="light"] input:-webkit-autofill,
:root[data-theme="light"] input:-webkit-autofill:hover,
:root[data-theme="light"] input:-webkit-autofill:focus,
:root[data-theme="light"] textarea:-webkit-autofill,
:root[data-theme="light"] select:-webkit-autofill {
    -webkit-text-fill-color: #172033 !important;
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    caret-color: #172033;
}

:root[data-theme="light"] .btn-primary {
    background: #087b91;
    color: #ffffff;
}

:root[data-theme="light"] .btn-secondary {
    background: #ffffff;
    border-color: #d4dce7;
    color: #243047;
}

:root[data-theme="light"] .btn-secondary:hover {
    background: #f1f5f9;
    border-color: #bdc8d6;
}

:root[data-theme="light"] .btn-icon {
    color: #243047;
}

:root[data-theme="light"] .nav-btn.active,
:root[data-theme="light"] a {
    color: #087b91;
}

:root[data-theme="light"] .pricing-card-pro {
    border-color: rgba(8, 123, 145, .42);
}

:root[data-theme="light"] .calendar-day.is-today {
    border-color: rgba(8, 123, 145, .44);
    background: rgba(8, 123, 145, .055);
}

@media (max-width: 720px) {
    #view-paywall .app-container.pricing-page {
        padding: 1.35rem 1rem 2rem;
    }

    #view-paywall .pricing-price {
        white-space: normal;
    }
}

:root[data-theme="light"] .goal-progress-track {
    background: #e4eaf1;
}

:root[data-theme="light"] .goal-result-box,
:root[data-theme="light"] .analytics-ranking-item,
:root[data-theme="light"] .simulation-presets button,
:root[data-theme="light"] .simulation-row,
:root[data-theme="light"] .calendar-course-chip,
:root[data-theme="light"] .calendar-event,
:root[data-theme="light"] .calendar-reminder-item,
:root[data-theme="light"] .data-tool-card input[type="file"],
:root[data-theme="light"] .data-format-help {
    background: #f8fafc;
}

:root[data-theme="light"] .calendar-day {
    background: rgba(255, 255, 255, .72);
}

:root[data-theme="light"] .calendar-day.is-outside {
    background: #f1f5f9;
}

:root[data-theme="light"] .calendar-reminder-item:hover,
:root[data-theme="light"] .analytics-ranking-item:hover,
:root[data-theme="light"] .simulation-presets button:hover {
    background: #eef3f8;
}

:root[data-theme="light"] .achievement-icon {
    background: #eef3f8;
}


/* Toasts en tema claro: superficie y texto con contraste real. */
:root[data-theme="light"] .toast {
    background: #ffffff;
    color: #172033;
    border: 1px solid #d7dee9;
    box-shadow: 0 12px 30px rgba(42, 55, 76, .14);
}

:root[data-theme="light"] .toast-success {
    border-left: 4px solid #087a57;
    background: #f2fbf7;
}

:root[data-theme="light"] .toast-error {
    border-left: 4px solid #c93636;
    background: #fff6f6;
}

:root[data-theme="light"] .toast-warning {
    border-left: 4px solid #a85b08;
    background: #fff9ef;
}

:root[data-theme="light"] .toast-info {
    border-left: 4px solid #087b91;
    background: #f2fafc;
}

.data-pro-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: rgba(0, 240, 255, .10);
    color: var(--accent-cyan);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    vertical-align: middle;
}

:root[data-theme="light"] .data-pro-badge {
    background: rgba(8, 123, 145, .10);
    color: #087b91;
}

.theme-light .account-avatar,.theme-light .personal-avatar-preview{background:#ffffff;border-color:rgba(148,163,184,.28);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.theme-light .account-avatar span,.theme-light .personal-avatar-preview span{color:#0f766e}


/* PASSWORD VISIBILITY */
.password-field{position:relative;width:100%;min-width:0}
.password-field input{width:100%;padding-right:3.25rem}
.password-toggle{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);display:grid;place-items:center;width:2.4rem;height:2.4rem;min-height:0;padding:0;border:0;border-radius:.65rem;background:transparent;color:var(--text-muted);cursor:pointer;transition:background .16s ease,color .16s ease}
.password-toggle:hover{background:rgba(148,163,184,.12);color:var(--text-main)}
.password-toggle:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}
.password-toggle i{font-size:1.2rem;pointer-events:none}
.theme-light .password-toggle:hover{background:rgba(15,23,42,.07)}
@media(max-width:760px){.password-toggle{width:2.75rem;height:2.75rem;right:.35rem}}

.feedback-form{display:grid;gap:1rem;max-width:760px;margin:0 auto}.feedback-form label{display:grid;gap:.45rem}.feedback-form textarea{resize:vertical;min-height:140px}.feedback-privacy-note{font-size:.85rem;line-height:1.5}


/* SweetAlert2 / diálogos UniParchado */
.uniparchado-swal{border:1px solid rgba(148,163,184,.18)!important;border-radius:20px!important;box-shadow:0 24px 80px rgba(2,8,23,.28)!important;font-family:"Plus Jakarta Sans",sans-serif!important}
.uniparchado-swal .swal2-title{color:var(--text-main)!important;font-size:1.35rem!important}
.uniparchado-swal .swal2-html-container{color:var(--text-muted)!important;line-height:1.55!important}
.uniparchado-swal .swal2-input{background:var(--input-bg,#0f172a)!important;color:var(--text-main)!important;border:1px solid rgba(148,163,184,.22)!important;box-shadow:none!important}
.uniparchado-swal .swal2-input:focus{border-color:var(--accent-cyan)!important}
.uniparchado-swal .swal2-confirm{color:#07111c!important;font-weight:700!important}
.uniparchado-swal .swal2-cancel{font-weight:700!important}
.uniparchado-dialog-backdrop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));background:rgba(2,6,23,.68);backdrop-filter:blur(8px)}
.uniparchado-dialog-fallback{width:min(440px,100%);display:grid;gap:1rem;padding:1.25rem;border:1px solid rgba(148,163,184,.2);border-radius:20px;background:var(--card-bg-strong,#111827);color:var(--text-main);box-shadow:0 24px 80px rgba(2,8,23,.32)}
.uniparchado-dialog-fallback p{color:var(--text-muted)}
.uniparchado-dialog-input{width:100%;min-height:46px}
.uniparchado-dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}
.theme-light .uniparchado-swal .swal2-input{background:#f8fafc!important;color:#0f172a!important}

.stats-load-error{max-width:720px;margin:0 auto 1.25rem;text-align:center}.stats-load-error button{margin-top:1rem}.stats-load-error small{display:block;margin-top:.45rem}


/* =========================================================
   HOTFIX MÓVIL — SAFE AREA + CALENDARIO COMPACTO
========================================================= */
@media (max-width: 760px) {
    /* Reserva física para status bar/notch/isla dinámica incluso en
       navegadores donde env(safe-area-inset-top) se reporta como 0. */
    body.nav-visible .app-container,
    body:not(.nav-visible) .app-container {
        padding-top: max(3.5rem, calc(1rem + env(safe-area-inset-top)));
    }

    #view-auth .app-container,
    #view-paywall .app-container,
    .register-container,
    .center-screen {
        padding-top: max(3.5rem, calc(1rem + env(safe-area-inset-top)));
    }

    #toast-container {
        top: max(3.25rem, calc(.75rem + env(safe-area-inset-top)));
    }

    .calendar-card {
        overflow-x: hidden;
        padding: .85rem;
    }

    .calendar-toolbar,
    .calendar-course-legend,
    .calendar-weekdays,
    .calendar-grid {
        min-width: 0;
        width: 100%;
    }

    .calendar-toolbar {
        gap: .65rem;
    }

    .calendar-course-legend {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .2rem;
        scrollbar-width: none;
    }

    .calendar-course-legend::-webkit-scrollbar {
        display: none;
    }

    .calendar-course-chip {
        flex: 0 0 auto;
    }

    .calendar-weekdays,
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-weekdays span {
        min-width: 0;
        padding: .5rem 0;
        font-size: .62rem;
    }

    .calendar-day {
        min-width: 0;
        min-height: 76px;
        padding: .3rem .15rem;
        overflow: hidden;
    }

    .calendar-day-number {
        width: 24px;
        height: 24px;
        margin: 0 auto .28rem;
        font-size: .67rem;
    }

    .calendar-day-events {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 3px;
        min-width: 0;
    }

    .calendar-event {
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--course-color, var(--accent-cyan));
        overflow: hidden;
        font-size: 0;
    }

    .calendar-event .calendar-event-dot,
    .calendar-event span:last-child {
        display: none;
    }

    .calendar-event.is-overdue {
        background: var(--danger);
    }

    .calendar-event.is-completed {
        opacity: .45;
    }

    .calendar-event-more {
        width: 100%;
        color: var(--text-muted);
        font-size: .56rem;
        line-height: 1;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .calendar-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .calendar-summary-card {
        padding: .8rem;
    }

    .calendar-month-title h2 {
        font-size: 1.15rem;
    }

    .calendar-toolbar-actions {
        width: 100%;
    }

    .calendar-toolbar-actions > .btn-secondary:not(.calendar-month-button) {
        flex: 1;
    }

    .calendar-reminders-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   LEGAL / CONSENTIMIENTOS
========================================================= */
.legal-summary,.legal-provider-box{margin:1.35rem 0;padding:1.15rem 1.2rem;border:1px solid rgba(0,240,255,.18);border-radius:14px;background:rgba(0,240,255,.04)}
.legal-provider-box{border-color:rgba(245,158,11,.24);background:rgba(245,158,11,.045)}
.legal-summary h2,.legal-provider-box h2{margin-top:0}
.legal-consent-row{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem .85rem;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(148,163,184,.055);color:var(--text-muted);font-size:.82rem;line-height:1.5;text-align:left}
.legal-consent-row input[type="checkbox"]{width:18px;height:18px;min-height:18px;flex:0 0 18px;margin-top:.15rem;accent-color:var(--accent-cyan)}
.legal-consent-row[hidden]{display:none!important}
.legal-consent-row a{color:var(--accent-cyan);font-weight:700;text-decoration:none}
.legal-consent-row a:hover{text-decoration:underline}
.pro-purchase-consent{margin-top:.25rem}
.theme-light .legal-summary{background:rgba(15,118,110,.045);border-color:rgba(15,118,110,.18)}
.theme-light .legal-provider-box{background:rgba(217,119,6,.05);border-color:rgba(217,119,6,.2)}
.theme-light .legal-consent-row{background:#f8fafc;border-color:rgba(100,116,139,.18)}
@media(max-width:560px){.legal-card{padding:1rem}.legal-summary,.legal-provider-box{padding:1rem}.legal-consent-row{font-size:.8rem}}

/* =========================================================
   ARRANQUE RESILIENTE + SAFE AREAS + CALENDARIO MÓVIL
   ========================================================= */
.splash-recovery {
    margin-top: 1rem;
    display: grid;
    gap: .65rem;
}

.splash-recovery[hidden] {
    display: none !important;
}

.splash-recovery .btn-primary,
.splash-recovery .btn-secondary {
    width: 100%;
}

@media (max-width: 760px) {
    /* En PWA con viewport-fit=cover el contenido no debe quedar bajo la isla/notch. */
    main.app-container,
    body.nav-visible > .app-container,
    #page-root > main.app-container {
        padding-top: calc(1rem + env(safe-area-inset-top));
    }

    .splash-screen {
        padding-top: calc(1rem + env(safe-area-inset-top));
        padding-right: calc(1rem + env(safe-area-inset-right));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        padding-left: calc(1rem + env(safe-area-inset-left));
    }

    /* El calendario ya no conserva anchos desktop de 720px en pantallas pequeñas. */
    .calendar-card {
        overflow-x: hidden;
    }

    .calendar-toolbar,
    .calendar-course-legend,
    .calendar-weekdays,
    .calendar-grid {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .splash-card {
        padding: 1.45rem 1.15rem;
    }

    .splash-logo {
        width: 88px;
        height: 88px;
        margin-bottom: .8rem;
    }

    .splash-card h1 {
        font-size: 1.7rem;
    }

    .calendar-card {
        padding: .75rem;
        border-radius: 14px;
    }

    .calendar-toolbar {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        margin-bottom: 10px;
    }

    .calendar-month-title {
        text-align: center;
    }

    .calendar-month-title span {
        font-size: .62rem;
    }

    .calendar-month-title h2 {
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .calendar-toolbar-actions {
        display: grid;
        grid-template-columns: auto 42px;
        gap: 6px;
    }

    .calendar-toolbar-actions > .btn-secondary:not(.calendar-month-button) {
        min-height: 42px;
        padding: 0 9px;
        font-size: .72rem;
    }

    .calendar-month-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .calendar-course-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        padding-bottom: 5px;
    }

    .calendar-course-legend::-webkit-scrollbar {
        display: none;
    }

    .calendar-course-chip {
        flex: 0 0 auto;
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-weekdays span {
        padding: 6px 1px;
        font-size: .58rem;
    }

    .calendar-day {
        min-height: 88px;
        padding: 4px 3px;
    }

    .calendar-day-number {
        width: 24px;
        height: 24px;
        margin: 0 auto 4px;
        font-size: .68rem;
    }

    .calendar-day-events {
        gap: 3px;
    }

    .calendar-event {
        min-height: 18px;
        padding: 2px 3px;
        justify-content: center;
        border-radius: 6px;
    }

    .calendar-event span:last-child {
        display: none;
    }

    .calendar-event-dot {
        width: 8px;
        min-width: 8px;
        height: 8px;
    }

    .calendar-event-more {
        display: block;
        font-size: .53rem;
        line-height: 1.1;
        text-align: center;
    }

    .calendar-reminder-heading h2 {
        font-size: 1.05rem;
    }
}

@media (max-width: 380px) {
    .calendar-card {
        padding: .6rem;
    }

    .calendar-day {
        min-height: 82px;
        padding-inline: 2px;
    }

    .calendar-weekdays span {
        font-size: .53rem;
    }
}

/* Consentimiento de medición publicitaria */
.marketing-consent-banner{position:fixed;z-index:100000;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 18px;border:1px solid rgba(148,163,184,.24);border-radius:16px;background:rgba(10,15,29,.97);box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(18px);color:#e5e7eb}.marketing-consent-banner strong{display:block;margin-bottom:4px}.marketing-consent-banner p{margin:0;max-width:760px;font-size:13px;line-height:1.5;color:#aeb8c8}.marketing-consent-banner a{color:#67e8f9}.marketing-consent-actions{display:flex;gap:8px;flex-shrink:0}.marketing-consent-actions button{border:1px solid rgba(148,163,184,.3);border-radius:10px;padding:9px 12px;background:transparent;color:#e5e7eb;cursor:pointer}.marketing-consent-actions button.primary{background:#22d3ee;color:#07111f;border-color:#22d3ee;font-weight:700}@media(max-width:720px){.marketing-consent-banner{align-items:stretch;flex-direction:column}.marketing-consent-actions{display:grid;grid-template-columns:1fr 1fr}.marketing-consent-actions button{width:100%}}


/* =========================================================
   43. PARCHÓMETRO + LIQUID GLASS REBRAND
========================================================= */
.glass-card{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(15,23,42,.62));box-shadow:0 18px 56px rgba(2,8,23,.24), inset 0 1px 0 rgba(255,255,255,.05)}
.parchometro-dashboard-card,.course-parchometro-card{margin-bottom:22px}
.parchometro-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.parchometro-summary-item,.parchometro-detail-item{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(255,255,255,.04)}
.parchometro-summary-item span,.parchometro-detail-item span{color:var(--text-muted);font-size:.8rem;font-weight:600}
.parchometro-summary-item strong,.parchometro-detail-item strong{font-size:1.45rem;color:var(--text-main);line-height:1.25}
.parchometro-summary-item-danger strong{color:var(--danger)}
.parchometro-focus-card{display:grid;gap:14px}
.parchometro-focus-list{display:grid;gap:10px}
.parchometro-focus-item{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(255,255,255,.04);color:inherit;text-align:left;cursor:pointer}
.parchometro-focus-item:hover{border-color:rgba(34,211,238,.35);transform:translateY(-1px)}
.parchometro-focus-item p,.parchometro-focus-meta small,.course-parchometro-copy{color:var(--text-muted);font-size:.84rem;line-height:1.55}
.parchometro-focus-meta{display:grid;gap:8px;justify-items:end;max-width:260px}
.parchometro-chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 11px;border-radius:999px;font-size:.78rem;font-weight:800;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.12);color:var(--text-main)}
.parchometro-chip-success{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.28);color:#6ee7b7}
.parchometro-chip-warning{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.28);color:#fcd34d}
.parchometro-chip-alert{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.28);color:#fdba74}
.parchometro-chip-critical{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.28);color:#fda4af}
.parchometro-chip-neutral{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.22);color:#cbd5e1}
.course-parchometro-inline{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.course-parchometro-inline .course-parchometro-copy{font-size:.8rem}
.course-parchometro-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.course-parchometro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.course-parchometro-copy{margin-top:14px}
@media (max-width: 760px){
  .app-container{padding-top:max(4.25rem,calc(1.25rem + env(safe-area-inset-top)))}
  .center-screen,#view-auth .app-container,#view-paywall .app-container,.register-container{padding-top:max(4.25rem,calc(1.25rem + env(safe-area-inset-top)))}
  .parchometro-summary-grid,.course-parchometro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parchometro-focus-item{flex-direction:column;align-items:stretch}
  .parchometro-focus-meta{justify-items:start;max-width:none}
}
@media (max-width: 520px){
  .parchometro-summary-grid,.course-parchometro-grid{grid-template-columns:1fr}
}

/* =========================================================
   44. IMPORTADOR INTELIGENTE + GEMELO ACADÉMICO
========================================================= */
.importer-header{align-items:flex-start}
.importer-upload-card,.importer-text-card,.importer-preview-card,.academic-twin-controls,.academic-twin-virtual-card{margin-bottom:22px}
.importer-upload-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:18px;align-items:stretch}
.importer-dropzone{min-height:190px;display:grid;place-items:center;align-content:center;gap:8px;padding:24px;border:1px dashed rgba(103,232,249,.36);border-radius:22px;background:linear-gradient(145deg,rgba(34,211,238,.075),rgba(255,255,255,.025));text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.importer-dropzone:hover{transform:translateY(-1px);border-color:rgba(103,232,249,.7);background:linear-gradient(145deg,rgba(34,211,238,.11),rgba(255,255,255,.04))}
.importer-dropzone i{font-size:2rem;color:var(--accent-cyan)}
.importer-dropzone strong{font-size:1.05rem}
.importer-dropzone span{color:var(--text-muted);font-size:.82rem}
.importer-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.importer-upload-meta{display:grid;gap:14px;padding:16px;border:1px solid rgba(148,163,184,.15);border-radius:18px;background:rgba(255,255,255,.035)}
.importer-upload-meta>div{display:grid;gap:5px}
.importer-upload-meta strong{overflow-wrap:anywhere}
.importer-actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.importer-progress-wrap{gap:8px!important}
.importer-progress-track{height:9px;overflow:hidden;border-radius:999px;background:rgba(148,163,184,.15)}
.importer-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-cyan),#34d399);transition:width .2s ease}
.importer-section-heading,.importer-evaluations-heading,.importer-save-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.importer-section-heading{margin-bottom:14px}
.importer-course-grid{display:grid;grid-template-columns:1.3fr 1.7fr .7fr .7fr;gap:12px;margin-bottom:22px}
.importer-course-grid label,.academic-twin-grid label{display:grid;gap:7px}
.importer-course-grid label>span,.academic-twin-grid label>span{color:var(--text-muted);font-size:.78rem;font-weight:700}
.importer-evaluations-heading{margin-bottom:12px}
.importer-table-header,.importer-row{display:grid;grid-template-columns:minmax(150px,1.35fr) minmax(110px,.8fr) minmax(135px,.8fr) 100px 100px 44px;gap:8px;align-items:center}
.importer-table-header{padding:0 8px 8px;color:var(--text-muted);font-size:.72rem;font-weight:700}
.importer-rows{display:grid;gap:8px}
.importer-row{padding:8px;border:1px solid rgba(148,163,184,.12);border-radius:16px;background:rgba(255,255,255,.035)}
.importer-row input,.importer-row select{min-width:0}
.importer-save-bar{margin-top:18px;padding-top:18px;border-top:1px solid rgba(148,163,184,.12);align-items:center}
.importer-save-bar>div{max-width:620px}
.importer-spin{animation:importer-spin .8s linear infinite}@keyframes importer-spin{to{transform:rotate(360deg)}}

.academic-twin-controls{display:grid;gap:16px}
.academic-twin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.academic-twin-toggle{display:flex!important;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(255,255,255,.035)}
.academic-twin-toggle input{width:18px;height:18px;min-height:18px;flex:0 0 18px}
.academic-twin-toggle span{display:grid;gap:2px}
.academic-twin-toggle small{color:var(--text-muted);font-weight:400}
.academic-twin-quick-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.academic-twin-quick-actions>span{color:var(--text-muted);font-size:.8rem;font-weight:700}
.academic-twin-quick-actions button{min-height:38px;padding:8px 11px;border:1px solid rgba(148,163,184,.15);border-radius:12px;background:rgba(255,255,255,.045);color:var(--text-main);cursor:pointer}
.academic-twin-quick-actions button:hover{border-color:rgba(103,232,249,.32)}
.academic-twin-virtual-form{display:grid;grid-template-columns:1.4fr .6fr .7fr auto;gap:10px;margin-top:14px}
.academic-twin-virtual-list{display:grid;gap:8px;margin-top:12px}
.academic-twin-virtual-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(148,163,184,.13);border-radius:16px;background:rgba(255,255,255,.035)}
.academic-twin-virtual-item>div{display:grid;gap:3px}
.academic-twin-virtual-item span{color:var(--text-muted);font-size:.8rem}
.academic-twin-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}

@media(max-width:900px){
  .importer-upload-grid{grid-template-columns:1fr}
  .importer-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .importer-table-header{display:none}
  .importer-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .importer-row .btn-icon-danger{justify-self:end}
  .academic-twin-grid{grid-template-columns:1fr 1fr}
  .academic-twin-toggle{grid-column:1/-1}
  .academic-twin-virtual-form{grid-template-columns:1fr 1fr}
  .academic-twin-virtual-form button{grid-column:1/-1}
}
@media(max-width:620px){
  .importer-course-grid,.importer-row,.academic-twin-grid,.academic-twin-impact-grid{grid-template-columns:1fr}
  .importer-section-heading,.importer-evaluations-heading,.importer-save-bar{flex-direction:column;align-items:stretch}
  .importer-save-bar .btn-primary{width:100%}
  .academic-twin-virtual-form{grid-template-columns:1fr}
  .academic-twin-toggle{grid-column:auto}
}

/* =========================================================
   44. FASE 4 — CONTEXTO UNIVERSITARIO
========================================================= */
.university-context-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.university-context-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.5fr);gap:1rem;align-items:start}
.university-directory-card,.university-profile-detail{min-width:0}
.university-directory-header{margin-bottom:1rem}
.university-context-list{display:grid;gap:.65rem;max-height:70vh;overflow:auto;margin-top:1rem;padding-right:.25rem}
.university-list-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(255,255,255,.035);color:var(--text-main);text-align:left;cursor:pointer}
.university-list-item:hover,.university-list-item.is-selected{border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.06)}
.university-list-item.is-current{box-shadow:inset 3px 0 0 var(--accent-cyan)}
.university-list-item>div{display:grid;gap:.25rem;min-width:0}.university-list-item strong{font-size:.92rem}.university-list-item span:not(.parchometro-chip){font-size:.76rem;color:var(--text-muted)}
.university-profile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.university-profile-header h2{margin:.65rem 0 .25rem}
.university-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.university-rules-section{margin-top:1.2rem}.university-rules-list{display:grid;gap:.65rem;margin:.75rem 0 0;padding-left:1.2rem}.university-rules-list li{color:var(--text-muted);line-height:1.55}
.university-unverified-box,.university-method-box,.university-source-box{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(255,255,255,.035);margin-top:.8rem}.university-method-box{display:block}.university-method-box p,.university-source-box span,.university-source-box small{color:var(--text-muted);line-height:1.55}.university-source-box>div{display:grid;gap:.35rem}.university-source-box a{color:var(--accent-cyan);overflow-wrap:anywhere}

/* =========================================================
   45. FASE 5 — PARCHÓMETRO DE TIEMPO
========================================================= */
.study-planner-settings,.study-planner-summary-card,.study-week-plan-card{margin-bottom:1rem}.study-planner-settings-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.study-planner-total{display:grid;gap:.25rem;text-align:right}.study-planner-total span{font-size:.78rem;color:var(--text-muted)}.study-planner-total strong{font-size:1.8rem;color:var(--accent-cyan)}
.study-availability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.study-availability-grid label{display:grid;gap:.45rem}.study-availability-grid label span{font-size:.78rem;color:var(--text-muted);font-weight:700}.study-planner-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.study-priority-list{display:grid;gap:.75rem}.study-priority-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.85rem;align-items:start;padding:1rem;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(255,255,255,.035)}.study-priority-rank{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(34,211,238,.10);color:var(--accent-cyan);font-weight:800}.study-priority-main{display:grid;gap:.35rem}.study-priority-title-row{display:flex;align-items:center;justify-content:space-between;gap:.65rem}.study-priority-main p{color:var(--text-muted);font-size:.86rem;line-height:1.55}.study-priority-main small{color:var(--text-soft);font-size:.75rem}.study-priority-hours{text-align:right;display:grid;gap:.15rem}.study-priority-hours strong{font-size:1.25rem;color:var(--text-main)}.study-priority-hours span{font-size:.72rem;color:var(--text-muted)}.study-priority-warning{color:#fda4af!important}
.study-week-plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.study-day-card{padding:1rem;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(255,255,255,.035)}.study-day-header>div{display:flex;justify-content:space-between;gap:.75rem}.study-day-header span{font-size:.76rem;color:var(--text-muted)}.study-day-sessions{display:grid;gap:.55rem;margin-top:.75rem}.study-session-block{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .8rem;border-radius:14px;background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.12)}.study-session-block>div{display:grid;gap:.2rem}.study-session-block span{font-size:.72rem;color:var(--text-muted)}.study-day-empty{padding:.75rem 0;color:var(--text-muted);font-size:.8rem}

@media(max-width:760px){
  .university-context-intro,.university-profile-header,.study-planner-settings-header{flex-direction:column;align-items:stretch}
  .university-context-layout{grid-template-columns:1fr}.university-context-list{max-height:40vh}.university-context-grid{grid-template-columns:1fr}
  .study-availability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.study-week-plan{grid-template-columns:1fr}.study-priority-item{grid-template-columns:auto minmax(0,1fr)}.study-priority-hours{grid-column:2;text-align:left}
}
@media(max-width:480px){.study-availability-grid{grid-template-columns:1fr}}

/* =========================================================
   46. FASE 6 — COPILOTO DE ACCIONES
========================================================= */
.copilot-header{align-items:flex-start}.copilot-local-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border:1px solid rgba(94,234,212,.22);border-radius:999px;background:rgba(16,185,129,.08);color:#99f6e4;font-size:.76rem;font-weight:800}.copilot-compose-card,.copilot-preview-card,.copilot-capabilities-card{margin-bottom:1rem}.copilot-compose-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:1rem}.copilot-compose-grid label{display:grid;gap:.5rem}.copilot-compose-grid label>span{font-size:.78rem;color:var(--text-muted);font-weight:700}.copilot-compose-grid label small{font-size:.73rem;color:var(--text-soft);line-height:1.45}.copilot-command-field textarea{min-height:142px;resize:vertical}.copilot-quick-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}.copilot-quick-actions button{min-height:36px;padding:.55rem .75rem;border:1px solid rgba(148,163,184,.15);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text-main);cursor:pointer;font-size:.78rem}.copilot-quick-actions button:hover{border-color:rgba(103,232,249,.32);background:rgba(34,211,238,.06)}.copilot-compose-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.copilot-privacy-note{display:flex;gap:.55rem;align-items:flex-start;margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(255,255,255,.025);color:var(--text-muted);font-size:.78rem;line-height:1.55}.copilot-preview-header{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem}.copilot-preview-header h2{margin:.6rem 0 .2rem}.copilot-preview-content{display:grid;gap:.75rem}.copilot-change-list,.copilot-evaluation-list,.copilot-priority-list,.copilot-week-list{display:grid;gap:.65rem}.copilot-change-row,.copilot-evaluation-row,.copilot-priority-row,.copilot-week-row{display:grid;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1px solid rgba(148,163,184,.13);border-radius:16px;background:rgba(255,255,255,.035)}.copilot-change-row{grid-template-columns:minmax(0,1fr) auto auto}.copilot-change-row>div,.copilot-evaluation-row>div,.copilot-priority-row>div{display:grid;gap:.2rem;min-width:0}.copilot-change-row span,.copilot-evaluation-row span,.copilot-priority-row span,.copilot-week-row span{font-size:.76rem;color:var(--text-muted);line-height:1.45}.copilot-evaluation-row{grid-template-columns:minmax(0,1fr) auto auto}.copilot-priority-row{grid-template-columns:auto minmax(0,1fr) auto}.copilot-priority-rank{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;background:rgba(34,211,238,.1);color:var(--accent-cyan);font-weight:800}.copilot-week-row{grid-template-columns:140px minmax(0,1fr)}.copilot-preview-warning{margin-top:.85rem;padding:.85rem 1rem;border:1px solid rgba(245,158,11,.22);border-radius:14px;background:rgba(245,158,11,.075);color:#fde68a;font-size:.8rem;line-height:1.5}.copilot-preview-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.copilot-unmatched{display:grid;gap:.4rem;padding:.85rem 1rem;border:1px dashed rgba(248,113,113,.25);border-radius:14px}.copilot-unmatched span{color:var(--text-muted);font-size:.78rem}.copilot-help-examples{display:grid;gap:.5rem}.copilot-help-examples span{padding:.75rem .9rem;border-radius:12px;background:rgba(255,255,255,.035);color:var(--text-muted)}.copilot-capabilities-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}.copilot-capabilities-grid article{display:flex;gap:.75rem;padding:1rem;border:1px solid rgba(148,163,184,.13);border-radius:16px;background:rgba(255,255,255,.035)}.copilot-capabilities-grid article>i{font-size:1.3rem;color:var(--accent-cyan)}.copilot-capabilities-grid article>div{display:grid;gap:.3rem}.copilot-capabilities-grid span{font-size:.78rem;color:var(--text-muted);line-height:1.45}

/* =========================================================
   47. FASE 7 — TARJETAS COMPARTIBLES
========================================================= */
.dashboard-card-actions,.course-parchometro-actions,.simulator-header-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.share-card-backdrop{position:fixed;inset:0;z-index:120000;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:rgba(2,6,23,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:auto}.share-card-backdrop[hidden]{display:none!important}.share-card-modal{width:min(760px,100%);display:grid;gap:1rem;margin:auto;padding:1rem}.share-card-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.share-card-modal-header h2{margin:.55rem 0 .2rem}.share-card-controls{display:grid;grid-template-columns:minmax(180px,.6fr) minmax(0,1fr);gap:.8rem}.share-card-controls label{display:grid;gap:.4rem}.share-card-controls label>span{font-size:.76rem;color:var(--text-muted);font-weight:700}.share-card-toggle{display:flex!important;align-items:center;gap:.6rem;padding:.75rem .9rem;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(255,255,255,.03)}.share-card-toggle input{width:18px;height:18px;min-height:18px}.share-card-preview-shell{display:grid;place-items:center;min-height:420px;padding:1rem;border:1px solid rgba(148,163,184,.12);border-radius:18px;background:rgba(0,0,0,.18);overflow:hidden}.share-card-preview-shell canvas{display:block;max-width:min(100%,390px);max-height:62vh;width:auto;height:auto;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}.share-card-actions{display:flex;gap:.65rem;flex-wrap:wrap}

@media(max-width:760px){.copilot-compose-grid,.copilot-capabilities-grid,.share-card-controls{grid-template-columns:1fr}.copilot-header{flex-direction:column}.copilot-change-row,.copilot-evaluation-row,.copilot-priority-row,.copilot-week-row{grid-template-columns:1fr}.copilot-change-row>i{transform:rotate(90deg)}.dashboard-card-actions,.course-parchometro-actions,.simulator-header-actions{align-items:stretch}.course-parchometro-actions{flex-direction:column}.share-card-actions>*{flex:1 1 100%}.share-card-preview-shell{min-height:320px}}

/* =========================================================
   FASE 8 — BANDEJA ACADÉMICA + INVESTIGACIÓN BETA
========================================================= */
.academic-inbox-privacy,.academic-inbox-source-card,.academic-inbox-compose,.academic-inbox-history-card{margin-bottom:18px}
.academic-inbox-privacy{display:flex;gap:14px;align-items:flex-start}
.academic-inbox-privacy-icon{display:grid;place-items:center;min-width:42px;width:42px;height:42px;border-radius:14px;background:rgba(16,185,129,.12);color:#6ee7b7;font-size:1.35rem}
.academic-inbox-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.academic-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.academic-source-option{display:grid;gap:7px;justify-items:start;padding:16px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(255,255,255,.035);color:var(--text-main);text-align:left;cursor:pointer}
.academic-source-option i{font-size:1.55rem;color:var(--accent-cyan)}
.academic-source-option span{font-weight:800}.academic-source-option small{color:var(--text-muted);line-height:1.45}
.academic-source-option.active{border-color:rgba(34,211,238,.42);background:linear-gradient(145deg,rgba(34,211,238,.11),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.academic-source-help{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(148,163,184,.07);color:var(--text-muted);font-size:.86rem;line-height:1.55}
.academic-inbox-compose textarea{width:100%;margin-top:12px;resize:vertical}
.academic-inbox-compose-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.academic-inbox-draft-list{display:grid;gap:12px}
.academic-inbox-draft-row{padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(255,255,255,.035)}
.academic-inbox-check{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700}
.academic-draft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:10px}
.academic-draft-grid label{display:grid;gap:6px}.academic-draft-grid label>span{font-size:.76rem;color:var(--text-muted);font-weight:700}
.academic-inbox-original{margin-top:10px;color:var(--text-muted);font-size:.82rem}.academic-inbox-original p{white-space:pre-wrap;line-height:1.5}
.academic-inbox-save-bar{display:flex;justify-content:flex-end;margin-top:16px}
.academic-inbox-history{display:grid;gap:10px}.academic-inbox-history-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(255,255,255,.03)}
.academic-inbox-history-item p{margin:.3rem 0 0;color:var(--text-muted);font-size:.8rem}

.beta-survey-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));background:rgba(2,6,23,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.beta-survey-modal{width:min(760px,100%);max-height:min(88vh,900px);overflow:auto;padding:22px}
.beta-survey-head{margin-bottom:18px}.beta-survey-head h2{margin:.35rem 0 .45rem}.beta-survey-head p{color:var(--text-muted);line-height:1.55}.beta-survey-kicker{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(34,211,238,.11);border:1px solid rgba(34,211,238,.2);color:#67e8f9;font-size:.75rem;font-weight:800}
.beta-question{display:grid;gap:9px;padding:14px 0;border-top:1px solid rgba(148,163,184,.12)}.beta-question>label{font-weight:700;line-height:1.45}.beta-question textarea,.beta-question select{width:100%}
.beta-scale{display:flex;gap:7px;flex-wrap:wrap}.beta-scale label input{position:absolute;opacity:0;pointer-events:none}.beta-scale label span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer;font-weight:800}.beta-scale label input:checked+span{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.14);color:#67e8f9}.beta-scale-11 label span{min-width:38px;height:38px}
.beta-feature-table{display:grid;gap:8px}.beta-feature-row{display:grid;grid-template-columns:1fr minmax(150px,200px);gap:10px;align-items:center;padding:8px 0}.beta-feature-row span{font-size:.9rem}.beta-two-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.beta-two-cols label{display:grid;gap:8px}
.beta-survey-actions{position:sticky;bottom:-22px;display:flex;justify-content:flex-end;gap:10px;padding:14px 0 2px;background:linear-gradient(180deg,transparent,rgba(15,23,42,.98) 32%)}.beta-survey-note{font-size:.75rem;margin-top:10px}

.beta-admin-page{max-width:1100px}.beta-admin-actions{display:flex;justify-content:flex-end;margin:1rem 0}.beta-admin-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.beta-admin-metric{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(255,255,255,.035)}.beta-admin-metric span{font-size:.76rem;color:var(--text-muted)}.beta-admin-metric strong{font-size:1.25rem}.beta-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.beta-admin-block{padding:14px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(255,255,255,.03)}.beta-admin-block h3{margin-bottom:10px}.beta-admin-dist{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid rgba(148,163,184,.09)}.beta-admin-responses{margin-top:22px}.beta-admin-response{padding:12px 0;border-top:1px solid rgba(148,163,184,.12)}.beta-admin-response pre{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-muted);font-size:.78rem}

@media(max-width:760px){.academic-source-grid,.beta-two-cols,.beta-admin-grid{grid-template-columns:1fr}.academic-draft-grid{grid-template-columns:1fr 1fr}.beta-admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.beta-survey-modal{padding:18px}.beta-feature-row{grid-template-columns:1fr}.beta-survey-actions{bottom:-18px}}
@media(max-width:480px){.academic-draft-grid{grid-template-columns:1fr}.beta-scale-11{gap:4px}.beta-scale-11 label span{min-width:34px;height:34px;font-size:.78rem}}

/* UNIPARCHADO-APPLE-MATERIAL-V2 */
:root{
    --material-thin:rgba(17,24,39,.42);
    --material-regular:rgba(20,29,47,.54);
    --material-elevated:rgba(28,37,57,.66);
    --material-border:rgba(255,255,255,.105);
    --material-border-strong:rgba(255,255,255,.16);
    --material-highlight:rgba(255,255,255,.20);
    --material-shadow:0 18px 48px rgba(0,0,0,.24),0 2px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.10);
    --material-shadow-floating:0 24px 70px rgba(0,0,0,.34),0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14);
}

body{
    background-color:#07101c;
    background-image:
        radial-gradient(ellipse 55% 38% at 12% -4%,rgba(47,129,247,.16),transparent 70%),
        radial-gradient(ellipse 44% 34% at 88% 8%,rgba(37,211,172,.10),transparent 70%),
        radial-gradient(ellipse 52% 42% at 52% 100%,rgba(79,70,229,.07),transparent 72%),
        linear-gradient(180deg,#0a1422 0%,#070d18 58%,#060b14 100%);
    background-attachment:fixed;
}

.glass-card,
.uniparchado-dialog-fallback,
.payment-status-box,
.empty-state.compact,
.pricing-card,
.calendar-card,
.marketing-consent-banner,
.pqr-result,
.pqr-admin-message-body{
    position:relative;
    overflow:hidden;
    border:1px solid var(--material-border);
    background:
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
        var(--material-regular);
    box-shadow:var(--material-shadow);
    backdrop-filter:blur(34px) saturate(155%);
    -webkit-backdrop-filter:blur(34px) saturate(155%);
}

.glass-card::before,
.payment-status-box::before,
.pricing-card::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(255,255,255,.11),transparent 18%),
        radial-gradient(90% 55% at 18% 0%,rgba(255,255,255,.055),transparent 65%);
    opacity:.72;
}

.glass-card>*,
.payment-status-box>*,
.pricing-card>*{
    position:relative;
    z-index:1;
}

/* Las superficies internas no deben parecer seis tarjetas pesadas metidas en otra tarjeta. */
.parchometro-detail-item,
.prediction-item,
.summary-col,
.calendar-summary-card,
.study-session-block,
.academic-inbox-draft-row,
.beta-admin-metric,
.beta-admin-block{
    border:1px solid rgba(255,255,255,.075);
    background:rgba(255,255,255,.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
}

/* Parchómetro: el vidrio acompaña el estado sin convertirse en semáforo de feria. */
.course-parchometro-card[data-tone="success"]{
    box-shadow:0 18px 50px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(52,211,153,.08);
}
.course-parchometro-card[data-tone="warning"],
.course-parchometro-card[data-tone="alert"]{
    border-color:rgba(251,191,36,.16);
    box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(251,191,36,.09);
}
.course-parchometro-card[data-tone="critical"]{
    border-color:rgba(251,113,133,.20);
    background:
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),
        linear-gradient(145deg,rgba(88,28,42,.18),rgba(20,29,47,.54) 58%);
    box-shadow:0 18px 54px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(251,113,133,.12);
}

/* Inputs estilo material: menos borde, más profundidad y contraste. */
input,select,textarea{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 1px rgba(0,0,0,.06);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
}

input:hover,select:hover,textarea:hover{
    background:rgba(255,255,255,.048);
    border-color:rgba(255,255,255,.11);
}

input:focus,select:focus,textarea:focus{
    background:rgba(255,255,255,.06);
    border-color:rgba(103,232,249,.34);
    box-shadow:0 0 0 3px rgba(34,211,238,.075),inset 0 1px 0 rgba(255,255,255,.06);
}

/* Botones sin el aspecto plástico del V1. */
.btn-primary,.btn-secondary,.btn-danger,.password-toggle{
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.12);
    backdrop-filter:blur(20px) saturate(145%);
    -webkit-backdrop-filter:blur(20px) saturate(145%);
}
.btn-primary{
    background:linear-gradient(180deg,rgba(103,232,249,.96),rgba(78,204,226,.90));
    color:#07111e;
}
.btn-secondary{
    background:rgba(255,255,255,.055);
}
.btn-secondary:hover{
    background:rgba(255,255,255,.085);
}

/* Tab bar flotante tipo iOS/App Store. Importante: NO compartir position con .glass-card. */
body.nav-visible #page-root{
    padding-bottom:calc(var(--nav-height) + 42px + env(safe-area-inset-bottom));
}

.glass-nav{
    width:min(760px,calc(100% - 28px));
    min-height:64px;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(10px,env(safe-area-inset-bottom)) !important;
    z-index:10000;
    transform:translateX(-50%);
    padding:7px;
    gap:4px;
    border:1px solid var(--material-border-strong);
    border-radius:24px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
        rgba(14,21,34,.64);
    box-shadow:var(--material-shadow-floating);
    backdrop-filter:blur(40px) saturate(175%);
    -webkit-backdrop-filter:blur(40px) saturate(175%);
    overflow:hidden;
}

.glass-nav::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.11),transparent 36%);
    opacity:.72;
}

.glass-nav .nav-btn{
    position:relative;
    z-index:1;
    min-height:50px;
    border:0;
    border-radius:18px;
    background:transparent;
    box-shadow:none;
    color:rgba(203,213,225,.68);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}

.glass-nav .nav-btn:hover{
    background:rgba(255,255,255,.05);
    color:rgba(241,245,249,.92);
}

.glass-nav .nav-btn.active{
    color:#f8fafc;
    background:rgba(255,255,255,.095);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 14px rgba(0,0,0,.10);
}

.glass-nav .nav-btn.active i{
    color:#67e8f9;
    filter:drop-shadow(0 0 8px rgba(103,232,249,.20));
}

.brand-wordmark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:-.03em;
    color:var(--text-main);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

:root[data-theme="light"]{
    --material-thin:rgba(255,255,255,.54);
    --material-regular:rgba(255,255,255,.68);
    --material-elevated:rgba(255,255,255,.80);
    --material-border:rgba(255,255,255,.72);
    --material-border-strong:rgba(255,255,255,.88);
    --material-shadow:0 16px 42px rgba(71,85,105,.14),0 2px 10px rgba(71,85,105,.08),inset 0 1px 0 rgba(255,255,255,.92);
}

:root[data-theme="light"] body{
    background-color:#eef5fa;
    background-image:
        radial-gradient(ellipse 55% 40% at 12% 0%,rgba(56,189,248,.17),transparent 70%),
        radial-gradient(ellipse 42% 34% at 88% 10%,rgba(45,212,191,.12),transparent 68%),
        linear-gradient(180deg,#eef6fb 0%,#f8fafc 58%,#edf3f7 100%);
}

:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .calendar-card{
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
    border-color:rgba(255,255,255,.82);
}

:root[data-theme="light"] .glass-nav{
    background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(244,248,252,.67));
    border-color:rgba(255,255,255,.92);
    box-shadow:0 20px 58px rgba(71,85,105,.17),inset 0 1px 0 rgba(255,255,255,.98);
}

@media(prefers-reduced-motion:no-preference){
    .glass-card,.btn-primary,.btn-secondary,.glass-nav .nav-btn{
        transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
    }
}

@media(max-width:760px){
    .glass-card{border-radius:22px}
    .app-container{
        padding-left:max(1rem,env(safe-area-inset-left));
        padding-right:max(1rem,env(safe-area-inset-right));
    }
    .glass-nav{
        width:calc(100% - 18px);
        bottom:max(7px,env(safe-area-inset-bottom)) !important;
        border-radius:22px;
        padding:6px;
    }
    body.nav-visible #page-root{
        padding-bottom:calc(var(--nav-height) + 34px + env(safe-area-inset-bottom));
    }
}

@media(max-width:420px){
    .glass-nav .nav-btn{
        min-height:48px;
        border-radius:16px;
    }
}