/* ============================================
   AC Edunity - ESTILOS PRINCIPALES
   Diseño tipo SaaS con tema oscuro y claro
   ============================================ */

:root {
    /* Colores Tema Oscuro - Elegante y Profesional */
    --bg-dark: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-tertiary: #252d3d;
    --text-primary: #ffffff;
    --text-secondary: #a0a8b8;
    --text-tertiary: #7a8291;

    /* Colores Acentos - Mejorados */
    --color-purple: #7c3aed;
    --color-cyan: #06b6d4;
    --color-pink: #ec4899;
    --color-yellow: #f59e0b;
    --color-blue: #3b82f6;

    /* Colores Tema Claro */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f5f7fa;
    --light-bg-tertiary: #e8ecf1;
    --light-text-primary: #0f1419;
    --light-text-secondary: #4b5563;
    --light-text-tertiary: #6b7280;

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Bordes */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 28px;

    /* Sombras - Más sutiles y profesionales */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.3);

    /* Transiciones */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

/* ============================================
   MODO CLARO
   ============================================ */
body.light-theme {
    --bg-dark: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #e8ecf1;
    --text-primary: #0f1419;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* ============================================
   RESET Y ESTILOS GLOBALES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

/* Critical landing scroll guard.
   Evita que aparezca una barra interna antes de que app.js termine de iniciar. */
html,
html.is-landing,
html.landing-mode {
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
}

body.is-landing,
body.landing-mode,
body.landing-active {
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
}

body.is-landing #app,
body.is-landing .app,
body.is-landing .app-shell,
body.is-landing .main-app,
body.is-landing .page-shell,
body.is-landing .page-wrapper,
body.is-landing .main-content,
body.is-landing .content-area,
body.is-landing #landing-page,
body.is-landing #landing-page.page,
body.is-landing #landing-page.page.active,
body.is-landing .landing-page,
body.is-landing .landing-wrapper,
body.is-landing .landing-main,
body.is-landing .landing-content,
body.is-landing .public-page,
body.is-landing .marketing-page,
body.is-landing .home-page,
body.is-landing .sections-wrapper,
body.is-landing .hero-section,
body.is-landing .features-section,
body.is-landing .ai-section,
body.is-landing .benefits-section,
body.landing-active #app,
body.landing-active .app,
body.landing-active .app-shell,
body.landing-active .main-app,
body.landing-active .page-shell,
body.landing-active .page-wrapper,
body.landing-active .main-content,
body.landing-active .content-area,
body.landing-active #landing-page,
body.landing-active #landing-page.page,
body.landing-active #landing-page.page.active,
body.landing-active .landing-page,
body.landing-active .landing-wrapper,
body.landing-active .landing-main,
body.landing-active .landing-content,
body.landing-active .public-page,
body.landing-active .marketing-page,
body.landing-active .home-page,
body.landing-active .sections-wrapper,
body.landing-active .hero-section,
body.landing-active .features-section,
body.landing-active .ai-section,
body.landing-active .benefits-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    overscroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
    overflow-x: hidden;
}

/* ============================================
   PÁGINA
   ============================================ */
.page {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.page.active {
    display: block;
}

body.app-booting {
    min-height: 100vh;
    overflow: hidden;
}

body.app-booting .page {
    display: none !important;
}

.app-boot-loader {
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.22), transparent 32%),
        radial-gradient(circle at 80% 75%, rgba(56, 189, 248, 0.16), transparent 34%),
        var(--bg-dark, #0f172a);
    color: var(--text-primary, #f8fafc);
}

body.app-booting .app-boot-loader {
    display: flex !important;
}

body:not(.app-booting) .app-boot-loader {
    display: none !important;
}

.boot-loader-card {
    width: min(92vw, 380px);
    padding: 32px;
    border-radius: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(18px);
}

.boot-loader-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin: 0 auto 14px;
    display: block;
    filter: drop-shadow(0 10px 22px rgba(56, 189, 248, 0.24));
}

.boot-loader-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
}

.boot-loader-text {
    margin-top: 10px;
    color: rgba(226, 232, 240, 0.75);
    font-weight: 700;
}

.boot-loader-spinner {
    width: 34px;
    height: 34px;
    margin: 22px auto 0;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: #38bdf8;
    animation: bootSpin 0.8s linear infinite;
}

@keyframes bootSpin {
    to {
        transform: rotate(360deg);
    }
}

body.light-mode .app-boot-loader,
body.light-theme .app-boot-loader,
[data-theme="light"] .app-boot-loader {
    background: #ffffff;
    color: #0f172a;
}

body.light-mode .boot-loader-card,
body.light-theme .boot-loader-card,
[data-theme="light"] .boot-loader-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

body.light-mode .boot-loader-text,
body.light-theme .boot-loader-text,
[data-theme="light"] .boot-loader-text {
    color: #475569;
}

@media (prefers-reduced-motion: reduce) {
    .boot-loader-spinner {
        animation-duration: 1.4s;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   LANDING PAGE
   ============================================ */
.landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-2xl);
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.floating-card {
    position: absolute;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    animation: float 6s ease-in-out infinite;
}

.floating-card .icon {
    font-size: 48px;
}

.floating-card p {
    font-size: 14px;
    font-weight: 600;
}

.card-1 {
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.card-2 {
    top: 150px;
    right: 0;
    animation-delay: 1s;
}

.card-3 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.benefits {
    padding: var(--spacing-2xl);
    background-color: var(--bg-secondary);
}

.benefits h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.benefit-card {
    background-color: var(--bg-dark);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    transition: all var(--transition-normal);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.benefit-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-purple);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.2);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.benefit-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-lg);
    transition: transform var(--transition-normal);
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.2);
}

.benefit-card h3 {
    font-size: 18px;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.benefit-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.landing-footer {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-tertiary);
    border-top: 1px solid var(--bg-tertiary);
}

/* ============================================
   SECCIÓN ACERCA DE
   ============================================ */
.about-project {
    padding: var(--spacing-2xl) var(--spacing-2xl);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-dark) 100%);
    border-top: 1px solid var(--bg-tertiary);
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.about-text h2 {
    font-size: 32px;
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.feature-icon {
    font-size: 20px;
    color: var(--color-purple);
    font-weight: bold;
}

.about-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.about-stat {
    background: linear-gradient(135deg, var(--color-purple), var(--color-blue)) no-repeat;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.stat-num {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr;
    }

    .about-visual {
        grid-template-columns: 1fr;
    }

    .about-text h2 {
        font-size: 24px;
    }
}

/* ============================================
   AUTENTICACIÓN
   ============================================ */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-secondary) 100%);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background-color: var(--bg-secondary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    border: 1px solid var(--bg-tertiary);
    box-shadow: var(--shadow-xl);
}

.auth-card h2 {
    font-size: 28px;
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--bg-dark);
    border: 1.5px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--color-purple);
    background-color: rgba(124, 58, 237, 0.05);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15), inset 0 0 0 1px rgba(6, 182, 212, 0.3);
    background-color: rgba(6, 182, 212, 0.02);
}

.auth-link {
    text-align: center;
    margin: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.auth-link a {
    color: var(--color-cyan);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-weight: 600;
}

.auth-link a:hover {
    color: var(--color-purple);
    text-decoration: underline;
}

/* ============================================
   UI/UX PREMIUM 2026 - AC Edunity SAAS
   Capa visual inspirada en productos SaaS modernos
   ============================================ */

:root {
    --bg-dark: #1E1F25;
    --bg-secondary: #262936;
    --bg-tertiary: #303447;
    --color-purple: #7B68EE;
    --color-cyan: #49CCF9;
    --color-pink: #FD71AF;
    --color-green: #00C875;
    --color-yellow: #FFC800;
    --color-blue: #49CCF9;
    --surface-glass: rgba(255, 255, 255, 0.075);
    --surface-line: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
    --shadow-glow: 0 24px 70px rgba(123, 104, 238, 0.25);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(123, 104, 238, 0.18), transparent 28%),
        radial-gradient(circle at 86% 14%, rgba(253, 113, 175, 0.16), transparent 28%),
        linear-gradient(135deg, #11131a 0%, #1E1F25 48%, #151823 100%);
}

.landing-nav {
    min-height: 78px;
    backdrop-filter: blur(22px);
    background: rgba(17, 19, 26, 0.76);
    border-bottom: 1px solid var(--surface-line);
}

.landing-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-links a {
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.landing-links a:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.nav-logo,
.sidebar-logo {
    letter-spacing: -0.04em;
    background: linear-gradient(120deg, var(--color-purple), var(--color-cyan), var(--color-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}.section-eyebrow{
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.10);
    color: var(--color-cyan);
    font-size: 13px;
    font-weight: 800;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--surface-line);
    border-radius: 999px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 204, 249, 0.45);
    background: rgba(73, 204, 249, 0.12);
}

.floating-card {
    z-index: 2;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

.card-4 {
    right: 42px;
    bottom: 22px;
    animation-delay: 2.7s;
}

.benefits {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        transparent;
}

.benefits h2 {
    max-width: 780px;
    margin-inline: auto;
    letter-spacing: 0;
}

.benefit-card,
.card,
.stat-card,
.subject-card,
.task-item,
.calendar-container,
.grade-card,
.ai-input-section,
.ai-output-section,
.level-card,
.progress-stat,
.resource-card,
.auth-card,
.quick-modal-card,
.attendance-card {
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(38, 41, 54, 0.82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.benefit-card:hover,
.stat-card:hover,
.subject-card:hover,
.task-item:hover,
.resource-card:hover,
.grade-card:hover {
    transform: translateY(-5px);
    border-color: rgba(73, 204, 249, 0.38);
    box-shadow: 0 22px 55px rgba(73, 204, 249, 0.12);
}

.btn-primary,
.btn-large {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan), var(--color-pink));
    box-shadow: 0 14px 32px rgba(123, 104, 238, 0.26);
}

.btn-secondary {
    border-color: var(--surface-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(19, 22, 34, 0.96), rgba(12, 14, 22, 0.96)),
        var(--bg-dark);
    border-right: 1px solid var(--surface-line);
}

.nav-item {
    margin: 4px 12px;
    border-radius: 16px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(3px);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.28), rgba(73, 204, 249, 0.12));
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--color-purple);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.main-content {
    background:
        radial-gradient(circle at 70% 0%, rgba(253, 113, 175, 0.10), transparent 32%),
        radial-gradient(circle at 10% 10%, rgba(73, 204, 249, 0.08), transparent 28%),
        transparent;
}

.section {
    animation: sectionRise 420ms ease both;
}

@keyframes sectionRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header h1 {
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: 0;
}

.empty-state h3 {
    font-weight: 800;
}

.empty-state h3::after {
    content: " Empieza cuando estes listo.";
    color: var(--text-secondary);
    font-weight: 600;
}

body.light-theme {
    --bg-dark: #FFFFFF;
    --bg-secondary: #f7f8fc;
    --bg-tertiary: #eef1f8;
    --surface-line: rgba(15, 23, 42, 0.10);
    background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
}

body.light-theme .landing-nav,
body.light-theme .sidebar {
    background: rgba(255, 255, 255, 0.88);
}

body.light-theme .benefit-card,
body.light-theme .card,
body.light-theme .stat-card,
body.light-theme .subject-card,
body.light-theme .task-item,
body.light-theme .calendar-container,
body.light-theme .grade-card,
body.light-theme .resource-card,
body.light-theme .auth-card,
body.light-theme .quick-modal-card {
    background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
    .landing-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

#landing-page .card-1,
#landing-page .card-2,
#landing-page .card-3,
#landing-page .card-4,
#landing-page .floating-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

#landing-page .floating-card .icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.95), rgba(73, 204, 249, 0.9));
    box-shadow: 0 12px 26px rgba(73, 204, 249, 0.22);
}

#landing-page .floating-card p {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.25;
}

#landing-page .card-4 .icon {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-pink), var(--color-purple));
}

#landing-page .benefits {
    padding: clamp(70px, 8vw, 112px) clamp(22px, 4vw, 48px);
    background:
        radial-gradient(circle at 16% 20%, rgba(73, 204, 249, 0.12), transparent 28%),
        radial-gradient(circle at 86% 28%, rgba(253, 113, 175, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(30, 31, 37, 0.98), rgba(25, 27, 35, 0.98));
}

#landing-page .benefits .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#landing-page .benefits h2 {
    width: min(960px, 100%);
    margin: 0 auto clamp(28px, 4vw, 48px);
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.05;
    text-align: center;
}

#landing-page .benefits-grid {
    width: min(1260px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

#landing-page .benefit-card {
    position: relative;
    min-height: 286px;
    padding: 28px;
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(38, 41, 54, 0.86);
}

#landing-page .benefit-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan), var(--color-pink));
}

#landing-page .benefit-card::after {
    content: "";
    position: absolute;
    right: -56px;
    bottom: -64px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(73, 204, 249, 0.22), transparent 66%);
    transition: transform 260ms ease;
}

#landing-page .benefit-card:nth-child(2)::after {
    background: radial-gradient(circle, rgba(253, 113, 175, 0.22), transparent 66%);
}

#landing-page .benefit-card:nth-child(3)::after {
    background: radial-gradient(circle, rgba(0, 200, 117, 0.20), transparent 66%);
}

#landing-page .benefit-card:nth-child(4)::after {
    background: radial-gradient(circle, rgba(255, 200, 0, 0.20), transparent 66%);
}

#landing-page .benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(73, 204, 249, 0.18);
}

#landing-page .benefit-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 20px;
    font-size: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        rgba(123, 104, 238, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

#landing-page .benefit-card h3 {
    color: #ffffff;
    font-size: 24px;
}

#landing-page .benefit-card p {
    color: #c4ccdc;
    font-size: 16px;
    line-height: 1.7;
}

#landing-page .about-project {
    padding: clamp(72px, 8vw, 116px) clamp(22px, 4vw, 48px);
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.08), transparent 34%),
        radial-gradient(circle at 82% 52%, rgba(73, 204, 249, 0.14), transparent 26%),
        #20232d;
}

#landing-page .about-container {
    width: min(1220px, 100%);
    gap: clamp(34px, 6vw, 76px);
}

#landing-page .about-text h2 {
    max-width: 680px;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
}

#landing-page .about-description {
    max-width: 760px;
    color: #c8d0e0;
    font-size: 17px;
    line-height: 1.85;
}

#landing-page .feature-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
}

#landing-page .about-stat {
    min-height: 184px;
    display: grid;
    align-content: center;
    gap: 8px;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-purple), var(--color-cyan));
}

#landing-page .about-stat:nth-child(2) {
    transform: translateY(24px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-pink), var(--color-purple));
}

#landing-page .about-stat:nth-child(3) {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-green), var(--color-cyan));
}

#landing-page .stat-num {
    color: #ffffff;
    font-size: clamp(36px, 4.8vw, 54px);
}

#landing-page .stat-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    #landing-page .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    #landing-page .floating-card .icon {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    #landing-page .benefits-grid,
    #landing-page .about-container,
    #landing-page .about-visual {
        grid-template-columns: 1fr;
    }

    #landing-page .benefit-card,
    #landing-page .about-stat,
    #landing-page .about-stat:nth-child(2) {
        min-height: auto;
        transform: none;
    }
}

@media (max-width: 520px) {
}

/* ============================================
   LANDING POLISH - ORDEN VISUAL Y PRESENTACION
   ============================================ */

#landing-page {
    overflow-x: hidden;
}

#landing-page .floating-card,
#landing-page .card-1,
#landing-page .card-2,
#landing-page .card-3,
#landing-page .card-4 {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

#landing-page .floating-card .icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.95), rgba(73, 204, 249, 0.9));
    box-shadow: 0 12px 26px rgba(73, 204, 249, 0.22);
}

#landing-page .card-4 .icon {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-pink), var(--color-purple));
}

#landing-page .floating-card p {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.25;
}

@keyframes landingCardRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.benefits {
    position: relative;
    padding: clamp(70px, 8vw, 112px) clamp(22px, 4vw, 48px);
    background:
        radial-gradient(circle at 16% 20%, rgba(73, 204, 249, 0.12), transparent 28%),
        radial-gradient(circle at 86% 28%, rgba(253, 113, 175, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(30, 31, 37, 0.98), rgba(25, 27, 35, 0.98));
}

.benefits .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

.benefits h2 {
    width: min(960px, 100%);
    margin: 0 auto clamp(28px, 4vw, 48px);
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.05;
    text-align: center;
    text-wrap: balance;
}

.benefits-grid {
    width: min(1260px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.benefit-card {
    position: relative;
    min-height: 286px;
    padding: 28px;
    overflow: hidden;
    border-radius: 26px;
}

.benefit-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan), var(--color-pink));
}

.benefit-card::after {
    content: "";
    position: absolute;
    right: -56px;
    bottom: -64px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(73, 204, 249, 0.22), transparent 66%);
    transition: transform 260ms ease, opacity 260ms ease;
}

.benefit-card:nth-child(2)::after {
    background: radial-gradient(circle, rgba(253, 113, 175, 0.22), transparent 66%);
}

.benefit-card:nth-child(3)::after {
    background: radial-gradient(circle, rgba(0, 200, 117, 0.20), transparent 66%);
}

.benefit-card:nth-child(4)::after {
    background: radial-gradient(circle, rgba(255, 200, 0, 0.20), transparent 66%);
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(73, 204, 249, 0.18);
}

.benefit-card:hover::after {
    transform: scale(1.16);
    opacity: 0.95;
}

.benefit-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 20px;
    font-size: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        rgba(123, 104, 238, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.benefit-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 24px;
}

.benefit-card p {
    position: relative;
    z-index: 1;
    color: #c4ccdc;
    font-size: 16px;
    line-height: 1.7;
}

.about-project {
    position: relative;
    padding: clamp(72px, 8vw, 116px) clamp(22px, 4vw, 48px);
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.08), transparent 34%),
        radial-gradient(circle at 82% 52%, rgba(73, 204, 249, 0.14), transparent 26%),
        #20232d;
    overflow: hidden;
}

.about-project::before {
    content: "";
    position: absolute;
    inset: 42px clamp(18px, 4vw, 58px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 34px;
    pointer-events: none;
}

.about-container {
    position: relative;
    z-index: 1;
    width: min(1220px, 100%);
    gap: clamp(34px, 6vw, 76px);
}

.about-text h2 {
    max-width: 680px;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    text-wrap: balance;
}

.about-description {
    max-width: 760px;
    color: #c8d0e0;
    font-size: 17px;
    line-height: 1.85;
}

.feature-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
}

.about-visual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-self: stretch;
}

.about-stat {
    min-height: 184px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 28px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    box-shadow: 0 24px 60px rgba(73, 204, 249, 0.18);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.about-stat:nth-child(2) {
    transform: translateY(24px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-pink), var(--color-purple));
}

.about-stat:nth-child(3) {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-green), var(--color-cyan));
}

.about-stat:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(123, 104, 238, 0.24);
}

.about-stat:nth-child(2):hover {
    transform: translateY(12px);
}

.stat-num {
    color: #ffffff;
    font-size: clamp(36px, 4.8vw, 54px);
    line-height: 1;
}

.stat-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.light-theme .benefits {
    background:
        radial-gradient(circle at 16% 20%, rgba(73, 204, 249, 0.14), transparent 30%),
        radial-gradient(circle at 86% 28%, rgba(253, 113, 175, 0.12), transparent 30%),
        linear-gradient(180deg, #f7f9ff, #eef3ff);
}

body.light-theme .benefits h2,
body.light-theme .benefit-card h3 {
    color: #172033;
}

body.light-theme .benefit-card p,
body.light-theme .about-description {
    color: #536176;
}

body.light-theme .about-project {
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.10), transparent 36%),
        radial-gradient(circle at 82% 52%, rgba(73, 204, 249, 0.16), transparent 28%),
        #f4f7ff;
}

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

@media (max-width: 768px) {

    #landing-page .floating-card .icon {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .benefits-grid,
    .about-container,
    .about-visual {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        min-height: auto;
    }

    .about-project::before {
        inset: 20px 12px;
        border-radius: 24px;
    }

    .about-stat,
    .about-stat:nth-child(2) {
        min-height: 132px;
        transform: none;
    }

    .about-stat:nth-child(2):hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 520px) {

    .benefits,
    .about-project {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 768px) {

    .floating-card {
        position: relative;
        inset: auto;
        display: inline-flex;
        margin: 8px;
        transform: none;
    }
}

.auth-message {
    margin-top: var(--spacing-md);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(253, 113, 175, 0.35);
    background: rgba(253, 113, 175, 0.10);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}

.auth-message.success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
}

.auth-message.info {
    border-color: rgba(73, 204, 249, 0.35);
    background: rgba(73, 204, 249, 0.12);
}

/* ============================================
   BOTONES
   ============================================ */
button {
    cursor: pointer;
    border: none;
    font-weight: 600;
    transition: all var(--transition-fast);
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-cyan) 100%);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.btn-primary:active {
    transform: translateY(0px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--bg-tertiary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    background-color: rgba(6, 182, 212, 0.05);
}

.btn-large {
    background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-purple) 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: 16px;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.3);
}

.btn-block {
    width: 100%;
    margin-top: var(--spacing-md);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 12px;
}

.theme-toggle {
    background: none;
    font-size: 20px;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--bg-tertiary);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--color-cyan);
    background-color: rgba(6, 182, 212, 0.1);
}

.btn-close {
    background: none;
    color: var(--text-secondary);
    font-size: 20px;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.btn-close:hover {
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
#app-page {
    display: flex;
}

.sidebar {
    width: 280px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-dark) 100%);
    border-right: 1px solid var(--bg-tertiary);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    transition: left var(--transition-normal);
    z-index: 200;
}

.sidebar-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.sidebar-logo {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: -0.5px;
}

.sidebar-toggle {
    display: none;
    background: none;
    color: var(--text-primary);
    font-size: 20px;
}

.sidebar-nav {
    padding: var(--spacing-md) 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    border-radius: 0;
    margin: 0 var(--spacing-sm);
    margin-left: 0;
}

.nav-item:hover {
    color: var(--color-cyan);
    background-color: rgba(6, 182, 212, 0.1);
    border-left-color: var(--color-cyan);
}

.nav-item.active {
    color: var(--color-cyan);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.15), transparent);
    border-left-color: var(--color-purple);
    font-weight: 600;
}

.nav-icon {
    font-size: 18px;
    min-width: 20px;
}

.nav-label {
    font-size: 14px;
    font-weight: 500;
}

.sidebar-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: absolute;
    bottom: 0;
    width: 100%;
}

.sidebar-theme {
    background: linear-gradient(135deg, var(--color-purple), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-md);
}

.main-content {
    margin-left: 260px;
    flex: 1;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--spacing-xl);
}

.section {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.section.active {
    display: block;
}

.section-header {
    margin-bottom: var(--spacing-2xl);
}

.section-header h1 {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.subtitle {
    color: var(--text-secondary);
    font-size: 16px;
}

/* ============================================
   TARJETAS Y COMPONENTES
   ============================================ */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
}

.card h3 {
    margin-bottom: var(--spacing-lg);
    font-size: 18px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(124, 58, 237, 0.2);
    transition: all var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan));
}

.stat-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-purple);
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.2);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-icon {
    font-size: 24px;
    min-width: 32px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-subtext {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-lg);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--bg-tertiary);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan));
    border-radius: 3px;
    transition: width var(--transition-normal);
}

.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.activity-list {
    list-style: none;
}

.activity-list li {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-list li:last-child {
    border-bottom: none;
}

.activity-time {
    font-size: 12px;
    color: var(--text-tertiary);
}

.activity-text {
    color: var(--text-secondary);
    font-size: 14px;
}

.recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recommendation-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-dark);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-cyan);
}

.recommendation-item span {
    font-size: 20px;
}

.recommendation-item p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   MATERIAS
   ============================================ */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.subject-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid rgba(124, 58, 237, 0.2);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.subject-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan));
    transition: height var(--transition-normal);
}

.subject-card:hover::before {
    height: 6px;
}

.subject-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-purple);
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.2);
}

.subject-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.subject-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.subject-icon {
    font-size: 32px;
}

.subject-book {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 34px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 6px 6px 4px 4px;
    background: #49ccf9;
    box-shadow:
        inset -5px 0 0 rgba(255, 255, 255, 0.26),
        0 3px 0 rgba(255, 255, 255, 0.82),
        0 8px 18px rgba(73, 204, 249, 0.18);
}

.subject-book::before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
}

.subject-book::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 6px 0 0 4px;
    background: rgba(30, 31, 37, 0.18);
}

.subject-book.book-blue {
    background: linear-gradient(135deg, #2563eb, #49ccf9);
}

.subject-book.book-orange {
    background: linear-gradient(135deg, #f97316, #ffc800);
}

.subject-book.book-yellow {
    background: linear-gradient(135deg, #facc15, #fff176);
}

.subject-book.book-green {
    background: linear-gradient(135deg, #00c875, #86efac);
}

.subject-book.book-purple {
    background: linear-gradient(135deg, #7b68ee, #a78bfa);
}

.subject-book.book-pink {
    background: linear-gradient(135deg, #fd71af, #f9a8d4);
}

.subject-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), transparent);
    border-radius: var(--radius-md);
}

.stat {
    text-align: center;
}

.stat-name {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.stat-num {
    display: block;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.last-activity {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: var(--spacing-md) 0;
}

/* ============================================
   TAREAS
   ============================================ */
.tasks-container {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    overflow: hidden;
}

.task-filter {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--bg-tertiary);
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: all var(--transition-fast);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    color: white;
    border: none;
}

.tasks-list {
    max-height: 600px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-normal);
}

.task-item:hover {
    transform: translateX(4px);
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.task-item[data-status="completed"] {
    opacity: 0.7;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-secondary) 100%);
}

.task-item[data-status="completed"] .task-content h4 {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.task-checkbox {
    margin-top: 6px;
    flex-shrink: 0;
}

.task-checkbox input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-cyan);
}

.task-content {
    flex: 1;
}

.task-content h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.task-subject {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}

.task-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.task-priority {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.task-priority.high {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
    color: var(--color-pink);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.task-priority.medium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    color: var(--color-yellow);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.task-priority.low {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
    color: var(--color-cyan);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

/* ============================================
   CALENDARIO
   ============================================ */
.calendar-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
}

.calendar-mini {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-lg);
}

.events-list {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-lg);
}

.events-list h3 {
    margin-bottom: var(--spacing-lg);
}

.event-item {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background-color: var(--bg-dark);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--color-cyan);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.event-date .day {
    font-size: 24px;
    font-weight: 700;
}

.event-date .month {
    font-size: 12px;
    color: var(--text-secondary);
}

.event-content h4 {
    margin-bottom: var(--spacing-xs);
    font-size: 15px;
}

.event-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.event-badge {
    display: inline-block;
    padding: 4px 8px;
    background-color: rgba(73, 204, 249, 0.2);
    color: var(--color-cyan);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.event-exam {
    border-left-color: var(--color-pink);
}

.event-deadline {
    border-left-color: var(--color-yellow);
}

.event-class {
    border-left-color: var(--color-purple);
}

/* ============================================
   NOTAS
   ============================================ */
.grades-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.add-grade-form {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-xl);
}

.add-grade-form h3 {
    margin-bottom: var(--spacing-lg);
}

.add-grade-form form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.add-grade-form button {
    grid-column: 1 / -1;
    align-self: end;
}

.grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--spacing-lg);
}

.grade-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(124, 58, 237, 0.2);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.grade-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-cyan);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.15);
}

.grade-card h3 {
    margin-bottom: var(--spacing-lg);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.grades-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.grade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), transparent);
    border-radius: var(--radius-md);
    border: 1px solid rgba(6, 182, 212, 0.15);
    transition: all var(--transition-fast);
}

.grade-item:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05));
    border-color: var(--color-cyan);
}

.grade-name {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.grade-value {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-average {
    color: var(--color-cyan);
    font-size: 20px;
    font-weight: 700;
}

/* ============================================
   ASISTENTE IA
   ============================================ */
.ai-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.ai-input-section,
.ai-output-section {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-xl);
}

#ai-topic {
    resize: vertical;
    min-height: 120px;
}

.ai-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.ai-buttons button {
    width: 100%;
    text-align: center;
    padding: var(--spacing-md);
}

.ai-result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-header h3 {
    margin: 0;
}

.result-content {
    background-color: var(--bg-dark);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--bg-tertiary);
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.6;
    font-size: 14px;
}

.result-actions {
    display: flex;
    gap: var(--spacing-md);
}

.result-actions button {
    flex: 1;
}

/* ============================================
   PROGRESO
   ============================================ */
.progress-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.level-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.level-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(123, 104, 238, 0.3);
    padding: var(--spacing-2xl);
    text-align: center;
}

.level-number {
    font-size: 72px;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.level-card p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.xp-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-purple));
}

.xp-text {
    font-weight: 600;
    margin: 0;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.progress-stat {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
}

.achievements-section h3 {
    margin-bottom: var(--spacing-lg);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-lg);
}

.achievement {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.achievement.unlocked {
    border-color: var(--color-yellow);
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.1), rgba(73, 204, 249, 0.1));
}

.achievement.unlocked:hover {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(255, 200, 0, 0.3);
}

.achievement.locked {
    opacity: 0.4;
}

.achievement-icon {
    font-size: 40px;
}

.achievement p {
    font-size: 11px;
    font-weight: 600;
    margin: 0;
}

/* ============================================
   MOCHILA DIGITAL
   ============================================ */
.backpack-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.resource-card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
}

.resource-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-purple);
    box-shadow: var(--shadow-lg);
}

.resource-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.resource-card h4 {
    font-size: 16px;
    margin-bottom: var(--spacing-sm);
}

.resource-type {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.resource-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-lg);
}

.resource-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.resource-actions button {
    flex: 1;
    margin-top: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {

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

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

    .ai-container {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--bg-tertiary);
        overflow-y: visible;
        padding-bottom: 180px;
    }

    .sidebar-toggle {
        display: block;
    }

    .sidebar-nav {
        display: none;
        padding: var(--spacing-sm) 0;
        flex-wrap: wrap;
    }

    .sidebar.open .sidebar-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .sidebar-footer {
        position: relative;
        width: 100%;
        display: flex;
    }

    .sidebar.open .sidebar-footer {
        display: flex;
        padding: var(--spacing-lg);
        border-top: 1px solid var(--bg-tertiary);
        position: relative;
        bottom: auto;
    }

    .main-content {
        margin-left: 0;
        max-height: auto;
        overflow-y: visible;
        padding: var(--spacing-lg);
    }

    .section-header h1 {
        font-size: 24px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-md);
    }

    .stat-card {
        padding: var(--spacing-lg);
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-label {
        font-size: 11px;
    }

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

    .nav-label {
        display: none;
    }

    .sidebar.open .nav-label {
        display: inline;
    }

    .nav-item {
        margin: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        border-bottom: 2px solid transparent;
        border-left: none;
        border-radius: var(--radius-sm);
        font-size: 13px;
    }

    .nav-item:hover,
    .nav-item.active {
        border-bottom-color: var(--color-cyan);
        border-left: none;
        background-color: rgba(6, 182, 212, 0.1);
    }

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

    .subject-card {
        padding: var(--spacing-lg);
    }

    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .backpack-container {
        grid-template-columns: 1fr;
    }

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

    .task-item {
        gap: var(--spacing-sm);
        flex-direction: row;
    }

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

    .ai-container {
        grid-template-columns: 1fr;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    .about-visual {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    :root {
        --spacing-lg: 16px;
        --spacing-xl: 20px;
        --spacing-2xl: 32px;
    }

    .landing-nav {
        padding: var(--spacing-md);
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-actions {
        gap: var(--spacing-sm);
        width: 100%;
    }

    .nav-actions button {
        flex: 1;
    }

    .floating-card {
        padding: var(--spacing-md);
        font-size: 12px;
    }

    .floating-card .icon {
        font-size: 36px;
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-icon {
        font-size: 20px;
    }

    .stat-label {
        font-size: 10px;
    }

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

    .task-item {
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
    }

    .level-number {
        font-size: 42px;
    }

    .benefits h2 {
        font-size: 22px;
    }

    .section-header h1 {
        font-size: 20px;
    }

    .about-text h2 {
        font-size: 20px;
    }

    .about-description {
        font-size: 14px;
    }

    .stat-num {
        font-size: 24px;
    }

    .feature-icon {
        font-size: 16px;
        min-width: 14px;
    }

    .benefit-icon {
        font-size: 28px;
    }

    .sidebar-footer {
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .sidebar-footer button {
        flex: 1;
        font-size: 12px;
        padding: var(--spacing-sm);
    }
}

/* ============================================
   SCROLLBAR PERSONALIZADA
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ============================================
   AJUSTES PROFESIONALES AC Edunity
   Mejora visual tipo SaaS sin mover estilos al HTML
   ============================================ */

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(124, 58, 237, 0.22), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(236, 72, 153, 0.18), transparent 28%),
        linear-gradient(135deg, #070b18 0%, var(--bg-dark) 48%, #101827 100%);
}

body.light-theme {
    background:
        radial-gradient(circle at 12% 8%, rgba(124, 58, 237, 0.10), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(6, 182, 212, 0.12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
}

.landing-nav,
.sidebar {
    background: rgba(10, 15, 31, 0.86);
    border-color: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(22px);
}

body.light-theme .landing-nav,
body.light-theme .sidebar {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(15, 20, 25, 0.08);
}

.sidebar-logo,
.nav-logo {
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan), var(--color-pink));
    -webkit-background-clip: text;
    background-clip: text;
}

.btn-primary,
.btn-large {
    background: linear-gradient(135deg, var(--color-purple), var(--color-blue), var(--color-pink));
    box-shadow: 0 16px 34px rgba(124, 58, 237, 0.34);
}

.btn-primary:hover,
.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(236, 72, 153, 0.30);
}

.stat-card,
.subject-card,
.task-item,
.calendar-container,
.grade-card,
.ai-input-section,
.progress-overview,
.achievement,
.resource-card,
.benefit-card,
.auth-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--bg-secondary);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

body.light-theme .stat-card,
body.light-theme .subject-card,
body.light-theme .task-item,
body.light-theme .calendar-container,
body.light-theme .grade-card,
body.light-theme .ai-input-section,
body.light-theme .progress-overview,
body.light-theme .achievement,
body.light-theme .resource-card,
body.light-theme .benefit-card,
body.light-theme .auth-card {
    border-color: rgba(15, 20, 25, 0.08);
    box-shadow: 0 16px 38px rgba(54, 67, 108, 0.13);
}

.stat-card:hover,
.subject-card:hover,
.task-item:hover,
.resource-card:hover,
.benefit-card:hover {
    transform: translateY(-3px);
}

.nav-item {
    min-height: 46px;
}

.nav-icon {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.14);
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
}

.section-header {
    gap: var(--spacing-sm);
}

.section-header h1 {
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .landing-nav {
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .nav-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .nav-actions .btn-secondary,
    .nav-actions .btn-primary {
        flex: 1 1 135px;
    }

    .sidebar.open {
        max-height: 100vh;
        overflow-y: auto;
    }

    .sidebar.open .sidebar-nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }

    .sidebar.open .nav-item {
        justify-content: flex-start;
        padding: 12px 14px;
    }

    .sidebar.open .sidebar-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .main-content {
        padding-bottom: var(--spacing-xl);
    }
}

@media (max-width: 480px) {

    .btn-large,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }
}

/* ============================================
   COMPONENTES ADICIONALES DE PRESENTACION
   ============================================ */

.progress-blue {
    width: 100%;
    background: linear-gradient(90deg, var(--color-blue), var(--color-cyan));
}

.progress-pink {
    width: 78%;
    background: linear-gradient(90deg, var(--color-pink), var(--color-purple));
}

.weekly-progress-card {
    min-height: 250px;
}

.weekly-chart {
    display: flex;
    align-items: end;
    gap: 10px;
    height: 150px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
}

.week-day {
    flex: 1;
    min-width: 20px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, var(--color-cyan), var(--color-purple), var(--color-pink));
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.26);
    animation: growBar 700ms ease both;
}

.h-42 { height: 42%; }
.h-58 { height: 58%; }
.h-64 { height: 64%; }
.h-68 { height: 68%; }
.h-76 { height: 76%; }
.h-84 { height: 84%; }
.h-92 { height: 92%; }

.chart-caption {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    line-height: 1.6;
}

.assistant-chat-preview {
    display: grid;
    gap: 12px;
    margin-bottom: var(--spacing-lg);
}

.assistant-message {
    max-width: 92%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    line-height: 1.55;
}

.assistant-message p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}

.assistant-message.bot {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(6, 182, 212, 0.08));
}

.assistant-message.user {
    justify-self: end;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(124, 58, 237, 0.12));
}

.task-item[data-status="upcoming"] {
    border-color: rgba(59, 130, 246, 0.34);
}

.task-item[data-status="upcoming"] .task-priority {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(6, 182, 212, 0.12));
    color: var(--color-cyan);
    border: 1px solid rgba(6, 182, 212, 0.28);
}

.subject-custom {
    border-color: rgba(6, 182, 212, 0.34);
}

.subject-custom::before {
    background: linear-gradient(90deg, var(--color-blue), var(--color-purple), var(--color-pink));
}

#custom-events-list {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.event-custom {
    border-left-color: var(--color-purple);
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(6, 182, 212, 0.08)),
        var(--bg-dark);
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--spacing-xl);
    align-items: stretch;
}

.profile-card,
.profile-metrics {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--bg-secondary);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.profile-card {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    padding: var(--spacing-2xl);
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-blue), var(--color-pink));
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    box-shadow: 0 18px 34px rgba(124, 58, 237, 0.34);
}

.profile-role {
    display: inline-flex;
    margin-bottom: var(--spacing-sm);
    color: var(--color-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-details h2 {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(26px, 4vw, 42px);
}

.profile-details p {
    color: var(--text-secondary);
    line-height: 1.65;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.profile-tags span {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 700;
}

.profile-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
}

.profile-metric {
    display: grid;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
}

.profile-metric span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-metric strong {
    font-size: 26px;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-metric strong.empty-profile-value {
    font-size: 22px;
    line-height: 1.2;
}

/* Mascota flotante de AC Edunity */
.study-pet {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 500;
    display: grid;
    grid-template-columns: minmax(190px, 260px) 92px;
    align-items: end;
    gap: 12px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
    animation: petFloat 4s ease-in-out infinite;
}

.study-pet.dragging {
    cursor: grabbing;
    animation: none;
}

.pet-bubble {
    position: relative;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 18px 18px 6px 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
        rgba(30, 31, 37, 0.88);
    color: #ffffff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
}

.pet-bubble::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(30, 31, 37, 0.88);
    transform: rotate(45deg);
}

.pet-parrot {
    position: relative;
    width: 92px;
    height: 104px;
    border-radius: 58% 58% 50% 50% / 48% 48% 58% 58%;
    background:
        radial-gradient(circle at 72% 78%, rgba(73, 204, 249, 0.65) 0 20px, transparent 21px),
        linear-gradient(150deg, #6bf36f 0%, #00c875 42%, #12a85f 100%);
    box-shadow:
        inset -14px -18px 0 rgba(0, 97, 72, 0.22),
        inset 10px 12px 0 rgba(255, 255, 255, 0.22),
        0 20px 42px rgba(0, 200, 117, 0.24);
    transform-origin: 50% 88%;
    animation: petWiggle 2.8s ease-in-out infinite;
}

.pet-parrot::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 64px;
    width: 44px;
    height: 54px;
    border-radius: 10px 28px 28px 10px;
    background: linear-gradient(160deg, #7b68ee, #49ccf9);
    transform: rotate(18deg);
    z-index: -1;
    box-shadow: inset -8px -8px 0 rgba(15, 23, 42, 0.12);
}

.pet-parrot::after {
    content: "";
    position: absolute;
    left: 28px;
    top: -12px;
    width: 38px;
    height: 24px;
    border-radius: 50% 50% 8px 8px;
    background: linear-gradient(135deg, #b7ff45, #00c875 48%, #49ccf9);
    transform: rotate(-7deg);
    z-index: -1;
}

.pet-wing {
    position: absolute;
    left: 8px;
    top: 50px;
    width: 48px;
    height: 48px;
    border-radius: 56% 22% 58% 42%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.22), transparent 26px),
        linear-gradient(135deg, #00a8ff, #7b68ee 72%);
    transform: rotate(-15deg);
    animation: wingFlap 2.8s ease-in-out infinite;
}

.pet-eye {
    position: absolute;
    left: 45px;
    top: 25px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        inset 0 -2px 0 rgba(30, 31, 37, 0.10),
        -25px 18px 0 7px rgba(253, 113, 175, 0.34);
    animation: petBlink 5s ease-in-out infinite;
    overflow: hidden;
}

.pet-eye::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #101827;
    box-shadow: 2px -2px 0 -1px #ffffff;
    transform: translate(var(--pet-eye-x, 0px), var(--pet-eye-y, 0px));
    transition: transform 0.08s ease-out;
}

.pet-beak {
    position: absolute;
    left: 61px;
    top: 39px;
    width: 28px;
    height: 20px;
    clip-path: polygon(0 8%, 100% 50%, 0 92%, 16% 50%);
    background: linear-gradient(135deg, #ffc800, #ff8a00);
    filter: drop-shadow(0 3px 0 rgba(30, 31, 37, 0.14));
}

.pet-feet {
    position: absolute;
    left: 28px;
    bottom: -9px;
    width: 12px;
    height: 11px;
    border-radius: 999px;
    background: #ffc800;
    box-shadow: 22px 0 0 #ffc800;
}

body.light-theme .pet-bubble {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.9)),
        #ffffff;
    color: #182235;
    border-color: rgba(14, 165, 233, 0.22);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

body.light-theme .pet-bubble::after {
    background: #ffffff;
}

@keyframes petFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes petWiggle {
    0%, 100% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

@keyframes wingFlap {
    0%, 100% {
        transform: rotate(-15deg) translateY(0);
    }
    50% {
        transform: rotate(-24deg) translateY(-2px);
    }
}

@keyframes petBlink {
    0%, 92%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.28);
    }
}

@media (max-width: 720px) {
    .study-pet {
        right: 16px;
        bottom: 16px;
        grid-template-columns: minmax(150px, 190px) 68px;
        gap: 8px;
    }

    .pet-bubble {
        margin-bottom: 16px;
        padding: 12px 13px;
        font-size: 13px;
    }

    .pet-parrot {
        width: 72px;
        height: 84px;
    }

    .pet-parrot::before {
        left: -10px;
        top: 50px;
        width: 34px;
        height: 43px;
    }

    .pet-wing {
        width: 36px;
        height: 36px;
        top: 41px;
    }

    .pet-eye {
        left: 36px;
        top: 20px;
        width: 17px;
        height: 17px;
    }

    .pet-eye::after {
        left: 5px;
        top: 5px;
    }

    .pet-beak {
        left: 49px;
        top: 31px;
        width: 23px;
        height: 16px;
    }
}

@keyframes growBar {
    from {
        transform: scaleY(0.35);
        opacity: 0.45;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .weekly-chart {
        height: 120px;
        gap: 8px;
        padding: 14px;
    }

    .assistant-message {
        max-width: 100%;
    }
}

/* ============================================
   FIX FINAL DE LAYOUT
   Evita que el sidebar tape contenido y ordena landing/responsive
   ============================================ */

#landing-page.page {
    min-height: 100vh;
    overflow-x: hidden;
}

#landing-page.page:not(.active),
#app-page.page:not(.active),
#login-page.page:not(.active),
#register-page.page:not(.active) {
    display: none;
}

#landing-page.page.active,
#login-page.page.active,
#register-page.page.active {
    display: block;
}

.app-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    max-width: min(380px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(6, 182, 212, 0.88)),
        var(--bg-secondary);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.app-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.success {
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.94), rgba(6, 182, 212, 0.88)),
        var(--bg-secondary);
}

.app-toast.error {
    background:
        linear-gradient(135deg, rgba(253, 113, 175, 0.95), rgba(124, 58, 237, 0.90)),
        var(--bg-secondary);
}

body.light-theme .app-toast {
    box-shadow: 0 18px 45px rgba(54, 67, 108, 0.22);
}

.quick-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 7, 18, 0.64);
    backdrop-filter: blur(10px);
    overflow-y: auto;
}

.quick-modal-card {
    width: min(560px, 100%);
    max-height: min(88vh, 760px);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 24px 24px 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
        var(--bg-secondary);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quick-modal-card h3 {
    margin-bottom: 18px;
    font-size: 22px;
}

.quick-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 800;
}

.quick-modal-form {
    display: grid;
    gap: 14px;
    overflow-y: auto;
    padding: 0 4px 0 0;
}

.quick-modal-form label {
    display: grid;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.quick-modal-form input {
    width: 100%;
    border: 1px solid var(--bg-tertiary);
    border-radius: 14px;
    padding: 13px 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

.quick-modal-form textarea,
.quick-modal-form select {
    width: 100%;
    border: 1px solid var(--bg-tertiary);
    border-radius: 14px;
    padding: 13px 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    font-family: inherit;
}

.quick-modal-form select,
.form-group select,
.grades-toolbar select {
    color-scheme: dark;
    appearance: auto;
}

.quick-modal-form select option,
.form-group select option,
.grades-toolbar select option {
    background: #252a35;
    color: #f8fafc;
}

body.light-theme .quick-modal-form select,
body.light-theme .form-group select,
body.light-theme .grades-toolbar select {
    color-scheme: light;
}

body.light-theme .quick-modal-form select option,
body.light-theme .form-group select option,
body.light-theme .grades-toolbar select option {
    background: #ffffff;
    color: #111827;
}

.quick-modal-form input:focus,
.quick-modal-form textarea:focus,
.quick-modal-form select:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 4px rgba(73, 204, 249, 0.14);
}

.quick-modal-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    margin: 4px -4px 0;
    padding: 16px 4px 24px;
    background:
        linear-gradient(180deg, rgba(41, 45, 52, 0), var(--bg-secondary) 30%),
        var(--bg-secondary);
}

.quick-modal-actions .btn-primary {
    min-width: 180px;
}

body.light-theme .quick-modal {
    background: rgba(15, 23, 42, 0.30);
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 14px;
    min-height: 190px;
    padding: 34px 22px;
    border: 1px dashed rgba(124, 58, 237, 0.35);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(124, 58, 237, 0.10), rgba(73, 204, 249, 0.06)),
        var(--bg-secondary);
    text-align: center;
}

.empty-state .empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(124, 58, 237, 0.24);
}

.empty-state h3 {
    max-width: 460px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.45;
}

.starter-card {
    align-self: stretch;
}

.starter-list {
    display: grid;
    gap: 12px;
    padding-left: 22px;
    color: var(--text-secondary);
}

.starter-list li {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.starter-list li.done {
    color: var(--text-primary);
    background: rgba(34, 197, 94, 0.13);
    text-decoration: line-through;
}

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.attendance-card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-soft);
}

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

.calendar-title {
    margin-bottom: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

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

.calendar-day-label,
.calendar-day {
    display: grid;
    place-items: center;
    min-height: 34px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.calendar-day {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.calendar-day.muted {
    color: var(--text-tertiary);
    background: transparent;
}

.calendar-day.has-event {
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    color: #ffffff;
}

.btn-danger {
    border: 1px solid rgba(253, 113, 175, 0.32);
    background: rgba(253, 113, 175, 0.12);
    color: #ff8fbd;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-danger:hover {
    background: rgba(253, 113, 175, 0.22);
    transform: translateY(-1px);
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ac-colored-card {
    border-color: color-mix(in srgb, var(--subject-color), transparent 58%);
}

.ac-colored-card::before {
    background: linear-gradient(90deg, var(--subject-color), var(--color-cyan));
}

.subject-chip,
.grade-status,
.event-alert,
.email-simulation {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

.subject-chip {
    background: color-mix(in srgb, var(--subject-color), transparent 82%);
    color: var(--text-primary);
}

.task-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.task-column {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
}

.task-column h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 16px;
}

.task-column h3 span {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
}

.task-board .task-item {
    flex-wrap: wrap;
}

.task-description {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.muted-panel {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 13px;
}

.event-soon {
    border-color: rgba(253, 113, 175, 0.45);
    box-shadow: 0 14px 34px rgba(253, 113, 175, 0.12);
}

.event-alert {
    margin-top: 8px;
    background: rgba(253, 113, 175, 0.14);
    color: #ff8fbd;
}

.email-simulation {
    margin-top: 8px;
    background: rgba(73, 204, 249, 0.12);
    color: var(--color-cyan);
    line-height: 1.35;
}

.grades-toolbar,
.subject-average-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.grades-toolbar {
    justify-content: space-between;
    padding: 16px;
    border-radius: 18px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.grades-toolbar select {
    border: 1px solid var(--bg-tertiary);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.subject-average-strip span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.13);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.grade-status {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.grade-status.excelente {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.grade-status.aprobado {
    background: rgba(73, 204, 249, 0.14);
    color: var(--color-cyan);
}

.grade-status.necesita-mejorar {
    background: rgba(253, 113, 175, 0.14);
    color: #ff8fbd;
}

.grade-note {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.quick-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-transform: none;
}

.quick-check input {
    width: auto;
}

@media (max-width: 980px) {
    .task-board {
        grid-template-columns: 1fr;
    }
}

#app-page.page.active {
    display: block;
    min-height: 100vh;
}

.landing-nav {
    min-height: 76px;
}

.floating-card {
    max-width: 220px;
}

.card-1 {
    top: 24px;
    left: 18px;
}

.card-2 {
    top: 168px;
    right: 20px;
}

.card-3 {
    bottom: 34px;
    left: 46%;
}

.sidebar {
    width: 280px;
    min-width: 280px;
    height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
}

.sidebar-header {
    min-height: 82px;
}

.sidebar-nav {
    padding-bottom: 24px;
}

.sidebar-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    backdrop-filter: blur(18px);
    margin-top: auto;
}

.main-content {
    width: calc(100% - 280px);
    min-height: 100vh;
    max-height: none;
    margin-left: 280px;
    overflow: visible;
    padding: clamp(24px, 3vw, 40px);
}

.section {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-bottom: var(--spacing-xl);
}

.section-header {
    padding-top: 4px;
}

.dashboard-grid,
.subjects-grid,
.grades-grid,
.backpack-container {
    align-items: stretch;
}

.calendar-container,
.ai-container,
.level-display,
.dashboard-row {
    align-items: start;
}

.card,
.stat-card,
.subject-card,
.task-item,
.calendar-mini,
.events-list,
.grade-card,
.ai-input-section,
.ai-output-section,
.level-card,
.progress-stat,
.resource-card {
    min-width: 0;
}

@media (max-width: 1100px) {
    .sidebar {
        width: 236px;
        min-width: 236px;
    }

    .main-content {
        width: calc(100% - 236px);
        margin-left: 236px;
    }

    .nav-item {
        padding-left: 16px;
        padding-right: 14px;
    }
}

@media (max-width: 768px) {
    .landing-nav {
        position: relative;
        min-height: auto;
    }

    .floating-card,
    .card-1,
    .card-2,
    .card-3 {
        position: static;
        transform: none;
        max-width: none;
        animation: none;
    }

    #app-page.page.active {
        display: block;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 100vh;
        position: sticky;
        top: 0;
        padding-bottom: 0;
        border-right: 0;
        border-bottom: 1px solid var(--bg-tertiary);
    }

    .sidebar-header {
        min-height: 68px;
        padding: 16px 18px;
    }

    .sidebar-nav,
    .sidebar-footer {
        display: none;
    }

    .sidebar.open {
        overflow-y: auto;
    }

    .sidebar.open .sidebar-nav {
        display: grid;
        grid-template-columns: 1fr;
        padding: 8px 12px 12px;
    }

    .sidebar.open .sidebar-footer {
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        padding: 12px;
    }

    .sidebar.open .nav-label {
        display: inline;
    }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 20px 16px 36px;
    }

    .section {
        max-width: 100%;
    }

    .dashboard-grid,
    .subjects-grid,
    .grades-grid,
    .backpack-container,
    .profile-layout,
    .calendar-container,
    .ai-container,
    .level-display,
    .dashboard-row {
        grid-template-columns: 1fr;
    }

    .task-filter,
    .resource-actions,
    .result-actions {
        flex-wrap: wrap;
    }

    .profile-card {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--spacing-xl);
    }

    .profile-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .main-content {
        padding: 16px 12px 30px;
    }

    .section-header {
        margin-bottom: 22px;
    }

    .task-item {
        align-items: flex-start;
    }

    .app-toast {
        right: 12px;
        bottom: 14px;
        left: 12px;
        max-width: none;
        text-align: center;
    }

    .quick-modal {
        padding: 10px;
        align-items: stretch;
    }

    .quick-modal-card {
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 18px;
        padding: 20px 18px 0;
    }

    .quick-modal-actions {
        justify-content: stretch;
        padding-bottom: 18px;
    }

    .quick-modal-actions .btn-primary {
        width: 100%;
    }
}

/* ============================================
   PRIORIDAD VISUAL FINAL - AC Edunity PRODUCT UI
   ============================================ */

:root {
    --bg-dark: #1E1F25;
    --bg-secondary: #262936;
    --bg-tertiary: #303447;
    --color-purple: #7B68EE;
    --color-cyan: #49CCF9;
    --color-pink: #FD71AF;
    --color-green: #00C875;
    --color-yellow: #FFC800;
    --surface-line: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(123, 104, 238, 0.18), transparent 28%),
        radial-gradient(circle at 86% 14%, rgba(253, 113, 175, 0.15), transparent 28%),
        linear-gradient(135deg, #11131a 0%, #1E1F25 48%, #151823 100%);
}

.landing-nav,
.sidebar {
    background: rgba(17, 19, 26, 0.86);
    border-color: var(--surface-line);
    backdrop-filter: blur(22px);
}

.landing-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-links a,
.btn-ghost {
    color: var(--text-secondary);
    text-decoration: none;
}

.landing-links a {
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}

.landing-links a:hover,
.btn-ghost:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}.section-eyebrow{
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.10);
    color: var(--color-cyan);
    font-size: 13px;
    font-weight: 800;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--surface-line);
    border-radius: 999px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
}

.card-4 {
    right: 42px;
    bottom: 22px;
    animation-delay: 2.7s;
}

.btn-primary,
.btn-large {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan), var(--color-pink));
    box-shadow: 0 14px 32px rgba(123, 104, 238, 0.26);
}

.btn-secondary {
    border-color: var(--surface-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.benefit-card,
.card,
.stat-card,
.subject-card,
.task-item,
.calendar-container,
.grade-card,
.ai-input-section,
.ai-output-section,
.level-card,
.progress-stat,
.resource-card,
.auth-card,
.quick-modal-card,
.attendance-card {
    border: 1px solid var(--surface-line);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)), rgba(38, 41, 54, 0.82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.nav-item {
    margin: 4px 12px;
    border-radius: 16px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(3px);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.28), rgba(73, 204, 249, 0.12));
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--color-purple);
}

.section {
    animation: sectionRise 420ms ease both;
}

@keyframes sectionRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .landing-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

#landing-page .floating-card,
#landing-page .card-1,
#landing-page .card-2,
#landing-page .card-3,
#landing-page .card-4 {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

#landing-page .floating-card .icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.95), rgba(73, 204, 249, 0.9));
}

#landing-page .floating-card p {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
}

#landing-page .benefits {
    padding: clamp(70px, 8vw, 112px) clamp(22px, 4vw, 48px);
    background:
        radial-gradient(circle at 16% 20%, rgba(73, 204, 249, 0.12), transparent 28%),
        radial-gradient(circle at 86% 28%, rgba(253, 113, 175, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(30, 31, 37, 0.98), rgba(25, 27, 35, 0.98));
}

#landing-page .benefits .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

#landing-page .benefits h2 {
    width: min(960px, 100%);
    margin: 0 auto clamp(28px, 4vw, 48px);
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.05;
    text-align: center;
}

#landing-page .benefits-grid {
    width: min(1260px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

#landing-page .benefit-card {
    position: relative;
    min-height: 286px;
    padding: 28px;
    overflow: hidden;
    border-radius: 26px;
}

#landing-page .benefit-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-cyan), var(--color-pink));
}

#landing-page .benefit-card h3 {
    color: #ffffff;
    font-size: 24px;
}

#landing-page .benefit-card p {
    color: #c4ccdc;
    font-size: 16px;
    line-height: 1.7;
}

#landing-page .benefit-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 20px;
    font-size: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        rgba(123, 104, 238, 0.20);
}

#landing-page .about-project {
    padding: clamp(72px, 8vw, 116px) clamp(22px, 4vw, 48px);
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.08), transparent 34%),
        radial-gradient(circle at 82% 52%, rgba(73, 204, 249, 0.14), transparent 26%),
        #20232d;
}

#landing-page .about-container {
    width: min(1220px, 100%);
    gap: clamp(34px, 6vw, 76px);
}

#landing-page .about-text h2 {
    max-width: 680px;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
}

#landing-page .about-description {
    max-width: 760px;
    color: #c8d0e0;
    font-size: 17px;
    line-height: 1.85;
}

#landing-page .about-stat {
    min-height: 184px;
    display: grid;
    align-content: center;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, var(--color-purple), var(--color-cyan));
}

#landing-page .stat-num {
    color: #ffffff;
    font-size: clamp(36px, 4.8vw, 54px);
}

#landing-page .stat-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    #landing-page .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {#landing-page .benefits-grid, #landing-page .about-container, #landing-page .about-visual{
        grid-template-columns: 1fr;
    }
}

#landing-page .floating-card p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

#landing-page .floating-card .icon {
    width: 72px;
    height: 72px;
    font-size: 0;
    border-radius: 24px;
    position: relative;
}

#landing-page .floating-card .icon::before {
    content: "";
    position: absolute;
}

#landing-page .card-1 .icon::before {
    width: 34px;
    height: 38px;
    left: 18px;
    top: 17px;
    border-radius: 5px 5px 3px 3px;
    background: linear-gradient(135deg, #b5ff71, #49ccf9);
    box-shadow:
        10px 5px 0 -1px #fd71af,
        20px 10px 0 -2px #49ccf9,
        0 39px 0 -17px rgba(255, 255, 255, 0.88),
        10px 44px 0 -20px rgba(255, 255, 255, 0.70);
}

#landing-page .card-2 .icon::before {
    width: 36px;
    height: 26px;
    left: 18px;
    top: 25px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #b9c5ff);
    box-shadow:
        inset 9px 8px 0 -7px #1e1f25,
        inset -9px 8px 0 -7px #1e1f25,
        0 -11px 0 -8px #ffc800,
        -15px 2px 0 -10px #fd71af,
        15px 2px 0 -10px #fd71af;
}

#landing-page .card-3 .icon::before {
    width: 40px;
    height: 36px;
    left: 16px;
    top: 19px;
    border-radius: 8px;
    background:
        linear-gradient(#49ccf9 0 28%, transparent 29%),
        linear-gradient(90deg, transparent 31%, rgba(255,255,255,0.65) 32% 34%, transparent 35% 64%, rgba(255,255,255,0.65) 65% 67%, transparent 68%),
        linear-gradient(180deg, transparent 50%, rgba(255,255,255,0.65) 51% 54%, transparent 55%),
        #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

#landing-page .card-4 .icon::before {
    width: 42px;
    height: 34px;
    left: 15px;
    top: 19px;
    clip-path: polygon(50% 0, 61% 33%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 33%);
    background: linear-gradient(135deg, #ffc800, #fd71af 58%, #ffffff);
    filter: drop-shadow(0 8px 12px rgba(253, 113, 175, 0.22));
}

.theme-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    border: 1px solid rgba(73, 204, 249, 0.28);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.18), rgba(73, 204, 249, 0.10));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.theme-toggle::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 12px;
    top: 11px;
    border-radius: 50%;
    background: #dbeafe;
    box-shadow:
        8px -3px 0 1px rgba(17, 19, 26, 0.98),
        0 0 18px rgba(73, 204, 249, 0.34);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.theme-toggle.is-light::before,
body.light-theme .theme-toggle::before {
    width: 22px;
    height: 22px;
    left: 12px;
    top: 11px;
    background: #ffc800;
    box-shadow:
        0 -13px 0 -8px #ffc800,
        0 13px 0 -8px #ffc800,
        13px 0 0 -8px #ffc800,
        -13px 0 0 -8px #ffc800,
        9px 9px 0 -8px #ffc800,
        -9px -9px 0 -8px #ffc800,
        9px -9px 0 -8px #ffc800,
        -9px 9px 0 -8px #ffc800;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--color-cyan);
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.28), rgba(73, 204, 249, 0.18));
}

@media (max-width: 768px) {
}

@media (max-width: 430px) {

    #landing-page .floating-card .icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    #landing-page .floating-card .icon::before {
        font-size: 18px;
    }

    #landing-page .card-3 .icon::before {
        font-size: 14px;
    }
}

body.light-theme #landing-page .btn-ghost {
    color: #24324a;
    border-color: rgba(51, 65, 85, 0.18);
    background: rgba(255, 255, 255, 0.76);
}

body.light-theme #landing-page .btn-ghost:hover {
    color: #111827;
    background: #ffffff;
}

/* FINAL: secciones del landing claras cuando el fondo es blanco */
body.light-theme #landing-page .benefits {
    background:
        radial-gradient(circle at 12% 18%, rgba(73, 204, 249, 0.14), transparent 30%),
        radial-gradient(circle at 88% 24%, rgba(253, 113, 175, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
}

body.light-theme #landing-page .benefits h2 {
    color: #182235 !important;
}

body.light-theme #landing-page .section-eyebrow {
    color: #0369a1 !important;
    border-color: rgba(14, 165, 233, 0.28) !important;
    background: rgba(224, 242, 254, 0.82) !important;
}

body.light-theme #landing-page .benefit-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.88)),
        #ffffff !important;
    border-color: rgba(71, 85, 105, 0.16) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #landing-page .benefit-card h3 {
    color: #172033 !important;
}

body.light-theme #landing-page .benefit-card p {
    color: #475569 !important;
}

body.light-theme #landing-page .benefit-icon {
    background:
        linear-gradient(145deg, rgba(123, 104, 238, 0.16), rgba(73, 204, 249, 0.16)),
        #ffffff !important;
    border-color: rgba(123, 104, 238, 0.16) !important;
}

body.light-theme #landing-page .about-project {
    background:
        radial-gradient(circle at 88% 28%, rgba(73, 204, 249, 0.14), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%) !important;
}

body.light-theme #landing-page .about-text h2 {
    background: linear-gradient(135deg, #5b4be8, #0077b6 58%, #c02675);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme #landing-page .about-description {
    color: #334155 !important;
}

/* Seccion propia de beneficios de uso */
.use-benefits {
    padding: clamp(74px, 8vw, 116px) clamp(22px, 4vw, 48px);
    background:
        radial-gradient(circle at 18% 24%, rgba(123, 104, 238, 0.20), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(73, 204, 249, 0.16), transparent 28%),
        linear-gradient(180deg, #171922 0%, #1e1f25 100%);
}

.use-benefits-container {
    width: min(1220px, 100%);
    margin: 0 auto;
}

.use-benefits .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

.use-benefits h2 {
    width: min(900px, 100%);
    margin: 0 auto 18px;
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.05;
    text-align: center;
}

.use-benefits-intro {
    width: min(780px, 100%);
    margin: 0 auto clamp(30px, 4vw, 48px);
    color: #c8d0e0;
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
}

.use-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.use-benefit-card {
    position: relative;
    min-height: 290px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
        rgba(38, 41, 54, 0.84);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.24);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.use-benefit-card::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -64px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(73, 204, 249, 0.24), transparent 68%);
}

.use-benefit-card:hover {
    transform: translateY(-8px);
    border-color: rgba(73, 204, 249, 0.30);
    box-shadow: 0 30px 74px rgba(0, 0, 0, 0.30);
}

.use-benefit-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 23px;
}

.use-benefit-card p {
    position: relative;
    z-index: 1;
    color: #c8d0e0;
    font-size: 16px;
    line-height: 1.7;
}

body.light-theme .use-benefits {
    background:
        radial-gradient(circle at 18% 24%, rgba(123, 104, 238, 0.13), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(73, 204, 249, 0.14), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #eef4ff 100%) !important;
}

body.light-theme .use-benefits h2 {
    color: #182235;
}

body.light-theme .use-benefits-intro,
body.light-theme .use-benefit-card p {
    color: #475569;
}

body.light-theme .use-benefit-card {
    border-color: rgba(71, 85, 105, 0.16);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.90)),
        #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
}

body.light-theme .use-benefit-card h3 {
    color: #172033;
}

@media (max-width: 1100px) {
    .use-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .use-benefits-grid {
        grid-template-columns: 1fr;
    }

    .use-benefit-card {
        min-height: auto;
    }
}

/* Dashboard sin caracteres rotos */
#dashboard .stat-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    box-shadow: 0 14px 26px rgba(73, 204, 249, 0.18);
}

#dashboard .stat-icon::before,
#dashboard .stat-icon::after {
    content: "";
    position: absolute;
}

#dashboard .stat-icon-subjects::before {
    width: 22px;
    height: 28px;
    left: 12px;
    top: 9px;
    border-radius: 4px;
    background: #b5ff71;
    box-shadow: 7px 4px 0 #fd71af, 14px 8px 0 #ffffff;
}

#dashboard .stat-icon-tasks::before {
    width: 24px;
    height: 24px;
    left: 11px;
    top: 11px;
    border: 4px solid #ffffff;
    border-radius: 9px;
}

#dashboard .stat-icon-tasks::after {
    width: 14px;
    height: 8px;
    left: 16px;
    top: 17px;
    border-left: 4px solid #00c875;
    border-bottom: 4px solid #00c875;
    transform: rotate(-45deg);
}

#dashboard .stat-icon-calendar::before {
    width: 28px;
    height: 26px;
    left: 9px;
    top: 11px;
    border-radius: 6px;
    background:
        linear-gradient(#fd71af 0 28%, transparent 29%),
        linear-gradient(90deg, transparent 31%, rgba(30,31,37,0.20) 32% 35%, transparent 36% 64%, rgba(30,31,37,0.20) 65% 68%, transparent 69%),
        #ffffff;
}

#dashboard .stat-icon-grades::before {
    width: 28px;
    height: 22px;
    left: 9px;
    top: 13px;
    border-left: 5px solid #ffffff;
    border-bottom: 5px solid #ffffff;
    transform: skew(-12deg);
}

#dashboard .stat-icon-xp::before {
    width: 28px;
    height: 28px;
    left: 9px;
    top: 9px;
    clip-path: polygon(50% 0, 61% 33%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 33%);
    background: #ffc800;
}

#dashboard .stat-icon-streak::before {
    width: 22px;
    height: 30px;
    left: 12px;
    top: 8px;
    border-radius: 16px 16px 16px 4px;
    background: linear-gradient(180deg, #ffc800, #fd71af);
    transform: rotate(18deg);
}

#dashboard .stat-icon-assistant::before {
    width: 28px;
    height: 22px;
    left: 9px;
    top: 14px;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: inset 7px 7px 0 -6px #1e1f25, inset -7px 7px 0 -6px #1e1f25;
}

/* Estados vacios sin texto roto */
.empty-state .empty-icon {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
}

.empty-state .empty-icon::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 34px;
    left: 13px;
    top: 10px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow:
        inset 0 9px 0 rgba(73, 204, 249, 0.70),
        9px 6px 0 -2px rgba(253, 113, 175, 0.95),
        -8px 10px 0 -4px rgba(255, 200, 0, 0.95);
}

.empty-state .empty-icon::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    left: 18px;
    top: 24px;
    border-left: 4px solid #00c875;
    border-bottom: 4px solid #00c875;
    transform: rotate(-45deg);
}

/* Mochila Digital ordenada */
.backpack-container {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.resource-card {
    min-width: 0;
    gap: 18px;
    padding: 28px;
}

.resource-top {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.resource-info {
    min-width: 0;
}

.resource-icon.resource-pdf-icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    box-shadow: 0 16px 32px rgba(73, 204, 249, 0.18);
}

.resource-icon.resource-pdf-icon::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 42px;
    left: 15px;
    top: 11px;
    border-radius: 7px;
    background:
        linear-gradient(135deg, transparent 0 18%, rgba(73, 204, 249, 0.34) 19% 34%, transparent 35%),
        #ffffff;
    box-shadow: inset 0 10px 0 rgba(253, 113, 175, 0.18);
}

.resource-icon.resource-pdf-icon::after {
    content: "PDF";
    position: absolute;
    left: 18px;
    bottom: 15px;
    color: #1e1f25;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.resource-card h4 {
    margin: 0 0 6px;
    overflow-wrap: anywhere;
    font-size: 20px;
}

.resource-type {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.resource-date {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.resource-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    margin-top: auto;
}

.resource-actions button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    white-space: normal;
    line-height: 1.15;
}

body.light-theme .resource-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.90)),
        #ffffff;
}

@media (max-width: 520px) {
    .backpack-container {
        grid-template-columns: 1fr;
    }

    .resource-top {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .resource-icon.resource-pdf-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

    .resource-icon.resource-pdf-icon::before {
        left: 12px;
        top: 9px;
        width: 30px;
        height: 36px;
    }

    .resource-icon.resource-pdf-icon::after {
        left: 15px;
        bottom: 12px;
    }
}

/* Mochila: cubrir tarjetas antiguas que aun usen .resource-icon con texto roto */
#backpack .resource-card {
    width: 100%;
    max-width: 520px;
    min-height: auto;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr;
    gap: 14px;
    overflow: hidden;
}

#backpack .resource-card > .resource-icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 0 4px;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    box-shadow: 0 16px 32px rgba(73, 204, 249, 0.18);
}

#backpack .resource-card > .resource-icon::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 42px;
    left: 15px;
    top: 11px;
    border-radius: 7px;
    background:
        linear-gradient(135deg, transparent 0 18%, rgba(73, 204, 249, 0.34) 19% 34%, transparent 35%),
        #ffffff;
    box-shadow: inset 0 10px 0 rgba(253, 113, 175, 0.18);
}

#backpack .resource-card > .resource-icon::after {
    content: "PDF";
    position: absolute;
    left: 18px;
    bottom: 15px;
    color: #1e1f25;
    font-size: 10px;
    font-weight: 900;
}

#backpack .resource-card h4,
#backpack .resource-card .resource-type,
#backpack .resource-card .resource-date {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

#backpack .resource-card h4 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

#backpack .resource-card .resource-type {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.45;
}

#backpack .resource-card .resource-date {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1.45;
}

#backpack .resource-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

#backpack [data-resource-view] {
    display: none !important;
}

#backpack .resource-actions button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 12px;
    white-space: normal;
    line-height: 1.15;
}

@media (min-width: 1180px) {
    #backpack .resource-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    #backpack .resource-card {
        max-width: 100%;
    }

    #backpack .resource-actions {
        grid-template-columns: 1fr;
    }
}

/* Mochila Digital: biblioteca moderna conectada a materias */
#backpack .section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    max-width: 1180px;
}

.backpack-toolbar {
    max-width: 1180px;
    margin: 26px 0 28px;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.85fr) minmax(160px, 0.95fr) minmax(140px, 0.75fr) auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.12), rgba(73, 204, 249, 0.08)),
        rgba(45, 49, 61, 0.78);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.backpack-toolbar label {
    display: grid;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.backpack-toolbar input,
.backpack-toolbar select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 0 14px;
    background: rgba(21, 23, 32, 0.72);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.backpack-toolbar input:focus,
.backpack-toolbar select:focus {
    border-color: rgba(73, 204, 249, 0.85);
    box-shadow: 0 0 0 4px rgba(73, 204, 249, 0.12);
    background: rgba(21, 23, 32, 0.92);
}

#backpack .backpack-container {
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    align-items: stretch;
}

#backpack .library-resource-card {
    position: relative;
    max-width: none;
    min-height: 330px;
    padding: 22px;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--resource-color) 58%, rgba(255, 255, 255, 0.15));
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--resource-color) 28%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(56, 61, 76, 0.92), rgba(36, 40, 52, 0.86));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 38px color-mix(in srgb, var(--resource-color) 18%, transparent);
    overflow: hidden;
    isolation: isolate;
}

#backpack .library-resource-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--resource-color), #49ccf9, #fd71af);
    z-index: -1;
}

#backpack .library-resource-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -72px;
    top: -72px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--resource-color) 24%, transparent);
    filter: blur(8px);
    z-index: -1;
}

#backpack .library-resource-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.26),
        0 0 48px color-mix(in srgb, var(--resource-color) 24%, transparent);
}

#backpack .library-resource-card .resource-top {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--resource-color), #49ccf9);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--resource-color) 28%, transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::before {
    width: 32px;
    height: 38px;
    left: 15px;
    top: 11px;
    border-radius: 8px;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::after {
    left: 20px;
    bottom: 14px;
    font-size: 9px;
    line-height: 1;
}

#backpack .resource-meta-row,
#backpack .resource-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#backpack .resource-subject-chip,
#backpack .resource-status,
#backpack .resource-data span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 850;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#backpack .resource-subject-chip {
    color: #ffffff;
    background: color-mix(in srgb, var(--resource-color) 58%, rgba(30, 31, 37, 0.38));
    border-color: color-mix(in srgb, var(--resource-color) 70%, rgba(255, 255, 255, 0.18));
}

#backpack .resource-status.new {
    color: #ffffff;
    background: rgba(0, 200, 117, 0.20);
    border-color: rgba(0, 200, 117, 0.35);
}

#backpack .resource-status.used {
    color: #ffffff;
    background: rgba(123, 104, 238, 0.26);
    border-color: rgba(123, 104, 238, 0.45);
}

#backpack .resource-status.pending {
    color: #ffffff;
    background: rgba(255, 200, 0, 0.16);
    border-color: rgba(255, 200, 0, 0.30);
}

#backpack .resource-description {
    margin: 0;
    min-height: 58px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#backpack .library-resource-card .resource-actions {
    margin-top: auto;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#backpack [data-resource-view] {
    display: inline-flex !important;
}

body.light-theme .backpack-toolbar {
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.10), rgba(73, 204, 249, 0.10)),
        rgba(255, 255, 255, 0.88);
    border-color: rgba(85, 95, 130, 0.16);
}

body.light-theme .backpack-toolbar input,
body.light-theme .backpack-toolbar select {
    background: rgba(255, 255, 255, 0.92);
    color: #182033;
    border-color: rgba(85, 95, 130, 0.20);
}

body.light-theme #backpack .library-resource-card {
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--resource-color) 20%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.90));
    border-color: color-mix(in srgb, var(--resource-color) 40%, rgba(86, 95, 130, 0.14));
}

body.light-theme #backpack .resource-data span,
body.light-theme #backpack .resource-status {
    color: #263044;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(86, 95, 130, 0.16);
}

@media (max-width: 980px) {
    .backpack-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backpack-toolbar .btn-primary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    #backpack .section-header {
        display: block;
    }

    .backpack-toolbar,
    #backpack .backpack-container {
        grid-template-columns: 1fr;
    }

    #backpack .library-resource-card {
        min-height: auto;
        padding: 18px;
    }

    #backpack .library-resource-card .resource-actions {
        grid-template-columns: 1fr;
    }
}

/* Progreso: logros sin caracteres rotos */
#progress .achievement {
    min-height: 190px;
    justify-content: center;
    overflow: hidden;
}

#progress .achievement-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan));
    box-shadow: 0 16px 30px rgba(73, 204, 249, 0.18);
}

#progress .achievement-icon::before,
#progress .achievement-icon::after {
    content: "";
    position: absolute;
}

#progress .achievement-subject::before {
    width: 26px;
    height: 32px;
    border-radius: 5px;
    background: #49ccf9;
    box-shadow: 8px 5px 0 #fd71af, -7px 8px 0 #ffc800;
}

#progress .achievement-task::before {
    width: 30px;
    height: 34px;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: inset 0 9px 0 rgba(123, 104, 238, 0.30);
}

#progress .achievement-task::after {
    width: 16px;
    height: 9px;
    left: 21px;
    top: 27px;
    border-left: 4px solid #00c875;
    border-bottom: 4px solid #00c875;
    transform: rotate(-45deg);
}

#progress .achievement-done::before {
    width: 34px;
    height: 20px;
    left: 13px;
    top: 18px;
    border-left: 7px solid #ffffff;
    border-bottom: 7px solid #ffffff;
    transform: rotate(-45deg);
}

#progress .achievement-note::before {
    width: 30px;
    height: 38px;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: inset 0 10px 0 rgba(255, 200, 0, 0.32);
}

#progress .achievement-ai::before {
    width: 34px;
    height: 26px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
        inset 8px 8px 0 -7px #1e1f25,
        inset -8px 8px 0 -7px #1e1f25,
        0 -10px 0 -7px #ffc800;
}

#progress .achievement.locked .achievement-icon {
    background: linear-gradient(135deg, #374151, #1f2937);
    box-shadow: none;
    filter: grayscale(1);
}

#progress .achievement.locked .achievement-icon::before,
#progress .achievement.locked .achievement-icon::after {
    opacity: 0.55;
}

/* Marca AC Edunity */
.nav-logo,
.sidebar-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nav-logo .brand-logo,
.sidebar-logo .brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    filter: drop-shadow(0 10px 18px rgba(73, 204, 249, 0.16));
}

.nav-logo span,
.sidebar-logo span {
    background: linear-gradient(135deg, var(--color-purple), var(--color-cyan), var(--color-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-logo {
    min-width: 0;
}

.sidebar-logo .brand-logo {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
}

@media (max-width: 520px) {
    .nav-logo .brand-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .nav-logo span {
        font-size: 20px;
    }
}

/* Escala compacta final: estilo SaaS mas limpio y menos ampliado */
:root {
    --container: 1180px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 24px;
    --title-section: 40px;
    --title-hero: 64px;
    --space-section: 72px;
    --card-padding: 28px;
    --radius-card: 24px;
}

html {
    font-size: var(--text-base);
}

body {
    font-size: var(--text-base);
}

.landing-nav {
    min-height: 64px !important;
    width: min(var(--container), calc(100% - 40px)) !important;
    padding: 12px 18px !important;
    margin: 14px auto 0 !important;
    border-radius: 20px !important;
}

.nav-logo,
.sidebar-logo {
    gap: 8px !important;
    font-size: 22px !important;
}

.nav-logo .brand-logo,
.sidebar-logo .brand-logo {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
}

.nav-links {
    gap: 22px !important;
}

.nav-links a {
    font-size: 14px !important;
}

.nav-actions {
    gap: 10px !important;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-small,
.sidebar-theme,
.sidebar-logout,
.resource-actions button,
.task-actions button,
.subject-actions button {
    min-height: 38px !important;
    padding: 9px 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
}#landing-page .features, #landing-page .benefits, #landing-page .about-project, #landing-page .use-benefits{
    width: min(var(--container), calc(100% - 40px)) !important;
    max-width: var(--container) !important;
    margin-inline: auto !important;
}.section-eyebrow{
    padding: 8px 14px !important;
    font-size: 13px !important;
}

#landing-page .floating-card .icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
}

#landing-page .floating-card .icon::before {
    transform: scale(0.82);
}

.features,
.benefits,
.about-project,
.use-benefits {
    padding-block: var(--space-section) !important;
}

.features h2,
.benefits h2,
.about-text h2,
.use-benefits h2 {
    font-size: clamp(2rem, 4vw, var(--title-section)) !important;
    line-height: 1.12 !important;
}

.features-grid,
.benefits-grid,
.use-benefits-grid {
    gap: 18px !important;
}

.feature-card,
.benefit-card,
.use-benefit-card {
    min-height: 220px !important;
    padding: 24px !important;
    border-radius: var(--radius-card) !important;
}

.feature-card h3,
.benefit-card h3,
.use-benefit-card h3 {
    font-size: 22px !important;
}

.feature-card p,
.benefit-card p,
.use-benefit-card p,
.about-description {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.auth-page {
    padding: 28px 18px !important;
}

.auth-card {
    max-width: 380px !important;
    padding: 30px !important;
    border-radius: var(--radius-card) !important;
}

.auth-card h2 {
    font-size: 25px !important;
}

.form-group label {
    font-size: 13px !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.quick-modal-card input,
.quick-modal-card select,
.quick-modal-card textarea {
    min-height: 42px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
}

.sidebar {
    width: 236px !important;
    min-width: 236px !important;
}

.sidebar-header {
    min-height: 66px !important;
    padding: 16px 18px !important;
}

.sidebar-logo {
    font-size: 20px !important;
}

.sidebar-logo .brand-logo {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
}

.sidebar-nav {
    padding: 12px 10px 18px !important;
}

.nav-item {
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
}

.nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 17px !important;
    border-radius: 11px !important;
}

.nav-label {
    font-size: 14px !important;
}

.sidebar-footer {
    padding: 12px !important;
    gap: 10px !important;
}

.main-content {
    width: calc(100% - 236px) !important;
    margin-left: 236px !important;
    padding: 26px 28px 38px !important;
}

.section {
    max-width: var(--container) !important;
    margin: 0 auto !important;
}

.section-header {
    margin-bottom: 24px !important;
}

.section-header h1 {
    font-size: clamp(28px, 3vw, var(--title-section)) !important;
    line-height: 1.1 !important;
}

.subtitle,
.section-header .subtitle {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

.dashboard-grid,
.subjects-grid,
.grades-grid,
.backpack-container,
.use-benefits-grid {
    gap: 18px !important;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.card,
.stat-card,
.subject-card,
.task-item,
.calendar-container,
.grade-card,
.attendance-card,
.quick-modal-card,
.resource-card,
.progress-stat,
.achievement {
    border-radius: var(--radius-card) !important;
}

.card,
.stat-card,
.subject-card,
.calendar-container,
.grade-card,
.attendance-card,
.quick-modal-card,
.progress-stat {
    padding: var(--card-padding) !important;
}

.stat-card {
    min-height: 188px !important;
}

.stat-header {
    gap: 12px !important;
}

.stat-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    border-radius: 14px !important;
}

.stat-label,
.stat-subtext,
.stat-name,
.resource-type,
.resource-date {
    font-size: 13px !important;
}

.stat-value {
    font-size: 30px !important;
    line-height: 1.1 !important;
}

.subject-card {
    min-height: 260px !important;
}

.subject-header h3,
.task-content h4,
.resource-card h4,
.card h3 {
    font-size: 20px !important;
}

.subject-icon,
.resource-icon,
#backpack .resource-card > .resource-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
}

.task-item {
    padding: 18px !important;
    gap: 14px !important;
}

.task-checkbox {
    width: 22px !important;
    height: 22px !important;
}

.task-priority,
.task-status,
.subject-color-badge {
    font-size: 12px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
}

.calendar-grid {
    gap: 8px !important;
}

.calendar-day {
    min-height: 78px !important;
    padding: 8px !important;
}

.ai-container,
.level-display,
.dashboard-row {
    gap: 18px !important;
}

.assistant-chat,
.ai-output-section {
    border-radius: var(--radius-card) !important;
}

.achievement {
    min-height: 150px !important;
    padding: 18px !important;
}

.achievement-icon {
    width: 58px !important;
    height: 58px !important;
}

#backpack .resource-card {
    max-width: 460px !important;
    padding: 24px !important;
    gap: 16px !important;
}

.resource-actions {
    gap: 10px !important;
}

.study-pet {
    right: 18px !important;
    bottom: 18px !important;
    grid-template-columns: minmax(150px, 210px) 72px !important;
    gap: 9px !important;
}

.pet-bubble {
    padding: 11px 13px !important;
    font-size: 13px !important;
    border-radius: 15px 15px 6px 15px !important;
}

.pet-parrot {
    width: 72px !important;
    height: 82px !important;
}

.pet-parrot::before {
    left: -10px !important;
    top: 50px !important;
    width: 34px !important;
    height: 42px !important;
}

.pet-wing {
    width: 36px !important;
    height: 36px !important;
    top: 40px !important;
}

.pet-eye {
    left: 36px !important;
    top: 20px !important;
    width: 17px !important;
    height: 17px !important;
}

.pet-eye::after {
    left: 5px !important;
    top: 5px !important;
}

.pet-beak {
    left: 49px !important;
    top: 31px !important;
    width: 23px !important;
    height: 16px !important;
}

@media (max-width: 1024px) {
    :root {
        --title-hero: 44px;
        --title-section: 34px;
        --space-section: 56px;
        --card-padding: 22px;
    }

    .sidebar {
        width: 216px !important;
        min-width: 216px !important;
    }

    .main-content {
        width: calc(100% - 216px) !important;
        margin-left: 216px !important;
        padding: 24px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --text-base: 14px;
        --space-section: 48px;
        --card-padding: 20px;
        --radius-card: 20px;
    }

    .landing-nav {
        width: min(100% - 24px, var(--container)) !important;
        padding: 12px 14px !important;
    }#landing-page .features, #landing-page .benefits, #landing-page .about-project, #landing-page .use-benefits{
        width: min(100% - 28px, var(--container)) !important;
    }

    .sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 18px 14px 32px !important;
    }

    .section-header h1 {
        font-size: 30px !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .study-pet {
        grid-template-columns: minmax(128px, 176px) 62px !important;
    }

    .pet-parrot {
        width: 62px !important;
        height: 72px !important;
    }
}

#landing-page .floating-card .icon {
    position: relative !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    transform: none !important;
}

#landing-page .floating-card .icon::before,
#landing-page .floating-card .icon::after {
    left: 50% !important;
    top: 50% !important;
    transform-origin: center !important;
}

#landing-page .card-1 .icon::before {
    transform: translate(-56%, -54%) scale(0.76) !important;
}

#landing-page .card-1 .icon::after {
    transform: translate(-20%, -18%) scale(0.76) !important;
}

#landing-page .card-2 .icon::before {
    transform: translate(-50%, -50%) scale(0.78) !important;
}

#landing-page .card-3 .icon::before {
    transform: translate(-50%, -50%) scale(0.78) !important;
}

#landing-page .card-4 .icon::before {
    transform: translate(-50%, -50%) scale(0.80) !important;
}

#landing-page .benefits-grid,
#landing-page .use-benefits-grid {
    align-items: stretch !important;
}

#landing-page .benefit-card,
#landing-page .use-benefit-card,
.use-benefit-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 250px !important;
    padding: 24px !important;
    overflow: hidden !important;
}

#landing-page .benefit-icon {
    font-size: 25px !important;
    line-height: 1 !important;
}

#landing-page .benefit-card h3,
#landing-page .use-benefit-card h3,
.use-benefit-card h3 {
    margin: 0 0 10px !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
}

#landing-page .benefit-card p,
#landing-page .use-benefit-card p,
.use-benefit-card p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

@media (max-width: 768px) {

    #landing-page .benefit-card,
    #landing-page .use-benefit-card,
    .use-benefit-card {
        min-height: auto !important;
    }
}

#landing-page .floating-card .icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
}

@media (max-width: 768px) {
}

@media (max-width: 430px) {
}

/* Calificaciones tipo libreta academica */
.gradebook-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(31, 34, 46, 0.86);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.gradebook-header,
.gradebook-row {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(420px, 1fr) minmax(128px, 160px);
    align-items: stretch;
}

.gradebook-header {
    min-height: 48px;
    background: rgba(15, 23, 42, 0.34);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gradebook-header span,
.gradebook-subject,
.gradebook-average {
    display: grid;
    align-content: center;
    padding: 14px 16px;
}

.gradebook-body {
    display: grid;
}

.gradebook-row {
    min-height: 92px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.gradebook-row:last-child {
    border-bottom: 0;
}

.gradebook-subject {
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.025);
}

.gradebook-subject strong {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.2;
}

.gradebook-subject small {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.gradebook-scores {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(73, 204, 249, 0.58) transparent;
}

.gradebook-score {
    position: relative;
    min-width: 92px;
    max-width: 116px;
    padding: 15px 8px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.025);
    transition: background 160ms ease, transform 160ms ease;
}

.gradebook-score:hover {
    background: rgba(73, 204, 249, 0.12);
}

.score-value {
    color: #f87171;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.gradebook-score.excelente .score-value,
.gradebook-score.aprobado .score-value {
    color: #e5eefc;
}

.score-label {
    width: 100%;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-count {
    width: 100%;
    overflow: hidden;
    color: rgba(73, 204, 249, 0.92);
    font-size: 9px;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-action {
    position: absolute;
    width: auto;
    min-width: 42px;
    height: 18px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.74);
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    opacity: 0;
    transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
}

.gradebook-score:hover .score-action {
    opacity: 1;
}

.score-edit {
    top: 5px;
    right: 5px;
}

.score-delete {
    right: 5px;
    bottom: 5px;
}

.score-action:hover {
    background: rgba(73, 204, 249, 0.22);
    color: #ffffff;
}

.score-delete:hover {
    background: rgba(253, 113, 175, 0.24);
}

.gradebook-average {
    justify-items: start;
    gap: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.gradebook-average strong {
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

body.light-theme .gradebook-panel {
    background: #ffffff;
    border-color: rgba(71, 85, 105, 0.16);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

body.light-theme .gradebook-header {
    background: #f8fafc;
    color: #475569;
    border-bottom-color: rgba(15, 23, 42, 0.10);
}

body.light-theme .gradebook-row,
body.light-theme .gradebook-subject,
body.light-theme .gradebook-score,
body.light-theme .gradebook-average {
    border-color: rgba(15, 23, 42, 0.10);
}

body.light-theme .gradebook-subject,
body.light-theme .gradebook-score {
    background: #ffffff;
}

body.light-theme .gradebook-subject strong,
body.light-theme .gradebook-average strong {
    color: #172033;
}

body.light-theme .gradebook-subject small,
body.light-theme .score-label {
    color: #64748b;
}

body.light-theme .gradebook-score:hover {
    background: #eef6ff;
}

body.light-theme .gradebook-score.excelente .score-value,
body.light-theme .gradebook-score.aprobado .score-value {
    color: #172033;
}

body.light-theme .score-action {
    background: #e2e8f0;
    color: #475569;
}

@media (max-width: 980px) {
    .gradebook-panel {
        overflow-x: auto;
    }

    .gradebook-header,
    .gradebook-row {
        min-width: 760px;
    }
}

/* Casilleros internos para calificaciones */
.grade-modal-card {
    width: min(760px, calc(100vw - 28px));
}

.grade-items-builder {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(73, 204, 249, 0.22);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.20);
}

.grade-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.grade-items-head strong {
    color: var(--text-primary);
    font-size: 15px;
}

.grade-items-list {
    display: grid;
    gap: 10px;
}

.grade-item-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 150px 112px 38px;
    gap: 8px;
    align-items: center;
}

.grade-item-row input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-weight: 700;
}

.remove-grade-item {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(253, 113, 175, 0.35);
    border-radius: 12px;
    background: rgba(253, 113, 175, 0.12);
    color: #ff9bc6;
    font-weight: 950;
    cursor: pointer;
}

.grade-calculated-average {
    justify-self: end;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.20), rgba(73, 204, 249, 0.18));
    color: var(--text-secondary);
    font-weight: 850;
}

.grade-calculated-average strong {
    color: #49ccf9;
}

body.light-theme .grade-items-builder {
    background: #f8fafc;
    border-color: rgba(14, 165, 233, 0.24);
}

body.light-theme .grade-item-row input {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #172033;
}

body.light-theme .score-count {
    color: #0ea5e9;
}

@media (max-width: 700px) {
    .grade-items-head {
        align-items: stretch;
        flex-direction: column;
    }

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

    .remove-grade-item {
        width: 100%;
    }

    .grade-calculated-average {
        justify-self: stretch;
        text-align: center;
    }
}

/* Dashboard principal mas formal y didactico */
#dashboard .dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid rgba(73, 204, 249, 0.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at 8% 0%, rgba(123, 104, 238, 0.20), transparent 35%),
        radial-gradient(circle at 92% 0%, rgba(253, 113, 175, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

#dashboard .dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 10px;
    padding: 0 14px;
    border: 1px solid rgba(73, 204, 249, 0.28);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.10);
    color: #49ccf9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

#dashboard .dashboard-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.04;
}

#dashboard .dashboard-hero p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

#dashboard .dashboard-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#dashboard .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

#dashboard .dashboard-stat-card {
    min-height: 174px;
    padding: 22px !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
        rgba(30, 31, 37, 0.62) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

#dashboard .dashboard-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(73, 204, 249, 0.14);
}

#dashboard .dashboard-stat-card::before {
    height: 4px;
    background: linear-gradient(90deg, #7b68ee, #49ccf9, #fd71af);
}

#dashboard .stat-header {
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

#dashboard .stat-label {
    color: rgba(226, 232, 240, 0.78);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

#dashboard .stat-value {
    margin-bottom: 6px;
    font-size: clamp(2rem, 3vw, 2.55rem);
    font-weight: 950;
}

#dashboard .stat-subtext {
    min-height: 38px;
    color: rgba(226, 232, 240, 0.62);
    font-size: 13px;
    line-height: 1.45;
}

#dashboard .progress-bar {
    height: 6px;
    border: 0;
    background: rgba(15, 23, 42, 0.54);
}

#dashboard .stat-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6d67f4, #49ccf9);
    box-shadow: 0 16px 30px rgba(73, 204, 249, 0.18);
}

#dashboard .stat-icon-subjects::before {
    left: 12px;
    top: 11px;
    width: 20px;
    height: 24px;
    border-radius: 5px;
    background: linear-gradient(135deg, #b5ff71, #6ee7b7);
    box-shadow: 9px 4px 0 #fd71af, 16px 8px 0 #49ccf9;
}

#dashboard .stat-icon-tasks::before {
    left: 11px;
    top: 10px;
    width: 26px;
    height: 26px;
    border: 4px solid #ffffff;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
}

#dashboard .stat-icon-calendar::before {
    left: 10px;
    top: 11px;
    width: 28px;
    height: 27px;
    border-radius: 7px;
    background:
        linear-gradient(#49ccf9 0 26%, transparent 27%),
        linear-gradient(90deg, transparent 30%, rgba(15,23,42,0.13) 31% 34%, transparent 35% 64%, rgba(15,23,42,0.13) 65% 68%, transparent 69%),
        #ffffff;
}

#dashboard .stat-icon-grades::before {
    left: 12px;
    top: 10px;
    width: 24px;
    height: 29px;
    border: 0;
    border-radius: 4px 4px 8px 8px;
    background:
        linear-gradient(135deg, transparent 0 43%, #ffffff 44% 54%, transparent 55%),
        linear-gradient(180deg, #ffffff 0 84%, #49ccf9 85%);
    transform: skew(-8deg);
}

#dashboard .stat-icon-xp::before {
    left: 10px;
    top: 9px;
    width: 29px;
    height: 29px;
    background: #ffc800;
}

#dashboard .stat-icon-streak::before {
    left: 12px;
    top: 9px;
    width: 22px;
    height: 30px;
    border-radius: 18px 18px 18px 5px;
    background: linear-gradient(180deg, #ffc800, #fd71af);
    transform: rotate(16deg);
}

#dashboard .stat-icon-assistant::before {
    left: 9px;
    top: 14px;
    width: 30px;
    height: 22px;
    border-radius: 10px;
    background: #ffffff;
}

#dashboard .stat-icon-assistant::after {
    left: 15px;
    top: 20px;
    width: 18px;
    height: 5px;
    border-radius: 999px;
    background: #49ccf9;
    box-shadow: 0 -8px 0 -2px #ffc800;
}

#dashboard .dashboard-row-main {
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
    gap: 18px !important;
    align-items: stretch;
}

#dashboard .dashboard-row-main .weekly-progress-card {
    grid-column: 1 / -1;
}

#dashboard .dashboard-panel-card {
    padding: 22px !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
        rgba(30, 31, 37, 0.60) !important;
}

#dashboard .panel-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

#dashboard .panel-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
}

#dashboard .panel-title p {
    margin: 4px 0 0;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.45;
}

#dashboard .panel-icon {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 14px 26px rgba(73, 204, 249, 0.16);
}

#dashboard .panel-icon::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 6px;
    background: #ffffff;
}

#dashboard .panel-icon-steps::before {
    background:
        linear-gradient(#ffffff 0 20%, transparent 21% 39%, #ffffff 40% 60%, transparent 61% 79%, #ffffff 80%);
}

#dashboard .panel-icon-activity::before {
    inset: 10px 12px;
    border-radius: 999px;
    background: #ffc800;
    box-shadow: 0 10px 0 #fd71af;
}

#dashboard .panel-icon-chart::before {
    left: 10px;
    bottom: 10px;
    width: 7px;
    height: 18px;
    border-radius: 6px 6px 3px 3px;
    background: #49ccf9;
}

#dashboard .panel-icon-chart::after {
    content: "";
    position: absolute;
    left: 19px;
    bottom: 10px;
    width: 7px;
    height: 24px;
    border-radius: 6px 6px 3px 3px;
    background: #fd71af;
    box-shadow: 9px 8px 0 #00c875;
}

#dashboard .dashboard-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#dashboard .dashboard-steps li {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

#dashboard .dashboard-steps li.done {
    background: rgba(0, 200, 117, 0.12);
    border-color: rgba(0, 200, 117, 0.22);
}

#dashboard .dashboard-steps li.done strong {
    text-decoration: none;
}

#dashboard .step-number {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

#dashboard .dashboard-steps strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

#dashboard .dashboard-steps small {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.35;
}

#dashboard .dashboard-steps button {
    min-width: 70px;
    height: 34px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.10);
    color: #49ccf9;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

#dashboard .dashboard-steps li.done button {
    border-color: rgba(0, 200, 117, 0.24);
    background: rgba(0, 200, 117, 0.12);
    color: #6ee7b7;
}

#dashboard .dashboard-activity {
    display: grid;
    gap: 10px;
}

#dashboard .dashboard-activity li {
    position: relative;
    padding: 12px 12px 12px 38px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

#dashboard .dashboard-activity li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 0 0 5px rgba(73, 204, 249, 0.10);
}

#dashboard .dashboard-activity .activity-time {
    color: #49ccf9;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

#dashboard .dashboard-activity .activity-text {
    color: rgba(226, 232, 240, 0.78);
    font-size: 13px;
    line-height: 1.45;
}

#dashboard .weekly-chart {
    min-height: 150px;
    padding: 18px 18px 0;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.22);
}

#dashboard .chart-caption {
    margin-top: 14px;
    color: var(--text-tertiary);
    font-size: 13px;
}

body.light-theme #dashboard .dashboard-hero,
body.light-theme #dashboard .dashboard-stat-card,
body.light-theme #dashboard .dashboard-panel-card {
    background:
        radial-gradient(circle at 8% 0%, rgba(123, 104, 238, 0.12), transparent 35%),
        radial-gradient(circle at 92% 0%, rgba(73, 204, 249, 0.12), transparent 34%),
        #ffffff !important;
    border-color: rgba(71, 85, 105, 0.14) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

body.light-theme #dashboard .dashboard-hero h1,
body.light-theme #dashboard .panel-title h3,
body.light-theme #dashboard .dashboard-steps strong {
    color: #172033;
}

body.light-theme #dashboard .stat-label,
body.light-theme #dashboard .stat-subtext,
body.light-theme #dashboard .panel-title p,
body.light-theme #dashboard .dashboard-steps small,
body.light-theme #dashboard .dashboard-activity .activity-text,
body.light-theme #dashboard .chart-caption {
    color: #64748b;
}

body.light-theme #dashboard .dashboard-steps li,
body.light-theme #dashboard .dashboard-activity li,
body.light-theme #dashboard .weekly-chart {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

body.light-theme #dashboard .progress-bar {
    background: #e2e8f0;
}

@media (max-width: 900px) {
    #dashboard .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    #dashboard .dashboard-hero-actions {
        justify-content: flex-start;
    }

    #dashboard .dashboard-row-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    #dashboard .dashboard-hero {
        padding: 18px;
        border-radius: 22px;
    }

    #dashboard .dashboard-hero-actions,
    #dashboard .dashboard-hero-actions button {
        width: 100%;
    }

    #dashboard .dashboard-steps li {
        grid-template-columns: 36px 1fr;
    }

    #dashboard .dashboard-steps button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Dashboard principal - experiencia SaaS educativa */
#dashboard .dashboard-student-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 16px;
    padding: clamp(22px, 3vw, 30px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 0%, rgba(123, 104, 238, 0.34), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(253, 113, 175, 0.22), transparent 32%),
        linear-gradient(135deg, rgba(34, 39, 58, 0.94), rgba(25, 29, 44, 0.78));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
}

#dashboard .dashboard-student-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -38% 36%;
    height: 220px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(73, 204, 249, 0.28), rgba(123, 104, 238, 0.18));
    filter: blur(28px);
    pointer-events: none;
}

#dashboard .dashboard-hero-copy,
#dashboard .dashboard-hero-widget {
    position: relative;
    z-index: 1;
}

#dashboard .dashboard-hero-copy h1 {
    margin: 8px 0 8px;
    color: #ffffff;
    font-size: clamp(2.25rem, 4vw, 3.4rem);
    line-height: 1.02;
}

#dashboard .dashboard-hero-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 17px;
}

#dashboard .dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

#dashboard .dashboard-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 850;
}

#dashboard .dashboard-hero-widget {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-content: center;
    min-height: 170px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(16px);
}

#dashboard .dashboard-hero-widget strong {
    display: block;
    color: #ffffff;
    font-size: 19px;
}

#dashboard .dashboard-hero-widget p {
    margin: 5px 0 14px;
    color: rgba(226, 232, 240, 0.70);
    font-size: 13px;
    line-height: 1.45;
}

#dashboard .dashboard-hero-widget button {
    grid-column: 1 / -1;
    width: 100%;
}

#dashboard .hero-widget-icon {
    position: relative;
}

#dashboard .quick-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

#dashboard .quick-actions-bar button,
#dashboard .dashboard-tutor-actions button {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(73, 204, 249, 0.22);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.16), rgba(73, 204, 249, 0.10));
    color: #dbeafe;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

#dashboard .quick-actions-bar button:hover,
#dashboard .dashboard-tutor-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(253, 113, 175, 0.42);
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.26), rgba(73, 204, 249, 0.18));
}

#dashboard .dashboard-grid {
    grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    gap: 16px !important;
}

#dashboard .dashboard-stat-card {
    min-height: 164px;
    padding: 20px !important;
}

#dashboard .dashboard-stat-card .stat-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 14px;
}

#dashboard .stat-icon-level::before {
    left: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffc800, #fd71af);
    box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.75);
}

#dashboard .dashboard-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.72fr) minmax(300px, 0.9fr);
    gap: 16px;
    align-items: stretch;
}

#dashboard .dashboard-day-card,
#dashboard .weekly-progress-card {
    grid-column: span 2;
}

#dashboard .dashboard-tutor-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(253, 113, 175, 0.20), transparent 38%),
        linear-gradient(145deg, rgba(123, 104, 238, 0.18), rgba(73, 204, 249, 0.07)),
        rgba(30, 31, 37, 0.66) !important;
}

#dashboard .dashboard-day-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#dashboard .dashboard-day-list li {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

#dashboard .dashboard-day-list li > span {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.12);
    color: #49ccf9;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

#dashboard .dashboard-day-list strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

#dashboard .dashboard-day-list small {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 12px;
}

#dashboard .dashboard-empty-note {
    display: grid;
    gap: 8px;
    min-height: 128px;
    align-content: center;
    padding: 18px;
    border: 1px dashed rgba(73, 204, 249, 0.28);
    border-radius: 18px;
    background: rgba(73, 204, 249, 0.055);
}

#dashboard .dashboard-empty-note strong {
    color: #ffffff;
    font-size: 18px;
}

#dashboard .dashboard-empty-note span {
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.45;
}

#dashboard .dashboard-xp-ring {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin: 4px auto 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(30, 31, 37, 0.92) 0 56%, transparent 57%),
        conic-gradient(#49ccf9 var(--xp, 42%), rgba(255, 255, 255, 0.10) 0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px rgba(73, 204, 249, 0.12);
}

#dashboard .dashboard-xp-ring span {
    color: #ffffff;
    font-size: 28px;
    font-weight: 950;
}

#dashboard .dashboard-xp-ring small {
    margin-top: -18px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

#dashboard .dashboard-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

#dashboard .dashboard-achievements span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0, 200, 117, 0.11);
    color: #86efac;
    font-size: 11px;
    font-weight: 900;
}

#dashboard .dashboard-tutor-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#dashboard .panel-icon-day::before {
    inset: 10px;
    border-radius: 7px;
    background:
        linear-gradient(#49ccf9 0 28%, transparent 29%),
        #ffffff;
}

#dashboard .panel-icon-tutor::before {
    inset: 11px 9px;
    border-radius: 10px;
    background: #ffffff;
}

#dashboard .panel-icon-tutor::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 20px;
    width: 18px;
    height: 5px;
    border-radius: 999px;
    background: #49ccf9;
    box-shadow: 0 -8px 0 -2px #ffc800;
}

body.light-theme #dashboard .dashboard-student-hero,
body.light-theme #dashboard .dashboard-tutor-card {
    background:
        radial-gradient(circle at 8% 0%, rgba(123, 104, 238, 0.13), transparent 36%),
        radial-gradient(circle at 92% 0%, rgba(73, 204, 249, 0.13), transparent 34%),
        #ffffff !important;
}

body.light-theme #dashboard .dashboard-hero-copy h1,
body.light-theme #dashboard .dashboard-hero-widget strong,
body.light-theme #dashboard .dashboard-day-list strong,
body.light-theme #dashboard .dashboard-empty-note strong,
body.light-theme #dashboard .dashboard-xp-ring span {
    color: #172033;
}

body.light-theme #dashboard .dashboard-hero-copy p,
body.light-theme #dashboard .dashboard-hero-widget p,
body.light-theme #dashboard .dashboard-hero-meta span,
body.light-theme #dashboard .dashboard-day-list small,
body.light-theme #dashboard .dashboard-empty-note span {
    color: #64748b;
}

body.light-theme #dashboard .quick-actions-bar button,
body.light-theme #dashboard .dashboard-tutor-actions button {
    color: #2563eb;
    background: rgba(73, 204, 249, 0.10);
}

body.light-theme #dashboard .dashboard-day-list li,
body.light-theme #dashboard .dashboard-empty-note {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

body.light-theme #dashboard .dashboard-xp-ring {
    background:
        radial-gradient(circle, #ffffff 0 56%, transparent 57%),
        conic-gradient(#49ccf9 var(--xp, 42%), #e2e8f0 0);
}

.sidebar {
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.14);
}

.sidebar nav {
    padding-top: 10px;
}

.nav-item {
    min-height: 54px;
    gap: 14px;
    padding: 10px 16px;
    color: rgba(226, 232, 240, 0.70);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.nav-item .nav-icon {
    flex: 0 0 38px;
}

.nav-item span:last-child {
    line-height: 1.15;
}

.nav-item.active {
    color: #ffffff;
}

body.light-theme .nav-item {
    color: #64748b;
}

body.light-theme .nav-item.active {
    color: #172033;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.14), rgba(73, 204, 249, 0.10));
}

@media (max-width: 1220px) {
    #dashboard .dashboard-grid {
        grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
    }

    #dashboard .dashboard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashboard .dashboard-day-card,
    #dashboard .weekly-progress-card {
        grid-column: span 1;
    }
}

@media (max-width: 860px) {
    #dashboard .dashboard-student-hero,
    #dashboard .dashboard-layout {
        grid-template-columns: 1fr;
    }

    #dashboard .dashboard-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    #dashboard .dashboard-grid,
    #dashboard .dashboard-tutor-actions {
        grid-template-columns: 1fr !important;
    }

    #dashboard .quick-actions-bar button {
        flex: 1 1 100%;
    }

    #dashboard .dashboard-day-list li {
        grid-template-columns: 1fr;
    }
}

/* Libreta por periodos en Calificaciones */
.grade-formula-note {
    padding: 8px 12px;
    border: 1px solid rgba(73, 204, 249, 0.22);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.09);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
}

.period-gradebook-panel {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
}

.period-gradebook-table {
    display: grid;
    grid-template-columns: minmax(190px, 230px) 104px repeat(12, 92px);
    min-width: 1438px;
}

.period-head,
.period-subject-cell,
.period-average-cell,
.period-grade-cell {
    min-height: 74px;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.period-head {
    display: grid;
    place-items: center;
    padding: 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-align: center;
    line-height: 1.15;
    text-transform: uppercase;
}

.subject-head {
    justify-items: start;
    padding-left: 18px;
    background: rgba(15, 23, 42, 0.42);
}

.average-head {
    background: linear-gradient(135deg, #64748b, #334155);
}

.period-average-head {
    background: linear-gradient(135deg, #2f80d2, #2563eb);
}

.partial-head {
    background: linear-gradient(135deg, #78a967, #5f9b4d);
}

.exam-head {
    background: linear-gradient(135deg, #e06b55, #d94f3d);
}

.period-subject-cell {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.035);
}

.period-subject-cell strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
}

.period-subject-cell small {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 750;
}

.period-average-cell,
.period-grade-cell {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    text-align: center;
}

.period-grade-cell {
    border-top: 0;
    border-left: 0;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.period-grade-cell:hover {
    background: rgba(73, 204, 249, 0.12);
}

.period-average-cell strong,
.period-grade-cell strong {
    color: #ffffff;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.period-average-cell span,
.period-grade-cell span {
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
}

.period-grade-cell.empty strong {
    color: rgba(226, 232, 240, 0.34);
}

.period-grade-cell.empty span {
    color: #49ccf9;
}

.period-average-cell.reprobado strong,
.period-grade-cell.reprobado strong {
    color: #ff7b7b;
}

.period-average-cell.aprobado strong,
.period-average-cell.excelente strong,
.period-grade-cell.aprobado strong,
.period-grade-cell.excelente strong {
    color: #eaf3ff;
}

.grade-period-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.grade-bucket-card {
    width: min(680px, calc(100vw - 28px));
}

.grade-bucket-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.grade-bucket-header h3 {
    margin: 0;
}

.grade-bucket-header p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 750;
}

.grade-bucket-list {
    display: grid;
    gap: 12px;
}

.grade-bucket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(73, 204, 249, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.grade-bucket-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
}

.grade-bucket-item span {
    display: block;
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 750;
}

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

body.light-theme .grade-formula-note {
    background: #eef6ff;
    border-color: rgba(14, 165, 233, 0.22);
    color: #475569;
}

body.light-theme .period-gradebook-panel {
    background: #ffffff;
    border-color: rgba(71, 85, 105, 0.16);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.10);
}

body.light-theme .period-head,
body.light-theme .period-subject-cell,
body.light-theme .period-average-cell,
body.light-theme .period-grade-cell {
    border-color: rgba(15, 23, 42, 0.10);
}

body.light-theme .period-subject-cell,
body.light-theme .period-average-cell,
body.light-theme .period-grade-cell {
    background: #ffffff;
}

body.light-theme .period-subject-cell strong,
body.light-theme .period-average-cell strong,
body.light-theme .period-grade-cell.aprobado strong,
body.light-theme .period-grade-cell.excelente strong {
    color: #172033;
}

body.light-theme .period-subject-cell small,
body.light-theme .period-average-cell span,
body.light-theme .period-grade-cell span {
    color: #64748b;
}

body.light-theme .period-grade-cell:hover {
    background: #eef6ff;
}

body.light-theme .grade-bucket-item {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.10);
}

@media (max-width: 700px) {
    .grade-period-row {
        grid-template-columns: 1fr;
    }

    .grade-bucket-header,
    .grade-bucket-item {
        align-items: stretch;
        flex-direction: column;
    }

    .grade-bucket-actions,
    .grade-bucket-actions button,
    .grade-bucket-header button {
        width: 100%;
    }
}

/* Fondo animado para login y registro */
#login-page,
#register-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 26%, rgba(123, 104, 238, 0.34), transparent 18%),
        radial-gradient(circle at 86% 24%, rgba(73, 204, 249, 0.28), transparent 20%),
        linear-gradient(125deg, #18054c 0%, #232065 42%, #1057e7 100%) !important;
}

#login-page .auth-container,
#register-page .auth-container {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    padding: 42px 18px;
    background:
        radial-gradient(circle at 12% 26%, rgba(123, 104, 238, 0.34), transparent 18%),
        radial-gradient(circle at 86% 24%, rgba(73, 204, 249, 0.28), transparent 20%),
        radial-gradient(circle at 62% 78%, rgba(253, 113, 175, 0.22), transparent 18%),
        linear-gradient(125deg, #18054c 0%, #232065 42%, #1057e7 100%) !important;
}

#login-page .auth-bg-scene,
#register-page .auth-bg-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#login-page .auth-star,
#register-page .auth-star {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 18px rgba(73, 204, 249, 0.72);
    animation: authTwinkle 3s ease-in-out infinite;
}

#login-page .star-a,
#register-page .star-a {
    left: 13%;
    top: 21%;
}

#login-page .star-b,
#register-page .star-b {
    right: 18%;
    top: 29%;
    animation-delay: 0.8s;
}

#login-page .star-c,
#register-page .star-c {
    left: 72%;
    bottom: 18%;
    animation-delay: 1.5s;
}

#login-page .auth-planet,
#register-page .auth-planet {
    position: absolute;
    border-radius: 999px;
    filter: blur(0.2px);
    opacity: 0.72;
    animation: authOrbitFloat 9s ease-in-out infinite;
}

#login-page .planet-left,
#register-page .planet-left {
    left: 5%;
    top: 42%;
    width: 150px;
    height: 150px;
    background:
        radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.34), transparent 28%),
        radial-gradient(circle, rgba(123, 104, 238, 0.68) 0 44%, rgba(73, 204, 249, 0.16) 46% 58%, transparent 60%);
}

#login-page .planet-right,
#register-page .planet-right {
    right: 8%;
    top: 38%;
    width: 126px;
    height: 126px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(73, 204, 249, 0.22), rgba(123, 104, 238, 0.54)),
        rgba(255, 255, 255, 0.08);
    transform: rotate(16deg);
    animation-delay: 1s;
}

#login-page .auth-floating-card,
#register-page .auth-floating-card {
    position: absolute;
    width: 132px;
    height: 94px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    animation: authCardDrift 8s ease-in-out infinite;
}

#login-page .float-books,
#register-page .float-books {
    left: 18%;
    bottom: 13%;
    background:
        linear-gradient(135deg, #b5ff71, #49ccf9) 28px 22px / 42px 50px no-repeat,
        linear-gradient(135deg, #fd71af, #7b68ee) 58px 34px / 42px 44px no-repeat,
        rgba(255, 255, 255, 0.10);
}

#login-page .float-ai,
#register-page .float-ai {
    right: 20%;
    bottom: 14%;
    background:
        radial-gradient(circle at 50% 47%, #ffffff 0 22px, transparent 23px),
        linear-gradient(135deg, #7b68ee, #49ccf9);
    animation-delay: 1.3s;
}

#login-page .auth-container::before,
#register-page .auth-container::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -3;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(73, 204, 249, 0.72) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(253, 113, 175, 0.76) 0 2px, transparent 3px);
    background-size: 180px 180px, 260px 260px, 340px 340px;
    background-position: 20px 40px, 90px 130px, 160px 80px;
    opacity: 0.52;
    animation: authStarsFloat 22s linear infinite;
}

#login-page .auth-container::after,
#register-page .auth-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 8% 56%, rgba(255, 255, 255, 0.22) 0 42px, rgba(123, 104, 238, 0.22) 43px 78px, transparent 80px),
        radial-gradient(circle at 91% 58%, rgba(73, 204, 249, 0.20) 0 34px, rgba(255, 255, 255, 0.08) 35px 72px, transparent 74px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px);
    background-size: auto, auto, 82px 82px, 82px 82px;
    opacity: 0.76;
    animation: authGlowDrift 12s ease-in-out infinite alternate;
}

#login-page .auth-card,
#register-page .auth-card {
    position: relative;
    z-index: 2;
    width: min(440px, 100%);
    max-width: 440px !important;
    padding: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
        rgba(28, 31, 45, 0.86) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(73, 204, 249, 0.08);
    backdrop-filter: blur(18px);
}

#login-page .auth-card::before,
#register-page .auth-card::before {
    content: "AC Edunity";
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 18px;
    padding: 0 14px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.10);
    color: #49ccf9;
    font-size: 13px;
    font-weight: 950;
}

#login-page .auth-card::after,
#register-page .auth-card::after {
    content: "";
    position: absolute;
    right: -78px;
    top: -72px;
    width: 164px;
    height: 164px;
    z-index: -1;
    border-radius: 38px;
    background:
        linear-gradient(135deg, rgba(181, 255, 113, 0.92), rgba(73, 204, 249, 0.92)) 34px 52px / 58px 70px no-repeat,
        linear-gradient(135deg, rgba(253, 113, 175, 0.88), rgba(123, 104, 238, 0.88)) 72px 70px / 58px 70px no-repeat,
        rgba(255, 255, 255, 0.06);
    filter: blur(0.2px);
    transform: rotate(10deg);
    animation: authCardFloat 7s ease-in-out infinite;
}

#login-page .auth-card h2,
#register-page .auth-card h2 {
    margin-bottom: 18px !important;
    color: #ffffff;
    font-size: 30px !important;
    text-align: left !important;
}

#login-page .auth-card h2::after {
    content: "Organiza tu espacio academico y continua estudiando con ayuda inteligente.";
}

#register-page .auth-card h2::after {
    content: "Crea tu cuenta gratis y empieza desde cero con materias, tareas y calificaciones.";
}

#login-page .auth-card h2::after,
#register-page .auth-card h2::after {
    display: block;
    max-width: 350px;
    margin-top: 10px;
    color: rgba(226, 232, 240, 0.70);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
}

#login-page .form-group label,
#register-page .form-group label {
    color: rgba(226, 232, 240, 0.82);
}

#login-page .form-group input,
#register-page .form-group input {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.36);
}

#login-page .auth-link,
#register-page .auth-link {
    color: rgba(226, 232, 240, 0.68);
}

body.light-theme #login-page .auth-container,
body.light-theme #register-page .auth-container {
    background:
        radial-gradient(circle at 12% 26%, rgba(123, 104, 238, 0.18), transparent 18%),
        radial-gradient(circle at 86% 24%, rgba(73, 204, 249, 0.20), transparent 20%),
        linear-gradient(125deg, #eef2ff 0%, #e0f7ff 48%, #dbeafe 100%) !important;
}

body.light-theme #login-page,
body.light-theme #register-page {
    background:
        radial-gradient(circle at 12% 26%, rgba(123, 104, 238, 0.18), transparent 18%),
        radial-gradient(circle at 86% 24%, rgba(73, 204, 249, 0.20), transparent 20%),
        linear-gradient(125deg, #eef2ff 0%, #e0f7ff 48%, #dbeafe 100%) !important;
}

body.light-theme #login-page .auth-card,
body.light-theme #register-page .auth-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 28px 76px rgba(30, 64, 175, 0.16);
}

body.light-theme #login-page .auth-card h2,
body.light-theme #register-page .auth-card h2 {
    color: #172033;
}

body.light-theme #login-page .auth-card h2::after,
body.light-theme #register-page .auth-card h2::after,
body.light-theme #login-page .auth-link,
body.light-theme #register-page .auth-link {
    color: #64748b;
}

body.light-theme #login-page .form-group label,
body.light-theme #register-page .form-group label {
    color: #475569;
}

body.light-theme #login-page .form-group input,
body.light-theme #register-page .form-group input {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

@keyframes authStarsFloat {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(120px, 90px, 0);
    }
}

@keyframes authGlowDrift {
    from {
        transform: translate3d(-10px, -8px, 0) scale(1);
    }
    to {
        transform: translate3d(14px, 10px, 0) scale(1.04);
    }
}

@keyframes authCardFloat {
    0%, 100% {
        transform: translateY(0) rotate(10deg);
    }
    50% {
        transform: translateY(14px) rotate(6deg);
    }
}

@keyframes authTwinkle {
    0%, 100% {
        opacity: 0.28;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@keyframes authOrbitFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(18px, -16px, 0) rotate(8deg);
    }
}

@keyframes authCardDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
    }
    50% {
        transform: translate3d(0, -18px, 0) rotate(4deg);
    }
}

@media (max-width: 640px) {
    #login-page .auth-card,
    #register-page .auth-card {
        padding: 26px !important;
    }

    #login-page .auth-card::after,
    #register-page .auth-card::after {
        opacity: 0.48;
        right: -100px;
    }
}

/* Integracion visual con Google Calendar */
.calendar-side {
    display: grid;
    gap: 18px;
}

.calendar-sync-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(73, 204, 249, 0.20);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(73, 204, 249, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(30, 31, 37, 0.72);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.calendar-sync-icon {
    position: relative;
    display: inline-grid;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #e0f2fe);
    box-shadow: inset 0 0 0 5px #ffffff, 0 16px 34px rgba(73, 204, 249, 0.18);
}

.calendar-sync-icon::before,
.calendar-sync-icon::after {
    content: "";
    position: absolute;
}

.calendar-sync-icon::before {
    inset: 10px;
    border-radius: 6px;
    background:
        linear-gradient(#4285f4 0 25%, transparent 26%),
        linear-gradient(90deg, #34a853 0 25%, #fbbc05 26% 50%, #ea4335 51% 75%, #4285f4 76%);
}

.calendar-sync-icon::after {
    left: 18px;
    top: 19px;
    width: 13px;
    height: 11px;
    border-left: 3px solid #4285f4;
    border-bottom: 3px solid #4285f4;
    transform: rotate(-45deg);
}

.calendar-sync-card h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.2;
}

.calendar-sync-card p {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.google-calendar-btn {
    border-color: rgba(66, 133, 244, 0.28) !important;
    color: #7cc4ff !important;
}

body.light-theme .calendar-sync-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.calendar-day {
    position: relative;
}

.calendar-day.has-event {
    border: 1px solid rgba(73, 204, 249, 0.55) !important;
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.95), rgba(73, 204, 249, 0.95)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(73, 204, 249, 0.22);
}

.calendar-day.has-event::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    height: 3px;
    border-radius: 999px;
    background: #ffc800;
    box-shadow: 0 0 14px rgba(255, 200, 0, 0.48);
}

.calendar-day-number {
    position: relative;
    z-index: 1;
}

.calendar-event-marker {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fd71af;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
}

body.light-theme .calendar-day.has-event {
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.20);
}

/* Calendario academico horizontal */
#calendar .calendar-container {
    grid-template-columns: minmax(620px, 1.45fr) minmax(320px, 0.85fr);
    align-items: start;
    gap: 22px;
}

#calendar .calendar-side {
    min-width: 0;
}

#calendar .calendar-mini {
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(73, 204, 249, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(30, 31, 37, 0.72);
    border: 1px solid rgba(73, 204, 249, 0.16);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.18);
}

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

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

.calendar-title {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 950;
}

.calendar-title-block p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.calendar-month-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 28px;
    font-weight: 900;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.calendar-month-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 204, 249, 0.55);
    background: rgba(73, 204, 249, 0.14);
}

#calendar .calendar-grid-wide {
    gap: 10px;
}

#calendar .calendar-day-label {
    min-height: 34px;
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#calendar .calendar-day {
    min-height: 76px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.055);
    font-size: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#calendar .calendar-day:not(.muted):hover {
    transform: translateY(-2px);
    border-color: rgba(73, 204, 249, 0.35);
    background: rgba(73, 204, 249, 0.08);
}

#calendar .calendar-day.muted {
    min-height: 76px;
    color: rgba(165, 174, 194, 0.45);
    background: rgba(255, 255, 255, 0.025);
}

#calendar .calendar-day.is-today:not(.has-event) {
    border-color: rgba(253, 113, 175, 0.45);
    box-shadow: inset 0 0 0 1px rgba(253, 113, 175, 0.18);
}

#calendar .events-list {
    min-width: 0;
}

#calendar #custom-events-list {
    gap: 14px;
}

#calendar .event-custom {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 24px 18px 22px;
    overflow: hidden;
}

#calendar .event-custom .event-date {
    min-width: 0;
    width: 66px;
    padding-top: 6px;
}

#calendar .event-custom .event-date .day {
    font-size: 26px;
    line-height: 1;
}

#calendar .event-custom .event-content {
    min-width: 0;
    display: grid;
    gap: 10px;
}

#calendar .event-custom .event-content h4,
#calendar .event-custom .event-content p {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

#calendar .event-custom .event-badge,
#calendar .event-custom .event-alert,
#calendar .event-custom .email-simulation {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

#calendar .event-custom .email-simulation {
    border-radius: 18px;
    line-height: 1.35;
}

#calendar .event-custom .card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

#calendar .event-custom .card-actions button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

#calendar .event-custom .card-actions .google-calendar-btn {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    #calendar .event-custom {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }

    #calendar .event-custom .event-date {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }
}

body.light-theme #calendar .calendar-mini {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

body.light-theme #calendar .calendar-day {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.07);
}

body.light-theme #calendar .calendar-day.muted {
    background: rgba(15, 23, 42, 0.02);
}

@media (max-width: 1120px) {
    #calendar .calendar-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #calendar .calendar-mini {
        padding: 18px;
    }

    #calendar .calendar-day,
    #calendar .calendar-day.muted {
        min-height: 54px;
        border-radius: 14px;
        font-size: 14px;
    }

    .calendar-month-btn {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }
}

.app-svg-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Tutor: asistente de estudio simulado */
.nav-icon-tutor {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
}

.nav-icon-tutor::before,
.nav-icon-tutor::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

.nav-icon-tutor::before {
    width: 12px;
    height: 8px;
    left: 6px;
    top: 8px;
    background: #ffffff;
    box-shadow: -7px 1px 0 -3px #fd71af, 7px 1px 0 -3px #fd71af;
}

.nav-icon-tutor::after {
    width: 11px;
    height: 3px;
    left: 6px;
    top: 3px;
    background: #ffc800;
}

/* Limpieza de iconos: evita emojis rotos por codificacion */
.theme-toggle::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: block;
    background: #eaf6ff;
    box-shadow: inset -6px -4px 0 #86b8ff;
}

body.light-theme .theme-toggle::before {
    background: #ffc800;
    box-shadow: 0 0 0 5px rgba(255, 200, 0, 0.18);
}

.feature-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.feature-icon::before {
    content: "";
    width: 15px;
    height: 8px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(-45deg);
}

.benefit-card:nth-child(1) .benefit-icon::before,
.benefit-card:nth-child(2) .benefit-icon::before,
.benefit-card:nth-child(3) .benefit-icon::before,
.benefit-card:nth-child(4) .benefit-icon::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
}

.benefit-card:nth-child(1) .benefit-icon::before {
    border-radius: 8px;
    background: linear-gradient(135deg, #7b68ee 0 45%, #49ccf9 46%);
    box-shadow: 10px 8px 0 rgba(253, 113, 175, 0.75);
}

.benefit-card:nth-child(2) .benefit-icon::before {
    border-radius: 999px 999px 12px 12px;
    background:
        radial-gradient(circle at 35% 48%, #111827 0 8%, transparent 9%),
        radial-gradient(circle at 65% 48%, #111827 0 8%, transparent 9%),
        linear-gradient(135deg, #ffffff 0 62%, #49ccf9 63%);
}

.benefit-card:nth-child(3) .benefit-icon::before {
    border-radius: 8px;
    background:
        linear-gradient(#49ccf9 0 18%, transparent 19%),
        linear-gradient(90deg, transparent 31%, rgba(123, 104, 238, 0.75) 32% 38%, transparent 39% 63%, rgba(123, 104, 238, 0.75) 64% 70%, transparent 71%),
        #ffffff;
}

.benefit-card:nth-child(4) .benefit-icon::before {
    clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%);
    background: linear-gradient(135deg, #ffc800, #fd71af);
}

.nav-icon-menu::before,
.nav-icon-subjects::before,
.nav-icon-tasks::before,
.nav-icon-calendar::before,
.nav-icon-grades::before,
.nav-icon-attendance::before,
.nav-icon-progress::before,
.nav-icon-backpack::before,
.nav-icon-profile::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
}

.nav-icon-menu::before {
    border-radius: 6px;
    background: linear-gradient(135deg, #fd71af 0 45%, #49ccf9 46%);
}

.nav-icon-subjects::before {
    border-radius: 5px;
    background: #90f28a;
    box-shadow: 7px 5px 0 #fd71af, 12px 9px 0 #49ccf9;
}

.nav-icon-tasks::before {
    width: 16px;
    height: 9px;
    border-left: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    transform: rotate(-45deg);
}

.nav-icon-calendar::before,
.nav-icon-attendance::before {
    border-radius: 6px;
    background: linear-gradient(#49ccf9 0 25%, #ffffff 26%);
}

.nav-icon-grades::before {
    border-radius: 5px;
    background:
        linear-gradient(90deg, #00c875 0 22%, transparent 23% 38%, #49ccf9 39% 61%, transparent 62% 76%, #fd71af 77%),
        #ffffff;
}

.nav-icon-progress::before {
    clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%);
    background: #ffc800;
}

.nav-icon-backpack::before {
    border-radius: 7px 7px 9px 9px;
    background: linear-gradient(135deg, #fd71af, #7b68ee);
    box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45);
}

.nav-icon-profile::before {
    border-radius: 999px 999px 8px 8px;
    background:
        radial-gradient(circle at 50% 28%, #ffffff 0 22%, transparent 23%),
        linear-gradient(135deg, #7b68ee, #49ccf9);
}

/* Tutor IA: interfaz compacta, aislada y responsive */
#ai-assistant {
    padding-inline: clamp(18px, 2.5vw, 34px);
}

#ai-assistant .tutor-shell {
    width: calc(100% - clamp(0px, 1vw, 18px));
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

#ai-assistant .tutor-hero {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 4px 4px;
}

#ai-assistant .tutor-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

#ai-assistant .tutor-header-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #6d5dfc, #06b6d4);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(73, 204, 249, 0.14);
    overflow: hidden;
}

#ai-assistant .tutor-header-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ai-assistant .tutor-brand h1 {
    margin: 0;
    font-size: clamp(1.38rem, 2vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

#ai-assistant .tutor-brand p {
    max-width: 720px;
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

#ai-assistant .tutor-status {
    display: none;
}

#ai-assistant .tutor-chat-card {
    position: relative;
    height: clamp(540px, calc(100dvh - 220px), 720px);
    min-height: 0;
    padding: 13px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 9px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 21px;
    background:
        linear-gradient(145deg, rgba(14, 31, 61, 0.98), rgba(8, 20, 43, 0.98)) padding-box,
        linear-gradient(135deg, rgba(123, 104, 238, 0.58), rgba(73, 204, 249, 0.48), rgba(253, 113, 175, 0.38)) border-box;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
    isolation: isolate;
}

#ai-assistant .tutor-chat-card::before {
    content: "";
    position: absolute;
    inset: -76px 20% auto;
    height: 100px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(73, 204, 249, 0.18), transparent 68%);
    filter: blur(16px);
}

#ai-assistant .tutor-tabs {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 1px 1px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

#ai-assistant .tutor-tabs::-webkit-scrollbar {
    display: none;
}

#ai-assistant .tutor-tabs button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #aebdd2;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#ai-assistant .tutor-tabs button:hover,
#ai-assistant .tutor-tabs button.active {
    color: #ffffff;
    border-color: rgba(73, 204, 249, 0.5);
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.94), rgba(53, 171, 222, 0.94));
    transform: translateY(-1px);
}

#ai-assistant .tutor-messages {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 7px 6px 12px 2px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 170, 220, 0.58) rgba(8, 20, 43, 0.3);
}

#ai-assistant .tutor-messages::-webkit-scrollbar {
    width: 7px;
}

#ai-assistant .tutor-messages::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(8, 20, 43, 0.3);
}

#ai-assistant .tutor-messages::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(123, 104, 238, 0.7), rgba(73, 204, 249, 0.7));
    background-clip: padding-box;
}

#ai-assistant .tutor-message {
    flex: 0 0 auto;
    width: fit-content;
    max-width: min(88%, 820px);
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    color: #e9f1fb;
    font-size: 0.9rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
}

#ai-assistant .tutor-bot {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    background: linear-gradient(145deg, rgba(25, 48, 82, 0.94), rgba(17, 38, 70, 0.94));
}

#ai-assistant .tutor-user {
    align-self: flex-end;
    max-width: min(78%, 680px);
    border-color: rgba(124, 125, 255, 0.28);
    border-bottom-right-radius: 5px;
    background: linear-gradient(135deg, #6258c7, #3d86c4);
    color: #ffffff;
}

#ai-assistant .tutor-message-title {
    display: block;
    margin: 0 0 5px;
    color: #9de5f5;
    font-size: 0.76rem;
    letter-spacing: 0.025em;
}

#ai-assistant .tutor-message p,
#ai-assistant .tutor-message h3,
#ai-assistant .tutor-message h4,
#ai-assistant .tutor-message ul,
#ai-assistant .tutor-message ol {
    color: inherit;
}

#ai-assistant .tutor-message p {
    margin: 0 0 7px;
}

#ai-assistant .tutor-message p:last-child,
#ai-assistant .tutor-message ul:last-child,
#ai-assistant .tutor-message ol:last-child {
    margin-bottom: 0;
}

#ai-assistant .tutor-message h3,
#ai-assistant .tutor-message h4 {
    margin: 9px 0 5px;
    line-height: 1.28;
}

#ai-assistant .tutor-message h3:first-child,
#ai-assistant .tutor-message h4:first-child {
    margin-top: 0;
}

#ai-assistant .tutor-message h3 {
    font-size: 1.02rem;
}

#ai-assistant .tutor-message h4 {
    font-size: 0.95rem;
}

#ai-assistant .tutor-message ul,
#ai-assistant .tutor-message ol {
    margin: 5px 0 8px;
    padding-left: 1.25rem;
}

#ai-assistant .tutor-message li + li {
    margin-top: 3px;
}

#ai-assistant .tutor-message hr {
    height: 1px;
    margin: 10px 0;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.4), transparent);
}

#ai-assistant .tutor-message strong {
    color: #ffffff;
    font-weight: 800;
}

#ai-assistant .tutor-message code {
    padding: 0.12em 0.34em;
    border-radius: 5px;
    background: rgba(5, 14, 31, 0.48);
    color: #c4eff8;
    font: 0.92em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#ai-assistant .tutor-message pre {
    max-width: 100%;
    margin: 7px 0;
    padding: 9px 11px;
    overflow-x: auto;
    border-radius: 9px;
    background: rgba(5, 14, 31, 0.6);
}

#ai-assistant .tutor-composer {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 8px 9px 7px;
    border: 1px solid rgba(113, 169, 218, 0.25);
    border-radius: 15px;
    background: rgba(6, 17, 37, 0.94);
    box-shadow: 0 -9px 24px rgba(6, 17, 37, 0.28);
}

#ai-assistant .tutor-composer textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    max-height: 92px;
    field-sizing: content;
    resize: none;
    padding: 5px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #edf5ff;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
}

#ai-assistant .tutor-composer:focus-within {
    border-color: rgba(73, 204, 249, 0.48);
    box-shadow: 0 0 0 3px rgba(73, 204, 249, 0.08), 0 -9px 24px rgba(6, 17, 37, 0.24);
}

#ai-assistant .tutor-composer textarea::placeholder {
    color: #8395ad;
}

#ai-assistant .tutor-composer-bar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

#ai-assistant .tutor-model {
    min-width: 0;
    margin-right: auto;
    color: #aebdd2;
    font-size: 0.8rem;
    font-weight: 800;
}

#ai-assistant .tutor-send {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #7b68ee, #49ccf9, #fd71af);
    box-shadow: 0 8px 18px rgba(123, 104, 238, 0.22);
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#ai-assistant .tutor-send:hover {
    transform: translateY(-1px);
}

#ai-assistant .tutor-send:disabled,
#ai-assistant .tutor-send.is-loading {
    cursor: wait;
    opacity: 0.72;
    transform: none;
    box-shadow: none;
}

.tutor-practice-response {
    max-width: 94%;
}

.tutor-practice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.tutor-practice-card {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(73, 204, 249, 0.2);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
}

.tutor-practice-card span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    font-weight: 900;
}

.tutor-practice-card p {
    margin: 0;
    color: inherit !important;
    font-weight: 700;
}

.tutor-thinking {
    max-width: 300px;
    opacity: 0.9;
}

.tutor-thinking p::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 10px;
    margin-left: 7px;
    border-radius: 999px;
    background:
        radial-gradient(circle, #49ccf9 0 28%, transparent 30%) 0 50% / 10px 10px,
        radial-gradient(circle, #7b68ee 0 28%, transparent 30%) 9px 50% / 10px 10px,
        radial-gradient(circle, #fd71af 0 28%, transparent 30%) 18px 50% / 10px 10px;
    background-repeat: no-repeat;
    animation: tutorThinking 1s infinite ease-in-out;
}

@keyframes tutorThinking {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

body.light-theme #ai-assistant .tutor-header-icon {
    border-color: rgba(73, 150, 190, 0.24);
    box-shadow: 0 7px 18px rgba(73, 150, 190, 0.12);
}

body.light-theme #ai-assistant .tutor-chat-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 253, 0.98)) padding-box,
        linear-gradient(135deg, rgba(123, 104, 238, 0.38), rgba(73, 204, 249, 0.38), rgba(253, 113, 175, 0.26)) border-box;
    box-shadow: 0 16px 40px rgba(49, 68, 91, 0.14);
}

body.light-theme #ai-assistant .tutor-tabs button {
    border-color: rgba(100, 116, 139, 0.16);
    background: rgba(226, 232, 240, 0.68);
    color: #526277;
}

body.light-theme #ai-assistant .tutor-tabs button:hover,
body.light-theme #ai-assistant .tutor-tabs button.active {
    color: #ffffff;
    border-color: rgba(72, 129, 196, 0.36);
    background: linear-gradient(135deg, #6d63d3, #438fc8);
}

body.light-theme #ai-assistant .tutor-messages {
    scrollbar-color: rgba(88, 134, 176, 0.52) rgba(219, 229, 239, 0.68);
}

body.light-theme #ai-assistant .tutor-messages::-webkit-scrollbar-track {
    background: rgba(219, 229, 239, 0.68);
}

body.light-theme #ai-assistant .tutor-bot {
    border-color: rgba(100, 116, 139, 0.14);
    background: linear-gradient(145deg, #ffffff, #f1f6fb);
    color: #25364b;
    box-shadow: 0 7px 18px rgba(71, 91, 116, 0.09);
}

body.light-theme #ai-assistant .tutor-user {
    border-color: rgba(76, 86, 180, 0.2);
    background: linear-gradient(135deg, #6b61cf, #438fc8);
    color: #ffffff;
}

body.light-theme #ai-assistant .tutor-message-title,
body.light-theme #ai-assistant .tutor-bot strong {
    color: #345f86;
}

body.light-theme #ai-assistant .tutor-user strong {
    color: #ffffff;
}

body.light-theme #ai-assistant .tutor-message code,
body.light-theme #ai-assistant .tutor-message pre {
    background: rgba(215, 226, 237, 0.72);
    color: #244c68;
}

body.light-theme #ai-assistant .tutor-composer {
    border-color: rgba(100, 116, 139, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 22px rgba(71, 91, 116, 0.09);
}

body.light-theme #ai-assistant .tutor-composer textarea {
    color: #172033;
}

body.light-theme #ai-assistant .tutor-composer textarea::placeholder {
    color: #718096;
}

body.light-theme #ai-assistant .tutor-composer-bar {
    border-top-color: rgba(100, 116, 139, 0.14);
}

body.light-theme #ai-assistant .tutor-model {
    color: #526277;
}

body.light-theme .tutor-practice-card {
    border-color: rgba(73, 150, 190, 0.2);
    background: rgba(237, 244, 250, 0.9);
}

@media (max-width: 1024px) {
    #ai-assistant {
        padding-inline: 20px;
    }

    #ai-assistant .tutor-shell {
        width: 100%;
    }

    #ai-assistant .tutor-chat-card {
        height: clamp(520px, calc(100dvh - 205px), 680px);
    }

    #ai-assistant .tutor-header-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 720px) {
    #ai-assistant {
        padding-inline: 13px;
    }

    #ai-assistant .tutor-shell {
        gap: 9px;
    }

    #ai-assistant .tutor-hero {
        min-height: 48px;
        padding-inline: 2px;
    }

    #ai-assistant .tutor-brand {
        gap: 9px;
    }

    #ai-assistant .tutor-header-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    #ai-assistant .tutor-brand h1 {
        font-size: 1.25rem;
    }

    #ai-assistant .tutor-brand p {
        max-width: 520px;
        font-size: 0.8rem;
        line-height: 1.32;
    }

    #ai-assistant .tutor-chat-card {
        height: min(74dvh, 640px);
        min-height: 490px;
        padding: 10px;
        gap: 7px;
        border-radius: 18px;
    }

    #ai-assistant .tutor-tabs {
        gap: 5px;
        padding-bottom: 3px;
    }

    #ai-assistant .tutor-tabs button {
        min-height: 31px;
        padding: 6px 10px;
        font-size: 0.79rem;
    }

    #ai-assistant .tutor-message,
    .tutor-practice-response {
        max-width: 94%;
    }

    #ai-assistant .tutor-user {
        max-width: 86%;
    }

    #ai-assistant .tutor-composer {
        padding: 7px 8px 6px;
        border-radius: 13px;
    }

    #ai-assistant .tutor-composer textarea {
        min-height: 44px;
        max-height: 82px;
    }

    .tutor-practice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #ai-assistant {
        padding-inline: 9px;
    }

    #ai-assistant .tutor-shell {
        width: 100%;
        gap: 7px;
    }

    #ai-assistant .tutor-hero {
        min-height: 44px;
        padding-top: 0;
    }

    #ai-assistant .tutor-header-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    #ai-assistant .tutor-brand h1 {
        font-size: 1.18rem;
    }

    #ai-assistant .tutor-brand p {
        margin-top: 2px;
        font-size: 0.75rem;
    }

    #ai-assistant .tutor-chat-card {
        height: min(76dvh, 610px);
        min-height: 470px;
        padding: 8px;
        border-radius: 16px;
    }

    #ai-assistant .tutor-messages {
        padding: 5px 4px 9px 1px;
        gap: 8px;
    }

    #ai-assistant .tutor-message {
        max-width: 96%;
        padding: 10px 11px;
        border-radius: 14px;
        font-size: 0.86rem;
    }

    #ai-assistant .tutor-user {
        max-width: 90%;
    }

    #ai-assistant .tutor-composer-bar {
        gap: 6px;
    }

    #ai-assistant .tutor-model {
        font-size: 0.75rem;
    }

    #ai-assistant .tutor-send {
        min-height: 30px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Materias: espacios academicos personalizados */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}

.choice-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill:has(input:checked) {
    border-color: color-mix(in srgb, var(--choice-color, #49ccf9), transparent 24%);
    background: color-mix(in srgb, var(--choice-color, #49ccf9), transparent 86%);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--choice-color, #49ccf9), transparent 84%);
}

.choice-pill:hover {
    transform: translateY(-2px);
}

.choice-dot {
    position: relative;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--choice-color, #7b68ee), #49ccf9);
}

.choice-pill[class*="choice-icon"] .choice-dot::before {
    content: "";
    position: absolute;
    inset: 7px;
    background: #ffffff;
}

.choice-icon-math .choice-dot::before { clip-path: polygon(0 0, 100% 0, 12% 100%); }
.choice-icon-chemistry .choice-dot::before { border-radius: 0 0 8px 8px; transform: translateY(3px); }
.choice-icon-history .choice-dot::before { border-radius: 999px; box-shadow: inset 0 0 0 3px #49ccf9; }
.choice-icon-programming .choice-dot::before { clip-path: polygon(0 50%, 38% 18%, 38% 36%, 18% 50%, 38% 64%, 38% 82%); box-shadow: 10px 0 0 #ffffff; }
.choice-icon-robotics .choice-dot::before { inset: 8px 6px; border-radius: 5px; }
.choice-icon-literature .choice-dot::before,
.choice-icon-book .choice-dot::before { inset: 6px 8px; border-radius: 3px; box-shadow: 7px 3px 0 rgba(255, 255, 255, 0.78); }
.choice-icon-sports .choice-dot::before { border-radius: 999px; }
.choice-icon-art .choice-dot::before { clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%); }
.choice-icon-biology .choice-dot::before { border-radius: 80% 0 80% 0; transform: rotate(-28deg); }

.subjects-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(123, 104, 238, 0.16), transparent 34%),
        rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
}

.subjects-toolbar label {
    display: grid;
    gap: 7px;
    min-width: min(280px, 100%);
}

.subjects-toolbar span {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.subjects-toolbar input,
.subjects-toolbar select {
    min-height: 42px;
    border: 1px solid rgba(73, 204, 249, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.30);
    color: var(--text-primary);
    padding: 0 14px;
    outline: none;
}

.subjects-sort {
    max-width: 220px;
}

#subjects .subjects-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

#subjects .subject-space-card {
    isolation: isolate;
    min-height: 360px;
    padding: 22px !important;
    border-color: color-mix(in srgb, var(--subject-color), transparent 55%) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--subject-color), transparent 72%), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
        rgba(31, 34, 46, 0.84) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.24),
        0 0 0 1px color-mix(in srgb, var(--subject-color), transparent 82%);
}

#subjects .subject-space-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 30px 76px rgba(0, 0, 0, 0.28),
        0 0 34px color-mix(in srgb, var(--subject-color), transparent 78%);
}

#subjects .subject-orbit {
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--subject-color), transparent 74%);
    filter: blur(4px);
}

#subjects .subject-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#subjects .subject-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.1;
}

#subjects .subject-title p {
    margin: 5px 0 0;
    color: rgba(226, 232, 240, 0.66);
    font-size: 13px;
    line-height: 1.35;
}

#subjects .subject-icon,
.subject-detail-card .subject-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
}

#subjects .subject-symbol,
#subjects .subject-custom-label,
.subject-detail-card .subject-symbol,
.subject-detail-card .subject-custom-label {
    position: relative;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--subject-color), #49ccf9);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--subject-color), transparent 72%);
}

#subjects .subject-symbol::before,
#subjects .subject-symbol::after,
.subject-detail-card .subject-symbol::before,
.subject-detail-card .subject-symbol::after {
    content: "";
    position: absolute;
    background: #ffffff;
}

#subjects .subject-custom-label,
.subject-detail-card .subject-custom-label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0.03em;
}

.subject-icon-math::before { inset: 14px 17px; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.subject-icon-chemistry::before { left: 20px; top: 13px; width: 18px; height: 28px; border-radius: 0 0 10px 10px; }
.subject-icon-history::before { inset: 15px; border-radius: 999px; box-shadow: inset 0 0 0 5px #49ccf9; }
.subject-icon-programming::before { left: 14px; top: 22px; width: 13px; height: 13px; transform: rotate(45deg); box-shadow: 17px -17px 0 #ffffff; }
.subject-icon-robotics::before { left: 14px; top: 21px; width: 30px; height: 20px; border-radius: 9px; }
.subject-icon-literature::before,
.subject-icon-book-blue::before { left: 16px; top: 14px; width: 18px; height: 27px; border-radius: 4px; box-shadow: 10px 4px 0 rgba(255, 255, 255, 0.74); }
.subject-icon-sports::before { inset: 16px; border-radius: 999px; }
.subject-icon-art::before { inset: 14px; clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%); }
.subject-icon-biology::before { left: 18px; top: 15px; width: 24px; height: 27px; border-radius: 80% 0 80% 0; transform: rotate(-28deg); }

#subjects .subject-progress-block {
    display: grid;
    gap: 9px;
    margin: 20px 0 14px;
}

#subjects .subject-progress-block > div:first-child {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#subjects .subject-progress-block strong {
    color: #ffffff;
}

#subjects .subject-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}

#subjects .subject-metric-grid div {
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

#subjects .subject-metric-grid span {
    color: rgba(226, 232, 240, 0.62);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

#subjects .subject-metric-grid strong {
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

#subjects .subject-card-footer {
    display: grid;
    gap: 7px;
    min-height: 78px;
    margin-bottom: 16px;
}

#subjects .subject-card-footer p {
    margin: 0;
    color: rgba(226, 232, 240, 0.68);
    font-size: 12px;
    line-height: 1.4;
}

#subjects .subject-card-footer strong {
    color: rgba(255, 255, 255, 0.90);
}

#subjects .card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#subjects .card-actions button {
    flex: 1 1 auto;
}

.subject-detail-card {
    width: min(980px, calc(100vw - 28px));
    border-color: color-mix(in srgb, var(--subject-color), transparent 48%) !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--subject-color), transparent 72%), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(31, 34, 46, 0.96) !important;
}

.subject-detail-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.subject-detail-hero h3 {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
}

.subject-detail-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--text-secondary);
}

.subject-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.subject-detail-stats div,
.subject-detail-columns section {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.subject-detail-stats div {
    display: grid;
    gap: 6px;
    padding: 16px;
}

.subject-detail-stats span {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.subject-detail-stats strong {
    color: #ffffff;
    font-size: 26px;
}

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

.subject-detail-columns section {
    padding: 16px;
}

.subject-detail-columns h4 {
    margin: 0 0 12px;
    color: #ffffff;
}

.subject-detail-columns p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

.subject-detail-columns p:last-child {
    border-bottom: 0;
}

.subject-detail-columns span {
    color: var(--text-tertiary);
    text-align: right;
}

body.light-theme .choice-pill,
body.light-theme .subjects-toolbar,
body.light-theme #subjects .subject-space-card,
body.light-theme .subject-detail-card {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--subject-color, #49ccf9), transparent 88%), transparent 38%),
        #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light-theme .subjects-toolbar input,
body.light-theme .subjects-toolbar select {
    background: #f8fafc;
    color: #172033;
}

body.light-theme #subjects .subject-title h3,
body.light-theme #subjects .subject-progress-block strong,
body.light-theme #subjects .subject-metric-grid strong,
body.light-theme #subjects .subject-card-footer strong,
body.light-theme .subject-detail-hero h3,
body.light-theme .subject-detail-stats strong,
body.light-theme .subject-detail-columns h4 {
    color: #172033;
}

body.light-theme #subjects .subject-title p,
body.light-theme #subjects .subject-card-footer p,
body.light-theme #subjects .subject-metric-grid span,
body.light-theme .subject-detail-hero p,
body.light-theme .subject-detail-columns p,
body.light-theme .subject-detail-columns span {
    color: #64748b;
}

body.light-theme #subjects .subject-metric-grid div,
body.light-theme .subject-detail-stats div,
body.light-theme .subject-detail-columns section {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
    #subjects .subject-metric-grid,
    .subject-detail-stats,
    .subject-detail-columns {
        grid-template-columns: 1fr 1fr;
    }

    .subject-detail-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    #subjects .subjects-grid,
    #subjects .subject-metric-grid,
    .subject-detail-stats,
    .subject-detail-columns {
        grid-template-columns: 1fr;
    }

    .subjects-sort {
        max-width: none;
    }

    .subject-detail-columns p {
        flex-direction: column;
    }

    .subject-detail-columns span {
        text-align: left;
    }
}

/* Tareas: tablero academico moderno */
#tasks .section-header .subtitle {
    max-width: 720px;
}

#tasks .tasks-container {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
}

#tasks .tasks-list {
    display: grid;
    gap: 16px;
}

#tasks .task-filter-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(123, 104, 238, 0.18), transparent 36%),
        rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px);
}

#tasks .task-filter-modern .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(73, 204, 249, 0.18);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.20);
    color: var(--text-secondary);
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

#tasks .task-filter-modern .filter-btn span {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 12px;
}

#tasks .task-filter-modern .filter-btn.active,
#tasks .task-filter-modern .filter-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(253, 113, 175, 0.42);
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.90), rgba(73, 204, 249, 0.78), rgba(253, 113, 175, 0.70));
    color: #ffffff;
}

#tasks .task-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#tasks .task-summary-strip div {
    min-height: 78px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

#tasks .task-summary-strip strong {
    display: block;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
}

#tasks .task-summary-strip span {
    display: block;
    margin-top: 8px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#tasks .task-list-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

#tasks .task-card-modern {
    position: relative;
    display: grid;
    gap: 16px;
    min-height: 0;
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, var(--task-color, #49ccf9), transparent 62%) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--task-color, #49ccf9), transparent 76%), transparent 40%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
        rgba(31, 34, 46, 0.82) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.20);
}

#tasks .task-card-modern.priority-high { --task-color: #fd71af; }
#tasks .task-card-modern.priority-medium { --task-color: #ffc800; }
#tasks .task-card-modern.priority-low { --task-color: #00c875; }
#tasks .task-card-modern.priority-normal { --task-color: #49ccf9; }

#tasks .task-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 68px color-mix(in srgb, var(--task-color), transparent 86%);
}

#tasks .task-card-main {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
}

#tasks .task-check-modern {
    width: 42px;
    height: 42px;
    margin: 0;
}

#tasks .task-check-modern input {
    position: absolute;
    opacity: 0;
}

#tasks .task-check-modern span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.65), rgba(73, 204, 249, 0.50));
}

#tasks .task-check-modern span::before {
    content: "";
    width: 17px;
    height: 9px;
    border-left: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0.34;
}

#tasks .task-check-modern input:checked + span {
    background: linear-gradient(135deg, #00c875, #49ccf9);
}

#tasks .task-check-modern input:checked + span::before {
    opacity: 1;
}

#tasks .task-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#tasks .task-title-row h4 {
    margin: 0;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.18;
}

#tasks .task-subject,
#tasks .task-description {
    margin: 8px 0 0;
}

#tasks .task-subject {
    color: #49ccf9;
    font-size: 13px;
    font-weight: 900;
}

#tasks .task-description {
    color: rgba(226, 232, 240, 0.70);
    font-size: 13px;
    line-height: 1.45;
}

#tasks .task-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

#tasks .task-meta-grid span {
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(226, 232, 240, 0.72);
    font-size: 12px;
}

#tasks .task-meta-grid strong {
    color: #ffffff;
}

#tasks .task-priority,
#tasks .task-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

#tasks .task-priority.high,
#tasks .task-status.status-overdue {
    border: 1px solid rgba(253, 113, 175, 0.34);
    background: rgba(253, 113, 175, 0.14);
    color: #ff9ccc;
}

#tasks .task-priority.medium,
#tasks .task-status.status-upcoming {
    border: 1px solid rgba(255, 200, 0, 0.34);
    background: rgba(255, 200, 0, 0.13);
    color: #ffd76a;
}

#tasks .task-priority.low,
#tasks .task-status.status-completed {
    border: 1px solid rgba(0, 200, 117, 0.34);
    background: rgba(0, 200, 117, 0.13);
    color: #86efac;
}

#tasks .task-priority.normal,
#tasks .task-status.status-pending {
    border: 1px solid rgba(73, 204, 249, 0.34);
    background: rgba(73, 204, 249, 0.13);
    color: #7ddfff;
}

#tasks .task-reminder-alert {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(253, 113, 175, 0.25);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(253, 113, 175, 0.16), rgba(123, 104, 238, 0.12));
    color: #ffd6e7;
    font-size: 12px;
    line-height: 1.45;
}

#tasks .task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 56px;
}

#tasks .task-actions button {
    flex: 1 1 auto;
}

#tasks .task-empty-filter {
    grid-column: 1 / -1;
}

body.light-theme #tasks .task-filter-modern,
body.light-theme #tasks .task-summary-strip div,
body.light-theme #tasks .task-card-modern {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--task-color, #49ccf9), transparent 88%), transparent 38%),
        #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
}

body.light-theme #tasks .task-filter-modern .filter-btn {
    background: #f8fafc;
    color: #475569;
}

body.light-theme #tasks .task-title-row h4,
body.light-theme #tasks .task-summary-strip strong,
body.light-theme #tasks .task-meta-grid strong {
    color: #172033;
}

body.light-theme #tasks .task-description,
body.light-theme #tasks .task-meta-grid span {
    color: #64748b;
}

body.light-theme #tasks .task-meta-grid span {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
    #tasks .task-summary-strip,
    #tasks .task-meta-grid,
    #tasks .task-list-modern {
        grid-template-columns: 1fr;
    }

    #tasks .task-card-main {
        grid-template-columns: 1fr;
    }

    #tasks .task-actions {
        padding-left: 0;
    }
}

/* Asistencia: interfaz SaaS profesional y responsive */
#attendance {
    --attendance-surface: rgba(27, 32, 43, 0.92);
    --attendance-surface-muted: rgba(255, 255, 255, 0.035);
    --attendance-surface-hover: rgba(255, 255, 255, 0.055);
    --attendance-border: rgba(226, 232, 240, 0.11);
    --attendance-border-strong: rgba(226, 232, 240, 0.18);
    --attendance-text: #f8fafc;
    --attendance-text-muted: #9aa7b8;
    --attendance-text-subtle: #748196;
    --attendance-accent: #7b68ee;
    --attendance-accent-soft: rgba(123, 104, 238, 0.14);
    --attendance-success: #36c98f;
    --attendance-danger: #f06a83;
    --attendance-warning: #e7ab48;
    --attendance-info: #55bfe8;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

#attendance .section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title action"
        "subtitle action";
    align-items: center;
    column-gap: 28px;
    row-gap: 5px;
    margin-bottom: 24px;
}

#attendance .section-header h1 {
    grid-area: title;
    margin: 0;
    color: var(--attendance-text);
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

#attendance .section-header .subtitle {
    grid-area: subtitle;
    margin: 0;
    color: var(--attendance-text-muted);
    font-size: clamp(0.94rem, 1.4vw, 1.04rem) !important;
    line-height: 1.5;
}

#attendance .section-header > button {
    grid-area: action;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(123, 104, 238, 0.36);
    border-radius: 13px;
    background: #7163e8;
    box-shadow: 0 8px 20px rgba(59, 46, 151, 0.18);
    font-size: 0.875rem;
    font-weight: 750;
    letter-spacing: 0;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#attendance .section-header > button:hover {
    transform: translateY(-1px);
    background: #7b6cef;
    border-color: rgba(154, 142, 247, 0.58);
    box-shadow: 0 10px 24px rgba(59, 46, 151, 0.24);
}

#attendance .section-header > button:focus-visible {
    outline: 3px solid rgba(85, 191, 232, 0.34);
    outline-offset: 3px;
}

#attendance .attendance-container {
    display: grid;
    gap: 22px;
}

#attendance .attendance-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

#attendance .attendance-stat-card {
    --attendance-color: var(--attendance-info);
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 96px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--attendance-border);
    border-radius: 18px;
    background: var(--attendance-surface);
    box-shadow: 0 8px 24px rgba(4, 9, 18, 0.13);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#attendance .attendance-stat-card::after {
    content: "";
    position: absolute;
    inset: auto 14px 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--attendance-color);
    opacity: 0.48;
}

#attendance .attendance-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--attendance-color), transparent 56%);
    background: var(--attendance-surface-hover);
    box-shadow: 0 12px 30px rgba(4, 9, 18, 0.17);
}

#attendance .stat-classes { --attendance-color: #8376ef; }
#attendance .stat-present { --attendance-color: var(--attendance-success); }
#attendance .stat-absent { --attendance-color: var(--attendance-danger); }
#attendance .stat-late { --attendance-color: var(--attendance-warning); }
#attendance .stat-percent { --attendance-color: var(--attendance-info); }

#attendance .attendance-stat-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--attendance-color), transparent 66%);
    border-radius: 13px;
    background: color-mix(in srgb, var(--attendance-color), transparent 86%);
    color: var(--attendance-color);
    box-shadow: none;
}

#attendance .attendance-stat-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
}

#attendance .stat-classes .attendance-stat-icon::before {
    width: 15px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 5px 3px 0 color-mix(in srgb, currentColor, transparent 35%);
}

#attendance .stat-present .attendance-stat-icon::before {
    width: 19px;
    height: 10px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    background: transparent;
    transform: rotate(-45deg) translate(1px, -1px);
}

#attendance .stat-absent .attendance-stat-icon::before,
#attendance .stat-absent .attendance-stat-icon::after {
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
}

#attendance .stat-absent .attendance-stat-icon::after {
    content: "";
    position: absolute;
    transform: rotate(-45deg);
}

#attendance .stat-late .attendance-stat-icon::before {
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 3px currentColor;
}

#attendance .stat-percent .attendance-stat-icon::before {
    border-radius: 999px;
    clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%);
}

#attendance .attendance-stat-card strong {
    display: block;
    overflow: hidden;
    color: var(--attendance-text);
    font-size: clamp(1.55rem, 2.3vw, 1.9rem);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
}

#attendance .attendance-stat-card p {
    margin: 6px 0 0;
    color: var(--attendance-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
}

#attendance .attendance-alert {
    --alert-color: var(--attendance-success);
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    min-height: 66px;
    padding: 12px 16px 12px 18px;
    overflow: hidden;
    border: 1px solid var(--attendance-border);
    border-radius: 16px;
    background: var(--attendance-surface-muted);
    box-shadow: none;
}

#attendance .attendance-alert::before {
    content: "✓";
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--alert-color), transparent 62%);
    border-radius: 11px;
    background: color-mix(in srgb, var(--alert-color), transparent 87%);
    color: var(--alert-color);
    font-size: 0.95rem;
    font-weight: 850;
}

#attendance .attendance-alert::after {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--alert-color);
}

#attendance .attendance-alert.warning {
    --alert-color: var(--attendance-warning);
}

#attendance .attendance-alert.warning::before {
    content: "!";
}

#attendance .attendance-alert strong {
    align-self: end;
    color: var(--attendance-text);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1.3;
}

#attendance .attendance-alert span {
    align-self: start;
    color: var(--attendance-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

#attendance .attendance-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
    gap: 22px;
    align-items: start;
}

#attendance .attendance-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--attendance-border);
    border-radius: 18px;
    background: var(--attendance-surface);
    box-shadow: 0 10px 30px rgba(4, 9, 18, 0.12);
}

#attendance .attendance-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

#attendance .attendance-panel h3,
#attendance .attendance-panel-head h3 {
    margin: 0;
    color: var(--attendance-text);
    font-size: 1.12rem;
    font-weight: 720;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

#attendance .attendance-panel-head p {
    margin: 4px 0 0;
    color: var(--attendance-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

#attendance .attendance-filter {
    display: flex;
    max-width: 100%;
    gap: 5px;
    margin-bottom: 18px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--attendance-border);
    border-radius: 12px;
    background: var(--attendance-surface-muted);
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

#attendance .attendance-filter::-webkit-scrollbar {
    display: none;
}

#attendance .attendance-filter .filter-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--attendance-text-muted);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#attendance .attendance-filter .filter-btn:hover {
    color: var(--attendance-text);
    background: var(--attendance-surface-hover);
}

#attendance .attendance-filter .filter-btn.active {
    color: #ffffff;
    border-color: rgba(123, 104, 238, 0.36);
    background: var(--attendance-accent);
    box-shadow: 0 4px 12px rgba(49, 39, 133, 0.16);
}

#attendance .attendance-filter .filter-btn:focus-visible {
    outline: 2px solid var(--attendance-info);
    outline-offset: 2px;
}

#attendance .attendance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#attendance .attendance-card {
    --attendance-card-color: var(--attendance-info);
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 118px;
    padding: 16px 18px 16px 20px !important;
    overflow: hidden;
    border: 1px solid var(--attendance-border) !important;
    border-radius: 16px !important;
    background: var(--attendance-surface-muted) !important;
    box-shadow: none;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#attendance .attendance-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--attendance-card-color);
    opacity: 0.82;
}

#attendance .attendance-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--attendance-card-color), transparent 58%) !important;
    background: var(--attendance-surface-hover) !important;
    box-shadow: 0 8px 22px rgba(4, 9, 18, 0.11);
}

#attendance .attendance-present { --attendance-card-color: var(--attendance-success); }
#attendance .attendance-absent { --attendance-card-color: var(--attendance-danger); }
#attendance .attendance-late { --attendance-card-color: var(--attendance-warning); }
#attendance .attendance-justified { --attendance-card-color: var(--attendance-info); }

#attendance .attendance-card-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--attendance-card-color), transparent 64%);
    border-radius: 13px;
    background: color-mix(in srgb, var(--attendance-card-color), transparent 87%);
}

#attendance .attendance-card-icon::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 999px;
    background: var(--attendance-card-color);
}

#attendance .attendance-present .attendance-card-icon::before {
    inset: 13px 11px 15px 13px;
    border-radius: 0;
    border-left: 3px solid var(--attendance-card-color);
    border-bottom: 3px solid var(--attendance-card-color);
    background: transparent;
    transform: rotate(-45deg);
}

#attendance .attendance-absent .attendance-card-icon::before,
#attendance .attendance-absent .attendance-card-icon::after {
    inset: 19px 10px auto;
    height: 3px;
    border-radius: 999px;
    background: var(--attendance-card-color);
    transform: rotate(45deg);
}

#attendance .attendance-absent .attendance-card-icon::after {
    content: "";
    position: absolute;
    transform: rotate(-45deg);
}

#attendance .attendance-late .attendance-card-icon::before {
    inset: 11px;
    border: 3px solid var(--attendance-card-color);
    background: transparent;
}

#attendance .attendance-late .attendance-card-icon::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 13px;
    width: 2px;
    height: 9px;
    border-radius: 999px;
    background: var(--attendance-card-color);
    transform-origin: bottom;
    transform: rotate(-28deg);
}

#attendance .attendance-justified .attendance-card-icon::before {
    inset: 11px 12px;
    border-radius: 4px;
}

#attendance .attendance-card-main {
    min-width: 0;
}

#attendance .attendance-card h3 {
    display: inline;
    margin: 0;
    color: var(--attendance-text);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    font-weight: 700;
    line-height: 1.3;
}

#attendance .attendance-status {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    margin: 0 0 0 8px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--attendance-card-color), transparent 62%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--attendance-card-color), transparent 88%);
    color: var(--attendance-card-color);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    vertical-align: 2px;
}

#attendance .attendance-date {
    margin: 7px 0 0;
    color: var(--attendance-text-muted);
    font-size: 0.78rem;
    font-weight: 620;
    line-height: 1.35;
}

#attendance .attendance-note {
    margin: 3px 0 0;
    color: var(--attendance-text-subtle);
    font-size: 0.78rem;
    line-height: 1.4;
}

#attendance .attendance-card .card-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

#attendance .attendance-card .card-actions button {
    min-width: 74px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 680;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#attendance .attendance-card .card-actions .btn-secondary {
    color: var(--attendance-text-muted);
    border-color: var(--attendance-border-strong);
    background: transparent;
}

#attendance .attendance-card .card-actions .btn-secondary:hover {
    color: var(--attendance-text);
    border-color: rgba(123, 104, 238, 0.42);
    background: var(--attendance-accent-soft);
    transform: translateY(-1px);
}

#attendance .attendance-card .card-actions .btn-danger {
    color: #ff8399;
    border-color: rgba(240, 106, 131, 0.25);
    background: rgba(240, 106, 131, 0.075);
}

#attendance .attendance-card .card-actions .btn-danger:hover {
    color: #ffadba;
    border-color: rgba(240, 106, 131, 0.48);
    background: rgba(240, 106, 131, 0.14);
    transform: translateY(-1px);
}

#attendance .attendance-card .card-actions button:focus-visible {
    outline: 2px solid var(--attendance-info);
    outline-offset: 2px;
}

#attendance .attendance-side {
    display: grid;
    min-width: 0;
    gap: 22px;
}

#attendance .attendance-calendar-panel,
#attendance .attendance-subject-panel {
    padding: 22px;
}

#attendance .attendance-calendar-panel h3,
#attendance .attendance-subject-panel h3 {
    margin-bottom: 16px;
}

#attendance .attendance-calendar-weekdays,
#attendance .attendance-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

#attendance .attendance-calendar-weekdays {
    margin-bottom: 6px;
}

#attendance .attendance-calendar-weekdays span {
    display: grid;
    place-items: center;
    min-height: 24px;
    color: var(--attendance-text-subtle);
    font-size: 0.65rem;
    font-weight: 720;
    text-align: center;
}

#attendance .attendance-day {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--attendance-surface-muted);
    color: var(--attendance-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

#attendance .attendance-day:not(.empty):hover {
    border-color: var(--attendance-border-strong);
    background: var(--attendance-surface-hover);
    color: var(--attendance-text);
}

#attendance .attendance-day.empty {
    background: transparent;
}

#attendance .attendance-day[class*="day-"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
}

#attendance .day-present {
    border-color: rgba(54, 201, 143, 0.20);
    background: rgba(54, 201, 143, 0.09);
    color: #68d9ad;
}

#attendance .day-absent {
    border-color: rgba(240, 106, 131, 0.20);
    background: rgba(240, 106, 131, 0.09);
    color: #f58ba0;
}

#attendance .day-late {
    border-color: rgba(231, 171, 72, 0.22);
    background: rgba(231, 171, 72, 0.10);
    color: #efbd68;
}

#attendance .day-justified {
    border-color: rgba(85, 191, 232, 0.22);
    background: rgba(85, 191, 232, 0.10);
    color: #7aceec;
}

#attendance .attendance-subject-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--attendance-border);
}

#attendance .attendance-subject-row:first-of-type {
    padding-top: 2px;
}

#attendance .attendance-subject-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#attendance .attendance-subject-row strong {
    display: block;
    overflow: hidden;
    color: var(--attendance-text);
    font-size: 0.84rem;
    font-weight: 680;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#attendance .attendance-subject-row span {
    display: block;
    margin-top: 3px;
    color: var(--attendance-text-subtle);
    font-size: 0.68rem;
    line-height: 1.4;
}

#attendance .attendance-subject-row em {
    color: var(--attendance-info);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 750;
}

#attendance .attendance-subject-row .progress-bar {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    box-shadow: none;
}

#attendance .attendance-subject-row .progress-fill {
    min-width: 3px;
    border-radius: inherit;
    background: var(--attendance-info);
    box-shadow: none;
    transition: width 220ms ease;
}

#attendance .dashboard-empty-note,
#attendance .empty-state {
    border-color: var(--attendance-border);
    background: var(--attendance-surface);
    box-shadow: none;
}

.choice-icon-present .choice-dot::before {
    width: 14px;
    height: 8px;
    border-left: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    background: transparent !important;
    transform: rotate(-45deg);
}

.choice-icon-absent .choice-dot::before {
    inset: 11px 6px !important;
    height: 4px;
    border-radius: 999px;
    transform: rotate(45deg);
}

.choice-icon-late .choice-dot::before {
    border-radius: 999px;
    box-shadow: inset 0 0 0 3px #ffffff;
    background: transparent !important;
}

.choice-icon-justified .choice-dot::before {
    border-radius: 5px;
}

body.light-theme #attendance {
    --attendance-surface: #ffffff;
    --attendance-surface-muted: #f7f9fc;
    --attendance-surface-hover: #f1f5f9;
    --attendance-border: rgba(15, 23, 42, 0.09);
    --attendance-border-strong: rgba(15, 23, 42, 0.16);
    --attendance-text: #172033;
    --attendance-text-muted: #607086;
    --attendance-text-subtle: #8190a4;
    --attendance-accent-soft: rgba(123, 104, 238, 0.09);
}

body.light-theme #attendance .attendance-stat-card,
body.light-theme #attendance .attendance-panel {
    box-shadow: 0 8px 24px rgba(29, 43, 68, 0.07);
}

body.light-theme #attendance .attendance-alert {
    background: #f8fafc;
}

body.light-theme #attendance .attendance-filter .filter-btn.active {
    color: #ffffff;
}

body.light-theme #attendance .attendance-card .card-actions .btn-danger {
    color: #c94760;
    border-color: rgba(201, 71, 96, 0.20);
    background: rgba(201, 71, 96, 0.055);
}

body.light-theme #attendance .attendance-card .card-actions .btn-danger:hover {
    color: #a9344b;
    border-color: rgba(201, 71, 96, 0.34);
    background: rgba(201, 71, 96, 0.10);
}

body.light-theme #attendance .day-present { color: #19875e; }
body.light-theme #attendance .day-absent { color: #bd4059; }
body.light-theme #attendance .day-late { color: #9b6714; }
body.light-theme #attendance .day-justified { color: #16789d; }

@media (max-width: 1280px) {
    #attendance .attendance-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #attendance .attendance-layout {
        grid-template-columns: minmax(0, 1.65fr) minmax(285px, 0.85fr);
    }
}

@media (max-width: 1024px) {
    #attendance .attendance-layout {
        grid-template-columns: 1fr;
    }

    #attendance .attendance-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #attendance .section-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "subtitle"
            "action";
        row-gap: 6px;
    }

    #attendance .section-header > button {
        width: 100%;
        margin-top: 10px;
    }

    #attendance .attendance-container,
    #attendance .attendance-layout,
    #attendance .attendance-side {
        gap: 16px;
    }

    #attendance .attendance-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #attendance .attendance-stat-card {
        min-height: 88px;
        padding: 14px;
    }

    #attendance .attendance-panel {
        padding: 18px;
    }

    #attendance .attendance-card {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 15px 16px 15px 18px !important;
    }

    #attendance .attendance-card .card-actions {
        grid-column: 1 / -1;
        padding-left: 52px;
    }

    #attendance .attendance-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #attendance .section-header {
        margin-bottom: 20px;
    }

    #attendance .section-header h1 {
        font-size: 2rem !important;
    }

    #attendance .attendance-container {
        gap: 14px;
    }

    #attendance .attendance-stat-card {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        min-height: 82px;
        padding: 12px;
        border-radius: 15px;
    }

    #attendance .attendance-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        transform: scale(0.9);
    }

    #attendance .attendance-stat-card strong {
        font-size: 1.4rem;
    }

    #attendance .attendance-stat-card p {
        font-size: 0.68rem;
    }

    #attendance .attendance-alert {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 11px 12px 11px 14px;
    }

    #attendance .attendance-alert::before {
        width: 30px;
        height: 30px;
    }

    #attendance .attendance-panel,
    #attendance .attendance-calendar-panel,
    #attendance .attendance-subject-panel {
        padding: 15px;
        border-radius: 15px;
    }

    #attendance .attendance-filter {
        margin-inline: -1px;
    }

    #attendance .attendance-card {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 0;
        gap: 10px;
        padding: 14px 13px 14px 16px !important;
        border-radius: 14px !important;
    }

    #attendance .attendance-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        transform: scale(0.9);
        transform-origin: top left;
    }

    #attendance .attendance-status {
        margin-left: 5px;
    }

    #attendance .attendance-card .card-actions {
        padding-left: 46px;
    }

    #attendance .attendance-card .card-actions button {
        flex: 1 1 96px;
        min-height: 40px;
    }

    #attendance .attendance-calendar-weekdays,
    #attendance .attendance-calendar-grid {
        gap: 4px;
    }

    #attendance .attendance-day {
        min-height: 32px;
        border-radius: 8px;
    }
}

@media (max-width: 375px) {
    #attendance .attendance-overview {
        grid-template-columns: 1fr;
    }

    #attendance .attendance-card .card-actions {
        padding-left: 0;
    }
}

body #attendance {
    max-width: 1440px !important;
}

body #attendance .section-header h1 {
    font-size: clamp(32px, 3vw, 40px) !important;
}

body #attendance .section-header > button {
    min-height: 46px !important;
}

@media (prefers-reduced-motion: reduce) {
    #attendance .attendance-stat-card,
    #attendance .attendance-card,
    #attendance .attendance-filter .filter-btn,
    #attendance .section-header > button,
    #attendance .attendance-subject-row .progress-fill {
        transition: none !important;
    }

    #attendance .attendance-stat-card:hover,
    #attendance .attendance-card:hover,
    #attendance .section-header > button:hover {
        transform: none !important;
    }
}

/* Progreso: gamificacion premium */
@keyframes acBorderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes xpGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(73, 204, 249, 0.35)); }
    50% { filter: drop-shadow(0 0 18px rgba(253, 113, 175, 0.45)); }
}

#progress .progress-container {
    display: grid;
    gap: 18px;
}

#progress .premium-border {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#progress .premium-border::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, #7b68ee, #49ccf9, #fd71af, #49ccf9, #7b68ee);
    background-size: 300% 300%;
    animation: acBorderFlow 8s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

#progress .progress-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.55fr);
    gap: 24px;
    align-items: center;
    min-height: 320px;
    padding: 30px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 86% 8%, rgba(73, 204, 249, 0.22), transparent 34%),
        radial-gradient(circle at 10% 0%, rgba(123, 104, 238, 0.20), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(30, 31, 37, 0.86);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
}

#progress .progress-eyebrow {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid rgba(73, 204, 249, 0.24);
    border-radius: 999px;
    color: #49ccf9;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

#progress .progress-hero h2 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: clamp(3.2rem, 8vw, 6rem);
    line-height: 0.92;
}

#progress .progress-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(226, 232, 240, 0.76);
    font-size: 18px;
}

#progress .progress-xp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 14px;
}

#progress .progress-xp-meta span,
#progress .progress-hero small {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    color: rgba(226, 232, 240, 0.76);
    font-size: 12px;
    font-weight: 900;
}

#progress .progress-xp-bar {
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.58);
}

#progress .progress-xp-bar .xp-fill {
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b68ee, #49ccf9, #fd71af);
    background-size: 220% 100%;
    animation: acBorderFlow 5s linear infinite, xpGlow 3s ease-in-out infinite;
}

#progress .progress-level-orb {
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(230px, 100%);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(30, 31, 37, 0.95) 0 54%, transparent 55%),
        conic-gradient(#49ccf9 var(--xp, 0%), rgba(255, 255, 255, 0.10) 0);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 0 58px rgba(73, 204, 249, 0.18);
}

#progress .progress-level-orb strong {
    color: #ffffff;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 0.82;
}

#progress .progress-level-orb span {
    margin-top: -32px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

#progress .progress-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
}

#progress .premium-progress-stat {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 132px;
    padding: 18px !important;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--progress-color, #49ccf9), transparent 76%), transparent 40%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        rgba(31, 34, 46, 0.82);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

#progress .premium-progress-stat:hover,
#progress .premium-achievement:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 62px color-mix(in srgb, var(--progress-color, #49ccf9), transparent 84%);
}

#progress .stat-streak { --progress-color: #ffc800; }
#progress .stat-trophy { --progress-color: #fd71af; }
#progress .stat-status { --progress-color: #49ccf9; }
#progress .stat-activity { --progress-color: #7b68ee; }
#progress .stat-tasks { --progress-color: #00c875; }

#progress .progress-stat-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--progress-color), #49ccf9);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--progress-color), transparent 72%);
}

#progress .progress-stat-icon::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #ffffff;
}

#progress .stat-streak .progress-stat-icon::before { border-radius: 16px 16px 16px 4px; background: linear-gradient(180deg, #ffc800, #ffffff); }
#progress .stat-trophy .progress-stat-icon::before { clip-path: polygon(10% 10%, 90% 10%, 78% 58%, 58% 58%, 58% 78%, 75% 78%, 75% 90%, 25% 90%, 25% 78%, 42% 78%, 42% 58%, 22% 58%); }
#progress .stat-status .progress-stat-icon::before { border-radius: 999px; box-shadow: inset 0 0 0 5px #ffffff; background: transparent; }
#progress .stat-activity .progress-stat-icon::before { border-radius: 5px; box-shadow: 8px 5px 0 rgba(255, 255, 255, 0.72), -6px 8px 0 rgba(255, 255, 255, 0.58); }
#progress .stat-tasks .progress-stat-icon::before { width: 24px; height: 14px; border-left: 5px solid #ffffff; border-bottom: 5px solid #ffffff; background: transparent; transform: rotate(-45deg); }

#progress .premium-progress-stat .stat-label {
    color: rgba(226, 232, 240, 0.68);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

#progress .premium-progress-stat .stat-value {
    display: block;
    margin: 4px 0;
    color: #ffffff;
    font-size: 26px;
    font-weight: 950;
}

#progress .premium-progress-stat small {
    color: var(--text-tertiary);
    font-size: 12px;
}

#progress .progress-path,
#progress .progress-achievements,
#progress .progress-empty-callout {
    padding: 22px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.032)),
        rgba(31, 34, 46, 0.78);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.18);
}

#progress .progress-section-title {
    margin-bottom: 18px;
}

#progress .progress-section-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
}

#progress .progress-section-title p,
#progress .progress-empty-callout span {
    margin: 6px 0 0;
    color: var(--text-tertiary);
    font-size: 13px;
}

#progress .student-path {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    position: relative;
}

#progress .path-step {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 106px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-tertiary);
}

#progress .path-step span {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 950;
}

#progress .path-step.active {
    border-color: rgba(73, 204, 249, 0.34);
    background: linear-gradient(145deg, rgba(73, 204, 249, 0.14), rgba(123, 104, 238, 0.10));
}

#progress .path-step.current {
    box-shadow: 0 0 28px rgba(73, 204, 249, 0.18);
}

#progress .path-step.active span {
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
}

#progress .progress-empty-callout {
    display: grid;
    gap: 6px;
}

#progress .progress-empty-callout strong {
    color: #ffffff;
    font-size: 18px;
}

#progress .premium-achievements-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#progress .premium-achievement {
    position: relative;
    min-height: 190px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--progress-color, #49ccf9), transparent 76%), transparent 44%),
        rgba(255, 255, 255, 0.045) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

#progress .premium-achievement.unlocked {
    --progress-color: #ffc800;
    border-color: rgba(255, 200, 0, 0.36) !important;
}

#progress .premium-achievement.locked {
    --progress-color: #64748b;
    opacity: 0.68;
    filter: grayscale(0.85);
}

#progress .premium-achievement.locked::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 16px;
    width: 18px;
    height: 14px;
    border: 3px solid rgba(226, 232, 240, 0.46);
    border-radius: 4px;
    box-shadow: 0 -8px 0 -4px rgba(226, 232, 240, 0.46);
}

#progress .premium-achievement p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
}

#progress .premium-achievement small {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 800;
}

#progress .achievement-streak::before { border-radius: 16px 16px 16px 4px; background: linear-gradient(180deg, #ffc800, #fd71af); }
#progress .achievement-level::before { clip-path: polygon(50% 0, 62% 34%, 98% 34%, 68% 55%, 80% 92%, 50% 70%, 20% 92%, 32% 55%, 2% 34%, 38% 34%); background: #ffc800; }
#progress .achievement-attendance::before { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(#49ccf9 0 28%, #ffffff 29%); }

body.light-theme #progress .progress-hero,
body.light-theme #progress .premium-progress-stat,
body.light-theme #progress .progress-path,
body.light-theme #progress .progress-achievements,
body.light-theme #progress .progress-empty-callout,
body.light-theme #progress .premium-achievement {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--progress-color, #49ccf9), transparent 88%), transparent 38%),
        #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
}

body.light-theme #progress .progress-hero h2,
body.light-theme #progress .progress-level-orb strong,
body.light-theme #progress .premium-progress-stat .stat-value,
body.light-theme #progress .progress-section-title h3,
body.light-theme #progress .progress-empty-callout strong,
body.light-theme #progress .premium-achievement p {
    color: #172033;
}

body.light-theme #progress .progress-hero p,
body.light-theme #progress .progress-xp-meta span,
body.light-theme #progress .progress-hero small,
body.light-theme #progress .premium-progress-stat .stat-label,
body.light-theme #progress .premium-progress-stat small,
body.light-theme #progress .progress-section-title p,
body.light-theme #progress .progress-empty-callout span,
body.light-theme #progress .premium-achievement small {
    color: #64748b;
}

body.light-theme #progress .progress-level-orb {
    background:
        radial-gradient(circle, #ffffff 0 54%, transparent 55%),
        conic-gradient(#49ccf9 var(--xp, 0%), #e2e8f0 0);
}

body.light-theme #progress .path-step {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1120px) {
    #progress .progress-stat-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    #progress .progress-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #progress .progress-hero {
        padding: 22px;
    }

    #progress .progress-stat-grid,
    #progress .student-path {
        grid-template-columns: 1fr;
    }

    #progress .progress-level-orb {
        width: min(190px, 100%);
    }
}

/* Dashboard: paneles inferiores mas compactos y limpios */
#dashboard .dashboard-layout {
    grid-template-columns: minmax(280px, 0.9fr) minmax(260px, 0.82fr) minmax(280px, 0.9fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

#dashboard .dashboard-tutor-card,
#dashboard .starter-card,
#dashboard .activity-card {
    min-height: auto !important;
    align-self: start !important;
    padding: 18px !important;
    border-radius: 22px !important;
}

#dashboard .dashboard-tutor-card {
    max-height: 260px;
}

#dashboard .starter-card {
    max-height: 520px;
    overflow: hidden;
}

#dashboard .activity-card {
    max-height: 430px;
    overflow: hidden;
}

#dashboard .dashboard-tutor-card .panel-title,
#dashboard .starter-card .panel-title,
#dashboard .activity-card .panel-title {
    gap: 12px;
    margin-bottom: 14px;
}

#dashboard .dashboard-tutor-card .panel-title h3,
#dashboard .starter-card .panel-title h3,
#dashboard .activity-card .panel-title h3 {
    font-size: 19px;
    line-height: 1.12;
}

#dashboard .dashboard-tutor-card .panel-title p,
#dashboard .starter-card .panel-title p,
#dashboard .activity-card .panel-title p {
    font-size: 12px;
    line-height: 1.35;
}

#dashboard .dashboard-tutor-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#dashboard .dashboard-tutor-actions button {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 13px;
}

#dashboard .dashboard-steps {
    gap: 8px;
}

#dashboard .dashboard-steps li {
    grid-template-columns: 34px minmax(0, 1fr) 64px;
    gap: 10px;
    padding: 10px;
    border-radius: 15px;
}

#dashboard .dashboard-steps .step-number {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    font-size: 11px;
}

#dashboard .dashboard-steps strong {
    font-size: 13px;
    line-height: 1.2;
}

#dashboard .dashboard-steps small {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
}

#dashboard .dashboard-steps button {
    min-width: 0;
    width: 64px;
    height: 30px;
    font-size: 11px;
}

#dashboard .dashboard-activity {
    gap: 8px;
}

#dashboard .dashboard-activity li {
    padding: 10px 12px 10px 34px;
    border-radius: 15px;
}

#dashboard .dashboard-activity li::before {
    left: 13px;
    top: 16px;
    width: 9px;
    height: 9px;
}

#dashboard .dashboard-activity .activity-text {
    font-size: 12.5px;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    #dashboard .dashboard-layout {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #dashboard .dashboard-layout {
        grid-template-columns: 1fr !important;
    }

    #dashboard .dashboard-tutor-card,
    #dashboard .starter-card,
    #dashboard .activity-card {
        max-height: none;
    }
}

/* Perfil premium del estudiante */
#profile .profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
    gap: 18px;
    align-items: start;
}

#profile .premium-profile-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 26px;
    background:
        radial-gradient(circle at 15% 0%, rgba(123, 104, 238, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(30, 31, 37, 0.72);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

#profile .premium-profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, #7b68ee, #49ccf9, #fd71af, #00c875, #7b68ee);
    background-size: 300% 300%;
    animation: profileBorderFlow 9s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes profileBorderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

#profile .profile-hero {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 30px;
}

#profile .profile-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -120px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(73, 204, 249, 0.22), rgba(253, 113, 175, 0.18));
    filter: blur(8px);
    pointer-events: none;
}

#profile .profile-avatar-zone {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 14px;
}

#profile .profile-avatar-premium {
    width: 132px;
    height: 132px;
    border-radius: 38px;
    font-size: 42px;
    box-shadow:
        0 22px 60px rgba(73, 204, 249, 0.22),
        0 0 0 8px rgba(255, 255, 255, 0.05);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

#profile .profile-avatar-premium:hover {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow:
        0 28px 70px rgba(123, 104, 238, 0.28),
        0 0 0 8px rgba(73, 204, 249, 0.08);
}

#profile .profile-avatar-premium img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

#profile .profile-details-premium {
    position: relative;
    z-index: 1;
}

#profile .profile-details-premium h2 {
    margin: 4px 0 8px;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.98;
}

#profile .profile-career {
    color: #49ccf9 !important;
    font-size: 18px;
    font-weight: 900;
}

#profile .profile-tags span {
    border-color: rgba(73, 204, 249, 0.18);
    background: rgba(73, 204, 249, 0.08);
}

#profile .profile-details-premium .btn-primary {
    margin-top: 18px;
}

#profile .profile-stats-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 12px;
}

#profile .profile-stat-card {
    min-height: 142px;
    padding: 18px;
    display: grid;
    align-content: space-between;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

#profile .profile-stat-card:hover,
#profile .profile-badge:hover {
    transform: translateY(-4px);
}

#profile .profile-stat-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 16px 36px rgba(73, 204, 249, 0.18);
    font-size: 22px;
}

#profile .profile-stat-card small,
#profile .profile-section-kicker {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#profile .profile-stat-card strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
}

#profile .profile-stat-card em {
    display: block;
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: normal;
}

#profile .profile-progress-card,
#profile .profile-achievements-card,
#profile .profile-goals-card,
#profile .profile-activity-card {
    padding: 24px;
}

#profile .profile-progress-card h3,
#profile .profile-achievements-card h3,
#profile .profile-goals-card h3,
#profile .profile-activity-card h3 {
    margin: 5px 0 8px;
    color: #ffffff;
    font-size: 24px;
}

#profile .profile-progress-card p {
    margin: 0 0 18px;
    color: var(--text-secondary);
}

#profile .profile-xp-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

#profile .profile-xp-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b68ee, #49ccf9, #fd71af);
    box-shadow: 0 0 24px rgba(73, 204, 249, 0.34);
    animation: profileXpPulse 2.8s ease-in-out infinite;
}

@keyframes profileXpPulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.35) brightness(1.08); }
}

#profile .profile-xp-meta,
#profile .profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#profile .profile-xp-meta {
    margin-top: 10px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 800;
}

#profile .profile-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

#profile .profile-badge {
    min-height: 132px;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
    transition: transform 180ms ease, opacity 180ms ease;
}

#profile .profile-badge span {
    font-size: 28px;
}

#profile .profile-badge strong {
    color: #ffffff;
    font-size: 13px;
}

#profile .profile-badge small {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 800;
}

#profile .profile-badge.unlocked {
    border-color: rgba(255, 200, 0, 0.32);
    background: linear-gradient(145deg, rgba(255, 200, 0, 0.13), rgba(73, 204, 249, 0.06));
}

#profile .profile-badge.locked {
    opacity: 0.55;
    filter: grayscale(0.8);
}

#profile .profile-goals-list,
#profile .profile-activity-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

#profile .profile-goal {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

#profile .profile-goal span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(73, 204, 249, 0.12);
    color: #49ccf9;
    font-weight: 950;
}

#profile .profile-goal.done {
    border-color: rgba(0, 200, 117, 0.26);
    background: rgba(0, 200, 117, 0.10);
}

#profile .profile-goal.done span {
    background: rgba(0, 200, 117, 0.18);
    color: #6ee7b7;
}

#profile .profile-activity-list li {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

#profile .profile-activity-list span {
    color: #49ccf9;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

#profile .profile-activity-list strong {
    color: var(--text-secondary);
    font-size: 13px;
}

#profile .profile-empty-note {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed rgba(73, 204, 249, 0.30);
    border-radius: 18px;
    background: rgba(73, 204, 249, 0.06);
}

#profile .profile-empty-note strong {
    color: #ffffff;
}

#profile .profile-empty-note span {
    color: var(--text-tertiary);
}

body.light-theme #profile .premium-profile-card {
    background:
        radial-gradient(circle at 15% 0%, rgba(123, 104, 238, 0.11), transparent 34%),
        #ffffff;
    border-color: rgba(15, 23, 42, 0.09);
}

body.light-theme #profile .profile-details-premium h2,
body.light-theme #profile .profile-stat-card strong,
body.light-theme #profile .profile-progress-card h3,
body.light-theme #profile .profile-achievements-card h3,
body.light-theme #profile .profile-goals-card h3,
body.light-theme #profile .profile-activity-card h3,
body.light-theme #profile .profile-badge strong,
body.light-theme #profile .profile-empty-note strong {
    color: #172033;
}

body.light-theme #profile .profile-goal,
body.light-theme #profile .profile-badge,
body.light-theme #profile .profile-activity-list li {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1180px) {
    #profile .profile-stats-grid {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
}

@media (max-width: 860px) {
    #profile .profile-layout,
    #profile .profile-hero {
        grid-template-columns: 1fr;
    }

    #profile .profile-hero {
        text-align: center;
    }

    #profile .profile-tags,
    #profile .profile-xp-meta,
    #profile .profile-section-header {
        justify-content: center;
    }

    #profile .profile-stats-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

@media (max-width: 560px) {
    #profile .profile-hero,
    #profile .profile-progress-card,
    #profile .profile-achievements-card,
    #profile .profile-goals-card,
    #profile .profile-activity-card {
        padding: 18px;
    }

    #profile .profile-stats-grid,
    #profile .profile-badges-grid {
        grid-template-columns: 1fr;
    }
}

/* Perfil: evitar huecos grandes entre columnas */
#profile .profile-progress-card,
#profile .profile-achievements-card {
    grid-column: 1 / -1;
}

#profile .profile-achievements-card {
    padding: 20px;
}

#profile .profile-badges-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}

#profile .profile-badge {
    min-height: 118px;
    padding: 12px;
}

#profile .profile-badge span {
    font-size: 24px;
}

#profile .profile-badge strong {
    font-size: 12.5px;
}

#profile .profile-goals-card,
#profile .profile-activity-card {
    align-self: start;
}

@media (min-width: 861px) {
    #profile .profile-goals-card {
        grid-column: 1 / 2;
    }

    #profile .profile-activity-card {
        grid-column: 2 / 3;
    }
}

/* Dashboard: recorte final de espacios sobrantes */
#dashboard .dashboard-layout {
    gap: 12px !important;
    grid-auto-flow: row dense;
}

#dashboard .dashboard-day-card,
#dashboard .dashboard-progress-card,
#dashboard .dashboard-tutor-card,
#dashboard .starter-card,
#dashboard .activity-card,
#dashboard .weekly-progress-card {
    padding: 16px !important;
}

#dashboard .dashboard-day-card,
#dashboard .dashboard-progress-card {
    min-height: auto !important;
    align-self: start !important;
}

#dashboard .dashboard-progress-card {
    max-height: 315px;
    overflow: hidden;
}

#dashboard .dashboard-progress-card .panel-title {
    margin-bottom: 10px;
}

#dashboard .dashboard-xp-ring {
    width: 92px;
    height: 92px;
    margin: 0 auto 10px;
}

#dashboard .dashboard-xp-ring span {
    font-size: 22px;
}

#dashboard .dashboard-xp-ring small {
    margin-top: -12px;
    font-size: 9px;
}

#dashboard .dashboard-progress-card .progress-bar {
    height: 8px;
}

#dashboard .dashboard-achievements {
    gap: 6px;
    margin-top: 10px;
}

#dashboard .dashboard-achievements span {
    padding: 6px 9px;
    font-size: 10px;
}

#dashboard .dashboard-day-list {
    gap: 8px;
}

#dashboard .dashboard-day-list li {
    padding: 10px;
    grid-template-columns: 80px minmax(0, 1fr);
}

#dashboard .dashboard-tutor-card {
    max-height: 220px;
}

#dashboard .starter-card {
    max-height: 410px;
}

#dashboard .activity-card {
    max-height: 330px;
}

#dashboard .weekly-progress-card {
    grid-column: 1 / span 2 !important;
    max-height: 300px;
    overflow: hidden;
}

#dashboard .weekly-progress-card .panel-title {
    margin-bottom: 12px;
}

#dashboard .weekly-chart {
    min-height: 118px !important;
    padding: 12px 14px 0 !important;
}

#dashboard .chart-caption {
    margin-top: 8px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    #dashboard .weekly-progress-card {
        grid-column: 1 / -1 !important;
    }
}

/* Sidebar: menu lateral compacto y sin elementos cortados */
.sidebar {
    width: 236px !important;
    min-width: 236px !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.sidebar-header {
    min-height: 58px !important;
    padding: 12px 16px !important;
}

.sidebar-logo {
    gap: 10px !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

.sidebar-logo .brand-logo {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

.sidebar-nav {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 10px 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(73, 204, 249, 0.38) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.34);
}

.nav-item {
    min-height: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    flex: 0 0 auto !important;
    transform: none !important;
}

.nav-item:hover {
    transform: translateX(2px) !important;
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.24), rgba(73, 204, 249, 0.12)) !important;
    box-shadow: inset 3px 0 0 #7b68ee !important;
}

.nav-icon,
.nav-item .nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

.sidebar .nav-icon::before {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.sidebar .nav-icon-subjects::before {
    width: 14px !important;
    height: 17px !important;
    border-radius: 4px !important;
    background: #90f28a !important;
    box-shadow:
        5px 4px 0 #fd71af,
        9px 7px 0 #49ccf9 !important;
    transform: translateX(-4px) !important;
}

.nav-label,
.nav-item span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
}

.sidebar-footer {
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(12, 15, 24, 0.92) !important;
}

.sidebar-footer .btn-block {
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
}

.sidebar-theme {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
}

body.light-theme .sidebar-footer {
    background: rgba(255, 255, 255, 0.94) !important;
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 768px) {
    .sidebar {
        height: auto !important;
        max-height: 100vh !important;
    }

    .sidebar.open {
        height: 100vh !important;
    }
}

/* Control para abrir/cerrar la barra lateral del panel interno */
.app-sidebar-control {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 420;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
        rgba(30, 31, 37, 0.82);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.app-sidebar-control:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 204, 249, 0.45);
    background:
        linear-gradient(145deg, rgba(73, 204, 249, 0.18), rgba(123, 104, 238, 0.10)),
        rgba(30, 31, 37, 0.9);
}

.app-sidebar-control span {
    position: relative;
    width: 19px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.app-sidebar-control span::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 6px;
    width: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.95;
}

#app-page.page.active .sidebar {
    transition: transform 0.28s ease, opacity 0.28s ease, left 0.28s ease !important;
}

#app-page.sidebar-collapsed .sidebar {
    transform: translateX(-104%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#app-page.sidebar-collapsed .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    padding-inline: clamp(28px, 4vw, 56px) !important;
}

#app-page.sidebar-collapsed .section {
    max-width: 1320px !important;
    margin-inline: auto !important;
}

#app-page.sidebar-collapsed .app-sidebar-control {
    left: 18px;
    right: auto;
}

#app-page.sidebar-collapsed .app-sidebar-control span::before {
    left: auto;
    right: 6px;
}

body.light-theme .app-sidebar-control {
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

@media (max-width: 768px) {
    .app-sidebar-control {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    #app-page.sidebar-collapsed .sidebar {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #app-page.sidebar-collapsed .main-content {
        padding-inline: 18px !important;
    }

    #app-page.sidebar-collapsed .app-sidebar-control {
        left: auto;
        right: 14px;
    }
}

/* Scroll limpio y animaciones suaves solo para la pagina principal */
html,
body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
}

html,
html.landing-mode,
html.is-landing {
    overflow-y: auto;
    scroll-behavior: auto;
}

body {
    overflow-y: visible;
}

body.landing-mode,
body.is-landing {
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

body.is-landing #app-page:not(.active),
body.is-landing #login-page:not(.active),
body.is-landing #register-page:not(.active) {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

body.is-landing #landing-page,
body.is-landing #landing-page.page,
body.is-landing #landing-page.page.active {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-x: clip !important;
}body.is-landing .main-content, body.is-landing .content, body.is-landing .wrapper, body.is-landing .landing-container, body.is-landing .sections-wrapper, body.is-landing #landing-page .features, body.is-landing #landing-page .benefits, body.is-landing #landing-page .about-project, body.is-landing #landing-page .use-benefits, body.is-landing #landing-page .landing-footer{
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

body.is-landing .sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.is-dashboard #app-page.page.active {
    min-height: 100vh;
}

/* Dashboard: orden visual definitivo de tarjetas */
#dashboard .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
}

#dashboard .dashboard-stat-card {
    min-height: 148px !important;
    padding: 18px !important;
}

#dashboard .dashboard-stat-card .stat-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

#dashboard .dashboard-stat-card .stat-label {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}

#dashboard .dashboard-stat-card .stat-value {
    margin-top: 18px !important;
    font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere !important;
}

#dashboard .dashboard-stat-card .stat-subtext {
    min-height: 34px !important;
    margin-top: 8px !important;
}

#dashboard .dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "day day progress"
        "tutor starter activity"
        "weekly weekly weekly" !important;
    gap: 16px !important;
    align-items: start !important;
    grid-auto-flow: row !important;
}

#dashboard .dashboard-day-card {
    grid-area: day !important;
}

#dashboard .dashboard-progress-card {
    grid-area: progress !important;
}

#dashboard .dashboard-tutor-card {
    grid-area: tutor !important;
}

#dashboard .starter-card {
    grid-area: starter !important;
}

#dashboard .activity-card {
    grid-area: activity !important;
}

#dashboard .weekly-progress-card {
    grid-area: weekly !important;
    grid-column: auto !important;
}

#dashboard .dashboard-day-card,
#dashboard .dashboard-progress-card,
#dashboard .dashboard-tutor-card,
#dashboard .starter-card,
#dashboard .activity-card,
#dashboard .weekly-progress-card {
    max-height: none !important;
    min-height: auto !important;
    align-self: start !important;
    overflow: visible !important;
}

#dashboard .dashboard-tutor-card,
#dashboard .starter-card,
#dashboard .activity-card {
    padding: 18px !important;
}

#dashboard .dashboard-tutor-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#dashboard .dashboard-tutor-actions button {
    min-width: 0 !important;
    white-space: normal !important;
}

#dashboard .dashboard-steps li {
    grid-template-columns: 36px minmax(0, 1fr) 68px !important;
    align-items: center !important;
}

#dashboard .dashboard-steps li.done strong,
#dashboard .dashboard-steps li.done small {
    text-decoration: none !important;
}

#dashboard .dashboard-steps strong,
#dashboard .dashboard-steps small,
#dashboard .dashboard-activity .activity-text {
    overflow-wrap: anywhere !important;
}

#dashboard .weekly-progress-card {
    padding: 20px !important;
}

#dashboard .weekly-chart {
    min-height: 190px !important;
    padding: 18px 20px 0 !important;
}

@media (max-width: 1180px) {
    #dashboard .dashboard-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }

    #dashboard .dashboard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "day day"
            "progress tutor"
            "starter activity"
            "weekly weekly" !important;
    }
}

@media (max-width: 760px) {
    #dashboard .dashboard-grid,
    #dashboard .dashboard-layout {
        grid-template-columns: 1fr !important;
    }

    #dashboard .dashboard-layout {
        grid-template-areas:
            "day"
            "progress"
            "tutor"
            "starter"
            "activity"
            "weekly" !important;
    }

    #dashboard .dashboard-tutor-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard: estructura real en columnas sin huecos */
#dashboard .dashboard-clean-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.18fr) minmax(0, 0.9fr) !important;
    gap: 16px !important;
    align-items: start !important;
    grid-template-areas: none !important;
}

#dashboard .dashboard-column {
    display: grid !important;
    gap: 16px !important;
    align-content: start !important;
    min-width: 0 !important;
}

#dashboard .dashboard-clean-layout .dashboard-day-card,
#dashboard .dashboard-clean-layout .dashboard-progress-card,
#dashboard .dashboard-clean-layout .dashboard-tutor-card,
#dashboard .dashboard-clean-layout .starter-card,
#dashboard .dashboard-clean-layout .activity-card {
    grid-area: auto !important;
    width: 100% !important;
}

#dashboard .dashboard-clean-layout .dashboard-panel-card {
    max-height: none !important;
    overflow: visible !important;
}

#dashboard .dashboard-clean-layout .dashboard-day-card,
#dashboard .dashboard-clean-layout .dashboard-tutor-card {
    min-height: 0 !important;
}

#dashboard .dashboard-clean-layout .dashboard-progress-card {
    text-align: left !important;
}

#dashboard .dashboard-clean-layout .dashboard-xp-ring {
    width: 104px !important;
    height: 104px !important;
    margin: 4px auto 12px !important;
}

#dashboard .dashboard-clean-layout .starter-card .panel-title,
#dashboard .dashboard-clean-layout .activity-card .panel-title,
#dashboard .dashboard-clean-layout .dashboard-tutor-card .panel-title {
    margin-bottom: 12px !important;
}

#dashboard .dashboard-clean-layout .dashboard-steps {
    gap: 9px !important;
}

#dashboard .dashboard-clean-layout .dashboard-steps li {
    min-height: 74px !important;
    padding: 10px !important;
}

#dashboard .dashboard-clean-layout .dashboard-activity {
    gap: 9px !important;
}

#dashboard .dashboard-clean-layout .dashboard-activity li {
    min-height: 74px !important;
}

#dashboard .dashboard-column-middle .weekly-progress-card {
    padding: 22px !important;
    width: 100% !important;
}

#dashboard .dashboard-column-middle .weekly-chart {
    min-height: 260px !important;
    padding: 18px 22px 0 !important;
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

#dashboard .dashboard-column-middle .weekly-chart .week-day {
    flex: 1 1 0 !important;
    max-width: 58px !important;
}

@media (max-width: 1180px) {
    #dashboard .dashboard-clean-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #dashboard .dashboard-column-side {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 760px) {
    #dashboard .dashboard-clean-layout {
        grid-template-columns: 1fr !important;
    }

}

#landing-page .reveal,
#landing-page .reveal-left,
#landing-page .reveal-right,
#landing-page .reveal-scale {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.72s ease,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

#landing-page .reveal-left {
    transform: translateX(-36px);
}

#landing-page .reveal-right {
    transform: translateX(36px);
}

#landing-page .reveal-scale {
    transform: translateY(24px) scale(0.96);
}

#landing-page .reveal.active,
#landing-page .reveal-left.active,
#landing-page .reveal-right.active,
#landing-page .reveal-scale.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#landing-page .delay-1 {
    transition-delay: 0.12s;
}

#landing-page .delay-2 {
    transition-delay: 0.22s;
}

#landing-page .delay-3 {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
    #landing-page .reveal,
    #landing-page .reveal-left,
    #landing-page .reveal-right,
    #landing-page .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Calendario: agenda academica compacta y sin textos salidos */
#calendar .events-list {
    overflow: hidden !important;
}

#calendar .calendar-container {
    grid-template-columns: minmax(560px, 1.15fr) minmax(400px, 0.95fr) !important;
}

#calendar #custom-events-list {
    width: 100% !important;
    min-width: 0 !important;
}

#calendar .event-item.event-custom {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

#calendar .event-item.event-custom .event-date {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
}

#calendar .event-item.event-custom .event-date .day {
    font-size: 25px !important;
    line-height: 1 !important;
}

#calendar .event-item.event-custom .event-date .month {
    font-size: 13px !important;
    line-height: 1 !important;
}

#calendar .event-item.event-custom .event-content {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

#calendar .event-item.event-custom .event-content h4,
#calendar .event-item.event-custom .event-content p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

#calendar .event-item.event-custom .event-badge,
#calendar .event-item.event-custom .event-alert,
#calendar .event-item.event-custom .email-simulation {
    width: fit-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.35 !important;
}

#calendar .event-item.event-custom .email-simulation {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
}

#calendar .event-item.event-custom .card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 2px !important;
}

#calendar .event-item.event-custom .card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#calendar .event-item.event-custom .card-actions .google-calendar-btn {
    grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
    #calendar .event-item.event-custom .card-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Calendario: correccion final de desbordes en Agenda academica */
#calendar .calendar-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#calendar .calendar-side,
#calendar .events-list,
#calendar #custom-events-list,
#calendar .event-item.event-custom,
#calendar .event-item.event-custom *,
#calendar .event-item.event-custom *::before,
#calendar .event-item.event-custom *::after {
    box-sizing: border-box !important;
}

#calendar .events-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
}

#calendar .event-item.event-custom {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 18px !important;
    border-left-width: 4px !important;
}

#calendar .event-item.event-custom .event-content h4 {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

#calendar .event-item.event-custom .event-content p {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

#calendar .event-item.event-custom .event-alert,
#calendar .event-item.event-custom .email-simulation {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 9px 12px !important;
}

#calendar .event-item.event-custom .email-simulation {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#calendar .event-item.event-custom .card-actions {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
}

#calendar .event-item.event-custom .card-actions button {
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 1280px) {
    #calendar .calendar-container {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    #calendar .event-item.event-custom .card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #calendar .event-item.event-custom .card-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard menu: sin bloque de actividad reciente */
#dashboard .dashboard-clean-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
}

#dashboard .dashboard-column-main,
#dashboard .dashboard-column-middle {
    min-width: 0 !important;
}

#dashboard .dashboard-column-side,
#dashboard .activity-card {
    display: none !important;
}

#dashboard .dashboard-column-middle .weekly-progress-card {
    width: 100% !important;
    margin: 0 !important;
}

#dashboard .dashboard-column-middle .weekly-chart {
    min-height: 230px !important;
}

@media (max-width: 980px) {
    #dashboard .dashboard-clean-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Mascota tecnologica: robot flotante */
.study-pet {
    grid-template-columns: minmax(190px, 260px) 96px !important;
    align-items: center !important;
}

.pet-robot {
    position: relative;
    width: 94px;
    height: 110px;
    transform-origin: 50% 80%;
    animation: robotHover 3.2s ease-in-out infinite;
}

.robot-head {
    position: absolute;
    left: 10px;
    top: 18px;
    width: 74px;
    height: 58px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.55), transparent 18px),
        linear-gradient(135deg, #7b68ee 0%, #49ccf9 58%, #00c875 100%);
    box-shadow:
        inset -10px -12px 0 rgba(15, 23, 42, 0.16),
        0 18px 34px rgba(73, 204, 249, 0.28);
}

.robot-head::before,
.robot-head::after {
    content: "";
    position: absolute;
    top: 23px;
    width: 10px;
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fd71af, #7b68ee);
    box-shadow: 0 0 14px rgba(253, 113, 175, 0.42);
}

.robot-head::before {
    left: -8px;
}

.robot-head::after {
    right: -8px;
}

.robot-eye {
    position: absolute;
    top: 20px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.54);
    overflow: hidden;
}

.robot-eye::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #101827;
    transform: translate(var(--pet-eye-x, 0px), var(--pet-eye-y, 0px));
    transition: transform 0.08s ease-out;
}

.robot-eye-left {
    left: 20px;
}

.robot-eye-right {
    right: 20px;
}

.robot-mouth {
    position: absolute;
    left: 26px;
    bottom: 13px;
    width: 22px;
    height: 5px;
    border-radius: 999px;
    background: rgba(16, 24, 39, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.robot-antenna {
    position: absolute;
    left: 45px;
    top: 4px;
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #49ccf9, #7b68ee);
}

.robot-antenna::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffc800;
    box-shadow: 0 0 18px rgba(255, 200, 0, 0.65);
    transform: translateX(-50%);
}

.robot-body {
    position: absolute;
    left: 21px;
    top: 72px;
    width: 52px;
    height: 34px;
    border-radius: 18px 18px 22px 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #25304f, #7b68ee 58%, #49ccf9);
    box-shadow:
        inset -8px -8px 0 rgba(15, 23, 42, 0.18),
        0 16px 28px rgba(123, 104, 238, 0.24);
}

.robot-body::before,
.robot-body::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 14px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #49ccf9, #7b68ee);
}

.robot-body::before {
    left: -14px;
    transform: rotate(12deg);
}

.robot-body::after {
    right: -14px;
    transform: rotate(-12deg);
}

.robot-core {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00c875;
    box-shadow: 0 0 18px rgba(0, 200, 117, 0.62);
    transform: translateX(-50%);
}

.robot-shadow {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -4px;
    height: 11px;
    border-radius: 50%;
    background: rgba(73, 204, 249, 0.18);
    filter: blur(6px);
    animation: robotShadow 3.2s ease-in-out infinite;
}

@keyframes robotHover {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

@keyframes robotShadow {
    0%, 100% {
        transform: scaleX(1);
        opacity: 0.58;
    }
    50% {
        transform: scaleX(0.76);
        opacity: 0.28;
    }
}

@media (max-width: 768px) {
    .study-pet {
        grid-template-columns: minmax(128px, 176px) 70px !important;
    }

    .pet-robot {
        width: 70px;
        height: 84px;
        transform: scale(0.84);
        transform-origin: right bottom;
    }
}

/* Card polish: Materias, Tareas y Mochila Digital */
:root {
    --ac-card-surface: rgba(35, 40, 56, 0.72);
    --ac-card-line: rgba(255, 255, 255, 0.11);
    --ac-card-muted: rgba(226, 232, 240, 0.72);
    --ac-card-shadow: 0 18px 46px rgba(3, 7, 18, 0.24);
    --ac-card-shadow-hover: 0 24px 64px rgba(3, 7, 18, 0.30);
}

@keyframes acCardBorderSpin {
    to { transform: rotate(360deg); }
}

#subjects .subjects-grid,
#tasks .task-list-modern,
#backpack .backpack-container {
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card,
.subject-card,
.task-card,
.resource-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid var(--ac-card-line) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--subject-color, var(--resource-color, var(--task-color, #49ccf9))) 18%, transparent), transparent 34%),
        radial-gradient(circle at 96% 6%, rgba(253, 113, 175, 0.10), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)),
        var(--ac-card-surface) !important;
    box-shadow: var(--ac-card-shadow) !important;
    backdrop-filter: blur(18px) !important;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before,
.subject-card::before,
.task-card::before,
.resource-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    padding: 1.5px !important;
    border-radius: inherit !important;
    background: conic-gradient(from 0deg, #49ccf9, #7b68ee, #fd71af, #49ccf9, #00c875, #49ccf9) !important;
    opacity: 0.58 !important;
    animation: acCardBorderSpin 10s linear infinite !important;
    pointer-events: none !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

#subjects .subject-space-card::after,
#tasks .task-card-modern::after,
#backpack .library-resource-card::after,
.subject-card::after,
.task-card::after,
.resource-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: -1 !important;
    border-radius: 23px !important;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--subject-color, var(--resource-color, var(--task-color, #49ccf9))) 16%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(40, 45, 62, 0.96), rgba(25, 29, 42, 0.96)) !important;
}

#subjects .subject-space-card:hover,
#tasks .task-card-modern:hover,
#backpack .library-resource-card:hover,
.subject-card:hover,
.task-card:hover,
.resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ac-card-shadow-hover) !important;
    border-color: rgba(73, 204, 249, 0.28) !important;
}

#subjects .subject-space-card {
    min-height: 0 !important;
    padding: 20px !important;
}

#subjects .subject-header {
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

#subjects .subject-title {
    gap: 12px !important;
}

#subjects .subject-title h3,
#tasks .task-title-row h4,
#backpack .library-resource-card h4 {
    color: #ffffff !important;
    letter-spacing: 0 !important;
}

#subjects .subject-title h3 {
    font-size: 20px !important;
}

#subjects .subject-title p,
#subjects .subject-card-footer p,
#tasks .task-description,
#backpack .resource-description,
#backpack .resource-type {
    color: var(--ac-card-muted) !important;
}

#dashboard .dashboard-hero-widget .hero-widget-icon {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    flex: 0 0 52px !important;
    align-self: center !important;
    margin: 0 !important;
    border-radius: 13px !important;
    border: 1px solid rgba(110, 150, 210, 0.25) !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(46, 151, 181, 0.92), rgba(104, 91, 176, 0.86)) !important;
    box-shadow: 0 8px 18px rgba(20, 71, 100, 0.20) !important;
    overflow: hidden !important;
    transform: none !important;
}

#dashboard .dashboard-hero-widget .hero-widget-icon svg {
    width: 26px !important;
    height: 26px !important;
    margin: auto !important;
    transform: none !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
#subjects .subject-custom-label,
#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 17px !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--subject-color, var(--resource-color, #49ccf9)) 24%, transparent) !important;
}

#subjects .subject-chip,
#backpack .resource-subject-chip {
    border: 1px solid color-mix(in srgb, var(--subject-color, var(--resource-color, #49ccf9)) 42%, rgba(255, 255, 255, 0.16)) !important;
    background: color-mix(in srgb, var(--subject-color, var(--resource-color, #49ccf9)) 22%, rgba(255, 255, 255, 0.08)) !important;
    color: #f8fbff !important;
    box-shadow: none !important;
}

#subjects .subject-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#subjects .subject-metric-grid div,
#tasks .task-meta-grid span,
#tasks .task-summary-strip div,
#backpack .resource-data span,
#backpack .resource-status {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#subjects .subject-metric-grid div {
    min-height: 68px !important;
    padding: 11px !important;
    border-radius: 16px !important;
}

#subjects .subject-card-footer {
    min-height: 0 !important;
    padding: 12px !important;
    margin: 14px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

#tasks .task-card-modern {
    padding: 18px !important;
    gap: 14px !important;
}

#tasks .task-card-main {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 13px !important;
}

#tasks .task-title-row {
    align-items: center !important;
}

#tasks .task-title-row h4 {
    font-size: 18px !important;
}

#tasks .task-subject {
    width: fit-content !important;
    margin-top: 8px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--subject-color, #49ccf9) 18%, transparent) !important;
    font-size: 12px !important;
}

#tasks .task-meta-grid {
    gap: 8px !important;
}

#tasks .task-meta-grid span {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

#tasks .task-priority,
#tasks .task-status {
    min-height: 25px !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.02em !important;
}

#backpack .library-resource-card {
    min-height: 0 !important;
    padding: 20px !important;
    gap: 13px !important;
}

#backpack .library-resource-card .resource-top {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: center !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::before {
    left: 13px !important;
    top: 9px !important;
    width: 28px !important;
    height: 34px !important;
    border-radius: 7px !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::after {
    left: 16px !important;
    bottom: 13px !important;
    font-size: 8px !important;
}

#backpack .resource-description {
    min-height: 0 !important;
    margin: 2px 0 !important;
}

#backpack .library-resource-card .resource-actions,
.resource-actions,
.task-actions,
.subject-actions,
#subjects .card-actions,
#tasks .task-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

#backpack .library-resource-card .resource-actions {
    margin-top: 4px !important;
}

.resource-actions button,
.task-actions button,
.subject-actions button,
#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    flex: 1 1 128px !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

#subjects .card-actions .btn-primary,
#tasks .task-actions .btn-primary,
#backpack .resource-actions .btn-primary {
    border-color: rgba(73, 204, 249, 0.48) !important;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.86), rgba(73, 204, 249, 0.82)) !important;
    box-shadow: 0 12px 28px rgba(73, 204, 249, 0.14) !important;
}

#subjects .card-actions .btn-secondary,
#tasks .task-actions .btn-secondary,
#backpack .resource-actions .btn-secondary {
    color: #dbe7f8 !important;
    border-color: rgba(148, 163, 184, 0.20) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

#subjects .card-actions .btn-danger,
#tasks .task-actions .btn-danger,
#backpack .resource-actions .btn-danger {
    color: #ff9ec9 !important;
    border-color: rgba(253, 113, 175, 0.34) !important;
    background: rgba(253, 113, 175, 0.12) !important;
}

.resource-actions button:hover,
.task-actions button:hover,
.subject-actions button:hover,
#subjects .card-actions button:hover,
#tasks .task-actions button:hover,
#backpack .resource-actions button:hover {
    transform: translateY(-2px) !important;
}

body.light-theme {
    --ac-card-surface: rgba(255, 255, 255, 0.84);
    --ac-card-line: rgba(30, 41, 59, 0.10);
    --ac-card-muted: #64748b;
    --ac-card-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
    --ac-card-shadow-hover: 0 22px 54px rgba(15, 23, 42, 0.16);
}

body.light-theme #subjects .subject-space-card::after,
body.light-theme #tasks .task-card-modern::after,
body.light-theme #backpack .library-resource-card::after,
body.light-theme .subject-card::after,
body.light-theme .task-card::after,
body.light-theme .resource-card::after {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--subject-color, var(--resource-color, var(--task-color, #49ccf9))) 14%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96)) !important;
}

body.light-theme #subjects .subject-title h3,
body.light-theme #tasks .task-title-row h4,
body.light-theme #backpack .library-resource-card h4 {
    color: #172033 !important;
}

body.light-theme #subjects .subject-title p,
body.light-theme #subjects .subject-card-footer p,
body.light-theme #tasks .task-description,
body.light-theme #backpack .resource-description,
body.light-theme #backpack .resource-type {
    color: #64748b !important;
}

body.light-theme #subjects .subject-card-footer,
body.light-theme #subjects .subject-metric-grid div,
body.light-theme #tasks .task-meta-grid span,
body.light-theme #tasks .task-summary-strip div,
body.light-theme #backpack .resource-data span,
body.light-theme #backpack .resource-status {
    background: rgba(248, 250, 252, 0.84) !important;
    border-color: rgba(30, 41, 59, 0.08) !important;
}

@media (prefers-reduced-motion: reduce) {
    #subjects .subject-space-card::before,
    #tasks .task-card-modern::before,
    #backpack .library-resource-card::before,
    .subject-card::before,
    .task-card::before,
    .resource-card::before {
        animation: none !important;
    }
}

@media (max-width: 980px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    #tasks .task-card-main {
        grid-template-columns: 1fr !important;
    }

    #subjects .subject-metric-grid,
    #tasks .task-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .resource-actions button,
    .task-actions button,
    .subject-actions button,
    #subjects .card-actions button,
    #tasks .task-actions button,
    #backpack .resource-actions button {
        flex-basis: 100% !important;
    }
}

/* Futuristic neon cards: borde exterior limpio sin lineas diagonales */
@property --ac-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes acNeonBorderFlow {
    to { --ac-neon-angle: 360deg; }
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card {
    --neon-card-color: var(--subject-color, var(--resource-color, var(--task-color, #49ccf9)));
    border: 1px solid rgba(122, 199, 255, 0.12) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(73, 204, 249, 0.22), transparent 34%),
        radial-gradient(circle at 8% 92%, rgba(253, 113, 175, 0.14), transparent 36%),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--neon-card-color) 15%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(9, 15, 35, 0.97), rgba(18, 25, 52, 0.93) 52%, rgba(29, 21, 48, 0.94)) !important;
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.28),
        0 0 34px rgba(73, 204, 249, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    background:
        conic-gradient(
            from var(--ac-neon-angle),
            rgba(123, 104, 238, 0.34),
            rgba(73, 204, 249, 0.92),
            rgba(47, 123, 255, 0.72),
            rgba(253, 113, 175, 0.82),
            rgba(123, 104, 238, 0.34)
        ) !important;
    pointer-events: none !important;
    opacity: 0.92 !important;
    transform: none !important;
    animation: acNeonBorderFlow 7s linear infinite !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

#subjects .subject-space-card::after,
#tasks .task-card-modern::after,
#backpack .library-resource-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    z-index: 0 !important;
    border-radius: 26px !important;
    background:
        linear-gradient(90deg, rgba(73, 204, 249, 0.08), transparent 32%, rgba(253, 113, 175, 0.07)),
        linear-gradient(145deg, rgba(11, 18, 39, 0.95), rgba(24, 30, 58, 0.90)) !important;
    pointer-events: none !important;
}

#subjects .subject-space-card > *,
#tasks .task-card-modern > *,
#backpack .library-resource-card > * {
    position: relative !important;
    z-index: 2 !important;
}

#subjects .subject-space-card:hover,
#tasks .task-card-modern:hover,
#backpack .library-resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.34),
        0 0 42px color-mix(in srgb, var(--neon-card-color) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#subjects .subject-space-card {
    padding: 22px !important;
}

#subjects .subject-header,
#backpack .library-resource-card .resource-top {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
}

#subjects .subject-title h3 {
    font-size: 22px !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
#subjects .subject-custom-label {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.35), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--subject-color) 78%, #7b68ee), #49ccf9) !important;
}

#subjects .subject-metric-grid div {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)) !important;
    border-color: rgba(124, 210, 255, 0.12) !important;
}

#tasks .task-card-modern {
    --neon-card-color: var(--subject-color, var(--task-color, #49ccf9));
}

#tasks .task-check-modern span {
    border-color: rgba(73, 204, 249, 0.28) !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.24), transparent 38%),
        linear-gradient(135deg, rgba(123, 104, 238, 0.72), rgba(73, 204, 249, 0.66)) !important;
}

#tasks .task-reminder-alert,
#tasks .task-meta-grid span,
#backpack .resource-data span {
    background: rgba(13, 22, 44, 0.58) !important;
    border-color: rgba(73, 204, 249, 0.12) !important;
}

#backpack .library-resource-card {
    --neon-card-color: var(--resource-color, #49ccf9);
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.36), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--resource-color) 76%, #7b68ee), #49ccf9) !important;
}

#backpack .resource-meta-row {
    gap: 9px !important;
}

#backpack .resource-description {
    padding: 12px !important;
    border: 1px solid rgba(73, 204, 249, 0.10) !important;
    border-radius: 16px !important;
    background: rgba(13, 22, 44, 0.42) !important;
}

#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#subjects .card-actions .btn-primary,
#tasks .task-actions .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #49ccf9 58%, #7b68ee) !important;
}

#subjects .card-actions .btn-danger,
#tasks .task-actions .btn-danger,
#backpack .resource-actions .btn-danger {
    color: #ffc3dc !important;
    background: linear-gradient(135deg, rgba(253, 113, 175, 0.16), rgba(122, 35, 86, 0.18)) !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card {
    background:
        radial-gradient(circle at 92% 10%, rgba(73, 204, 249, 0.16), transparent 34%),
        radial-gradient(circle at 8% 92%, rgba(253, 113, 175, 0.10), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.94)) !important;
}

body.light-theme #subjects .subject-space-card::after,
body.light-theme #tasks .task-card-modern::after,
body.light-theme #backpack .library-resource-card::after {
    background:
        linear-gradient(90deg, rgba(73, 204, 249, 0.08), transparent 32%, rgba(253, 113, 175, 0.07)),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94)) !important;
}

/* Compact futuristic cards: borde neon visible, recto y proporcional */
@keyframes neonBorderMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

#subjects .subjects-grid,
#tasks .task-list-modern,
#backpack .backpack-container {
    width: min(100%, 1120px) !important;
    grid-template-columns: repeat(2, minmax(0, 520px)) !important;
    justify-content: center !important;
    gap: 16px !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card {
    max-width: 560px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(73, 204, 249, 0.16) !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 212, 255, 0.18), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(180, 70, 255, 0.16), transparent 35%),
        linear-gradient(145deg, rgba(8, 14, 35, 0.96), rgba(24, 27, 55, 0.94)) !important;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(0, 170, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #8b5cf6, #00d4ff, #38bdf8, #ec4899, #8b5cf6) !important;
    background-size: 300% 300% !important;
    animation: neonBorderMove 5s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

#subjects .subject-space-card::after,
#tasks .task-card-modern::after,
#backpack .library-resource-card::after {
    inset: 2px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 84% 12%, rgba(73, 204, 249, 0.10), transparent 30%),
        radial-gradient(circle at 10% 92%, rgba(253, 113, 175, 0.08), transparent 34%),
        linear-gradient(145deg, rgba(9, 15, 35, 0.88), rgba(22, 27, 54, 0.88)) !important;
}

#subjects .subject-space-card:hover,
#tasks .task-card-modern:hover,
#backpack .library-resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.40),
        0 0 34px rgba(73, 204, 249, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#subjects .subject-header,
#backpack .library-resource-card .resource-top {
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
}

#subjects .subject-title {
    align-items: center !important;
}

#subjects .subject-title h3 {
    font-size: 20px !important;
    line-height: 1.12 !important;
}

#subjects .subject-title p,
#backpack .resource-type {
    margin-top: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
#subjects .subject-custom-label,
#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 16px !important;
}

#subjects .subject-progress-block {
    margin: 14px 0 12px !important;
    gap: 7px !important;
}

#subjects .subject-metric-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
}

#subjects .subject-metric-grid div {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
}

#subjects .subject-metric-grid strong {
    font-size: 20px !important;
}

#subjects .subject-card-footer {
    margin: 10px 0 12px !important;
    padding: 10px 12px !important;
    gap: 5px !important;
}

#subjects .subject-card-footer p {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

#tasks .task-card-modern {
    padding: 22px !important;
    gap: 12px !important;
}

#tasks .task-card-main {
    gap: 12px !important;
}

#tasks .task-title-row {
    gap: 8px !important;
}

#tasks .task-title-row h4 {
    font-size: 18px !important;
    line-height: 1.18 !important;
}

#tasks .task-subject {
    margin-top: 7px !important;
    padding: 5px 10px !important;
}

#tasks .task-description {
    margin-top: 8px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

#tasks .task-meta-grid {
    margin-top: 11px !important;
}

#tasks .task-meta-grid span {
    min-height: 32px !important;
    padding: 8px 9px !important;
    font-size: 11.5px !important;
}

#tasks .task-actions {
    padding-left: 52px !important;
}

#backpack .library-resource-card {
    padding: 22px !important;
    gap: 10px !important;
}

#backpack .library-resource-card .resource-top {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 12px !important;
}

#backpack .library-resource-card h4 {
    font-size: 19px !important;
    line-height: 1.15 !important;
}

#backpack .resource-meta-row,
#backpack .resource-data {
    gap: 7px !important;
}

#backpack .resource-subject-chip,
#backpack .resource-status,
#backpack .resource-data span {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 11.5px !important;
}

#backpack .resource-description {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

#subjects .card-actions,
#tasks .task-actions,
#backpack .resource-actions {
    gap: 8px !important;
    margin-top: 2px !important;
}

#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 15px !important;
    font-size: 12.5px !important;
}

#subjects .card-actions .btn-primary,
#tasks .task-actions .btn-primary {
    background: linear-gradient(135deg, #6d5dfc, #00d4ff 58%, #8b5cf6) !important;
    box-shadow: 0 12px 24px rgba(0, 212, 255, 0.14) !important;
}

#subjects .card-actions .btn-secondary,
#tasks .task-actions .btn-secondary,
#backpack .resource-actions .btn-secondary {
    background: rgba(9, 15, 35, 0.54) !important;
    border-color: rgba(148, 203, 255, 0.18) !important;
}

#subjects .card-actions .btn-danger,
#tasks .task-actions .btn-danger,
#backpack .resource-actions .btn-danger {
    background: rgba(236, 72, 153, 0.13) !important;
    border-color: rgba(236, 72, 153, 0.36) !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card {
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 180, 255, 0.14), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(180, 70, 255, 0.10), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.94)) !important;
}

body.light-theme #subjects .subject-space-card::after,
body.light-theme #tasks .task-card-modern::after,
body.light-theme #backpack .library-resource-card::after {
    background:
        radial-gradient(circle at 84% 12%, rgba(73, 204, 249, 0.08), transparent 30%),
        radial-gradient(circle at 10% 92%, rgba(253, 113, 175, 0.06), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(244, 248, 255, 0.88)) !important;
}

@media (max-width: 980px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container {
        grid-template-columns: minmax(0, 560px) !important;
    }
}

@media (max-width: 640px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container {
        grid-template-columns: 1fr !important;
    }

    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card {
        padding: 18px !important;
    }

    #tasks .task-actions {
        padding-left: 0 !important;
    }
}

/* Final neon pass: compact cards + subject modal */
@keyframes neonBorderSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

#subjects .subjects-grid,
#tasks .task-list-modern,
#backpack .backpack-container {
    width: min(100%, 1120px) !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 540px)) !important;
    justify-content: center !important;
    gap: 18px !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card,
.subject-detail-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 212, 255, 0.16), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(180, 70, 255, 0.14), transparent 32%),
        linear-gradient(145deg, rgba(8, 14, 35, 0.98), rgba(25, 28, 55, 0.95)) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(0, 170, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card {
    max-width: 540px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before,
.subject-detail-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #8b5cf6, #00d4ff, #38bdf8, #ec4899, #8b5cf6) !important;
    background-size: 400% 400% !important;
    animation: neonBorderSlide 4s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

#subjects .subject-space-card::after,
#tasks .task-card-modern::after,
#backpack .library-resource-card::after,
.subject-detail-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at top right, rgba(0, 170, 255, 0.10), transparent 32%),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.08), transparent 35%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#subjects .subject-space-card > *,
#tasks .task-card-modern > *,
#backpack .library-resource-card > *,
.subject-detail-card > * {
    position: relative !important;
    z-index: 2 !important;
}

#subjects .subject-space-card:hover,
#tasks .task-card-modern:hover,
#backpack .library-resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.40),
        0 0 34px rgba(0, 212, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#subjects .subject-header {
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    align-items: flex-start !important;
}

#subjects .subject-title {
    align-items: center !important;
    gap: 10px !important;
}

#subjects .subject-title h3 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.12 !important;
}

#subjects .subject-title p {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}

#subjects .subject-chip {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
#subjects .subject-custom-label {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
}

#subjects .subject-orbit {
    display: none !important;
}

#subjects .subject-progress-block {
    margin: 10px 0 !important;
}

#subjects .subject-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

#subjects .subject-metric-grid div {
    min-height: 54px !important;
    padding: 9px 10px !important;
}

#subjects .subject-metric-grid span {
    font-size: 9.5px !important;
}

#subjects .subject-metric-grid strong {
    font-size: 19px !important;
}

#subjects .subject-card-footer {
    min-height: 0 !important;
    margin: 8px 0 10px !important;
    padding: 9px 10px !important;
}

#subjects .subject-card-footer p {
    font-size: 11.5px !important;
}

#tasks .task-card-modern {
    padding: 20px !important;
    gap: 10px !important;
}

#tasks .task-card-main {
    grid-template-columns: 38px minmax(0, 1fr) !important;
}

#tasks .task-check-modern,
#tasks .task-check-modern span {
    width: 38px !important;
    height: 38px !important;
}

#tasks .task-title-row h4 {
    font-size: 17px !important;
}

#tasks .task-description,
#backpack .resource-description {
    font-size: 12px !important;
}

#tasks .task-meta-grid span {
    min-height: 30px !important;
    padding: 7px 8px !important;
}

#backpack .library-resource-card {
    padding: 20px !important;
    gap: 9px !important;
}

#backpack .library-resource-card .resource-top {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
}

#backpack .library-resource-card h4 {
    font-size: 18px !important;
}

#backpack .resource-meta-row,
#backpack .resource-data {
    gap: 6px !important;
}

#backpack .resource-description {
    margin: 0 !important;
    padding: 9px 10px !important;
}

#subjects .card-actions,
#tasks .task-actions,
#backpack .resource-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

#tasks .task-actions {
    padding-left: 50px !important;
}

#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    flex: 1 1 118px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 11px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
}

.subject-detail-modal {
    padding: 18px !important;
}

.subject-detail-card {
    width: min(92vw, 1100px) !important;
    max-width: 1100px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 26px !important;
    border-radius: 28px !important;
}

.subject-detail-card .quick-modal-close {
    top: 18px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(73, 204, 249, 0.22) !important;
    background: rgba(8, 14, 35, 0.72) !important;
    color: #ffffff !important;
}

.subject-detail-hero {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 0 54px 16px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(73, 204, 249, 0.12) !important;
}

.subject-detail-hero h3 {
    margin: 6px 0 4px !important;
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
}

.subject-detail-hero p {
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.subject-detail-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.subject-detail-stats div,
.subject-detail-columns section {
    border: 1px solid rgba(73, 204, 249, 0.12) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(73, 204, 249, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.subject-detail-stats div {
    min-height: 82px !important;
    padding: 13px !important;
}

.subject-detail-stats strong {
    font-size: 24px !important;
}

.subject-detail-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.subject-detail-columns section {
    padding: 14px !important;
    border-radius: 18px !important;
}

.subject-detail-columns h4 {
    margin-bottom: 10px !important;
    font-size: 17px !important;
}

.subject-detail-columns p {
    padding: 8px 0 !important;
    font-size: 12.5px !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card,
body.light-theme .subject-detail-card {
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 180, 255, 0.13), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(180, 70, 255, 0.10), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.95)) !important;
}

body.light-theme #subjects .subject-space-card::after,
body.light-theme #tasks .task-card-modern::after,
body.light-theme #backpack .library-resource-card::after,
body.light-theme .subject-detail-card::after {
    background:
        radial-gradient(circle at top right, rgba(0, 170, 255, 0.07), transparent 32%),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 35%) !important;
}

@media (max-width: 760px) {
    .subject-detail-stats,
    .subject-detail-columns {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container {
        grid-template-columns: 1fr !important;
    }

    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card,
    .subject-detail-card {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    #tasks .task-card-main,
    .subject-detail-hero,
    .subject-detail-stats,
    .subject-detail-columns {
        grid-template-columns: 1fr !important;
    }

    #tasks .task-actions {
        padding-left: 0 !important;
    }

    .subject-detail-hero {
        margin-right: 48px !important;
    }
}

/* Definitive neon correction: compact academic cards and subject modal */
@keyframes acNeonBorderFlow {
    0% {
        background-position: center, center, 0% 50%;
    }
    100% {
        background-position: center, center, 400% 50%;
    }
}

@keyframes acNeonRingFlow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 400% 50%;
    }
}

#subjects .subjects-grid,
#tasks .task-list-modern,
#backpack .backpack-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 22px !important;
    align-items: start !important;
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card,
.subject-detail-card {
    --card-radius: 24px;
    box-sizing: border-box !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    border-radius: var(--card-radius) !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(73, 204, 249, 0.20), transparent 26%) padding-box,
        radial-gradient(circle at 12% 96%, rgba(253, 113, 175, 0.13), transparent 30%) padding-box,
        linear-gradient(145deg, rgba(9, 15, 35, 0.98), rgba(27, 25, 58, 0.96) 54%, rgba(12, 25, 43, 0.96)) padding-box,
        linear-gradient(90deg, #7b68ee, #49ccf9, #38bdf8, #fd71af, #7b68ee) border-box !important;
    background-size: auto, auto, auto, 420% 420% !important;
    animation: acNeonBorderFlow 5s linear infinite !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.35),
        0 0 22px rgba(73, 204, 249, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    color: #f8fbff !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card {
    width: 100% !important;
    max-width: 540px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px !important;
    margin: 0 !important;
    gap: 12px !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before,
.subject-detail-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #8b5cf6, #00d4ff, #38bdf8, #ec4899, #8b5cf6) !important;
    background-size: 400% 400% !important;
    animation: acNeonRingFlow 4s linear infinite !important;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 7px rgba(73, 204, 249, 0.36)) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

#subjects .subject-space-card::after,
#tasks .task-card-modern::after,
#backpack .library-resource-card::after,
.subject-detail-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    z-index: 0 !important;
    border-radius: calc(var(--card-radius) - 2px) !important;
    background:
        radial-gradient(circle at top right, rgba(73, 204, 249, 0.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(253, 113, 175, 0.10), transparent 34%) !important;
    pointer-events: none !important;
}

#subjects .subject-space-card > *,
#tasks .task-card-modern > *,
#backpack .library-resource-card > *,
.subject-detail-card > * {
    position: relative !important;
    z-index: 2 !important;
}

#subjects .subject-space-card:hover,
#tasks .task-card-modern:hover,
#backpack .library-resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(73, 204, 249, 0.22),
        0 0 28px rgba(253, 113, 175, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

#subjects .subject-orbit,
#subjects .subject-orbit::before,
#subjects .subject-orbit::after {
    display: none !important;
}

#subjects .subject-header,
#backpack .library-resource-card .resource-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#subjects .subject-title,
#backpack .library-resource-card .resource-top {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

#subjects .subject-title h3,
#backpack .library-resource-card h4,
#tasks .task-title-row h4 {
    margin: 0 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    text-wrap: balance !important;
}

#subjects .subject-title h3 {
    font-size: 20px !important;
}

#subjects .subject-title p,
#backpack .resource-type,
#tasks .task-description {
    margin: 5px 0 0 !important;
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
#subjects .subject-custom-label,
#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 17px !important;
    box-shadow:
        0 14px 28px rgba(73, 204, 249, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#subjects .subject-chip,
#backpack .resource-subject-chip,
#backpack .resource-status,
#tasks .task-status,
#tasks .task-priority,
#tasks .task-meta-grid span,
#backpack .resource-data span {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(73, 204, 249, 0.18) !important;
    background: rgba(73, 204, 249, 0.10) !important;
    color: #dff7ff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

#subjects .subject-progress-block {
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

#subjects .subject-progress-block > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    color: rgba(226, 232, 240, 0.82) !important;
}

#subjects .subject-progress-block strong {
    color: #49ccf9 !important;
}

#subjects .subject-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 13px 0 0 !important;
}

#subjects .subject-metric-grid div {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

#subjects .subject-metric-grid span {
    color: rgba(226, 232, 240, 0.65) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

#subjects .subject-metric-grid strong {
    color: #69dfff !important;
    font-size: 20px !important;
}

#subjects .subject-card-footer,
#tasks .task-reminder-alert,
#backpack .resource-description {
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 17px !important;
    background: rgba(9, 15, 35, 0.42) !important;
    color: rgba(226, 232, 240, 0.78) !important;
}

#subjects .subject-card-footer p {
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.80) !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
}

#subjects .subject-card-footer p + p {
    margin-top: 6px !important;
}

#subjects .subject-card-footer strong {
    color: #ffffff !important;
}

#tasks .task-card-modern {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

#tasks .task-card-main {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

#tasks .task-check-modern,
#tasks .task-check-modern span {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
}

#tasks .task-title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

#tasks .task-title-row h4 {
    font-size: 18px !important;
}

#tasks .task-subject {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 2px 0 8px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--subject-color, #49ccf9) 18%, transparent) !important;
    color: #f8fbff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

#tasks .task-meta-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 10px !important;
}

#tasks .task-meta-grid span {
    flex: 0 1 auto !important;
}

#tasks .task-meta-grid strong {
    color: rgba(255, 255, 255, 0.78) !important;
}

#backpack .library-resource-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

#backpack .library-resource-card .resource-top {
    grid-template-columns: 52px minmax(0, 1fr) !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    overflow: hidden !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::before {
    inset: 8px !important;
    border-radius: 9px !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon::after {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 11px !important;
}

#backpack .library-resource-card h4 {
    font-size: 19px !important;
}

#backpack .resource-meta-row,
#backpack .resource-data {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 10px !important;
}

#subjects .card-actions,
#tasks .task-actions,
#backpack .resource-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding: 0 !important;
}

#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    flex: 1 1 118px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

#subjects .card-actions .btn-primary,
#tasks .task-actions .btn-primary,
#backpack .resource-actions .btn-primary {
    background: linear-gradient(135deg, #7b68ee, #49ccf9, #fd71af) !important;
    color: #ffffff !important;
}

#subjects .card-actions .btn-secondary,
#tasks .task-actions .btn-secondary,
#backpack .resource-actions .btn-secondary {
    border-color: rgba(73, 204, 249, 0.28) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #dbeafe !important;
}

#subjects .card-actions .btn-danger,
#tasks .task-actions .btn-danger,
#backpack .resource-actions .btn-danger {
    border-color: rgba(253, 113, 175, 0.34) !important;
    background: rgba(253, 113, 175, 0.13) !important;
    color: #ff9ccc !important;
}

.subject-detail-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(73, 204, 249, 0.15), transparent 34%),
        rgba(4, 8, 18, 0.76) !important;
    backdrop-filter: blur(14px) !important;
}

.subject-detail-card {
    --card-radius: 28px;
    width: min(92vw, 1100px) !important;
    max-width: 1100px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 28px !important;
    margin: 0 auto !important;
}

.subject-detail-card .quick-modal-close {
    top: 18px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(73, 204, 249, 0.28) !important;
    background: rgba(8, 14, 35, 0.82) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(73, 204, 249, 0.16) !important;
}

.subject-detail-hero {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 58px 18px 0 !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.subject-detail-hero .subject-icon,
.subject-detail-hero .subject-symbol,
.subject-detail-hero .subject-custom-label {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 20px !important;
}

.subject-detail-hero h3 {
    margin: 8px 0 4px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.05 !important;
}

.subject-detail-hero p {
    max-width: 780px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.subject-detail-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
}

.subject-detail-stats div,
.subject-detail-columns section {
    border: 1px solid rgba(73, 204, 249, 0.14) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(73, 204, 249, 0.10), transparent 36%),
        rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.subject-detail-stats div {
    min-height: 82px !important;
    padding: 14px !important;
    border-radius: 18px !important;
}

.subject-detail-stats span {
    color: rgba(226, 232, 240, 0.62) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.subject-detail-stats strong {
    display: block !important;
    margin-top: 8px !important;
    color: #69dfff !important;
    font-size: 25px !important;
}

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

.subject-detail-columns section {
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: 19px !important;
}

.subject-detail-columns h4 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: 17px !important;
}

.subject-detail-columns p {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 12.5px !important;
}

.subject-detail-columns p:last-child {
    border-bottom: 0 !important;
}

.subject-detail-columns p strong {
    color: #f8fbff !important;
}

.subject-detail-columns p span {
    color: rgba(186, 230, 253, 0.82) !important;
    text-align: right !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card,
body.light-theme .subject-detail-card {
    background:
        radial-gradient(circle at 88% 8%, rgba(73, 204, 249, 0.14), transparent 26%) padding-box,
        radial-gradient(circle at 12% 96%, rgba(253, 113, 175, 0.10), transparent 30%) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.96)) padding-box,
        linear-gradient(90deg, #7b68ee, #49ccf9, #38bdf8, #fd71af, #7b68ee) border-box !important;
    color: #101828 !important;
}

body.light-theme #subjects .subject-title h3,
body.light-theme #backpack .library-resource-card h4,
body.light-theme #tasks .task-title-row h4,
body.light-theme .subject-detail-hero h3,
body.light-theme .subject-detail-columns h4,
body.light-theme .subject-detail-columns p strong {
    color: #101828 !important;
}

body.light-theme #subjects .subject-title p,
body.light-theme #backpack .resource-type,
body.light-theme #tasks .task-description,
body.light-theme .subject-detail-hero p,
body.light-theme .subject-detail-columns p {
    color: #475467 !important;
}

/* Dashboard académico: cabecera estudiantil sobria y compacta */
#dashboard {
    --dash-accent: #4ea8c7;
    --dash-accent-hover: #65b7d2;
    --dash-blue: #38bdf8;
    --dash-purple: #8b5cf6;
    --dash-pink: #ec4899;
    --dash-green: #34d399;
    --dash-yellow: #facc15;
    --dash-orange: #fb923c;
    --dash-surface: #101b29;
    --dash-surface-raised: #152333;
    --dash-border: rgba(148, 178, 199, 0.16);
    --dash-copy: #eef5f8;
    --dash-muted: #9cafba;
}

#dashboard .dashboard-student-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px) !important;
    gap: clamp(20px, 2.5vw, 28px) !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: clamp(20px, 2.2vw, 26px) !important;
    border: 1px solid rgba(93, 159, 187, 0.22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(108deg, rgba(47, 183, 167, 0.065), transparent 39%),
        linear-gradient(285deg, rgba(139, 92, 246, 0.045), transparent 34%),
        linear-gradient(135deg, #122332 0%, #0e1926 100%) !important;
    box-shadow: 0 15px 36px rgba(0, 0, 0, 0.20), inset 0 -2px 0 rgba(47, 183, 167, 0.10), inset 0 1px 0 rgba(148, 200, 219, 0.035) !important;
    overflow: hidden !important;
}

#dashboard .dashboard-student-hero::before,
#dashboard .dashboard-student-hero::after {
    content: none !important;
    display: none !important;
}

#dashboard .dashboard-hero-copy {
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

#dashboard .dashboard-eyebrow {
    width: fit-content !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(84, 187, 205, 0.28) !important;
    border-radius: 6px !important;
    background: rgba(25, 112, 128, 0.16) !important;
    color: #91d0dc !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}

#dashboard .dashboard-hero-copy h1 {
    margin: 0 !important;
    color: var(--dash-copy) !important;
    font-size: clamp(1.75rem, 2.7vw, 2.35rem) !important;
    font-weight: 720 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
}

#dashboard .dashboard-hero-copy h1 span {
    display: inline-block !important;
    font-size: 0.72em !important;
    transform: translateY(-0.04em) !important;
    color: #aaa6df !important;
}

#dashboard .dashboard-hero-copy > p {
    max-width: 620px !important;
    margin: 0 !important;
    color: var(--dash-muted) !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
}

#dashboard .dashboard-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 2px !important;
}

#dashboard .dashboard-hero-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    gap: 6px !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.028) !important;
    color: var(--dash-muted) !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
}

#dashboard .dashboard-hero-meta span::before {
    content: "" !important;
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    background-color: currentColor !important;
    mask: center / contain no-repeat var(--meta-icon) !important;
    -webkit-mask: center / contain no-repeat var(--meta-icon) !important;
}

#dashboard .dashboard-hero-meta span:first-child {
    --meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
    color: #82c6dc !important;
    border-color: rgba(56, 189, 248, 0.20) !important;
    background: rgba(56, 189, 248, 0.045) !important;
}

#dashboard .dashboard-hero-meta span:last-child {
    --meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3Z'/%3E%3Cpath d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8L19 16Z'/%3E%3C/svg%3E");
    color: #aaa6df !important;
    border-color: rgba(139, 92, 246, 0.19) !important;
    background: rgba(139, 92, 246, 0.04) !important;
}

#dashboard .dashboard-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 500px) !important;
    margin: 8px 0 0 !important;
}

#dashboard .quick-actions-bar button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid color-mix(in srgb, var(--action-accent, var(--dash-accent)), transparent 68%) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--action-accent, var(--dash-accent)), transparent 94%) !important;
    color: #dce8ed !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--action-accent, var(--dash-accent)), transparent 18%) !important;
    font-size: 0.79rem !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

#dashboard .quick-actions-bar button:nth-child(1) { --action-accent: var(--dash-blue); }
#dashboard .quick-actions-bar button:nth-child(2) { --action-accent: #2fb7a7; }
#dashboard .quick-actions-bar button:nth-child(3) { --action-accent: #e39a55; }
#dashboard .quick-actions-bar button:nth-child(4) { --action-accent: var(--dash-purple); }

#dashboard .quick-actions-bar button:hover {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--action-accent), transparent 48%) !important;
    background: color-mix(in srgb, var(--action-accent), transparent 89%) !important;
    box-shadow: inset 3px 0 0 var(--action-accent), 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}

#dashboard .dashboard-hero-widget {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 0 !important;
    padding: 17px !important;
    border: 1px solid rgba(119, 135, 205, 0.24) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #193044 0%, #17283a 58%, #18263b 100%) !important;
    box-shadow: 0 11px 26px rgba(0, 0, 0, 0.16), inset 0 -1px 0 rgba(108, 126, 204, 0.08), inset 0 1px 0 rgba(149, 164, 220, 0.045) !important;
    justify-self: end !important;
}

#dashboard .dashboard-hero-widget strong {
    color: var(--dash-copy) !important;
    font-size: 1rem !important;
}

#dashboard .dashboard-hero-widget p {
    margin: 3px 0 0 !important;
    color: var(--dash-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.42 !important;
}

#dashboard .dashboard-hero-widget > div {
    min-width: 0 !important;
}

#dashboard .dashboard-hero-widget .btn-primary {
    grid-column: 2 !important;
    justify-self: start !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(78, 168, 199, 0.5) !important;
    border-radius: 8px !important;
    background: var(--dash-accent) !important;
    color: #07141c !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

#dashboard .dashboard-hero-widget .btn-primary:hover {
    transform: translateY(-1px) !important;
    background: var(--dash-accent-hover) !important;
    box-shadow: 0 8px 18px rgba(24, 110, 139, 0.18) !important;
}

#dashboard .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

#dashboard .dashboard-stat-card {
    position: relative !important;
    min-height: 166px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--card-accent, #38bdf8), transparent 76%), transparent 44%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
        rgba(18, 24, 38, 0.82) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20), 0 0 32px color-mix(in srgb, var(--card-accent, #38bdf8), transparent 86%) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
    overflow: hidden !important;
}

#dashboard .dashboard-stat-card:nth-child(1) { --card-accent: var(--dash-blue); }
#dashboard .dashboard-stat-card:nth-child(2) { --card-accent: var(--dash-green); }
#dashboard .dashboard-stat-card:nth-child(3) { --card-accent: var(--dash-orange); }
#dashboard .dashboard-stat-card:nth-child(4) { --card-accent: var(--dash-pink); }

#dashboard .dashboard-stat-card:hover,
#dashboard .dashboard-panel-card:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--card-accent, #38bdf8), transparent 52%) !important;
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.24), 0 0 38px color-mix(in srgb, var(--card-accent, #38bdf8), transparent 80%) !important;
}

#dashboard .dashboard-stat-card .stat-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#dashboard .dashboard-stat-card .stat-icon,
#dashboard .panel-icon,
#dashboard .hero-widget-icon {
    background: linear-gradient(135deg, var(--card-accent, #38bdf8), #8b5cf6) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--card-accent, #38bdf8), transparent 70%) !important;
}

#dashboard .dashboard-stat-card .stat-label {
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

#dashboard .dashboard-stat-card .stat-value {
    margin-top: 18px !important;
    color: var(--card-accent, #38bdf8) !important;
    font-size: clamp(1.85rem, 3.2vw, 2.75rem) !important;
    font-weight: 950 !important;
}

#dashboard .dashboard-stat-card .stat-subtext {
    color: rgba(203, 213, 225, 0.78) !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
}

#dashboard .dashboard-stat-card .progress-bar,
#dashboard .dashboard-panel-card .progress-bar {
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.60) !important;
    overflow: hidden !important;
}

#dashboard .dashboard-stat-card .progress-fill,
#dashboard .dashboard-panel-card .progress-fill {
    background: linear-gradient(90deg, var(--dash-purple), var(--dash-blue), var(--dash-pink)) !important;
    transition: width 500ms ease !important;
}

#dashboard .dashboard-clean-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
        "progress day"
        "starter activity"
        "weekly weekly" !important;
    gap: 20px !important;
    align-items: start !important;
}

#dashboard .dashboard-progress-card { grid-area: progress !important; --card-accent: var(--dash-purple); }
#dashboard .activity-card { grid-area: activity !important; --card-accent: var(--dash-pink); }
#dashboard .dashboard-day-card { grid-area: day !important; --card-accent: var(--dash-blue); }
#dashboard .starter-card { grid-area: starter !important; --card-accent: var(--dash-green); }
#dashboard .weekly-progress-card { grid-area: weekly !important; --card-accent: var(--dash-orange); }

#dashboard .dashboard-panel-card {
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--card-accent, #38bdf8), transparent 78%), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.030)),
        rgba(18, 24, 38, 0.84) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.20) !important;
    overflow: visible !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

#dashboard .panel-title {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

#dashboard .panel-title h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
}

#dashboard .panel-title p {
    margin: 4px 0 0 !important;
    color: rgba(203, 213, 225, 0.72) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
}

#dashboard .dashboard-progress-body {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
}

#dashboard .dashboard-xp-ring {
    width: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    background:
        radial-gradient(circle, rgba(18, 24, 38, 0.98) 0 55%, transparent 56%),
        conic-gradient(var(--dash-blue) var(--xp, 0%), rgba(255, 255, 255, 0.10) 0) !important;
}

#dashboard .dashboard-progress-details {
    display: grid !important;
    gap: 10px !important;
}

#dashboard .dashboard-progress-details strong {
    color: #ffffff !important;
    font-size: 1.2rem !important;
}

#dashboard .dashboard-progress-details > span {
    color: rgba(203, 213, 225, 0.76) !important;
    font-size: 13px !important;
}

#dashboard .dashboard-achievements {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
}

#dashboard .dashboard-achievements span {
    padding: 7px 10px !important;
    border: 1px solid rgba(52, 211, 153, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(52, 211, 153, 0.12) !important;
    color: #a7f3d0 !important;
}

#dashboard .dashboard-activity,
#dashboard .dashboard-day-list,
#dashboard .dashboard-steps {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#dashboard .dashboard-activity li,
#dashboard .dashboard-day-list li,
#dashboard .dashboard-steps li {
    display: grid !important;
    align-items: center !important;
    min-height: 68px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
    overflow: hidden !important;
}

#dashboard .dashboard-activity li {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 12px !important;
}

#dashboard .activity-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: var(--dash-blue) !important;
    box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.12), 0 0 20px rgba(56, 189, 248, 0.45) !important;
}

#dashboard .activity-tasks .activity-dot { background: var(--dash-green) !important; }
#dashboard .activity-resources .activity-dot { background: var(--dash-orange) !important; }
#dashboard .activity-calendar .activity-dot { background: var(--dash-pink) !important; }

#dashboard .dashboard-activity small,
#dashboard .dashboard-day-list li > span,
#dashboard .dashboard-steps small {
    color: rgba(203, 213, 225, 0.68) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

#dashboard .dashboard-activity strong,
#dashboard .dashboard-day-list strong,
#dashboard .dashboard-steps strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

#dashboard .dashboard-day-list li {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
}

#dashboard .dashboard-day-list li > span {
    display: inline-grid !important;
    place-items: center !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.13) !important;
    color: var(--dash-blue) !important;
    text-transform: uppercase !important;
}

#dashboard .dashboard-day-list small {
    color: rgba(203, 213, 225, 0.70) !important;
    font-size: 12px !important;
}

#dashboard .dashboard-steps li {
    grid-template-columns: 38px minmax(0, 1fr) 74px !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
}

#dashboard .dashboard-steps .step-number {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--dash-purple), var(--dash-blue)) !important;
    color: #ffffff !important;
}

#dashboard .dashboard-steps li.done {
    border-color: rgba(52, 211, 153, 0.26) !important;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(56, 189, 248, 0.05)) !important;
}

#dashboard .dashboard-steps li.done .step-number {
    background: linear-gradient(135deg, var(--dash-green), var(--dash-blue)) !important;
}

#dashboard .dashboard-steps button {
    min-height: 32px !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.09) !important;
    color: #7dd3fc !important;
    font-size: 12px !important;
}

#dashboard .dashboard-steps li.done button {
    border-color: rgba(52, 211, 153, 0.25) !important;
    background: rgba(52, 211, 153, 0.12) !important;
    color: #86efac !important;
}

#dashboard .weekly-progress-card {
    width: 100% !important;
    padding: 24px !important;
}

#dashboard .weekly-chart {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: clamp(10px, 2vw, 22px) !important;
    min-height: 190px !important;
    padding: 18px 20px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, 0.42) !important;
    overflow: hidden !important;
}

#dashboard .weekly-chart .week-day {
    flex: 1 1 0 !important;
    max-width: 82px !important;
    min-height: 22px !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(180deg, var(--dash-blue), var(--dash-purple) 56%, var(--dash-pink)) !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.24) !important;
    transition: height 500ms ease, transform 180ms ease !important;
}

#dashboard .weekly-chart .week-day:hover {
    transform: translateY(-4px) !important;
}

#dashboard .chart-caption {
    margin: 12px 0 0 !important;
    color: rgba(203, 213, 225, 0.70) !important;
}

#dashboard .dashboard-empty-note {
    min-height: 112px !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    background: rgba(56, 189, 248, 0.06) !important;
}

#dashboard .dashboard-empty-note.compact {
    min-height: 148px !important;
}

body.light-theme #dashboard .dashboard-student-hero {
    background:
        linear-gradient(105deg, rgba(56, 189, 248, 0.035), transparent 38%),
        linear-gradient(285deg, rgba(139, 92, 246, 0.025), transparent 34%),
        #ffffff !important;
    border-color: rgba(50, 116, 144, 0.16) !important;
    box-shadow: 0 12px 28px rgba(18, 43, 58, 0.08) !important;
}

body.light-theme #dashboard .dashboard-hero-copy h1,
body.light-theme #dashboard .dashboard-hero-widget strong,
body.light-theme #dashboard .dashboard-stat-card .stat-label,
body.light-theme #dashboard .panel-title h3,
body.light-theme #dashboard .dashboard-progress-details strong,
body.light-theme #dashboard .dashboard-activity strong,
body.light-theme #dashboard .dashboard-day-list strong,
body.light-theme #dashboard .dashboard-steps strong {
    color: #111827 !important;
}

body.light-theme #dashboard .dashboard-hero-copy p,
body.light-theme #dashboard .dashboard-hero-meta span,
body.light-theme #dashboard .dashboard-hero-widget p,
body.light-theme #dashboard .dashboard-stat-card .stat-subtext,
body.light-theme #dashboard .panel-title p,
body.light-theme #dashboard .dashboard-progress-details > span,
body.light-theme #dashboard .dashboard-day-list small,
body.light-theme #dashboard .dashboard-steps small,
body.light-theme #dashboard .dashboard-activity small,
body.light-theme #dashboard .chart-caption {
    color: #64748b !important;
}

body.light-theme #dashboard .dashboard-stat-card,
body.light-theme #dashboard .dashboard-panel-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.88)) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-theme #dashboard .dashboard-hero-widget {
    background: linear-gradient(145deg, #f7fafc, #f2f5fb) !important;
    border-color: rgba(92, 112, 182, 0.16) !important;
    box-shadow: 0 8px 20px rgba(18, 43, 58, 0.07) !important;
}

body.light-theme #dashboard .quick-actions-bar button {
    color: #203746 !important;
    background: color-mix(in srgb, var(--action-accent), white 95%) !important;
}

body.light-theme #dashboard .quick-actions-bar button:hover {
    background: color-mix(in srgb, var(--action-accent), white 89%) !important;
}

body.light-theme #dashboard .dashboard-activity li,
body.light-theme #dashboard .dashboard-day-list li,
body.light-theme #dashboard .dashboard-steps li,
body.light-theme #dashboard .weekly-chart {
    background: rgba(248, 250, 252, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 1180px) {
    #dashboard .dashboard-clean-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "progress day"
            "starter activity"
            "weekly weekly" !important;
    }

    #dashboard .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #dashboard .dashboard-progress-body {
        grid-template-columns: 120px minmax(0, 1fr) !important;
    }
}

@media (max-width: 720px) {
    #dashboard .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    #dashboard .dashboard-student-hero,
    #dashboard .dashboard-panel-card,
    #dashboard .dashboard-stat-card {
        border-radius: 22px !important;
    }

    #dashboard .dashboard-progress-body {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
    }

    #dashboard .dashboard-clean-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "progress"
            "day"
            "starter"
            "activity"
            "weekly" !important;
    }

    #dashboard .dashboard-steps li {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    #dashboard .dashboard-steps button {
        grid-column: 2 !important;
        width: fit-content !important;
    }
}

/* Clean reference style: dark cards without inner blobs, only moving neon border */
@keyframes cleanNeonTop {
    from { left: -38%; }
    to { left: 100%; }
}

@keyframes cleanNeonRight {
    from { top: -38%; }
    to { top: 100%; }
}

@keyframes cleanNeonBottom {
    from { right: -38%; }
    to { right: 100%; }
}

@keyframes cleanNeonLeft {
    from { bottom: -38%; }
    to { bottom: 100%; }
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card,
.subject-detail-card {
    background:
        linear-gradient(145deg, rgba(6, 10, 34, 0.98), rgba(13, 14, 48, 0.98) 52%, rgba(8, 15, 38, 0.98)) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color, #38bdf8) 62%, transparent) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 22px color-mix(in srgb, var(--subject-color, #38bdf8) 24%, transparent) !important;
}

#subjects .subject-space-card::before,
#subjects .subject-space-card::after,
#tasks .task-card-modern::before,
#tasks .task-card-modern::after,
#backpack .library-resource-card::before,
#backpack .library-resource-card::after,
.subject-detail-card::before,
.subject-detail-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

#subjects .subject-metric-grid div,
#subjects .subject-card-footer,
#tasks .task-reminder-alert,
#tasks .task-meta-grid span,
#backpack .resource-description,
#backpack .resource-data span,
.subject-detail-stats div,
.subject-detail-columns section {
    background: rgba(255, 255, 255, 0.055) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#subjects .progress-bar,
#tasks .task-summary-strip div,
#backpack .resource-meta-row span {
    background-image: none !important;
}

.neon-lines {
    position: absolute !important;
    inset: 0 !important;
    z-index: 14 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.neon-line {
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 0 5px var(--subject-color, #38bdf8))
        drop-shadow(0 0 10px #00d4ff)
        drop-shadow(0 0 15px #ec4899) !important;
}

.neon-line.top {
    top: 0 !important;
    left: -38% !important;
    width: 38% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--subject-color, #38bdf8), #00d4ff, #ec4899, transparent) !important;
    animation: cleanNeonTop 3.2s linear infinite !important;
    animation-delay: 0s !important;
}

.neon-line.right {
    top: -38% !important;
    right: 0 !important;
    width: 3px !important;
    height: 38% !important;
    background: linear-gradient(180deg, transparent, var(--subject-color, #38bdf8), #00d4ff, #ec4899, transparent) !important;
    animation: cleanNeonRight 3.2s linear infinite !important;
    animation-delay: 0.8s !important;
}

.neon-line.bottom {
    right: -38% !important;
    bottom: 0 !important;
    width: 38% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #ec4899, #00d4ff, var(--subject-color, #38bdf8), transparent) !important;
    animation: cleanNeonBottom 3.2s linear infinite !important;
    animation-delay: 1.6s !important;
}

.neon-line.left {
    bottom: -38% !important;
    left: 0 !important;
    width: 3px !important;
    height: 38% !important;
    background: linear-gradient(180deg, transparent, #ec4899, #00d4ff, var(--subject-color, #38bdf8), transparent) !important;
    animation: cleanNeonLeft 3.2s linear infinite !important;
    animation-delay: 2.4s !important;
}

#subjects .subject-space-card > *:not(.neon-lines),
#tasks .task-card-modern > *:not(.neon-lines),
#backpack .library-resource-card > *:not(.neon-lines),
.subject-detail-card > *:not(.neon-lines) {
    position: relative !important;
    z-index: 18 !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card,
body.light-theme .subject-detail-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.96)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .neon-line.top,
    .neon-line.right,
    .neon-line.bottom,
    .neon-line.left {
        animation: none !important;
    }
}

/* Visible runner neon border: one light travels top -> right -> bottom -> left */
@keyframes neonMoveTop {
    from { left: -35%; }
    to { left: 100%; }
}

@keyframes neonMoveRight {
    from { top: -35%; }
    to { top: 100%; }
}

@keyframes neonMoveBottom {
    from { right: -35%; }
    to { right: 100%; }
}

@keyframes neonMoveLeft {
    from { bottom: -35%; }
    to { bottom: 100%; }
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card,
.subject-detail-card,
.subject-card,
.task-card,
.resource-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.neon-lines {
    display: none !important;
}

.neon-border-lines {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 30 !important;
}

.neon-border-lines .neon-line {
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 0 6px var(--subject-color, #00d4ff))
        drop-shadow(0 0 12px #00d4ff)
        drop-shadow(0 0 18px #ec4899) !important;
}

.neon-border-lines .neon-top {
    top: 0 !important;
    left: -35% !important;
    width: 35% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--subject-color, #00d4ff), #00d4ff, #ec4899, transparent) !important;
    animation: neonMoveTop 3.2s linear infinite !important;
}

.neon-border-lines .neon-right {
    top: -35% !important;
    right: 0 !important;
    width: 3px !important;
    height: 35% !important;
    background: linear-gradient(180deg, transparent, var(--subject-color, #00d4ff), #00d4ff, #ec4899, transparent) !important;
    animation: neonMoveRight 3.2s linear infinite !important;
    animation-delay: 0.8s !important;
}

.neon-border-lines .neon-bottom {
    bottom: 0 !important;
    right: -35% !important;
    width: 35% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #ec4899, #00d4ff, var(--subject-color, #00d4ff), transparent) !important;
    animation: neonMoveBottom 3.2s linear infinite !important;
    animation-delay: 1.6s !important;
}

.neon-border-lines .neon-left {
    bottom: -35% !important;
    left: 0 !important;
    width: 3px !important;
    height: 35% !important;
    background: linear-gradient(180deg, transparent, #ec4899, #00d4ff, var(--subject-color, #00d4ff), transparent) !important;
    animation: neonMoveLeft 3.2s linear infinite !important;
    animation-delay: 2.4s !important;
}

#subjects .subject-space-card > *:not(.neon-border-lines),
#tasks .task-card-modern > *:not(.neon-border-lines),
#backpack .library-resource-card > *:not(.neon-border-lines),
.subject-detail-card > *:not(.neon-border-lines),
.subject-card > *:not(.neon-border-lines),
.task-card > *:not(.neon-border-lines),
.resource-card > *:not(.neon-border-lines) {
    position: relative !important;
    z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
    .neon-border-lines .neon-top,
    .neon-border-lines .neon-right,
    .neon-border-lines .neon-bottom,
    .neon-border-lines .neon-left {
        animation: none !important;
    }
}

/* Tasks scroll fix: keep cards in the normal page flow */
#tasks,
#tasks.section,
#tasks .section-content,
#tasks .tasks-container,
#tasks .tasks-list,
#tasks #tasks-list,
#tasks .task-board,
#tasks .task-list-modern {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#tasks .tasks-container {
    display: block !important;
}

#tasks .tasks-list {
    display: grid !important;
    gap: 18px !important;
}

#tasks .task-board.task-list-modern,
#tasks .task-list-modern {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}

#tasks .task-card-modern {
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow: hidden !important;
}

body.is-dashboard {
    overflow-y: auto !important;
}

body.is-dashboard .main-content,
body.is-dashboard .dashboard-content,
body.is-dashboard .app-content {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* Landing: el scroll debe pertenecer solo al documento, no al contenedor interno. */
html.is-landing {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: auto !important;
    scrollbar-color: #cbd5e1 #ffffff !important;
}

body.is-landing {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: auto !important;
}

body.is-landing #landing-page,
body.is-landing #landing-page.page,
body.is-landing #landing-page.page.active,
body.is-landing .landing-page,
body.is-landing .landing-main,
body.is-landing .landing-content,
body.is-landing .public-page,
body.is-landing .sections-wrapper,
body.is-landing .page-wrapper,
body.is-landing .hero-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

body.is-landing #landing-page::-webkit-scrollbar,
body.is-landing .landing-page::-webkit-scrollbar,
body.is-landing .landing-main::-webkit-scrollbar,
body.is-landing .landing-content::-webkit-scrollbar,
body.is-landing .public-page::-webkit-scrollbar,
body.is-landing .sections-wrapper::-webkit-scrollbar,
body.is-landing .page-wrapper::-webkit-scrollbar,
body.is-landing .hero-section::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}

html.is-landing::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}

html.is-landing::-webkit-scrollbar-track {
    background: #ffffff !important;
}

html.is-landing::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 4px solid #ffffff !important;
    border-radius: 999px !important;
}

body.is-landing::-webkit-scrollbar,
body.is-landing #landing-page::-webkit-scrollbar,
body.is-landing .landing-page::-webkit-scrollbar,
body.is-landing .landing-main::-webkit-scrollbar,
body.is-landing .landing-content::-webkit-scrollbar,
body.is-landing .public-page::-webkit-scrollbar,
body.is-landing .sections-wrapper::-webkit-scrollbar,
body.is-landing .page-wrapper::-webkit-scrollbar,
body.is-landing .hero-section::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}

body.is-landing #landing-page,
body.is-landing .landing-page,
body.is-landing .landing-main,
body.is-landing .landing-content,
body.is-landing .public-page,
body.is-landing .sections-wrapper,
body.is-landing .page-wrapper,
body.is-landing .hero-section {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

@media (max-width: 900px) {
    #tasks .task-board.task-list-modern,
    #tasks .task-list-modern {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    #tasks .task-card-modern {
        min-height: 0 !important;
    }
}

@media (min-width: 1180px) {
    #subjects .subjects-grid,
    #backpack .backpack-container {
        grid-template-columns: repeat(2, minmax(320px, 540px)) !important;
    }

    #tasks .task-list-modern {
        grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container,
    .subject-detail-stats,
    .subject-detail-columns {
        grid-template-columns: 1fr !important;
    }

    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card,
    .subject-detail-card {
        max-width: 100% !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    #subjects .subject-header,
    #tasks .task-card-main,
    #backpack .library-resource-card .resource-top,
    .subject-detail-hero {
        grid-template-columns: 1fr !important;
    }

    .subject-detail-hero {
        margin-right: 48px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card,
    .subject-detail-card,
    #subjects .subject-space-card::before,
    #tasks .task-card-modern::before,
    #backpack .library-resource-card::before,
    .subject-detail-card::before {
        animation: none !important;
    }
}

/* Subject-colored cards: equal heights + four-side moving neon border */
@keyframes neonTop {
    from { left: -46%; }
    to { left: 101%; }
}

@keyframes neonRight {
    from { top: -46%; }
    to { top: 101%; }
}

@keyframes neonBottom {
    from { right: -46%; }
    to { right: 101%; }
}

@keyframes neonLeft {
    from { bottom: -46%; }
    to { bottom: 101%; }
}

#subjects .subjects-grid,
#tasks .task-list-modern,
#backpack .backpack-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
}

#subjects .subject-space-card,
#tasks .task-card-modern,
#backpack .library-resource-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background:
        radial-gradient(circle at 85% 10%, var(--subject-color-soft, rgba(56, 189, 248, 0.22)), transparent 32%) padding-box,
        radial-gradient(circle at 10% 90%, rgba(168, 85, 247, 0.14), transparent 36%) padding-box,
        linear-gradient(145deg, rgba(8, 14, 35, 0.98), rgba(26, 29, 58, 0.95)) padding-box !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 28px var(--subject-color-glow, rgba(56, 189, 248, 0.28)),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#subjects .subject-space-card {
    min-height: 430px !important;
    padding: 22px !important;
}

#tasks .task-card-modern {
    min-height: 430px !important;
    padding: 20px !important;
}

#backpack .library-resource-card {
    min-height: 390px !important;
    padding: 20px !important;
}

#subjects .subject-space-card::before,
#tasks .task-card-modern::before,
#backpack .library-resource-card::before,
.subject-detail-card::before {
    opacity: 0.34 !important;
}

#subjects .subject-space-card > *:not(.neon-lines),
#tasks .task-card-modern > *:not(.neon-lines),
#backpack .library-resource-card > *:not(.neon-lines),
.subject-detail-card > *:not(.neon-lines) {
    position: relative !important;
    z-index: 4 !important;
}

#subjects .card-actions,
#tasks .task-actions,
#backpack .resource-actions {
    margin-top: auto !important;
    padding-top: 14px !important;
}

#tasks .task-content {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
}

#tasks .task-description {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 40px !important;
}

#tasks .task-reminder-alert {
    min-height: 46px !important;
    max-height: 68px !important;
    overflow: hidden !important;
}

#subjects .subject-chip,
#tasks .task-subject,
#tasks .task-status,
#backpack .resource-subject-chip {
    border-color: var(--subject-color, #38bdf8) !important;
    background: var(--subject-color-soft, rgba(56, 189, 248, 0.18)) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px var(--subject-color-glow, rgba(56, 189, 248, 0.32)) !important;
}

#subjects .progress-fill,
#tasks .task-check-modern span,
#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    box-shadow: 0 0 18px var(--subject-color-glow, rgba(56, 189, 248, 0.34)) !important;
}

.neon-lines {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.neon-line {
    position: absolute !important;
    display: block !important;
    opacity: 0.96 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, var(--subject-color, #38bdf8), #00d4ff, #ec4899, transparent) !important;
    filter:
        drop-shadow(0 0 8px var(--subject-color, #38bdf8))
        drop-shadow(0 0 14px rgba(0, 212, 255, 0.70)) !important;
}

.neon-line.top {
    top: 0 !important;
    left: -46% !important;
    width: 46% !important;
    height: 2px !important;
    animation: neonTop 3.5s linear infinite !important;
}

.neon-line.right {
    top: -46% !important;
    right: 0 !important;
    width: 2px !important;
    height: 46% !important;
    background: linear-gradient(180deg, transparent, var(--subject-color, #38bdf8), #00d4ff, #ec4899, transparent) !important;
    animation: neonRight 3.5s linear infinite !important;
    animation-delay: 0.875s !important;
}

.neon-line.bottom {
    right: -46% !important;
    bottom: 0 !important;
    width: 46% !important;
    height: 2px !important;
    animation: neonBottom 3.5s linear infinite !important;
    animation-delay: 1.75s !important;
}

.neon-line.left {
    bottom: -46% !important;
    left: 0 !important;
    width: 2px !important;
    height: 46% !important;
    background: linear-gradient(180deg, transparent, var(--subject-color, #38bdf8), #00d4ff, #ec4899, transparent) !important;
    animation: neonLeft 3.5s linear infinite !important;
    animation-delay: 2.625s !important;
}

.subject-detail-card {
    background:
        radial-gradient(circle at 85% 10%, var(--subject-color-soft, rgba(56, 189, 248, 0.22)), transparent 32%) padding-box,
        radial-gradient(circle at 10% 90%, rgba(168, 85, 247, 0.14), transparent 36%) padding-box,
        linear-gradient(145deg, rgba(8, 14, 35, 0.98), rgba(26, 29, 58, 0.95)) padding-box !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        0 0 34px var(--subject-color-glow, rgba(56, 189, 248, 0.32)) !important;
}

#subjects .card-actions button,
#tasks .task-actions button,
#backpack .resource-actions button {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
}

#tasks .task-actions button[data-task-calendar] {
    font-size: 11px !important;
}

@media (max-width: 900px) {
    #subjects .subjects-grid,
    #tasks .task-list-modern,
    #backpack .backpack-container {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    #subjects .subject-space-card,
    #tasks .task-card-modern,
    #backpack .library-resource-card {
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .neon-line {
        animation: none !important;
    }
}

/* Subject modal repair: contained layout + clean four-side neon only */
*,
*::before,
*::after {
    box-sizing: border-box;
}

@keyframes neonTopMove {
    from { left: -40%; }
    to { left: 100%; }
}

@keyframes neonRightMove {
    from { top: -40%; }
    to { top: 100%; }
}

@keyframes neonBottomMove {
    from { right: -40%; }
    to { right: 100%; }
}

@keyframes neonLeftMove {
    from { bottom: -40%; }
    to { bottom: 100%; }
}

#subjects .subject-space-card::before,
#subjects .subject-space-card::after,
#tasks .task-card-modern::before,
#tasks .task-card-modern::after,
#backpack .library-resource-card::before,
#backpack .library-resource-card::after,
.subject-detail-card::before,
.subject-detail-card::after {
    display: none !important;
}

.quick-modal.subject-detail-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 24px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 212, 255, 0.13), transparent 34%),
        rgba(3, 7, 18, 0.76) !important;
    backdrop-filter: blur(14px) !important;
}

/* Cuaderno académico premium: un solo componente controlado por --subject-color */
#subjects .subject-space-card.subject-card,
.quick-modal.subject-detail-modal .subject-detail-card {
    --notebook-line: color-mix(in srgb, var(--subject-color, #38bdf8) 14%, transparent);
    --notebook-margin: color-mix(in srgb, var(--subject-color, #38bdf8) 46%, transparent);
    --notebook-edge: color-mix(in srgb, var(--subject-color, #38bdf8) 62%, rgba(148, 163, 184, 0.24));
    --notebook-lift: color-mix(in srgb, var(--subject-color, #38bdf8) 24%, transparent);
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    animation: none !important;
    border: 1px solid var(--notebook-edge) !important;
    background:
        linear-gradient(90deg, transparent 0 46px, var(--notebook-margin) 46px 47px, transparent 47px),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--notebook-line) 31px 32px),
        linear-gradient(145deg, #111c28 0%, #0c1621 100%) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.30),
        0 0 24px var(--notebook-lift),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    color: #edf4f7 !important;
}

#subjects .subject-space-card.subject-card {
    min-height: 430px !important;
    padding: 24px 22px 20px 50px !important;
    border-radius: 20px !important;
}

#subjects .subject-space-card.subject-card::before,
.quick-modal.subject-detail-modal .subject-detail-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--subject-color, #38bdf8) 76%, #142433), color-mix(in srgb, var(--subject-color, #38bdf8) 38%, #0b1520)) !important;
    opacity: 0.82 !important;
    filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    animation: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#subjects .subject-space-card.subject-card::after,
.quick-modal.subject-detail-modal .subject-detail-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 22px !important;
    bottom: 22px !important;
    left: 8px !important;
    width: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(ellipse 9px 5px at center, color-mix(in srgb, var(--subject-color, #38bdf8) 86%, white) 0 48%, var(--subject-color, #38bdf8) 50% 64%, transparent 67%) center top / 20px 28px repeat-y !important;
    opacity: 0.92 !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16)) !important;
    mask: none !important;
    -webkit-mask: none !important;
    animation: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

#subjects .subject-space-card.subject-card > *,
.quick-modal.subject-detail-modal .subject-detail-card > * {
    position: relative !important;
    z-index: 5 !important;
}

#subjects .subject-space-card .neon-border-lines,
#subjects .subject-space-card .neon-lines,
.quick-modal.subject-detail-modal .neon-border-lines,
.quick-modal.subject-detail-modal .neon-lines,
#subjects .subject-orbit {
    display: none !important;
}

#subjects .subject-space-card.subject-card:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--subject-color, #38bdf8) 76%, rgba(255,255,255,.18)) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.34), 0 0 28px var(--notebook-lift) !important;
}

#subjects .subject-space-card .subject-header {
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--notebook-line) !important;
}

#subjects .subject-space-card .subject-chip,
.quick-modal.subject-detail-modal .subject-chip {
    border: 1px solid color-mix(in srgb, var(--subject-color, #38bdf8) 54%, transparent) !important;
    background: color-mix(in srgb, var(--subject-color, #38bdf8) 15%, transparent) !important;
    color: color-mix(in srgb, var(--subject-color, #38bdf8) 62%, white) !important;
    box-shadow: none !important;
}

#subjects .subject-space-card .progress-bar {
    height: 7px !important;
    border: 1px solid var(--notebook-line) !important;
    background: rgba(255,255,255,.045) !important;
    overflow: hidden !important;
}

#subjects .subject-space-card .progress-fill {
    background: linear-gradient(90deg, var(--subject-color, #38bdf8), color-mix(in srgb, var(--subject-color, #38bdf8) 60%, white)) !important;
    box-shadow: 0 0 12px var(--subject-color-glow, transparent) !important;
}

#subjects .subject-space-card .subject-progress-block strong,
#subjects .subject-space-card .subject-metric-grid strong,
.quick-modal.subject-detail-modal .subject-detail-stats strong {
    color: color-mix(in srgb, var(--subject-color, #38bdf8) 66%, white) !important;
}

#subjects .subject-space-card .subject-metric-grid div,
.quick-modal.subject-detail-modal .subject-detail-stats div {
    min-height: 64px !important;
    border: 1px solid var(--notebook-line) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#subjects .subject-space-card .subject-card-footer,
.quick-modal.subject-detail-modal .subject-detail-columns section {
    border: 1px solid var(--notebook-line) !important;
    border-left: 3px solid color-mix(in srgb, var(--subject-color, #38bdf8) 58%, transparent) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.028) !important;
    box-shadow: none !important;
}

#subjects .subject-space-card .card-actions {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 8px !important;
}

#subjects .subject-space-card .card-actions button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

#subjects .subject-space-card .card-actions .btn-primary {
    border-color: color-mix(in srgb, var(--subject-color, #38bdf8) 70%, transparent) !important;
    background: var(--subject-color, #38bdf8) !important;
    color: #ffffff !important;
}

#subjects .subject-space-card .card-actions .btn-secondary {
    border-color: var(--notebook-line) !important;
    background: rgba(255,255,255,.035) !important;
}

.quick-modal.subject-detail-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 24px !important;
    overflow: hidden !important;
    background: rgba(3, 8, 14, 0.78) !important;
    backdrop-filter: blur(14px) !important;
}

.quick-modal.subject-detail-modal .subject-detail-card {
    width: min(92vw, 1180px) !important;
    max-width: 1180px !important;
    max-height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 30px 30px 30px 58px !important;
    border-radius: 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
}

.quick-modal.subject-detail-modal .quick-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 30 !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--notebook-line) !important;
    border-radius: 10px !important;
    background: rgba(8,17,25,.88) !important;
    color: #eaf2f5 !important;
    box-shadow: none !important;
}

.quick-modal.subject-detail-modal .subject-detail-hero {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    margin: 0 52px 22px 0 !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid var(--notebook-line) !important;
}

.quick-modal.subject-detail-modal .subject-detail-hero > div {
    min-width: 0 !important;
}

.quick-modal.subject-detail-modal .subject-detail-hero h3 {
    margin: 7px 0 5px !important;
    color: #f2f7f9 !important;
    font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
    line-height: 1.08 !important;
}

.quick-modal.subject-detail-modal .subject-detail-hero p {
    margin: 0 !important;
    color: #aebdc6 !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
}

.quick-modal.subject-detail-modal .subject-detail-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
}

.quick-modal.subject-detail-modal .subject-detail-stats div {
    padding: 14px !important;
}

.quick-modal.subject-detail-modal .subject-detail-columns {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
}

.quick-modal.subject-detail-modal .subject-detail-columns section {
    min-width: 0 !important;
    padding: 16px 18px !important;
}

.quick-modal.subject-detail-modal .subject-detail-columns h4 {
    margin: 0 0 10px !important;
    color: #edf4f7 !important;
    font-size: 1rem !important;
}

.quick-modal.subject-detail-modal .subject-detail-columns p {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    color: #aebdc6 !important;
    font-size: .78rem !important;
}

.quick-modal.subject-detail-modal .subject-detail-columns p:last-child {
    border-bottom: 0 !important;
}

body.light-theme #subjects .subject-space-card.subject-card,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-card {
    --notebook-line: color-mix(in srgb, var(--subject-color, #38bdf8) 13%, transparent);
    --notebook-margin: color-mix(in srgb, var(--subject-color, #38bdf8) 42%, transparent);
    background:
        linear-gradient(90deg, transparent 0 46px, var(--notebook-margin) 46px 47px, transparent 47px),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--notebook-line) 31px 32px),
        linear-gradient(145deg, #ffffff 0%, #f7fafc 100%) !important;
    border-color: color-mix(in srgb, var(--subject-color, #38bdf8) 38%, #cbd5e1) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.11), 0 0 18px color-mix(in srgb, var(--subject-color, #38bdf8) 13%, transparent) !important;
    color: #172b38 !important;
}

body.light-theme #subjects .subject-space-card .subject-metric-grid div,
body.light-theme #subjects .subject-space-card .subject-card-footer,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-stats div,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-columns section {
    background: rgba(255,255,255,.72) !important;
    border-color: var(--notebook-line) !important;
}

body.light-theme .quick-modal.subject-detail-modal .subject-detail-hero h3,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-columns h4,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-columns p strong {
    color: #172b38 !important;
}

body.light-theme .quick-modal.subject-detail-modal .subject-detail-hero p,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-columns p,
body.light-theme .quick-modal.subject-detail-modal .subject-detail-columns p span {
    color: #526a78 !important;
}

body.light-theme .quick-modal.subject-detail-modal .quick-modal-close {
    color: #243b49 !important;
    background: rgba(255,255,255,.88) !important;
}

@media (max-width: 900px) {
    .quick-modal.subject-detail-modal {
        align-items: flex-start !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-card {
        width: min(94vw,1180px) !important;
        max-height: none !important;
        padding: 24px 22px 24px 52px !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-columns {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    #subjects .subject-space-card.subject-card {
        padding: 20px 16px 18px 44px !important;
    }

    #subjects .subject-space-card .card-actions {
        grid-template-columns: 1fr !important;
    }

    .quick-modal.subject-detail-modal {
        padding: 8px !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-card {
        width: 100% !important;
        padding: 22px 16px 22px 44px !important;
        border-radius: 16px !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-right: 44px !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-stats {
        grid-template-columns: 1fr !important;
    }

    .quick-modal.subject-detail-modal .subject-detail-columns p {
        grid-template-columns: 1fr !important;
    }
}

.neon-lines {
    position: absolute !important;
    inset: 0 !important;
    z-index: 12 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.neon-line {
    position: absolute !important;
    display: block !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 0 6px #00d4ff)
        drop-shadow(0 0 12px #8b5cf6)
        drop-shadow(0 0 18px #ec4899) !important;
}

.neon-line.top {
    top: 0 !important;
    left: -40% !important;
    width: 40% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #8b5cf6, #00d4ff, #ec4899, transparent) !important;
    animation: neonTopMove 3s linear infinite !important;
}

.neon-line.right {
    top: -40% !important;
    right: 0 !important;
    width: 3px !important;
    height: 40% !important;
    background: linear-gradient(180deg, transparent, #8b5cf6, #00d4ff, #ec4899, transparent) !important;
    animation: neonRightMove 3s linear infinite !important;
    animation-delay: 0.75s !important;
}

.neon-line.bottom {
    bottom: 0 !important;
    right: -40% !important;
    width: 40% !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #ec4899, #00d4ff, #8b5cf6, transparent) !important;
    animation: neonBottomMove 3s linear infinite !important;
    animation-delay: 1.5s !important;
}

.neon-line.left {
    bottom: -40% !important;
    left: 0 !important;
    width: 3px !important;
    height: 40% !important;
    background: linear-gradient(180deg, transparent, #ec4899, #00d4ff, #8b5cf6, transparent) !important;
    animation: neonLeftMove 3s linear infinite !important;
    animation-delay: 2.25s !important;
}

#subjects .subject-space-card > *:not(.neon-lines),
#tasks .task-card-modern > *:not(.neon-lines),
#backpack .library-resource-card > *:not(.neon-lines),
.subject-detail-card > *:not(.neon-lines) {
    position: relative !important;
    z-index: 16 !important;
}

@media (max-width: 900px) {
    .quick-modal.subject-detail-modal {
        align-items: flex-start !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }

    .subject-detail-card {
        width: min(94vw, 1180px) !important;
        max-height: none !important;
        padding: 22px !important;
    }

    .subject-detail-hero {
        margin-right: 54px !important;
    }

    .subject-detail-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .subject-detail-columns {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .subject-detail-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-right: 48px !important;
    }

    .subject-detail-stats {
        grid-template-columns: 1fr !important;
    }

    .subject-detail-columns p {
        grid-template-columns: 1fr !important;
    }

    .subject-detail-columns p span {
        text-align: left !important;
    }
}

body.light-theme .subject-detail-card {
    background:
        radial-gradient(circle at 85% 8%, rgba(73, 204, 249, 0.16), transparent 30%),
        radial-gradient(circle at 10% 95%, rgba(168, 85, 247, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.96)) !important;
}

body.light-theme .subject-detail-hero h3,
body.light-theme .subject-detail-columns h4,
body.light-theme .subject-detail-columns p strong {
    color: #101828 !important;
}

body.light-theme .subject-detail-hero p,
body.light-theme .subject-detail-columns p {
    color: #475467 !important;
}

.forgot-password-link {
    justify-self: end;
    margin: -2px 0 18px;
    border: 0;
    background: transparent;
    color: var(--color-cyan);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    text-align: right;
    transition: color 0.2s ease, transform 0.2s ease;
}

.forgot-password-link:hover {
    color: var(--color-pink);
    transform: translateY(-1px);
}

.password-modal-card {
    width: min(520px, 100%);
    padding-bottom: 0;
    border-color: rgba(73, 204, 249, 0.24);
    background:
        radial-gradient(circle at 12% 8%, rgba(73, 204, 249, 0.18), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(253, 113, 175, 0.16), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
        var(--bg-secondary);
}

.password-modal-card h3 {
    margin-right: 44px;
}

.password-modal-text {
    margin: -6px 0 18px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.password-modal-actions {
    gap: 12px;
}

.password-modal-actions .btn-secondary,
.password-modal-actions .btn-primary {
    min-width: 150px;
}

body.light-theme .forgot-password-link {
    color: #0ea5e9;
}

body.light-theme .password-modal-card {
    border-color: rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 165, 233, 0.14), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(253, 113, 175, 0.12), transparent 32%),
        #ffffff;
}

@media (max-width: 560px) {
    .password-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .password-modal-actions .btn-secondary,
    .password-modal-actions .btn-primary {
        width: 100%;
    }
}

/* Dashboard layout: reglas estructurales existentes */
#dashboard .dashboard-clean-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
        "progress day"
        "starter starter"
        "weekly weekly" !important;
    gap: 22px !important;
    width: 100% !important;
    align-items: start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#dashboard .dashboard-progress-card {
    grid-area: progress !important;
    width: 100% !important;
}

#dashboard .dashboard-day-card {
    grid-area: day !important;
    width: 100% !important;
}

#dashboard .starter-card {
    grid-area: starter !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    overflow: visible !important;
    padding: 28px !important;
}

#dashboard .dashboard-clean-layout > .starter-card.dashboard-panel-card {
    grid-area: starter !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

#dashboard .starter-card .panel-title {
    width: 100% !important;
    max-width: none !important;
}

#dashboard .weekly-progress-card {
    grid-area: weekly !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 300px !important;
    padding: 26px !important;
    overflow: hidden !important;
}

#dashboard .starter-card .dashboard-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#dashboard .starter-card .dashboard-steps li {
    min-height: 76px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 100px !important;
    align-items: center !important;
    gap: 18px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

#dashboard .starter-card .dashboard-steps li > div {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

#dashboard .starter-card .dashboard-steps li *,
#dashboard .starter-card .dashboard-steps li strong,
#dashboard .starter-card .dashboard-steps li small {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#dashboard .starter-card .dashboard-steps li strong {
    white-space: normal !important;
    line-height: 1.2 !important;
    font-size: 1rem !important;
}

#dashboard .starter-card .dashboard-steps li small {
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 0.92rem !important;
}

#dashboard .starter-card .dashboard-steps li button {
    justify-self: end !important;
    width: 88px !important;
    min-width: 88px !important;
    text-align: center !important;
}

#dashboard .weekly-progress-card .weekly-chart {
    min-height: 190px !important;
}

@media (max-width: 900px) {
    #dashboard .dashboard-student-hero {
        grid-template-columns: 1fr !important;
    }

    #dashboard .dashboard-hero-widget {
        max-width: none !important;
        justify-self: stretch !important;
    }

    #dashboard .dashboard-hero-actions {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 900px) {
    #dashboard .dashboard-clean-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "progress"
            "day"
            "starter"
            "weekly" !important;
    }

    #dashboard .starter-card,
    #dashboard .weekly-progress-card {
        grid-column: auto !important;
    }

    #dashboard .starter-card .dashboard-steps {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 650px) {
    #dashboard .dashboard-student-hero {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    #dashboard .dashboard-hero-widget {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    #dashboard .dashboard-hero-widget .btn-primary {
        width: 100% !important;
        justify-self: stretch !important;
    }

    #dashboard .dashboard-hero-actions {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    #dashboard .dashboard-hero-actions button {
        white-space: normal !important;
    }

    #dashboard .starter-card .dashboard-steps li {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    #dashboard .starter-card .dashboard-steps li button {
        grid-column: 2 !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 88px !important;
    }
}

/* FINAL OVERRIDE: contraste legible en modo claro */
body.light-theme {
    color: #0f172a !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #backpack .library-resource-card,
body.light-theme #subjects .subject-card,
body.light-theme #tasks .task-card,
body.light-theme #backpack .resource-card,
body.light-theme .subject-detail-card {
    background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1) !important;
}

body.light-theme #subjects .subject-space-card *,
body.light-theme #tasks .task-card-modern *,
body.light-theme #backpack .library-resource-card *,
body.light-theme #subjects .subject-card *,
body.light-theme #tasks .task-card *,
body.light-theme #backpack .resource-card *,
body.light-theme .subject-detail-card * {
    text-shadow: none !important;
}

body.light-theme #subjects .subject-title h3,
body.light-theme #subjects .subject-card h3,
body.light-theme #tasks .task-title-row h4,
body.light-theme #tasks .task-card h4,
body.light-theme #backpack .library-resource-card h4,
body.light-theme #backpack .resource-card h4,
body.light-theme #backpack .resource-title,
body.light-theme .subject-detail-hero h3,
body.light-theme .subject-detail-columns h4,
body.light-theme .subject-detail-columns p strong {
    color: #0f172a !important;
    opacity: 1 !important;
}

body.light-theme #subjects .subject-title p,
body.light-theme #subjects .subject-card-footer p,
body.light-theme #subjects .subject-metric-grid span,
body.light-theme #tasks .task-description,
body.light-theme #tasks .task-meta-grid span,
body.light-theme #tasks .task-reminder-alert,
body.light-theme #backpack .resource-description,
body.light-theme #backpack .resource-type,
body.light-theme #backpack .resource-data span,
body.light-theme .subject-detail-hero p,
body.light-theme .subject-detail-columns p,
body.light-theme .subject-detail-columns span {
    color: #334155 !important;
    opacity: 1 !important;
}

body.light-theme #subjects .subject-card-footer,
body.light-theme #subjects .subject-metric-grid div,
body.light-theme #tasks .task-meta-grid span,
body.light-theme #tasks .task-summary-strip div,
body.light-theme #tasks .task-reminder-alert,
body.light-theme #backpack .resource-data span,
body.light-theme #backpack .resource-status,
body.light-theme .subject-detail-stats div,
body.light-theme .subject-detail-columns section {
    background: rgba(255, 255, 255, 0.82) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

body.light-theme #subjects .subject-chip,
body.light-theme #backpack .resource-subject-chip,
body.light-theme #backpack .resource-status,
body.light-theme #tasks .task-status,
body.light-theme #tasks .task-priority,
body.light-theme #tasks [class*="priority"],
body.light-theme #tasks [class*="status"],
body.light-theme #tasks [class*="badge"],
body.light-theme #tasks [class*="chip"],
body.light-theme #tasks [class*="tag"],
body.light-theme #backpack [class*="chip"],
body.light-theme #backpack [class*="badge"],
body.light-theme #backpack [class*="status"],
body.light-theme #subjects [class*="chip"],
body.light-theme #subjects [class*="badge"] {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    opacity: 1 !important;
}

body.light-theme #tasks .task-priority.high,
body.light-theme #tasks .task-status.status-overdue {
    color: #be185d !important;
    background: rgba(252, 231, 243, 0.95) !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
}

body.light-theme #tasks .task-priority.medium,
body.light-theme #tasks .task-status.status-upcoming {
    color: #92400e !important;
    background: rgba(254, 243, 199, 0.95) !important;
    border-color: rgba(245, 158, 11, 0.34) !important;
}

body.light-theme #tasks .task-priority.low,
body.light-theme #tasks .task-status.status-completed,
body.light-theme #backpack .resource-status.used {
    color: #047857 !important;
    background: rgba(209, 250, 229, 0.95) !important;
    border-color: rgba(16, 185, 129, 0.34) !important;
}

body.light-theme #tasks .task-priority.normal,
body.light-theme #tasks .task-status.status-pending,
body.light-theme #backpack .resource-status.new,
body.light-theme #backpack .resource-status.pending {
    color: #0369a1 !important;
    background: rgba(224, 242, 254, 0.95) !important;
    border-color: rgba(14, 165, 233, 0.34) !important;
}

body.light-theme #subjects .card-actions .btn-secondary,
body.light-theme #tasks .task-actions .btn-secondary,
body.light-theme #backpack .resource-actions .btn-secondary,
body.light-theme #calendar .google-calendar-btn,
body.light-theme #calendar .event-item.event-custom .card-actions button,
body.light-theme #calendar .event-custom .card-actions button,
body.light-theme .btn-secondary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1e293b !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
    opacity: 1 !important;
}

body.light-theme #subjects .card-actions .btn-secondary:hover,
body.light-theme #tasks .task-actions .btn-secondary:hover,
body.light-theme #backpack .resource-actions .btn-secondary:hover,
body.light-theme #calendar .google-calendar-btn:hover,
body.light-theme .btn-secondary:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(14, 165, 233, 0.6) !important;
}

body.light-theme #subjects .card-actions .btn-primary,
body.light-theme #tasks .task-actions .btn-primary,
body.light-theme #backpack .resource-actions .btn-primary,
body.light-theme .btn-primary,
body.light-theme button.complete-btn,
body.light-theme button[class*="complete"] {
    color: #ffffff !important;
}

body.light-theme #subjects .card-actions .btn-danger,
body.light-theme #tasks .task-actions .btn-danger,
body.light-theme #backpack .resource-actions .btn-danger,
body.light-theme .btn-danger,
body.light-theme .danger-btn,
body.light-theme .delete-btn {
    background: rgba(252, 231, 243, 0.94) !important;
    color: #be185d !important;
    border-color: rgba(236, 72, 153, 0.38) !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

body.light-theme option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* FINAL OVERRIDE: cobertura completa de contraste en modo claro sin tocar modo oscuro */
body.light-theme {
    --text-main: #0f172a;
    --text-normal: #1e293b;
    --text-muted: #475569;
    --text-soft: #64748b;
    --light-card-bg: rgba(255, 255, 255, 0.92);
    --light-card-border: rgba(15, 23, 42, 0.12);
    color: var(--text-main) !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .section-header h2,
body.light-theme .page-title,
body.light-theme .card-title {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

body.light-theme .section-header p,
body.light-theme .page-subtitle,
body.light-theme .card-subtitle,
body.light-theme .muted-text,
body.light-theme .description {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body.light-theme #subjects .subject-space-card,
body.light-theme #subjects .subject-card,
body.light-theme #tasks .task-card-modern,
body.light-theme #tasks .task-card,
body.light-theme #backpack .library-resource-card,
body.light-theme #backpack .resource-card,
body.light-theme .subject-detail-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    color: var(--text-main) !important;
    border-color: var(--light-card-border) !important;
}

body.light-theme #subjects .subject-space-card p,
body.light-theme #subjects .subject-space-card span,
body.light-theme #subjects .subject-card p,
body.light-theme #subjects .subject-card span,
body.light-theme #tasks .task-card-modern p,
body.light-theme #tasks .task-card-modern span,
body.light-theme #tasks .task-card p,
body.light-theme #tasks .task-card span,
body.light-theme #backpack .library-resource-card p,
body.light-theme #backpack .library-resource-card span,
body.light-theme #backpack .resource-card p,
body.light-theme #backpack .resource-card span,
body.light-theme .subject-detail-card p,
body.light-theme .subject-detail-card span {
    color: var(--text-normal) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body.light-theme #subjects .subject-title h3,
body.light-theme #subjects .subject-card h3,
body.light-theme #subjects .subject-metric-grid strong,
body.light-theme #subjects .subject-card-footer strong,
body.light-theme #tasks .task-title-row h4,
body.light-theme #tasks .task-meta-grid strong,
body.light-theme #tasks .task-summary-strip strong,
body.light-theme #backpack .library-resource-card h4,
body.light-theme #backpack .resource-card h4,
body.light-theme .subject-detail-hero h3,
body.light-theme .subject-detail-stats strong,
body.light-theme .subject-detail-columns h4,
body.light-theme .subject-detail-columns p strong {
    color: var(--text-main) !important;
    opacity: 1 !important;
}

body.light-theme #subjects .subject-title p,
body.light-theme #subjects .subject-progress-block span,
body.light-theme #subjects .subject-metric-grid span,
body.light-theme #subjects .subject-card-footer p,
body.light-theme #tasks .task-description,
body.light-theme #tasks .task-meta-grid span,
body.light-theme #tasks .task-summary-strip span,
body.light-theme #backpack .resource-type,
body.light-theme #backpack .resource-description,
body.light-theme #backpack .resource-data span,
body.light-theme .subject-detail-hero p,
body.light-theme .subject-detail-stats span,
body.light-theme .subject-detail-columns p,
body.light-theme .subject-detail-columns p span {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

body.light-theme #subjects .subject-metric-grid div,
body.light-theme #subjects .subject-card-footer,
body.light-theme #tasks .task-meta-grid span,
body.light-theme #tasks .task-summary-strip div,
body.light-theme #tasks .task-reminder-alert,
body.light-theme #backpack .resource-data span,
body.light-theme #backpack .resource-status,
body.light-theme .subject-detail-stats div,
body.light-theme .subject-detail-columns section,
body.light-theme .subject-info,
body.light-theme .activity-info,
body.light-theme .next-info {
    background: var(--light-card-bg) !important;
    border: 1px solid var(--light-card-border) !important;
    color: var(--text-normal) !important;
    opacity: 1 !important;
}

body.light-theme #subjects .subject-chip,
body.light-theme #subjects .subject-badge,
body.light-theme #subjects .subject-color-badge,
body.light-theme #tasks .task-status,
body.light-theme #tasks .task-priority,
body.light-theme #backpack .resource-subject-chip,
body.light-theme #backpack .resource-status,
body.light-theme .chip,
body.light-theme .badge,
body.light-theme .tag,
body.light-theme .pill,
body.light-theme .task-chip,
body.light-theme .resource-chip,
body.light-theme .priority-badge,
body.light-theme .status-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-theme #tasks .task-priority.high,
body.light-theme #tasks .task-card-modern.priority-high .task-priority,
body.light-theme #tasks .task-status.status-overdue,
body.light-theme .priority-high {
    color: #b91c1c !important;
    background: rgba(254, 226, 226, 0.95) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

body.light-theme #tasks .task-priority.medium,
body.light-theme #tasks .task-card-modern.priority-medium .task-priority,
body.light-theme #tasks .task-status.status-upcoming,
body.light-theme .priority-medium {
    color: #92400e !important;
    background: rgba(254, 243, 199, 0.95) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

body.light-theme #tasks .task-priority.low,
body.light-theme #tasks .task-card-modern.priority-low .task-priority,
body.light-theme #tasks .task-status.status-completed,
body.light-theme #backpack .resource-status.used,
body.light-theme .priority-low {
    color: #047857 !important;
    background: rgba(209, 250, 229, 0.95) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

body.light-theme #tasks .task-priority.normal,
body.light-theme #tasks .task-card-modern.priority-normal .task-priority,
body.light-theme #tasks .task-status.status-pending,
body.light-theme #backpack .resource-status.new,
body.light-theme #backpack .resource-status.pending {
    color: #0369a1 !important;
    background: rgba(224, 242, 254, 0.95) !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
}

body.light-theme #progress .student-path,
body.light-theme #progress .progress-path {
    color: var(--text-main) !important;
}

body.light-theme #progress .path-step,
body.light-theme .level-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--light-card-border) !important;
    color: var(--text-main) !important;
}

body.light-theme #progress .path-step *,
body.light-theme .level-card * {
    color: var(--text-main) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-theme #progress .path-step span,
body.light-theme .level-number {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
}

body.light-theme #progress .path-step small,
body.light-theme .level-label,
body.light-theme .level-card p {
    color: var(--text-muted) !important;
}

body.light-theme .btn-secondary,
body.light-theme .edit-btn,
body.light-theme .calendar-btn,
body.light-theme .view-btn,
body.light-theme .ask-tutor-btn,
body.light-theme #subjects .card-actions .btn-secondary,
body.light-theme #tasks .task-actions .btn-secondary,
body.light-theme #backpack .resource-actions .btn-secondary,
body.light-theme #calendar .google-calendar-btn {
    color: var(--text-normal) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-theme .btn-secondary:hover,
body.light-theme .edit-btn:hover,
body.light-theme .calendar-btn:hover,
body.light-theme .view-btn:hover,
body.light-theme .ask-tutor-btn:hover,
body.light-theme #calendar .google-calendar-btn:hover {
    color: var(--text-main) !important;
    background: #ffffff !important;
}

body.light-theme .btn-danger,
body.light-theme .delete-btn,
body.light-theme .danger-btn,
body.light-theme #subjects .card-actions .btn-danger,
body.light-theme #tasks .task-actions .btn-danger,
body.light-theme #backpack .resource-actions .btn-danger {
    color: #be185d !important;
    background: rgba(252, 231, 243, 0.94) !important;
    border: 1px solid rgba(236, 72, 153, 0.38) !important;
    text-shadow: none !important;
}

body.light-theme button.btn-primary,
body.light-theme button.primary-btn,
body.light-theme button.complete-btn,
body.light-theme button[class*="complete"] {
    color: #ffffff !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: var(--text-soft) !important;
    opacity: 1 !important;
}

/* Fix: contraste de la tarjeta Mi progreso en modo claro */
body.light-mode .progress-card,
body.light-theme .progress-card,
[data-theme="light"] .progress-card,
body.light-mode #dashboard .dashboard-progress-card,
body.light-theme #dashboard .dashboard-progress-card,
[data-theme="light"] #dashboard .dashboard-progress-card {
    color: #0f172a !important;
}

body.light-mode .progress-card h2,
body.light-mode .progress-card h3,
body.light-mode .progress-card p,
body.light-mode .progress-card span,
body.light-theme .progress-card h2,
body.light-theme .progress-card h3,
body.light-theme .progress-card p,
body.light-theme .progress-card span,
[data-theme="light"] .progress-card h2,
[data-theme="light"] .progress-card h3,
[data-theme="light"] .progress-card p,
[data-theme="light"] .progress-card span,
body.light-mode #dashboard .dashboard-progress-card h2,
body.light-mode #dashboard .dashboard-progress-card h3,
body.light-mode #dashboard .dashboard-progress-card p,
body.light-mode #dashboard .dashboard-progress-card span,
body.light-theme #dashboard .dashboard-progress-card h2,
body.light-theme #dashboard .dashboard-progress-card h3,
body.light-theme #dashboard .dashboard-progress-card p,
body.light-theme #dashboard .dashboard-progress-card span,
[data-theme="light"] #dashboard .dashboard-progress-card h2,
[data-theme="light"] #dashboard .dashboard-progress-card h3,
[data-theme="light"] #dashboard .dashboard-progress-card p,
[data-theme="light"] #dashboard .dashboard-progress-card span {
    color: #0f172a !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-mode .progress-ring,
body.light-mode .progress-circle,
body.light-mode .progress-percent,
body.light-mode .progress-label,
body.light-theme .progress-ring,
body.light-theme .progress-circle,
body.light-theme .progress-percent,
body.light-theme .progress-label,
[data-theme="light"] .progress-ring,
[data-theme="light"] .progress-circle,
[data-theme="light"] .progress-percent,
[data-theme="light"] .progress-label,
body.light-mode #dashboard .dashboard-xp-ring,
body.light-mode #dashboard .dashboard-xp-ring span,
body.light-mode #dashboard .dashboard-xp-ring small,
body.light-theme #dashboard .dashboard-xp-ring,
body.light-theme #dashboard .dashboard-xp-ring span,
body.light-theme #dashboard .dashboard-xp-ring small,
[data-theme="light"] #dashboard .dashboard-xp-ring,
[data-theme="light"] #dashboard .dashboard-xp-ring span,
[data-theme="light"] #dashboard .dashboard-xp-ring small {
    color: #0f172a !important;
    fill: #0f172a !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-mode #dashboard .dashboard-progress-details strong,
body.light-theme #dashboard .dashboard-progress-details strong,
[data-theme="light"] #dashboard .dashboard-progress-details strong {
    color: #0f172a !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-mode #dashboard .dashboard-progress-details > span,
body.light-theme #dashboard .dashboard-progress-details > span,
[data-theme="light"] #dashboard .dashboard-progress-details > span {
    color: #334155 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.light-mode .progress-card .badge,
body.light-mode .progress-card .chip,
body.light-mode .progress-card .achievement-badge,
body.light-theme .progress-card .badge,
body.light-theme .progress-card .chip,
body.light-theme .progress-card .achievement-badge,
[data-theme="light"] .progress-card .badge,
[data-theme="light"] .progress-card .chip,
[data-theme="light"] .progress-card .achievement-badge,
body.light-mode #dashboard .dashboard-progress-card .badge,
body.light-mode #dashboard .dashboard-progress-card .chip,
body.light-mode #dashboard .dashboard-progress-card .achievement-badge,
body.light-mode #dashboard .dashboard-achievements span,
body.light-theme #dashboard .dashboard-progress-card .badge,
body.light-theme #dashboard .dashboard-progress-card .chip,
body.light-theme #dashboard .dashboard-progress-card .achievement-badge,
body.light-theme #dashboard .dashboard-achievements span,
[data-theme="light"] #dashboard .dashboard-progress-card .badge,
[data-theme="light"] #dashboard .dashboard-progress-card .chip,
[data-theme="light"] #dashboard .dashboard-progress-card .achievement-badge,
[data-theme="light"] #dashboard .dashboard-achievements span {
    color: #065f46 !important;
    background: rgba(209, 250, 229, 0.95) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Fix: centro del circulo de progreso en modo claro */
body.light-mode .progress-ring,
body.light-theme .progress-ring,
[data-theme="light"] .progress-ring {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 0 0 10px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode .progress-ring::before,
body.light-theme .progress-ring::before,
[data-theme="light"] .progress-ring::before {
    background: rgba(255, 255, 255, 0.96) !important;
}

body.light-mode #dashboard .dashboard-xp-ring,
body.light-theme #dashboard .dashboard-xp-ring,
[data-theme="light"] #dashboard .dashboard-xp-ring {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 55%, transparent 56%),
        conic-gradient(var(--dash-blue) var(--xp, 0%), rgba(15, 23, 42, 0.08) 0) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 16px 34px rgba(56, 189, 248, 0.14) !important;
}

body.light-mode .progress-center,
body.light-mode .progress-donut-center,
body.light-mode .progress-circle-center,
body.light-theme .progress-center,
body.light-theme .progress-donut-center,
body.light-theme .progress-circle-center,
[data-theme="light"] .progress-center,
[data-theme="light"] .progress-donut-center,
[data-theme="light"] .progress-circle-center {
    background: #ffffff !important;
    color: #0f172a !important;
}

body.light-mode .progress-percent,
body.light-theme .progress-percent,
[data-theme="light"] .progress-percent,
body.light-mode #dashboard .dashboard-xp-ring span,
body.light-theme #dashboard .dashboard-xp-ring span,
[data-theme="light"] #dashboard .dashboard-xp-ring span {
    color: #0f172a !important;
    fill: #0f172a !important;
    text-shadow: none !important;
}

body.light-mode .progress-label,
body.light-theme .progress-label,
[data-theme="light"] .progress-label,
body.light-mode #dashboard .dashboard-xp-ring small,
body.light-theme #dashboard .dashboard-xp-ring small,
[data-theme="light"] #dashboard .dashboard-xp-ring small {
    color: #2563eb !important;
    fill: #2563eb !important;
    text-shadow: none !important;
}

/* Fix: Mochila Digital resource cards */
#backpack .resource-card,
#backpack .library-resource-card,
.resource-card,
.backpack-card,
.file-card,
.note-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#backpack .resource-card *,
#backpack .library-resource-card *,
.resource-card *,
.backpack-card *,
.file-card *,
.note-card * {
    box-sizing: border-box !important;
}

#backpack .resource-top,
#backpack .library-resource-card .resource-top {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#backpack .resource-info {
    min-width: 0 !important;
}

#backpack .resource-info h4,
#backpack .resource-info p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

#backpack .resource-icon,
#backpack .file-icon,
#backpack .pdf-icon,
#backpack .backpack-icon,
.resource-icon,
.file-icon,
.pdf-icon,
.backpack-icon {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 56px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
}

#backpack .resource-icon img,
#backpack .file-icon img,
#backpack .pdf-icon img,
#backpack .backpack-icon img,
.resource-icon img,
.file-icon img,
.pdf-icon img,
.backpack-icon img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    display: block !important;
}

#backpack .resource-icon.resource-pdf-icon::before,
#backpack .library-resource-card .resource-icon.resource-pdf-icon::before {
    content: "PDF" !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    transform: none !important;
    box-shadow: none !important;
}

#backpack .resource-icon.resource-pdf-icon::after,
#backpack .library-resource-card .resource-icon.resource-pdf-icon::after {
    content: "" !important;
    display: none !important;
}

#backpack .resource-actions,
#backpack .library-resource-card .resource-actions,
.resource-actions,
.backpack-actions,
.file-actions,
.note-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
    padding: 14px 0 0 !important;
    overflow: hidden !important;
}

#backpack .resource-actions button,
#backpack .library-resource-card .resource-actions button,
.resource-actions button,
.backpack-actions button,
.file-actions button,
.note-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

/* Fix: layout definitivo de acciones en tarjetas de Mochila Digital */
#backpack .library-resource-card > .resource-actions.resource-actions-grid,
#backpack .resource-card > .resource-actions.resource-actions-grid,
#backpack .library-resource-card > .resource-actions,
#backpack .resource-card > .resource-actions,
.resource-actions.resource-actions-grid,
.resource-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid > button,
#backpack .resource-card > .resource-actions.resource-actions-grid > button,
#backpack .library-resource-card > .resource-actions > button,
#backpack .resource-card > .resource-actions > button,
.resource-actions.resource-actions-grid > button,
.resource-actions > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    flex: initial !important;
    flex-basis: auto !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid > button:nth-child(1),
#backpack .resource-card > .resource-actions.resource-actions-grid > button:nth-child(1),
.resource-actions.resource-actions-grid > button:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid > button:nth-child(2),
#backpack .resource-card > .resource-actions.resource-actions-grid > button:nth-child(2),
.resource-actions.resource-actions-grid > button:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid > button:nth-child(3),
#backpack .resource-card > .resource-actions.resource-actions-grid > button:nth-child(3),
.resource-actions.resource-actions-grid > button:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid > button:nth-child(4),
#backpack .resource-card > .resource-actions.resource-actions-grid > button:nth-child(4),
.resource-actions.resource-actions-grid > button:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

#backpack .resource-card,
#backpack .library-resource-card,
.resource-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#backpack .resource-icon,
#backpack .pdf-icon,
.resource-icon,
.pdf-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#backpack .pdf-icon span,
#backpack .pdf-icon strong,
.pdf-icon span,
.pdf-icon strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
}

#backpack .pdf-icon::before,
#backpack .pdf-icon::after {
    content: none !important;
    display: none !important;
}

/* Fix: orden y ajuste de acciones en tarjetas de Tareas */
#tasks .task-card-modern,
#tasks .task-card,
.task-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

#tasks .task-card-modern *,
#tasks .task-card *,
.task-card * {
    box-sizing: border-box !important;
}

#tasks .task-card-modern > .task-actions,
#tasks .task-card > .task-actions,
#tasks .task-actions,
.task-actions {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
    padding: 14px 0 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

#tasks .task-actions.has-complete,
.task-actions.has-complete {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#tasks .task-actions.no-complete,
.task-actions.no-complete {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#tasks .task-actions button,
.task-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    flex: initial !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.9rem !important;
}

#tasks .task-actions .delete-btn,
#tasks .task-actions .danger-btn,
#tasks .task-actions .btn-danger,
#tasks .task-actions [data-task-delete],
.task-actions .delete-btn,
.task-actions .danger-btn,
.task-actions .btn-danger,
.task-actions [data-task-delete] {
    grid-column: 1 / -1 !important;
}

.task-card-actions {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

.task-card-actions.has-complete {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.task-card-actions.no-complete {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.task-card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 8px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.task-card-actions button:last-child {
    grid-column: 1 / -1 !important;
}

.task-card,
.task-card-modern {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fix: sidebar icons glassmorphism */
.sidebar .sidebar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    text-align: center !important;
}

.sidebar .sidebar-logo .brand-logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 15px !important;
    padding: 4px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, #6366f1, #38bdf8, #ec4899) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 14px 28px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    filter: none !important;
}

.sidebar .sidebar-logo span {
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.sidebar .nav-item {
    align-items: center !important;
    gap: 12px !important;
}

.sidebar .nav-icon {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sidebar-icon-a, #6366f1), var(--sidebar-icon-b, #38bdf8), var(--sidebar-icon-c, #ec4899)) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    transform: translateZ(0) !important;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

.sidebar .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 44%) !important;
    pointer-events: none !important;
}

.sidebar .nav-icon::before {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transform: none !important;
    text-shadow: 0 2px 10px rgba(15, 23, 42, 0.34) !important;
}

.sidebar .nav-icon-menu { --sidebar-icon-a: #0ea5e9; --sidebar-icon-b: #38bdf8; --sidebar-icon-c: #6366f1; }
.sidebar .nav-icon-subjects { --sidebar-icon-a: #10b981; --sidebar-icon-b: #38bdf8; --sidebar-icon-c: #22c55e; }
.sidebar .nav-icon-tasks { --sidebar-icon-a: #7c3aed; --sidebar-icon-b: #a855f7; --sidebar-icon-c: #38bdf8; }
.sidebar .nav-icon-calendar { --sidebar-icon-a: #2563eb; --sidebar-icon-b: #38bdf8; --sidebar-icon-c: #06b6d4; }
.sidebar .nav-icon-grades { --sidebar-icon-a: #ec4899; --sidebar-icon-b: #38bdf8; --sidebar-icon-c: #6366f1; }
.sidebar .nav-icon-attendance { --sidebar-icon-a: #16a34a; --sidebar-icon-b: #22c55e; --sidebar-icon-c: #0ea5e9; }
.sidebar .nav-icon-tutor { --sidebar-icon-a: #06b6d4; --sidebar-icon-b: #6366f1; --sidebar-icon-c: #a855f7; }
.sidebar .nav-icon-progress { --sidebar-icon-a: #f59e0b; --sidebar-icon-b: #facc15; --sidebar-icon-c: #7c3aed; }
.sidebar .nav-icon-backpack { --sidebar-icon-a: #7c3aed; --sidebar-icon-b: #ec4899; --sidebar-icon-c: #38bdf8; }
.sidebar .nav-icon-profile { --sidebar-icon-a: #2563eb; --sidebar-icon-b: #6366f1; --sidebar-icon-c: #a855f7; }

.sidebar .nav-icon-menu::before { content: "\25F0" !important; }
.sidebar .nav-icon-subjects::before { content: "\1F4DA" !important; font-size: 16px !important; }
.sidebar .nav-icon-tasks::before { content: "\2713" !important; font-size: 20px !important; }
.sidebar .nav-icon-calendar::before { content: "\1F4C5" !important; font-size: 16px !important; }
.sidebar .nav-icon-grades::before { content: "\25F2" !important; font-size: 18px !important; }
.sidebar .nav-icon-attendance::before { content: "\2714" !important; font-size: 18px !important; }
.sidebar .nav-icon-tutor::before { content: "AI" !important; font-size: 12px !important; letter-spacing: 0.04em !important; }
.sidebar .nav-icon-progress::before { content: "\2605" !important; font-size: 18px !important; }
.sidebar .nav-icon-backpack::before { content: "\1F4C1" !important; font-size: 16px !important; }
.sidebar .nav-icon-profile::before { content: "\25CF" !important; font-size: 16px !important; }

.sidebar .nav-item:hover .nav-icon {
    transform: translateY(-1px) scale(1.03) !important;
    filter: brightness(1.08) saturate(1.08) !important;
}

.sidebar .nav-item.active .nav-icon {
    transform: scale(1.04) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.55), 0 0 28px rgba(236, 72, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.sidebar .theme-toggle,
.sidebar-theme {
    position: relative !important;
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.26), rgba(56, 189, 248, 0.16)),
        rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.16) !important;
}

.sidebar .theme-toggle::before,
.sidebar-theme::before {
    content: "\263E" !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #1d4ed8, #38bdf8, #7c3aed) !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.light-theme .sidebar .theme-toggle::before,
body.light-theme .sidebar-theme::before,
.sidebar .theme-toggle.is-light::before,
.sidebar-theme.is-light::before {
    content: "\2600" !important;
    background: linear-gradient(135deg, #f59e0b, #facc15, #38bdf8) !important;
}

body.light-theme .sidebar .nav-item {
    color: #334155 !important;
}

body.light-theme .sidebar .nav-icon {
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

body.light-theme .sidebar .nav-item.active .nav-icon {
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.38), 0 0 28px rgba(236, 72, 153, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

@media (max-width: 760px) {
}

@media (max-width: 520px) {
}

@media (max-width: 520px) {
}

#landing-page .hero-widget-mini .mini-card-icon {
    width: clamp(56px, 6vw, 64px) !important;
    height: clamp(56px, 6vw, 64px) !important;
    min-width: clamp(56px, 6vw, 64px) !important;
    margin: 8px 0 10px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, var(--widget-a), var(--widget-b), var(--widget-c)) !important;
    box-shadow: 0 14px 28px var(--widget-shadow, rgba(56, 189, 248, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#landing-page .hero-widget-mini .mini-card-icon svg {
    width: clamp(34px, 4vw, 42px) !important;
    height: clamp(34px, 4vw, 42px) !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.25 !important;
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.24)) !important;
}

#landing-page .hero-widget-mini .mini-card-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
}

#landing-page .hero-widget-mini .mini-card-copy strong {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    font-size: clamp(0.9rem, 1.35vw, 1rem) !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#landing-page .hero-widget-mini .mini-card-copy small {
    display: none !important;
}

#landing-page .hero-widget-mini .mini-card-indicator {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    grid-column: auto !important;
    min-width: 32px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, var(--widget-a), var(--widget-b), var(--widget-c)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 8px 18px var(--widget-shadow, rgba(56, 189, 248, 0.18)) !important;
}

#landing-page .hero-widget-mini::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 12px 12px 12px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--widget-a), var(--widget-b), var(--widget-c)) !important;
    opacity: 0.82 !important;
}

body.light-theme #landing-page .hero-widget-mini .mini-card-copy strong {
    color: #0f172a !important;
}

@keyframes heroWidgetFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

@media (max-width: 980px) {
}

@media (max-width: 520px) {

    #landing-page .hero-widget-mini .mini-card-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    #landing-page .hero-widget-mini .mini-card-icon svg {
        width: 32px !important;
        height: 32px !important;
    }

    #landing-page .hero-widget-mini .mini-card-indicator {
        top: 9px !important;
        right: 9px !important;
        height: 21px !important;
        min-width: 28px !important;
        font-size: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
}

/* Sidebar profesional: iconos SVG monocromaticos y uniformes */
.sidebar .sidebar-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25) !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: 0 !important;
}

.sidebar .sidebar-icon::before,
.sidebar .sidebar-icon::after {
    content: none !important;
    display: none !important;
}

.sidebar .sidebar-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}

.sidebar .sidebar-icon-subjects,
.sidebar .sidebar-icon-calendar,
.sidebar .sidebar-icon-backpack {
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
}

.sidebar .sidebar-icon-tasks,
.sidebar .sidebar-icon-attendance {
    background: linear-gradient(135deg, #0f766e, #22c55e) !important;
}

.sidebar .sidebar-icon-grades,
.sidebar .sidebar-icon-progress {
    background: linear-gradient(135deg, #7c3aed, #38bdf8) !important;
}

.sidebar .sidebar-icon-tutor,
.sidebar .sidebar-icon-profile {
    background: linear-gradient(135deg, #6d5dfc, #06b6d4) !important;
}

.sidebar .nav-item {
    align-items: center !important;
}

.sidebar .nav-item.active .sidebar-icon,
.sidebar .nav-item:hover .sidebar-icon {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.34) !important;
}

.theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.theme-toggle svg {
    width: 19px !important;
    height: 19px !important;
    stroke: #ffffff !important;
    stroke-width: 2.15 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    position: relative !important;
    z-index: 2 !important;
}

.theme-toggle::before,
.theme-toggle::after,
.sidebar .theme-toggle::before,
.sidebar-theme::before,
.sidebar .theme-toggle::after,
.sidebar-theme::after {
    content: none !important;
    display: none !important;
}

body.light-theme .theme-toggle svg {
    stroke: #0f172a !important;
}

body.light-theme .sidebar .sidebar-icon {
    border-color: rgba(37, 99, 235, 0.16) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20) !important;
}

/* Iconos profesionales centrados en tarjetas, materias, recursos y dashboard */
.card-icon,
.stat-icon,
.summary-icon,
.dashboard-icon,
.subject-icon,
.resource-icon,
.material-icon,
.panel-icon,
.app-icon,
.hero-widget-icon,
.profile-stat-icon {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 0 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, var(--card-accent, #2563eb), #38bdf8) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--card-accent, #38bdf8), transparent 72%) !important;
}

.card-icon *,
.stat-icon *,
.summary-icon *,
.dashboard-icon *,
.subject-icon *,
.resource-icon *,
.material-icon *,
.panel-icon *,
.app-icon *,
.hero-widget-icon *,
.profile-stat-icon * {
    transform: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.card-icon svg,
.stat-icon svg,
.summary-icon svg,
.dashboard-icon svg,
.subject-icon svg,
.resource-icon svg,
.material-icon svg,
.panel-icon svg,
.app-icon svg,
.hero-widget-icon svg,
.profile-stat-icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    margin: auto !important;
    transform: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.card-icon::before,
.card-icon::after,
.stat-icon::before,
.stat-icon::after,
.summary-icon::before,
.summary-icon::after,
.dashboard-icon::before,
.dashboard-icon::after,
.subject-icon::before,
.subject-icon::after,
.resource-icon::before,
.resource-icon::after,
.material-icon::before,
.material-icon::after,
.panel-icon::before,
.panel-icon::after,
.app-icon::before,
.app-icon::after,
.hero-widget-icon::before,
.hero-widget-icon::after,
.profile-stat-icon::before,
.profile-stat-icon::after {
    content: none !important;
    display: none !important;
}

#subjects .subject-icon,
#subjects .subject-symbol,
.subject-detail-card .subject-icon,
.subject-detail-hero .subject-icon,
.subject-detail-hero .subject-symbol {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
}

#backpack .resource-icon,
#backpack .pdf-icon,
#backpack .resource-icon.resource-pdf-icon,
#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar .sidebar-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 12px !important;
}

.sidebar .sidebar-icon svg {
    width: 18px !important;
    height: 18px !important;
}

#dashboard .stat-icon::before,
#dashboard .stat-icon::after,
#dashboard .panel-icon::before,
#dashboard .panel-icon::after,
#subjects .subject-icon::before,
#subjects .subject-icon::after,
.subject-detail-card .subject-icon::before,
.subject-detail-card .subject-icon::after,
.subject-detail-hero .subject-icon::before,
.subject-detail-hero .subject-icon::after,
#backpack .resource-icon.resource-pdf-icon::before,
#backpack .resource-icon.resource-pdf-icon::after,
#backpack .library-resource-card .resource-icon.resource-pdf-icon::before,
#backpack .library-resource-card .resource-icon.resource-pdf-icon::after,
.sidebar .nav-icon::before,
.sidebar .nav-icon::after {
    content: none !important;
    display: none !important;
}

/* Landing: iconos SVG limpios para las tarjetas de Funciones */
#landing-page .benefits-grid .benefit-icon,
.benefits-grid .benefit-icon {
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    flex: 0 0 64px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 0 20px !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.86), rgba(56, 189, 248, 0.78)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 14px 32px rgba(56, 189, 248, 0.22) !important;
    transform: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
    color: #ffffff !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

#landing-page .benefits-grid .benefit-icon svg,
.benefits-grid .benefit-icon svg {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    margin: 0 !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
}

#landing-page .benefits-grid .benefit-icon *,
.benefits-grid .benefit-icon * {
    transform: none !important;
    rotate: 0deg !important;
    translate: 0 0 !important;
    margin: 0 !important;
}

#landing-page .benefits-grid .benefit-icon::before,
#landing-page .benefits-grid .benefit-icon::after,
.benefits-grid .benefit-icon::before,
.benefits-grid .benefit-icon::after {
    content: none !important;
    display: none !important;
}

#landing-page .benefit-card:hover .benefit-icon,
.benefit-card:hover .benefit-icon {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 38px rgba(56, 189, 248, 0.28) !important;
}

body.light-theme #landing-page .benefits-grid .benefit-icon,
body.light-theme .benefits-grid .benefit-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(14, 165, 233, 0.82)) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18) !important;
}

/* Fondo tecnologico limpio para login, registro y recuperacion */
#login-page,
#register-page {
    position: relative !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 24%, rgba(99, 102, 241, 0.25), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.22), transparent 30%),
        radial-gradient(circle at 72% 86%, rgba(236, 72, 153, 0.16), transparent 34%),
        linear-gradient(135deg, #120b3f 0%, #0f172a 48%, #0b3b91 100%) !important;
}

#login-page .auth-container,
#register-page .auth-container {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: transparent !important;
}

#login-page .auth-container::before,
#register-page .auth-container::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px) !important;
    background-size: 90px 90px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.22)) !important;
    opacity: 0.72 !important;
    animation: authGridMove 22s linear infinite !important;
}

#login-page .auth-container::after,
#register-page .auth-container::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle, rgba(56, 189, 248, 0.55) 0 2px, transparent 3px) 10% 15% / 220px 220px,
        radial-gradient(circle, rgba(236, 72, 153, 0.35) 0 2px, transparent 3px) 35% 60% / 260px 260px,
        radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px) 70% 30% / 180px 180px,
        linear-gradient(120deg, transparent 0 42%, rgba(56, 189, 248, 0.10) 43%, transparent 44% 66%, rgba(124, 58, 237, 0.10) 67%, transparent 68%) !important;
    opacity: 0.42 !important;
    animation: authParticlesFloat 18s ease-in-out infinite alternate !important;
}

#login-page .auth-bg-scene,
#register-page .auth-bg-scene {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#login-page .auth-bg-scene::before,
#register-page .auth-bg-scene::before,
#login-page .auth-bg-scene::after,
#register-page .auth-bg-scene::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0.42 !important;
}

#login-page .auth-bg-scene::before,
#register-page .auth-bg-scene::before {
    width: min(520px, 48vw) !important;
    height: min(520px, 48vw) !important;
    left: -140px !important;
    bottom: -160px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle, rgba(56, 189, 248, 0.20), transparent 58%),
        conic-gradient(from 110deg, transparent 0 20%, rgba(56, 189, 248, 0.18) 21% 27%, transparent 28% 56%, rgba(236, 72, 153, 0.12) 57% 62%, transparent 63%) !important;
    filter: blur(1px) !important;
    animation: authCircuitPulse 14s ease-in-out infinite alternate !important;
}

#login-page .auth-bg-scene::after,
#register-page .auth-bg-scene::after {
    width: min(440px, 42vw) !important;
    height: min(440px, 42vw) !important;
    right: -120px !important;
    top: -130px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 60%),
        conic-gradient(from 280deg, transparent 0 28%, rgba(56, 189, 248, 0.16) 29% 34%, transparent 35% 70%, rgba(236, 72, 153, 0.10) 71% 76%, transparent 77%) !important;
    filter: blur(1px) !important;
    animation: authCircuitPulse 16s ease-in-out infinite alternate-reverse !important;
}

#login-page .auth-star,
#register-page .auth-star {
    width: 4px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(125, 211, 252, 0.78) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.78) !important;
    opacity: 0.58 !important;
    transform: none !important;
    animation: authPointBlink 4s ease-in-out infinite !important;
}

#login-page .auth-planet,
#register-page .auth-planet,
#login-page .auth-floating-card,
#register-page .auth-floating-card {
    display: none !important;
}

#login-page .auth-card,
#register-page .auth-card,
.password-modal-card {
    position: relative !important;
    z-index: 3 !important;
}

#login-page .auth-card::after,
#register-page .auth-card::after {
    display: none !important;
    content: none !important;
}

body.light-theme #login-page,
body.light-theme #register-page {
    background:
        radial-gradient(circle at 18% 24%, rgba(99, 102, 241, 0.16), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.16), transparent 30%),
        radial-gradient(circle at 72% 86%, rgba(236, 72, 153, 0.10), transparent 34%),
        linear-gradient(135deg, #eef2ff 0%, #e0f7ff 48%, #dbeafe 100%) !important;
}

body.light-theme #login-page .auth-container,
body.light-theme #register-page .auth-container {
    background: transparent !important;
}

@keyframes authGridMove {
    from { background-position: 0 0, 0 0; }
    to { background-position: 90px 90px, 90px 90px; }
}

@keyframes authParticlesFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(14px, -18px, 0); }
}

@keyframes authCircuitPulse {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.32; }
    to { transform: translate3d(18px, -12px, 0) scale(1.04); opacity: 0.52; }
}

@keyframes authPointBlink {
    0%, 100% { opacity: 0.28; transform: scale(0.86); }
    50% { opacity: 0.82; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    #login-page .auth-container::before,
    #register-page .auth-container::before,
    #login-page .auth-container::after,
    #register-page .auth-container::after,
    #login-page .auth-bg-scene::before,
    #register-page .auth-bg-scene::before,
    #login-page .auth-bg-scene::after,
    #register-page .auth-bg-scene::after,
    #login-page .auth-star,
    #register-page .auth-star {
        animation: none !important;
    }
}

/* Layout animado para login y registro */
#login-page .auth-container,
#register-page .auth-container {
    display: grid !important;
    place-items: center !important;
    padding: 48px 8vw !important;
}

.auth-layout {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 560px) !important;
    align-items: center !important;
    gap: 48px !important;
    width: min(1180px, 100%) !important;
    min-height: calc(100vh - 96px) !important;
}

.auth-visual {
    position: relative !important;
    min-height: 520px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#login-page .auth-card,
#register-page .auth-card {
    justify-self: end !important;
    width: min(560px, 100%) !important;
    max-width: 560px !important;
}

.tech-window {
    position: relative;
    width: min(480px, 100%);
    height: 350px;
    border-radius: 34px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.76)),
        radial-gradient(circle at 18% 25%, rgba(56, 189, 248, 0.18), transparent 36%);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 38px 90px rgba(2, 8, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    animation: authVisualFloat 7s ease-in-out infinite;
}

.tech-window::before {
    content: "";
    position: absolute;
    inset: 64px 32px 34px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(56, 189, 248, 0.08), transparent 42%),
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(148, 163, 184, 0.10) 47px 48px);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.window-top {
    position: absolute;
    inset: 0 0 auto;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    background: rgba(2, 8, 23, 0.26);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.window-top span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #fb7185;
    box-shadow: 0 0 18px rgba(251, 113, 133, 0.35);
}

.window-top span:nth-child(2) {
    background: #facc15;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.30);
}

.window-top span:nth-child(3) {
    background: #22c55e;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.30);
}

.profile-card-mini {
    position: absolute;
    left: 54px;
    top: 92px;
    width: 154px;
    height: 118px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.14);
}

.profile-card-mini::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 14px 30px rgba(73, 204, 249, 0.24);
}

.profile-card-mini::after {
    content: "";
    position: absolute;
    left: 82px;
    top: 28px;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    background:
        linear-gradient(#93c5fd 0 0) 0 0 / 100% 8px no-repeat,
        linear-gradient(#49ccf9 0 0) 0 18px / 78% 7px no-repeat,
        linear-gradient(#fd71af 0 0) 0 36px / 58% 7px no-repeat;
    opacity: 0.95;
}

.writing-line {
    position: absolute;
    left: 54px;
    right: 54px;
    bottom: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.writing-line::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 18px;
    height: 8px;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #49ccf9, #fd71af);
    box-shadow: 0 0 18px rgba(73, 204, 249, 0.34);
    animation: authWriteLine 4.8s ease-in-out infinite;
}

.writing-line::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 16px;
    width: 64%;
    height: 6px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.18);
}

.chart-line {
    position: absolute;
    right: 52px;
    top: 96px;
    width: 190px;
    height: 132px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, transparent 0 70%, rgba(73, 204, 249, 0.12) 71%),
        rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.chart-line::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 20px;
    bottom: 26px;
    height: 72px;
    clip-path: polygon(0 78%, 22% 52%, 42% 64%, 62% 26%, 82% 38%, 100% 10%, 100% 100%, 0 100%);
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.78), rgba(73, 204, 249, 0.88));
    transform-origin: left bottom;
    animation: authChartDraw 4.5s ease-in-out infinite;
}

.chart-line::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 20px;
    bottom: 22px;
    height: 3px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.22);
}

.floating-chat {
    position: absolute;
    width: 190px;
    height: 78px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.20);
    box-shadow: 0 24px 50px rgba(2, 8, 23, 0.24);
    animation: authChatFloat 6s ease-in-out infinite;
}

.floating-chat::before,
.floating-chat::after {
    content: "";
    position: absolute;
    left: 20px;
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.68);
}

.floating-chat::before {
    top: 24px;
    width: 112px;
}

.floating-chat::after {
    top: 44px;
    width: 78px;
    background: linear-gradient(90deg, #49ccf9, #fd71af);
}

.chat-one {
    left: 0;
    top: 70px;
}

.chat-two {
    right: 0;
    bottom: 70px;
    animation-delay: -2.6s;
}

.gear {
    position: absolute;
    left: 42px;
    bottom: 86px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 12px solid rgba(73, 204, 249, 0.68);
    box-shadow:
        inset 0 0 0 14px rgba(15, 23, 42, 0.82),
        0 18px 38px rgba(73, 204, 249, 0.20);
    animation: authGearSpin 10s linear infinite;
}

.gear::before {
    content: "";
    position: absolute;
    inset: -18px;
    background: conic-gradient(from 0deg, transparent 0 12deg, rgba(253, 113, 175, 0.78) 13deg 23deg, transparent 24deg 72deg, rgba(123, 104, 238, 0.78) 73deg 84deg, transparent 85deg 144deg, rgba(73, 204, 249, 0.78) 145deg 156deg, transparent 157deg 216deg, rgba(253, 113, 175, 0.72) 217deg 228deg, transparent 229deg);
    border-radius: 50%;
    z-index: -1;
}

.pencil {
    position: absolute;
    right: 86px;
    top: 44px;
    width: 104px;
    height: 18px;
    border-radius: 999px 4px 4px 999px;
    background:
        linear-gradient(90deg, #fd71af 0 18%, #ffc800 18% 76%, #f8fafc 76% 88%, #49ccf9 88%);
    box-shadow: 0 16px 34px rgba(253, 113, 175, 0.20);
    transform-origin: center;
    animation: authPencilWrite 5.2s ease-in-out infinite;
}

.pencil::after {
    content: "";
    position: absolute;
    right: -16px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 16px solid #e2e8f0;
}

@keyframes authVisualFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes authChatFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(10px, -14px, 0); }
}

@keyframes authGearSpin {
    to { transform: rotate(360deg); }
}

@keyframes authPencilWrite {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-10deg); }
    50% { transform: translate3d(-28px, 18px, 0) rotate(-10deg); }
}

@keyframes authWriteLine {
    0%, 12% { width: 0; }
    58%, 78% { width: 72%; }
    100% { width: 0; }
}

@keyframes authChartDraw {
    0%, 15% { transform: scaleX(0.1); opacity: 0.55; }
    55%, 82% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0.1); opacity: 0.55; }
}

body.light-theme .tech-window,
body.light-theme .floating-chat {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 32px 72px rgba(37, 99, 235, 0.14);
}

body.light-theme .profile-card-mini,
body.light-theme .writing-line,
body.light-theme .chart-line {
    background: rgba(255, 255, 255, 0.64);
    border-color: rgba(37, 99, 235, 0.16);
}

body.light-theme .floating-chat::before {
    background: rgba(30, 41, 59, 0.46);
}

@media (max-width: 980px) {
    #login-page .auth-container,
    #register-page .auth-container {
        padding: 32px 18px !important;
    }

    .auth-layout {
        grid-template-columns: 1fr !important;
        min-height: calc(100vh - 64px) !important;
        gap: 0 !important;
    }

    .auth-visual {
        display: none !important;
    }

    #login-page .auth-card,
    #register-page .auth-card {
        justify-self: center !important;
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-window,
    .floating-chat,
    .gear,
    .pencil,
    .writing-line::before,
    .chart-line::before {
        animation: none !important;
    }
}

/* Ilustracion auth realista: laptop limpia con dashboard educativo */
.auth-visual {
    position: relative !important;
    width: min(560px, 100%) !important;
    min-height: 560px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.auth-laptop {
    position: relative;
    width: min(470px, 100%);
    height: 330px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.35),
        0 0 45px rgba(56, 189, 248, 0.15);
    overflow: visible;
    animation: laptopFloat 6s ease-in-out infinite;
}

.laptop-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.laptop-screen::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(236, 72, 153, 0.08));
    background-size: 42px 42px, 42px 42px, auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.laptop-topbar {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.laptop-topbar::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 68px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #a78bfa);
    transform: translateY(-50%);
}

.laptop-topbar::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 92px;
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.18);
    transform: translateY(-50%);
}

.laptop-sidebar {
    position: absolute;
    left: 42px;
    top: 88px;
    width: 78px;
    height: 190px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.laptop-sidebar::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 20px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 12px 26px rgba(73, 204, 249, 0.20);
}

.laptop-sidebar::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 82px;
    height: 78px;
    border-radius: 999px;
    background:
        linear-gradient(rgba(226, 232, 240, 0.42) 0 0) 0 0 / 100% 7px no-repeat,
        linear-gradient(rgba(226, 232, 240, 0.24) 0 0) 0 24px / 82% 7px no-repeat,
        linear-gradient(rgba(226, 232, 240, 0.18) 0 0) 0 48px / 68% 7px no-repeat;
}

.laptop-card-main {
    position: absolute;
    left: 138px;
    top: 88px;
    width: 280px;
    height: 118px;
    border-radius: 22px;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.06);
}

.laptop-card-main::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 26px;
    width: 210px;
    height: 54px;
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    clip-path: polygon(0 85%, 20% 60%, 38% 72%, 55% 35%, 72% 52%, 100% 12%, 100% 100%, 0 100%);
    opacity: 0.9;
    transform-origin: left bottom;
    animation: laptopGraphPulse 4.8s ease-in-out infinite;
}

.laptop-card-main::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 24px;
    width: 120px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #ec4899);
}

.laptop-card-small {
    position: absolute;
    left: 138px;
    top: 224px;
    width: 130px;
    height: 64px;
    border-radius: 18px;
    background: rgba(30, 41, 59, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.laptop-card-small::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 78px;
    height: 8px;
    border-radius: 999px;
    background: #38bdf8;
}

.laptop-card-small::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 36px;
    width: 96px;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

.laptop-card-small.two {
    left: 288px;
}

.laptop-card-small.two::before {
    background: #fd71af;
}

.laptop-base {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: -32px;
    height: 42px;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(15, 23, 42, 0.90));
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.24);
}

.laptop-base::after {
    content: "";
    position: absolute;
    left: 36%;
    right: 36%;
    top: 10px;
    height: 6px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.34);
}

.auth-chat-bubble {
    position: absolute;
    width: 150px;
    min-height: 70px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    animation: bubbleFloat 5s ease-in-out infinite;
}

.auth-chat-bubble.one {
    top: 52px;
    left: -10px;
}

.auth-chat-bubble.two {
    right: -24px;
    bottom: 88px;
    animation-delay: -2s;
}

.auth-chat-bubble::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 22px;
    width: 92px;
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.75);
}

.auth-chat-bubble::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 42px;
    width: 112px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #ec4899);
}

.auth-gear {
    position: absolute;
    right: -10px;
    top: 96px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 8px dashed rgba(56, 189, 248, 0.75);
    animation: spinGear 8s linear infinite;
    opacity: 0.85;
}

.auth-gear::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.22);
}

.auth-pencil {
    position: absolute;
    left: 70px;
    bottom: 96px;
    width: 82px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #facc15 0 62%, #f8fafc 62% 78%, #38bdf8 78%);
    transform: rotate(-22deg);
    animation: pencilMove 3s ease-in-out infinite;
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.18);
}

.auth-pencil::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid #e2e8f0;
}

@keyframes laptopFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes spinGear {
    to { transform: rotate(360deg); }
}

@keyframes pencilMove {
    0%, 100% { transform: translateX(0) rotate(-22deg); }
    50% { transform: translateX(18px) rotate(-22deg); }
}

@keyframes laptopGraphPulse {
    0%, 100% { transform: scaleY(0.92); opacity: 0.82; }
    50% { transform: scaleY(1); opacity: 1; }
}

body.light-theme .auth-laptop {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 232, 240, 0.82));
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow:
        0 35px 80px rgba(37, 99, 235, 0.16),
        0 0 45px rgba(56, 189, 248, 0.12);
}

body.light-theme .laptop-screen::before,
body.light-theme .laptop-sidebar,
body.light-theme .laptop-card-main,
body.light-theme .laptop-card-small,
body.light-theme .auth-chat-bubble {
    background-color: rgba(255, 255, 255, 0.64);
    border-color: rgba(37, 99, 235, 0.16);
}

body.light-theme .auth-chat-bubble::before {
    background: rgba(30, 41, 59, 0.48);
}

@media (max-width: 980px) {
    .auth-visual {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-laptop,
    .laptop-card-main::before,
    .auth-chat-bubble,
    .auth-gear,
    .auth-pencil {
        animation: none !important;
    }
}

/* Proporciones equilibradas para login, registro y recuperacion */
#login-page .auth-container,
#register-page .auth-container {
    display: grid !important;
    place-items: center !important;
    min-height: 100vh !important;
    padding: 48px 6vw !important;
    overflow: hidden !important;
}

.auth-layout {
    width: min(1240px, 100%) !important;
    min-height: min(760px, calc(100vh - 96px)) !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) minmax(420px, 560px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 56px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.auth-visual {
    width: 100% !important;
    max-width: 560px !important;
    height: 620px !important;
    min-height: 620px !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

#login-page .auth-card,
#register-page .auth-card,
.auth-card,
.login-card,
.register-card,
.password-card {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 620px !important;
    max-height: none !important;
    justify-self: center !important;
    box-sizing: border-box !important;
}

#login-page .auth-card,
#register-page .auth-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.auth-laptop {
    width: 500px !important;
    height: 390px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.auth-laptop,
.auth-laptop * {
    box-sizing: border-box !important;
}

.laptop-screen::before {
    inset: 20px !important;
}

.laptop-topbar {
    left: 38px !important;
    right: 38px !important;
    top: 38px !important;
}

.laptop-sidebar {
    left: 48px !important;
    top: 96px !important;
    width: 84px !important;
    height: 220px !important;
}

.laptop-card-main {
    left: 152px !important;
    top: 96px !important;
    width: 292px !important;
    height: 136px !important;
}

.laptop-card-main::before {
    width: 222px !important;
    height: 64px !important;
}

.laptop-card-small {
    left: 152px !important;
    top: 256px !important;
    width: 138px !important;
    height: 70px !important;
}

.laptop-card-small.two {
    left: 306px !important;
}

.auth-chat-bubble,
.auth-gear,
.auth-pencil {
    transform-origin: center !important;
}

.auth-chat-bubble {
    width: 142px !important;
    min-height: 66px !important;
}

.auth-chat-bubble.one {
    top: 44px !important;
    left: 24px !important;
}

.auth-chat-bubble.two {
    right: 24px !important;
    bottom: 58px !important;
}

.auth-gear {
    right: 54px !important;
    top: 104px !important;
    width: 48px !important;
    height: 48px !important;
    border-width: 7px !important;
}

.auth-gear::after {
    inset: 11px !important;
}

.auth-pencil {
    left: 72px !important;
    bottom: 106px !important;
    width: 72px !important;
    height: 11px !important;
}

@media (max-width: 1120px) {
    .auth-layout {
        grid-template-columns: minmax(360px, 500px) minmax(380px, 520px) !important;
        gap: 34px !important;
    }

    .auth-visual {
        max-width: 500px !important;
    }

    .auth-laptop {
        width: 450px !important;
        height: 352px !important;
    }
}

@media (max-width: 980px) {
    #login-page .auth-container,
    #register-page .auth-container {
        padding: 32px 18px !important;
        overflow: auto !important;
    }

    .auth-layout {
        grid-template-columns: 1fr !important;
        width: min(560px, 100%) !important;
        min-height: calc(100vh - 64px) !important;
        gap: 0 !important;
    }

    .auth-visual {
        display: none !important;
    }

    #login-page .auth-card,
    #register-page .auth-card,
    .auth-card,
    .login-card,
    .register-card,
    .password-card {
        max-width: 560px !important;
        min-height: auto !important;
    }
}

/* Progreso: vista didactica compacta y moderna */
#progress .progress-container {
    display: grid !important;
    gap: 20px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#progress .premium-border::before {
    opacity: 0.72 !important;
}

#progress .progress-hero {
    grid-template-columns: minmax(0, 1fr) 190px !important;
    min-height: 250px !important;
    padding: 28px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(73, 204, 249, 0.12), rgba(253, 113, 175, 0.08) 48%, rgba(123, 104, 238, 0.12)),
        rgba(25, 29, 43, 0.88) !important;
    box-shadow: 0 24px 58px rgba(2, 8, 23, 0.24) !important;
}

#progress .progress-hero-copy {
    min-width: 0 !important;
}

#progress .progress-eyebrow {
    min-height: 28px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
}

#progress .progress-hero h2 {
    margin: 14px 0 8px !important;
    font-size: clamp(3rem, 5vw, 4.6rem) !important;
    letter-spacing: 0 !important;
}

#progress .progress-hero p {
    max-width: 560px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

#progress .progress-xp-meta {
    margin: 18px 0 12px !important;
    gap: 8px !important;
}

#progress .progress-xp-meta span,
#progress .progress-hero small {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.075) !important;
}

#progress .progress-xp-bar {
    height: 12px !important;
    max-width: 620px !important;
    overflow: hidden !important;
}

#progress .progress-xp-bar .xp-fill {
    animation: acBorderFlow 7s linear infinite, xpGlow 4s ease-in-out infinite !important;
    transition: width 600ms ease !important;
}

#progress .progress-level-orb {
    width: 170px !important;
    height: 170px !important;
    align-self: center !important;
}

#progress .progress-level-orb strong {
    font-size: 4.3rem !important;
}

#progress .progress-level-orb span {
    margin-top: -28px !important;
    font-size: 10px !important;
}

#progress .progress-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#progress .premium-progress-stat {
    min-height: 92px !important;
    padding: 14px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
        rgba(31, 34, 46, 0.80) !important;
}

#progress .progress-stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 24px rgba(73, 204, 249, 0.14) !important;
}

#progress .progress-stat-icon::before {
    width: 20px !important;
    height: 20px !important;
}

#progress .premium-progress-stat .stat-label {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
}

#progress .premium-progress-stat .stat-value {
    margin: 2px 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
}

#progress .premium-progress-stat small {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

#progress .progress-path,
#progress .progress-achievements,
#progress .progress-empty-callout {
    padding: 22px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
        rgba(31, 34, 46, 0.78) !important;
}

#progress .progress-section-title {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

#progress .progress-section-title h3 {
    font-size: 22px !important;
}

#progress .progress-section-title p {
    max-width: 420px !important;
    text-align: right !important;
}

#progress .student-path {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 16px 8px 4px !important;
}

#progress .student-path::before {
    content: "" !important;
    position: absolute !important;
    left: 8% !important;
    right: 8% !important;
    top: 48px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(123, 104, 238, 0.85), rgba(73, 204, 249, 0.7), rgba(100, 116, 139, 0.36)) !important;
}

#progress .path-step {
    min-height: 96px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1 !important;
    gap: 10px !important;
}

#progress .path-step span {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid rgba(148, 163, 184, 0.28) !important;
    background: #222836 !important;
    box-shadow: 0 10px 24px rgba(2, 8, 23, 0.20) !important;
}

#progress .path-step.active span {
    border-color: rgba(73, 204, 249, 0.62) !important;
    background: linear-gradient(135deg, #7b68ee, #49ccf9) !important;
    box-shadow: 0 0 0 6px rgba(73, 204, 249, 0.10), 0 16px 34px rgba(73, 204, 249, 0.24) !important;
}

#progress .path-step.current span {
    animation: xpGlow 3.8s ease-in-out infinite !important;
}

#progress .path-step small {
    color: rgba(226, 232, 240, 0.72) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#progress .premium-achievements-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 12px !important;
}

#progress .premium-achievement {
    min-height: 132px !important;
    padding: 16px 12px !important;
    border-radius: 20px !important;
    gap: 8px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035) !important;
}

#progress .premium-achievement .achievement-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
}

#progress .premium-achievement p {
    margin: 2px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
}

#progress .premium-achievement small {
    font-size: 10px !important;
    line-height: 1.25 !important;
}

#progress .premium-achievement.locked::after {
    right: 10px !important;
    top: 10px !important;
    width: 13px !important;
    height: 11px !important;
    border-width: 2px !important;
}

#progress .premium-progress-stat:hover,
#progress .premium-achievement:hover,
#progress .path-step:hover span {
    transform: translateY(-4px) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

#progress .progress-empty-callout {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

body.light-theme #progress .progress-hero,
body.light-theme #progress .premium-progress-stat,
body.light-theme #progress .progress-path,
body.light-theme #progress .progress-achievements,
body.light-theme #progress .progress-empty-callout,
body.light-theme #progress .premium-achievement {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 18px 44px rgba(37, 99, 235, 0.08) !important;
}

body.light-theme #progress .progress-xp-meta span,
body.light-theme #progress .progress-hero small {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

body.light-theme #progress .student-path::before {
    background: linear-gradient(90deg, #6366f1, #38bdf8, #cbd5e1) !important;
}

body.light-theme #progress .path-step span {
    background: #f8fafc !important;
    color: #0f172a !important;
}

body.light-theme #progress .path-step.active span {
    color: #ffffff !important;
}

body.light-theme #progress .path-step small,
body.light-theme #progress .progress-section-title p {
    color: #64748b !important;
}

@media (max-width: 1120px) {
    #progress .progress-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #progress .progress-hero {
        grid-template-columns: 1fr 160px !important;
    }

    #progress .progress-level-orb {
        width: 150px !important;
        height: 150px !important;
    }
}

@media (max-width: 760px) {
    #progress .progress-hero {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    #progress .progress-level-orb {
        justify-self: start !important;
    }

    #progress .progress-stat-grid,
    #progress .premium-achievements-grid {
        grid-template-columns: 1fr !important;
    }

    #progress .progress-section-title {
        display: grid !important;
    }

    #progress .progress-section-title p {
        text-align: left !important;
    }

    #progress .student-path {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    #progress .student-path::before {
        left: 24px !important;
        right: auto !important;
        top: 18px !important;
        bottom: 18px !important;
        width: 4px !important;
        height: auto !important;
    }

    #progress .path-step {
        grid-template-columns: 52px 1fr !important;
        justify-items: start !important;
        min-height: 60px !important;
    }
}

/* Perfil: rediseño didáctico y compacto */
#profile .profile-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

#profile .profile-hero {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 340px) !important;
    gap: 22px !important;
    align-items: center !important;
    padding: 26px !important;
    min-height: 0 !important;
}

#profile .profile-hero::after {
    width: 360px !important;
    height: 170px !important;
    right: 18px !important;
    top: auto !important;
    bottom: -70px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(73, 204, 249, 0.16), rgba(253, 113, 175, 0.12)) !important;
    filter: blur(16px) !important;
}

#profile .profile-avatar-zone {
    gap: 12px !important;
}

#profile .profile-avatar-premium {
    width: 126px !important;
    height: 126px !important;
    border-radius: 32px !important;
    font-size: 40px !important;
    transform: none !important;
}

#profile .profile-avatar-premium:hover {
    transform: translateY(-3px) !important;
}

#profile .profile-details-premium h2 {
    font-size: clamp(38px, 4.2vw, 62px) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

#profile .profile-details-premium p {
    max-width: 660px;
}

#profile .profile-career {
    margin-bottom: 6px !important;
    font-size: 17px !important;
}

#profile .profile-tags {
    margin-top: 14px !important;
}

#profile .profile-tags span {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    color: #dff7ff !important;
    background: rgba(73, 204, 249, 0.10) !important;
}

#profile .profile-hero-summary {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    align-self: stretch;
}

#profile .profile-hero-summary div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
}

#profile .profile-hero-summary span {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#profile .profile-hero-summary strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
}

#profile .profile-summary-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
}

#profile .profile-summary-icon svg {
    width: 22px !important;
    height: 22px !important;
}

#profile .profile-stats-grid {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(7, minmax(112px, 1fr)) !important;
    gap: 10px !important;
}

#profile .profile-stat-card {
    min-height: 118px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

#profile .profile-stat-card:hover,
#profile .profile-goal:hover,
#profile .profile-activity-list li:hover,
#profile .profile-badge:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(73, 204, 249, 0.30) !important;
    box-shadow: 0 18px 44px rgba(73, 204, 249, 0.10) !important;
}

#profile .profile-stat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
}

#profile .profile-stat-icon svg {
    width: 22px !important;
    height: 22px !important;
}

#profile .profile-stat-card strong {
    margin-top: 6px !important;
    font-size: 24px !important;
}

#profile .profile-stat-card em {
    margin-top: 4px !important;
}

#profile .profile-progress-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 24px !important;
}

#profile .profile-progress-card > div:first-child {
    min-width: 0;
}

#profile .profile-progress-card h3 {
    font-size: 30px !important;
    margin-bottom: 8px !important;
}

#profile .profile-progress-card p {
    margin-bottom: 0 !important;
}

#profile .profile-level-route {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    margin-top: 16px;
}

#profile .profile-level-route span {
    padding: 8px 12px;
    border: 1px solid rgba(73, 204, 249, 0.22);
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.08);
    color: #dff7ff;
    font-size: 12px;
    font-weight: 900;
}

#profile .profile-level-route i {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7b68ee, #49ccf9, #fd71af);
    box-shadow: 0 0 18px rgba(73, 204, 249, 0.28);
}

#profile .profile-xp-track {
    height: 16px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

#profile .profile-xp-fill {
    background-size: 220% 100% !important;
    animation: profileXpPulse 2.8s ease-in-out infinite, profileXpMove 5s linear infinite !important;
}

@keyframes profileXpMove {
    from { background-position: 0% 50%; }
    to { background-position: 220% 50%; }
}

#profile .profile-xp-meta {
    grid-column: 2 / 3;
    margin-top: -6px !important;
    padding: 0 2px;
}

#profile .profile-achievements-card {
    grid-column: 1 / -1 !important;
    padding: 22px !important;
}

#profile .profile-badges-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    gap: 10px !important;
}

#profile .profile-badge {
    min-height: 108px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 5px !important;
}

#profile .profile-badge-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
}

#profile .profile-badge-icon svg {
    width: 20px !important;
    height: 20px !important;
}

#profile .profile-badge.unlocked {
    background: linear-gradient(145deg, rgba(255, 200, 0, 0.13), rgba(73, 204, 249, 0.08)) !important;
    border-color: rgba(255, 200, 0, 0.28) !important;
}

#profile .profile-badge.locked {
    opacity: 0.58 !important;
}

#profile .profile-goals-card,
#profile .profile-activity-card {
    padding: 22px !important;
    align-self: start !important;
}

#profile .profile-goals-list {
    gap: 9px !important;
}

#profile .profile-goal {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 58px;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

#profile .profile-goal strong {
    line-height: 1.25;
}

#profile .profile-goal.done {
    background: linear-gradient(135deg, rgba(0, 200, 117, 0.14), rgba(73, 204, 249, 0.05)) !important;
}

#profile .profile-goal:not(.done) {
    background: linear-gradient(135deg, rgba(73, 204, 249, 0.08), rgba(123, 104, 238, 0.07)) !important;
}

#profile .profile-activity-list {
    position: relative;
    gap: 0 !important;
    margin-left: 10px !important;
}

#profile .profile-activity-list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #49ccf9, rgba(123, 104, 238, 0.2));
}

#profile .profile-activity-list li {
    position: relative;
    margin-left: 22px;
    padding: 10px 12px 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#profile .profile-activity-list li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 15px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #49ccf9;
    box-shadow: 0 0 0 6px rgba(73, 204, 249, 0.12), 0 0 18px rgba(73, 204, 249, 0.45);
}

#profile .profile-activity-list li:last-child {
    border-bottom: 0 !important;
}

body.light-theme #profile .profile-tags span {
    color: #155e75 !important;
    background: rgba(14, 165, 233, 0.10) !important;
    border-color: rgba(14, 165, 233, 0.22) !important;
}

body.light-theme #profile .profile-hero-summary div,
body.light-theme #profile .profile-stat-card,
body.light-theme #profile .profile-goal,
body.light-theme #profile .profile-badge {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #profile .profile-level-route span {
    color: #155e75 !important;
    background: rgba(14, 165, 233, 0.10) !important;
}

body.light-theme #profile .profile-hero-summary strong {
    color: #172033 !important;
}

body.light-theme #profile .profile-activity-list li {
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

@media (max-width: 1180px) {
    #profile .profile-hero {
        grid-template-columns: 140px minmax(0, 1fr) !important;
    }

    #profile .profile-hero-summary {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #profile .profile-stats-grid {
        grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    #profile .profile-layout,
    #profile .profile-hero,
    #profile .profile-progress-card {
        grid-template-columns: 1fr !important;
    }

    #profile .profile-hero {
        text-align: center !important;
    }

    #profile .profile-hero-summary {
        grid-template-columns: 1fr !important;
    }

    #profile .profile-xp-meta {
        grid-column: auto;
    }

    #profile .profile-stats-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    #profile .profile-hero,
    #profile .profile-progress-card,
    #profile .profile-achievements-card,
    #profile .profile-goals-card,
    #profile .profile-activity-card {
        padding: 16px !important;
    }

    #profile .profile-stats-grid,
    #profile .profile-badges-grid {
        grid-template-columns: 1fr !important;
    }

    #profile .profile-stat-card {
        min-height: 96px !important;
    }
}

/* Perfil: ajuste final de tarjetas pequeñas de estadisticas */
#profile .profile-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: stretch !important;
}

#profile .profile-stat-card {
    min-width: 0 !important;
    min-height: 184px !important;
    padding: 22px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    text-align: center !important;
}

#profile .profile-stat-card > div {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#profile .profile-stat-card small {
    max-width: 100% !important;
    color: var(--text-tertiary) !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

#profile .profile-stat-card strong {
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.8rem, 3vw, 2.25rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#profile .profile-stat-card em {
    max-width: 100% !important;
    margin-top: 4px !important;
    color: rgba(226, 232, 240, 0.72) !important;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

#profile .profile-stat-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    margin-bottom: 6px !important;
    border-radius: 17px !important;
}

#profile .profile-stat-icon svg {
    width: 26px !important;
    height: 26px !important;
}

body.light-theme #profile .profile-stat-card strong {
    color: #172033 !important;
}

body.light-theme #profile .profile-stat-card em {
    color: rgba(51, 65, 85, 0.76) !important;
}

@media (max-width: 760px) {
    #profile .profile-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 14px !important;
    }

    #profile .profile-stat-card {
        min-height: 160px !important;
        padding: 18px 14px !important;
    }
}

/* Sidebar: herramientas educativas de Google */
.google-tools-sidebar {
    margin: 10px 10px 6px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(12, 18, 32, 0.44);
}

.google-tools-sidebar h2 {
    margin: 0 0 10px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.google-tools-list {
    display: grid;
    gap: 7px;
}

.google-tool-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 850;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.google-tool-link:hover {
    transform: translateX(2px);
    border-color: rgba(73, 204, 249, 0.22);
    background: rgba(73, 204, 249, 0.08);
    color: #ffffff;
}

.google-tool-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.google-tool-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.google-tool-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
}

.google-tool-docs .google-tool-icon,
.google-tool-calendar .google-tool-icon {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.google-tool-slides .google-tool-icon,
.google-tool-forms .google-tool-icon {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.google-tool-sheets .google-tool-icon,
.google-tool-classroom .google-tool-icon {
    background: linear-gradient(135deg, #0f766e, #22c55e);
}

body.light-theme .google-tools-sidebar {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

body.light-theme .google-tool-link {
    color: #334155;
}

body.light-theme .google-tool-link:hover {
    color: #172033;
    background: rgba(14, 165, 233, 0.10);
}

@media (max-width: 900px) {
    .sidebar:not(.open) .google-tools-sidebar {
        display: none !important;
    }

    .sidebar.open .google-tools-sidebar {
        margin: 8px 14px 10px !important;
    }
}

/* Mochila Digital: biblioteca compacta, didactica y responsiva */
#backpack .backpack-toolbar {
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 26px !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(150px, 1fr)) auto !important;
    gap: 14px !important;
    align-items: end !important;
    border: 1px solid rgba(73, 204, 249, 0.16) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.11), rgba(73, 204, 249, 0.08)),
        rgba(17, 24, 39, 0.72) !important;
    box-shadow: 0 22px 58px rgba(2, 8, 23, 0.22) !important;
    backdrop-filter: blur(18px) !important;
}

#backpack .backpack-toolbar label {
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
}

#backpack .backpack-toolbar label span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

#backpack .backpack-toolbar label span::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7b68ee, #49ccf9) !important;
    box-shadow: 0 0 14px rgba(73, 204, 249, 0.45) !important;
}

#backpack .backpack-toolbar input,
#backpack .backpack-toolbar select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 15px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(7, 12, 27, 0.58) !important;
    color: #eef6ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#backpack .backpack-toolbar input::placeholder {
    color: rgba(203, 213, 225, 0.52) !important;
}

#backpack .backpack-toolbar input:focus,
#backpack .backpack-toolbar select:focus {
    border-color: rgba(73, 204, 249, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(73, 204, 249, 0.12) !important;
    outline: none !important;
}

#backpack .backpack-toolbar .btn-primary {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    align-self: end !important;
    white-space: nowrap !important;
    border-radius: 15px !important;
    box-shadow: 0 16px 34px rgba(73, 204, 249, 0.18) !important;
}

#backpack .backpack-container,
#backpack .backpack-grid,
#backpack .resources-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

#backpack .resource-card.library-resource-card,
#backpack .library-resource-card {
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 24px !important;
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(10, 16, 34, 0.96), rgba(22, 28, 50, 0.94)) padding-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

#backpack .resource-card.library-resource-card:hover,
#backpack .library-resource-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 60px rgba(56, 189, 248, 0.18),
        0 18px 48px rgba(2, 8, 23, 0.36) !important;
}

#backpack .library-resource-card .resource-top {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 0 !important;
    padding-bottom: 12px !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--resource-color, #49ccf9) 24%, transparent) !important;
}

#backpack .library-resource-card .resource-icon.resource-pdf-icon svg {
    width: 27px !important;
    height: 27px !important;
}

#backpack .library-resource-card .resource-info {
    min-width: 0 !important;
}

#backpack .library-resource-card .resource-info h4 {
    margin: 0 0 5px !important;
    color: #ffffff !important;
    font-size: clamp(1.08rem, 1.4vw, 1.35rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

#backpack .library-resource-card .resource-type {
    margin: 0 !important;
    color: rgba(203, 213, 225, 0.74) !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

#backpack .resource-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
}

#backpack .resource-subject-chip,
#backpack .resource-status,
#backpack .resource-data span {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
}

#backpack .resource-subject-chip {
    color: #eaf7ff !important;
    border: 1px solid color-mix(in srgb, var(--resource-color, #49ccf9) 52%, transparent) !important;
    background: color-mix(in srgb, var(--resource-color, #49ccf9) 18%, transparent) !important;
}

#backpack .resource-status {
    color: #dff7ff !important;
    border: 1px solid rgba(123, 104, 238, 0.38) !important;
    background: rgba(123, 104, 238, 0.16) !important;
}

#backpack .resource-description {
    min-height: 42px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.76) !important;
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

#backpack .resource-data {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

#backpack .resource-data span {
    width: 100% !important;
    justify-content: flex-start !important;
    color: rgba(226, 232, 240, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

#backpack .library-resource-card > .resource-actions.resource-actions-grid,
#backpack .library-resource-card > .resource-actions,
#backpack .resource-card > .resource-actions.resource-actions-grid,
#backpack .resource-card > .resource-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
}

#backpack .library-resource-card > .resource-actions > button,
#backpack .resource-card > .resource-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.light-theme #backpack .backpack-toolbar {
    border-color: rgba(15, 23, 42, 0.10) !important;
    background:
        linear-gradient(135deg, rgba(123, 104, 238, 0.08), rgba(73, 204, 249, 0.08)),
        rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #backpack .backpack-toolbar label span {
    color: #475569 !important;
}

body.light-theme #backpack .backpack-toolbar input,
body.light-theme #backpack .backpack-toolbar select {
    color: #172033 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: rgba(255, 255, 255, 0.94) !important;
}

body.light-theme #backpack .resource-card.library-resource-card,
body.light-theme #backpack .library-resource-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96)) padding-box !important;
}

body.light-theme #backpack .library-resource-card .resource-info h4 {
    color: #172033 !important;
}

body.light-theme #backpack .library-resource-card .resource-type,
body.light-theme #backpack .resource-description {
    color: #64748b !important;
}

body.light-theme #backpack .resource-data span {
    color: #475569 !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

@media (max-width: 980px) {
    #backpack .backpack-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #backpack .backpack-toolbar .btn-primary {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
    }

    #backpack .resource-data {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    #backpack .backpack-toolbar,
    #backpack .backpack-container,
    #backpack .backpack-grid,
    #backpack .resources-grid,
    #backpack .resource-data,
    #backpack .library-resource-card > .resource-actions.resource-actions-grid,
    #backpack .library-resource-card > .resource-actions,
    #backpack .resource-card > .resource-actions.resource-actions-grid,
    #backpack .resource-card > .resource-actions {
        grid-template-columns: 1fr !important;
    }

    #backpack .resource-card.library-resource-card,
    #backpack .library-resource-card {
        padding: 20px !important;
        border-radius: 24px !important;
    }
}

/* Auth illustration: escritorio digital premium para estudiantes */
#login-page .auth-layout,
#register-page .auth-layout {
    width: min(1240px, 100%) !important;
    min-height: min(760px, calc(100vh - 96px)) !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) minmax(420px, 560px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 56px !important;
    padding: 48px 6vw !important;
}

#login-page .auth-card,
#register-page .auth-card {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 620px !important;
    height: 620px !important;
    justify-self: center !important;
}

.auth-study-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 560px !important;
    height: 620px !important;
    min-height: 620px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    justify-self: center !important;
}

.auth-study-scene {
    position: relative;
    width: 540px;
    height: 560px;
    max-width: 100%;
    isolation: isolate;
    animation: studySceneBreath 7s ease-in-out infinite;
}

.study-monitor {
    position: absolute;
    left: 50%;
    top: 118px;
    width: 430px;
    height: 285px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 30px;
    overflow: hidden;
    transform: translateX(-50%) perspective(1100px) rotateX(2deg) rotateY(-4deg);
    transform-origin: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(73, 204, 249, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(10, 16, 34, 0.98), rgba(22, 27, 50, 0.96) 58%, rgba(8, 14, 32, 0.98));
    box-shadow:
        0 44px 95px rgba(2, 8, 23, 0.52),
        0 0 58px rgba(73, 204, 249, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.study-monitor::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.45;
}

.study-monitor::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    pointer-events: none;
}

.monitor-toolbar {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.monitor-toolbar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.9);
    box-shadow: 0 0 16px rgba(73, 204, 249, 0.45);
}

.monitor-toolbar span:nth-child(2) {
    background: rgba(123, 104, 238, 0.9);
}

.monitor-toolbar span:nth-child(3) {
    background: rgba(253, 113, 175, 0.9);
}

.monitor-sidebar {
    position: absolute;
    left: 22px;
    top: 58px;
    bottom: 24px;
    width: 58px;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.monitor-sidebar span {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(123, 104, 238, 0.9), rgba(73, 204, 249, 0.9));
}

.monitor-dashboard {
    position: absolute;
    left: 100px;
    right: 24px;
    top: 62px;
    bottom: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 22px 90px 1fr;
    gap: 14px;
}

.monitor-title {
    grid-column: 1 / -1;
    width: 46%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(73, 204, 249, 0.24));
}

.monitor-panel,
.monitor-chart {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.7fr;
    align-items: end;
    gap: 10px;
    padding: 18px;
}

.panel-wide span {
    height: 42px;
    border-radius: 14px 14px 8px 8px;
    background: linear-gradient(180deg, rgba(73, 204, 249, 0.86), rgba(123, 104, 238, 0.72));
}

.panel-wide span:nth-child(2) {
    height: 58px;
}

.panel-wide span:nth-child(3) {
    height: 34px;
    background: linear-gradient(180deg, rgba(253, 113, 175, 0.78), rgba(123, 104, 238, 0.7));
}

.monitor-chart {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    gap: 9px;
    padding: 14px;
}

.monitor-chart span {
    flex: 1;
    border-radius: 999px 999px 7px 7px;
    background: linear-gradient(180deg, #49ccf9, #7b68ee);
    opacity: 0.86;
}

.monitor-chart span:nth-child(1) { height: 36px; }
.monitor-chart span:nth-child(2) { height: 52px; }
.monitor-chart span:nth-child(3) { height: 68px; }
.monitor-chart span:nth-child(4) { height: 46px; }

.monitor-shine {
    position: absolute;
    width: 120px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(73, 204, 249, 0.92), transparent);
    filter: drop-shadow(0 0 8px rgba(73, 204, 249, 0.8));
    animation: monitorShine 4.8s linear infinite;
}

.shine-one {
    top: 52px;
    left: -130px;
}

.shine-two {
    bottom: 34px;
    left: -160px;
    animation-delay: -2.1s;
}

.monitor-stand {
    position: absolute;
    left: 50%;
    top: 402px;
    width: 84px;
    height: 54px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(46, 58, 91, 0.92), rgba(14, 20, 38, 0.96));
    clip-path: polygon(28% 0, 72% 0, 88% 100%, 12% 100%);
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.34);
}

.monitor-base {
    position: absolute;
    left: 50%;
    top: 448px;
    width: 210px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(123, 104, 238, 0.36), rgba(73, 204, 249, 0.55), rgba(253, 113, 175, 0.28));
    box-shadow: 0 22px 42px rgba(2, 8, 23, 0.32);
}

.study-window,
.study-ai-card,
.study-chat {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
        rgba(17, 24, 39, 0.62);
    backdrop-filter: blur(18px);
    box-shadow:
        0 24px 56px rgba(2, 8, 23, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.study-window {
    border-radius: 22px;
}

.window-label {
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.calendar-window {
    left: 22px;
    top: 54px;
    width: 154px;
    height: 132px;
    padding: 16px;
    animation: floatCalendar 5.4s ease-in-out infinite;
}

.calendar-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.calendar-grid span {
    height: 16px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
}

.calendar-grid .active {
    background: linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 0 18px rgba(73, 204, 249, 0.44);
}

.tasks-window {
    right: 18px;
    top: 72px;
    width: 172px;
    height: 142px;
    padding: 16px;
}

.task-row {
    display: block;
    height: 13px;
    margin-top: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.task-row.done {
    background: linear-gradient(90deg, #00c875 28%, rgba(255, 255, 255, 0.2) 28%);
}

.task-row.short {
    width: 70%;
}

.progress-window {
    right: 38px;
    bottom: 86px;
    width: 178px;
    height: 122px;
    padding: 16px;
}

.progress-line {
    position: relative;
    height: 8px;
    margin: 18px 0 16px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.progress-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 72%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b68ee, #49ccf9, #fd71af);
    animation: drawProgressLine 3.2s ease-in-out infinite;
}

.progress-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 8px;
    height: 34px;
}

.progress-bars span {
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #49ccf9, #7b68ee);
}

.progress-bars span:nth-child(1) { height: 18px; }
.progress-bars span:nth-child(2) { height: 30px; }
.progress-bars span:nth-child(3) { height: 24px; }

.document-window {
    left: 42px;
    bottom: 78px;
    width: 154px;
    height: 150px;
    padding: 18px;
    animation: documentHover 4.8s ease-in-out infinite;
}

.document-lines {
    display: grid;
    gap: 13px;
}

.document-lines span {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.document-lines span:nth-child(1) {
    width: 58%;
    background: linear-gradient(90deg, #49ccf9, #7b68ee);
}

.document-lines span:nth-child(3) {
    width: 78%;
}

.document-lines span:nth-child(4) {
    width: 64%;
}

.study-pencil {
    position: absolute;
    left: 150px;
    bottom: 88px;
    width: 116px;
    height: 26px;
    animation: pencilWrite 4.2s ease-in-out infinite;
}

.pencil-body {
    position: absolute;
    left: 0;
    top: 7px;
    width: 92px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fd71af, #ffc800 58%, #49ccf9);
    box-shadow: 0 10px 24px rgba(253, 113, 175, 0.22);
}

.pencil-tip {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid rgba(255, 255, 255, 0.86);
}

.pencil-trace {
    position: absolute;
    left: -10px;
    bottom: 0;
    width: 72px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(73, 204, 249, 0.76));
}

.study-gear {
    position: absolute;
    right: 104px;
    top: 236px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(73, 204, 249, 0.95) 0 12deg, transparent 12deg 24deg),
        radial-gradient(circle, rgba(123, 104, 238, 0.86) 0 42%, transparent 43%);
    box-shadow: 0 0 28px rgba(73, 204, 249, 0.32);
    animation: gearSpin 9s linear infinite;
}

.study-gear span {
    position: absolute;
    inset: 17px;
    border-radius: 50%;
    background: rgba(12, 18, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.study-chat {
    width: 128px;
    height: 58px;
    border-radius: 18px;
    padding: 15px;
    animation: chatFloat 4.6s ease-in-out infinite;
}

.study-chat span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.study-chat span + span {
    width: 68%;
    margin-top: 10px;
}

.chat-one {
    left: 168px;
    top: 28px;
}

.chat-two {
    right: 142px;
    bottom: 28px;
    animation-delay: -1.7s;
}

.study-ai-card {
    right: 28px;
    bottom: 224px;
    width: 174px;
    min-height: 78px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 15px;
}

.ai-orb {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), transparent 18%),
        linear-gradient(135deg, #7b68ee, #49ccf9);
    box-shadow: 0 0 24px rgba(73, 204, 249, 0.3);
}

.study-ai-card strong {
    display: block;
    color: #ffffff;
    font-size: 0.92rem;
    line-height: 1.1;
}

.study-ai-card span:last-child {
    display: block;
    margin-top: 4px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.72rem;
    line-height: 1.2;
}

.study-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(73, 204, 249, 0.82);
    box-shadow: 0 0 16px rgba(73, 204, 249, 0.65);
    animation: particleDrift 6s ease-in-out infinite alternate;
}

.particle-one { left: 92px; top: 38px; }
.particle-two { right: 78px; top: 44px; animation-delay: -1.2s; background: rgba(253, 113, 175, 0.72); }
.particle-three { left: 24px; bottom: 198px; animation-delay: -2.6s; }
.particle-four { right: 46px; bottom: 150px; animation-delay: -3.8s; background: rgba(123, 104, 238, 0.76); }

body.light-theme .study-monitor {
    border-color: rgba(37, 99, 235, 0.16);
    background:
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(234, 242, 255, 0.96) 60%, rgba(248, 251, 255, 0.98));
    box-shadow:
        0 42px 80px rgba(30, 64, 175, 0.16),
        0 0 48px rgba(56, 189, 248, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body.light-theme .study-monitor::before {
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.07) 1px, transparent 1px);
}

body.light-theme .monitor-sidebar,
body.light-theme .monitor-panel,
body.light-theme .monitor-chart,
body.light-theme .study-window,
body.light-theme .study-ai-card,
body.light-theme .study-chat {
    border-color: rgba(37, 99, 235, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
        rgba(255, 255, 255, 0.62);
    box-shadow:
        0 24px 52px rgba(30, 64, 175, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

body.light-theme .window-label,
body.light-theme .study-ai-card strong {
    color: #172033;
}

body.light-theme .study-ai-card span:last-child {
    color: #64748b;
}

body.light-theme .study-gear span {
    background: rgba(255, 255, 255, 0.96);
}

body.light-theme .monitor-stand {
    background: linear-gradient(180deg, rgba(226, 238, 255, 0.96), rgba(186, 207, 238, 0.94));
}

@keyframes studySceneBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.012); }
}

@keyframes monitorShine {
    from { transform: translateX(0); }
    to { transform: translateX(690px); }
}

@keyframes floatCalendar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes documentHover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes drawProgressLine {
    0% { width: 18%; }
    55% { width: 82%; }
    100% { width: 18%; }
}

@keyframes pencilWrite {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(32px); }
}

@keyframes gearSpin {
    to { transform: rotate(360deg); }
}

@keyframes chatFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes particleDrift {
    from { transform: translate3d(0, 0, 0); opacity: 0.55; }
    to { transform: translate3d(10px, -14px, 0); opacity: 1; }
}

@media (max-width: 1120px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: minmax(360px, 500px) minmax(380px, 520px) !important;
        gap: 34px !important;
    }

    .auth-study-visual {
        max-width: 500px !important;
    }

    .auth-study-scene {
        width: min(500px, 100%);
    }
}

@media (max-width: 980px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: 1fr !important;
        width: min(560px, 100%) !important;
        min-height: calc(100vh - 64px) !important;
        gap: 0 !important;
        padding: 32px 18px !important;
    }

    .auth-study-visual {
        display: none !important;
    }

    #login-page .auth-card,
    #register-page .auth-card {
        max-width: 560px !important;
        min-height: auto !important;
        height: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-study-scene,
    .monitor-shine,
    .calendar-window,
    .document-window,
    .progress-line span,
    .study-pencil,
    .study-gear,
    .study-chat,
    .study-particle {
        animation: none !important;
    }
}

/* Auth illustration composition: monitor protagonista y ventanas con aire */
.auth-study-scene {
    width: 560px !important;
    height: 560px !important;
}

.study-monitor {
    left: 50% !important;
    top: 138px !important;
    width: 392px !important;
    height: 294px !important;
    border-radius: 30px !important;
    transform: translateX(-50%) perspective(1100px) rotateX(1.5deg) rotateY(-3deg) !important;
    z-index: 2 !important;
}

.monitor-dashboard {
    left: 94px !important;
    right: 22px !important;
    top: 62px !important;
    bottom: 24px !important;
}

.monitor-stand {
    top: 432px !important;
    z-index: 1 !important;
}

.monitor-base {
    top: 478px !important;
    z-index: 1 !important;
}

.study-window,
.study-chat,
.study-ai-card {
    border-width: 1px !important;
    border-radius: 18px !important;
    box-shadow:
        0 18px 42px rgba(2, 8, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    z-index: 4 !important;
}

.calendar-window {
    left: 2px !important;
    top: 42px !important;
    width: 136px !important;
    height: 112px !important;
    padding: 14px !important;
}

.calendar-grid {
    margin-top: 13px !important;
    gap: 7px !important;
}

.calendar-grid span {
    height: 14px !important;
    border-radius: 5px !important;
}

.tasks-window {
    right: -10px !important;
    top: 42px !important;
    width: 142px !important;
    height: 122px !important;
    padding: 14px !important;
}

.task-row {
    height: 11px !important;
    margin-top: 12px !important;
}

.chat-one {
    left: 218px !important;
    top: 42px !important;
    width: 112px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 13px !important;
}

.study-ai-card {
    right: -18px !important;
    bottom: auto !important;
    top: 236px !important;
    width: 126px !important;
    min-height: 66px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 12px !important;
}

.ai-orb {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
}

.study-ai-card strong {
    font-size: 0.82rem !important;
}

.study-ai-card span:last-child {
    font-size: 0.64rem !important;
}

.document-window {
    left: -8px !important;
    bottom: 52px !important;
    width: 134px !important;
    height: 126px !important;
    padding: 15px !important;
}

.document-lines {
    gap: 11px !important;
}

.document-lines span {
    height: 9px !important;
}

.progress-window {
    right: -10px !important;
    bottom: 32px !important;
    width: 156px !important;
    height: 104px !important;
    padding: 14px !important;
}

.progress-line {
    height: 7px !important;
    margin: 13px 0 12px !important;
}

.progress-bars {
    height: 28px !important;
    gap: 7px !important;
}

.progress-bars span:nth-child(1) { height: 14px !important; }
.progress-bars span:nth-child(2) { height: 25px !important; }
.progress-bars span:nth-child(3) { height: 20px !important; }

.study-pencil {
    left: 220px !important;
    bottom: 42px !important;
    width: 104px !important;
    height: 24px !important;
    z-index: 5 !important;
}

.pencil-body {
    width: 82px !important;
    height: 10px !important;
}

.pencil-tip {
    right: 7px !important;
    border-top-width: 9px !important;
    border-bottom-width: 9px !important;
    border-left-width: 15px !important;
}

.pencil-trace {
    width: 64px !important;
}

.study-gear {
    right: 94px !important;
    top: 302px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 5 !important;
}

.study-gear span {
    inset: 13px !important;
}

.chat-two {
    right: 174px !important;
    bottom: 28px !important;
    width: 112px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 13px !important;
}

.study-chat span {
    height: 7px !important;
}

.study-chat span + span {
    margin-top: 9px !important;
}

.window-label {
    font-size: 0.68rem !important;
}

body.light-theme .study-window,
body.light-theme .study-chat,
body.light-theme .study-ai-card {
    box-shadow:
        0 24px 52px rgba(30, 64, 175, 0.16),
        0 10px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 1120px) {
    .auth-study-scene {
        width: 520px !important;
    }

    .study-monitor {
        width: 370px !important;
    }

    .calendar-window {
        left: 0 !important;
    }

    .tasks-window {
        right: 0 !important;
    }

    .study-ai-card {
        right: -4px !important;
    }

    .progress-window {
        right: -2px !important;
    }
}

/* Auth overlap fix: la ilustracion queda encerrada en su columna izquierda */
#login-page .auth-layout,
#register-page .auth-layout {
    grid-template-columns: minmax(420px, 52%) minmax(420px, 48%) !important;
    gap: 72px !important;
    overflow: hidden !important;
}

#login-page .auth-visual,
#register-page .auth-visual,
#login-page .auth-study-visual,
#register-page .auth-study-visual {
    width: 100% !important;
    max-width: 620px !important;
    overflow: hidden !important;
    justify-self: center !important;
    z-index: 1 !important;
    padding-inline: 18px !important;
    box-sizing: border-box !important;
}

#login-page .auth-study-scene,
#register-page .auth-study-scene {
    width: min(500px, 100%) !important;
    height: 560px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

#login-page .auth-visual *,
#register-page .auth-visual * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#login-page .auth-card,
#register-page .auth-card,
#login-page .login-card,
#register-page .login-card {
    position: relative !important;
    z-index: 10 !important;
    justify-self: center !important;
}

#login-page .tasks-window,
#register-page .tasks-window {
    right: 18px !important;
}

#login-page .study-ai-card,
#register-page .study-ai-card {
    right: 20px !important;
}

#login-page .progress-window,
#register-page .progress-window {
    right: 18px !important;
}

#login-page .calendar-window,
#register-page .calendar-window {
    left: 18px !important;
}

#login-page .document-window,
#register-page .document-window {
    left: 16px !important;
}

#login-page .chat-one,
#register-page .chat-one {
    left: 194px !important;
}

#login-page .chat-two,
#register-page .chat-two {
    right: 156px !important;
}

#login-page .study-monitor,
#register-page .study-monitor {
    width: 374px !important;
}

@media (max-width: 1120px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: minmax(360px, 500px) minmax(380px, 520px) !important;
        gap: 48px !important;
    }

    #login-page .auth-study-scene,
    #register-page .auth-study-scene {
        width: min(470px, 100%) !important;
    }

    #login-page .study-monitor,
    #register-page .study-monitor {
        width: 348px !important;
    }

    #login-page .tasks-window,
    #register-page .tasks-window,
    #login-page .study-ai-card,
    #register-page .study-ai-card,
    #login-page .progress-window,
    #register-page .progress-window {
        right: 14px !important;
    }
}

@media (max-width: 980px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
    }
}

/* Auth emergency fix: escalar la escena completa sin deformar sus tarjetas */
#login-page .auth-layout,
#register-page .auth-layout {
    grid-template-columns: minmax(420px, 52%) minmax(420px, 48%) !important;
    gap: 64px !important;
    overflow: hidden !important;
}

#login-page .auth-study-visual,
#register-page .auth-study-visual {
    width: 100% !important;
    max-width: 640px !important;
    height: 620px !important;
    min-height: 620px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 1 !important;
}

#login-page .auth-visual-inner,
#register-page .auth-visual-inner {
    position: relative !important;
    width: 720px !important;
    height: 620px !important;
    min-width: 720px !important;
    flex: 0 0 720px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: scale(0.86) !important;
    transform-origin: center !important;
}

#login-page .auth-study-scene,
#register-page .auth-study-scene {
    position: relative !important;
    width: 560px !important;
    height: 560px !important;
    min-width: 560px !important;
    max-width: none !important;
    flex: 0 0 560px !important;
    margin: 0 !important;
}

#login-page .auth-visual .auth-visual-inner *,
#register-page .auth-visual .auth-visual-inner * {
    max-width: none !important;
}

#login-page .study-monitor,
#register-page .study-monitor {
    width: 392px !important;
    height: 294px !important;
    top: 138px !important;
}

#login-page .calendar-window,
#register-page .calendar-window {
    left: 2px !important;
    top: 42px !important;
    width: 136px !important;
    height: 112px !important;
}

#login-page .tasks-window,
#register-page .tasks-window {
    right: -10px !important;
    top: 42px !important;
    width: 142px !important;
    height: 122px !important;
}

#login-page .study-ai-card,
#register-page .study-ai-card {
    right: -18px !important;
    top: 236px !important;
    width: 126px !important;
    min-height: 66px !important;
}

#login-page .document-window,
#register-page .document-window {
    left: -8px !important;
    bottom: 52px !important;
    width: 134px !important;
    height: 126px !important;
}

#login-page .progress-window,
#register-page .progress-window {
    right: -10px !important;
    bottom: 32px !important;
    width: 156px !important;
    height: 104px !important;
}

#login-page .study-pencil,
#register-page .study-pencil {
    left: 220px !important;
    bottom: 42px !important;
    width: 104px !important;
}

#login-page .chat-one,
#register-page .chat-one {
    left: 218px !important;
    top: 42px !important;
    width: 112px !important;
}

#login-page .chat-two,
#register-page .chat-two {
    right: 174px !important;
    bottom: 28px !important;
    width: 112px !important;
}

#login-page .auth-card,
#register-page .auth-card,
#login-page .login-card,
#register-page .login-card {
    position: relative !important;
    z-index: 10 !important;
    justify-self: center !important;
}

@media (max-width: 1120px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: minmax(360px, 500px) minmax(380px, 520px) !important;
        gap: 48px !important;
    }

    #login-page .auth-visual-inner,
    #register-page .auth-visual-inner {
        transform: scale(0.78) !important;
    }
}

@media (max-width: 980px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    #login-page .auth-study-visual,
    #register-page .auth-study-visual {
        display: none !important;
    }
}

/* Auth size adjustment: ilustracion mas grande, completa y a la izquierda */
#login-page .auth-layout,
#register-page .auth-layout {
    grid-template-columns: minmax(520px, 1fr) minmax(520px, 560px) !important;
    gap: 64px !important;
    align-items: center !important;
    overflow: visible !important;
}

#login-page .auth-study-visual,
#register-page .auth-study-visual {
    overflow: visible !important;
    justify-self: end !important;
    transform: translateX(-28px) !important;
    max-width: 720px !important;
    height: 680px !important;
    min-height: 680px !important;
}

#login-page .auth-visual-inner,
#register-page .auth-visual-inner {
    width: 760px !important;
    height: 680px !important;
    min-width: 760px !important;
    flex-basis: 760px !important;
    transform: scale(0.94) !important;
    transform-origin: center center !important;
}

#login-page .auth-card,
#register-page .auth-card,
#login-page .login-card,
#register-page .login-card {
    max-width: 560px !important;
    min-height: 680px !important;
    height: 680px !important;
    justify-self: start !important;
    z-index: 5 !important;
}

@media (max-width: 1180px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: minmax(460px, 1fr) minmax(480px, 540px) !important;
        gap: 52px !important;
    }

    #login-page .auth-study-visual,
    #register-page .auth-study-visual {
        transform: translateX(-18px) !important;
    }

    #login-page .auth-visual-inner,
    #register-page .auth-visual-inner {
        transform: scale(0.88) !important;
    }
}

@media (max-width: 980px) {
    #login-page .auth-layout,
    #register-page .auth-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    #login-page .auth-study-visual,
    #register-page .auth-study-visual {
        display: none !important;
    }

    #login-page .auth-card,
    #register-page .auth-card,
    #login-page .login-card,
    #register-page .login-card {
        height: auto !important;
        min-height: auto !important;
        justify-self: center !important;
    }
}

/* Landing refresh: experiencia visual principal */
#landing-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(123, 104, 238, 0.18), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(73, 204, 249, 0.16), transparent 28%),
        linear-gradient(180deg, #151823 0%, #1b1d28 48%, #141722 100%) !important;
}

#landing-page .landing-nav {
    width: min(1180px, calc(100% - 36px)) !important;
    min-height: 68px !important;
    margin: 14px auto 0 !important;
    padding: 10px 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
}

#landing-page .btn-large {
    min-height: 58px !important;
    padding: 0 34px !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 44px rgba(73, 204, 249, 0.22), 0 12px 34px rgba(253, 113, 175, 0.12) !important;
}

#landing-page .btn-large:hover {
    transform: translateY(-3px) scale(1.01) !important;
}

#landing-page .card-1,
#landing-page .card-2,
#landing-page .card-3,
#landing-page .card-4 {
    grid-column: span 3 !important;
}

#landing-page .floating-card .icon {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

#landing-page .floating-card .icon::before,
#landing-page .floating-card .icon::after {
    content: "";
    position: absolute;
    border-radius: 6px;
    background: #ffffff;
    opacity: 0.92;
}

#landing-page .floating-card .icon::before {
    width: 20px;
    height: 16px;
}

#landing-page .floating-card .icon::after {
    width: 11px;
    height: 11px;
    transform: translate(9px, 9px);
    background: #fd71af;
}

#landing-page .benefits,
#landing-page .about-project,
#landing-page .use-benefits {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

#landing-page .benefits {
    padding: clamp(52px, 7vw, 82px) clamp(20px, 4vw, 40px) !important;
}

#landing-page .benefits h2,
#landing-page .use-benefits h2,
#landing-page .about-text h2 {
    font-size: clamp(2rem, 4vw, 3.35rem) !important;
    line-height: 1.06 !important;
}

#landing-page .benefits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#landing-page .benefit-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(22, 26, 39, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#landing-page .benefit-card::after {
    content: none !important;
}

#landing-page .benefit-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    margin-bottom: 8px !important;
    border-radius: 18px !important;
}

#landing-page .benefit-card h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
}

#landing-page .benefit-card p {
    margin: 0 !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
}

#landing-page .feature-list {
    list-style: none !important;
    margin: auto 0 0 !important;
    padding: 14px 0 0 !important;
    display: grid !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#landing-page .feature-list li {
    position: relative;
    padding-left: 18px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.84rem;
    line-height: 1.25;
}

#landing-page .feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #49ccf9, #fd71af);
    box-shadow: 0 0 12px rgba(73, 204, 249, 0.42);
}

#landing-page .use-benefits {
    padding: clamp(50px, 7vw, 76px) clamp(20px, 4vw, 40px) !important;
}

#landing-page .use-benefits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

#landing-page .use-benefit-card {
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 24px !important;
}

#landing-page .use-benefit-card h3 {
    font-size: 1.14rem !important;
    margin-bottom: 8px !important;
}

#landing-page .use-benefit-card p {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

.study-pet {
    right: 18px !important;
    bottom: 24px !important;
    z-index: 30 !important;
}

.pet-bubble {
    max-width: 230px !important;
}

body.light-theme #landing-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(123, 104, 238, 0.13), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(14, 165, 233, 0.16), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 52%, #ffffff 100%) !important;
}body.light-theme #landing-page .about-description, body.light-theme #landing-page .feature-list li, body.light-theme #landing-page .use-benefit-card p{
    color: #475569 !important;
}body.light-theme #landing-page .landing-nav, body.light-theme #landing-page .floating-card, body.light-theme #landing-page .benefit-card, body.light-theme #landing-page .use-benefit-card{
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(241, 247, 255, 0.78)),
        #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #landing-page .benefits,
body.light-theme #landing-page .about-project,
body.light-theme #landing-page .use-benefits {
    background:
        radial-gradient(circle at 16% 20%, rgba(14, 165, 233, 0.10), transparent 28%),
        radial-gradient(circle at 86% 28%, rgba(236, 72, 153, 0.10), transparent 30%),
        rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}body.light-theme #landing-page .benefits h2, body.light-theme #landing-page .about-text h2, body.light-theme #landing-page .use-benefits h2, body.light-theme #landing-page .benefit-card h3, body.light-theme #landing-page .use-benefit-card h3{
    color: #0f172a !important;
}body.light-theme #landing-page .benefit-card p, body.light-theme #landing-page .tutor-message, body.light-theme #landing-page .floating-card p{
    color: #334155 !important;
}

@keyframes landingScan {
    0%, 42% { transform: translateX(-110%); opacity: 0; }
    52% { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes landingProgress {
    from { transform: scaleX(0.70); }
    to { transform: scaleX(1); }
}

@keyframes aiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1120px) {

    #landing-page .benefits-grid,
    #landing-page .use-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #landing-page .landing-nav {
        width: min(100% - 24px, 1180px) !important;
        padding: 10px !important;
    }#landing-page .benefits, #landing-page .about-project, #landing-page .use-benefits{
        width: min(100% - 24px, 1180px) !important;
    }#landing-page .card-1, #landing-page .card-2, #landing-page .card-3, #landing-page .card-4{
        grid-column: 1 !important;
    }#landing-page .benefits-grid, #landing-page .use-benefits-grid{
        grid-template-columns: 1fr !important;
    }

    .study-pet {
        right: 12px !important;
        bottom: 14px !important;
        transform: scale(0.88) !important;
        transform-origin: right bottom !important;
    }

    .pet-bubble {
        max-width: 170px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
}

/* Calendar compact visual refresh */
#calendar .calendar-container {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr) !important;
    gap: 22px !important;
    align-items: start !important;
    overflow: visible !important;
}

#calendar .calendar-side {
    min-width: 0 !important;
    display: grid !important;
    gap: 18px !important;
}

#calendar .calendar-mini {
    width: 100% !important;
    max-width: none !important;
    padding: 24px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
        rgba(14, 17, 30, 0.86) !important;
    border: 1px solid rgba(73, 204, 249, 0.16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

#calendar .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#calendar .calendar-title-block {
    text-align: center !important;
    min-width: 0 !important;
}

#calendar .calendar-title {
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

#calendar .calendar-title-block p {
    margin: 5px 0 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
    color: var(--text-secondary) !important;
}

#calendar .calendar-month-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    font-size: 1.15rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#calendar .calendar-grid,
#calendar .calendar-grid-wide {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 12px !important;
    animation: calendarMonthIn 0.35s ease both;
}

#calendar .calendar-day-label {
    min-height: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: var(--text-secondary) !important;
}

#calendar .calendar-day {
    min-height: 76px !important;
    height: 76px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease !important;
}

#calendar .calendar-day-number,
#calendar .calendar-grid .calendar-day-number {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
}

#calendar .calendar-day.muted {
    min-height: 76px !important;
    height: 76px !important;
    color: rgba(165, 174, 194, 0.38) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    border-color: rgba(255, 255, 255, 0.035) !important;
}

#calendar .calendar-day:not(.muted):hover {
    transform: translateY(-2px) !important;
    border-color: rgba(73, 204, 249, 0.48) !important;
    background: rgba(73, 204, 249, 0.08) !important;
}

#calendar .calendar-day.has-event {
    color: #ffffff !important;
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(56, 189, 248, 0.12)),
        rgba(255, 255, 255, 0.052) !important;
    border-color: rgba(73, 204, 249, 0.42) !important;
    box-shadow: 0 14px 36px rgba(56, 189, 248, 0.11) !important;
}

#calendar .calendar-day.has-event::after {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #6366f1, #38bdf8, #ec4899) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.38) !important;
}

#calendar .calendar-day.is-today,
#calendar .calendar-day.selected {
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.34), rgba(56, 189, 248, 0.24)),
        rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(56, 189, 248, 0.62) !important;
}

#calendar .calendar-event-marker {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ec4899, #38bdf8) !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.22) !important;
    z-index: 3 !important;
}

#calendar .events-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 22px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
        rgba(14, 17, 30, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

#calendar .events-list h3 {
    margin: 0 0 16px !important;
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
}

#calendar #custom-events-list {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#calendar .event-item.event-custom {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    min-height: auto !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.11), rgba(56, 189, 248, 0.055)),
        rgba(255, 255, 255, 0.042) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid rgba(236, 72, 153, 0.74) !important;
}

#calendar .event-item.event-custom .event-date {
    width: 56px !important;
    min-width: 56px !important;
    height: 64px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border-radius: 18px !important;
    background: rgba(56, 189, 248, 0.11) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
}

#calendar .event-item.event-custom .event-date .day {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

#calendar .event-item.event-custom .event-date .month {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
}

#calendar .event-item.event-custom .event-content {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 9px !important;
}

#calendar .event-item.event-custom .event-content h4 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

#calendar .event-item.event-custom .event-content p {
    margin: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    color: var(--text-secondary) !important;
    max-width: 100% !important;
}

#calendar .event-item.event-custom .event-badge,
#calendar .event-item.event-custom .event-alert {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 7px 11px !important;
    border-radius: 11px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#calendar .event-item.event-custom .email-simulation {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    display: block !important;
    text-align: left !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    background: rgba(56, 189, 248, 0.12) !important;
}

#calendar .event-item.event-custom .card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

#calendar .event-item.event-custom .card-actions .google-calendar-btn {
    grid-column: 1 / -1 !important;
}

#calendar .event-item.event-custom .card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.light-theme #calendar .calendar-mini,
body.light-theme #calendar .events-list {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.78)),
        #ffffff !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #calendar .calendar-day {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.035) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-theme #calendar .calendar-day.muted {
    color: rgba(71, 85, 105, 0.42) !important;
    background: rgba(15, 23, 42, 0.018) !important;
}

body.light-theme #calendar .event-item.event-custom {
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(56, 189, 248, 0.055)),
        rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
}

body.light-theme #calendar .event-item.event-custom .event-date {
    background: rgba(14, 165, 233, 0.10) !important;
    border-color: rgba(14, 165, 233, 0.18) !important;
}

@keyframes calendarMonthIn {
    from {
        opacity: 0.72;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    #calendar .calendar-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    #calendar .calendar-day,
    #calendar .calendar-day.muted {
        min-height: 64px !important;
        height: 64px !important;
        border-radius: 15px !important;
    }

    #calendar .calendar-day-number,
    #calendar .calendar-grid .calendar-day-number {
        font-size: 0.86rem !important;
    }
}

@media (max-width: 620px) {
    #calendar .calendar-mini,
    #calendar .events-list {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    #calendar .calendar-grid,
    #calendar .calendar-grid-wide {
        gap: 6px !important;
    }

    #calendar .calendar-day,
    #calendar .calendar-day.muted {
        min-height: 52px !important;
        height: 52px !important;
        padding: 7px !important;
        border-radius: 12px !important;
    }

    #calendar .calendar-day-number,
    #calendar .calendar-grid .calendar-day-number {
        font-size: 0.76rem !important;
    }

    #calendar .calendar-event-marker {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 0.64rem !important;
        top: 6px !important;
        right: 6px !important;
    }

    #calendar .calendar-day.has-event::after {
        left: 8px !important;
        right: 8px !important;
        bottom: 7px !important;
        height: 3px !important;
    }

    #calendar .event-item.event-custom {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }

    #calendar .event-item.event-custom .event-date {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
    }

    #calendar .event-item.event-custom .card-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
}/* Final real Hero layout: copy left, dashboard right{
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    padding: clamp(48px, 6vw, 78px) 0 clamp(58px, 7vw, 92px) !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
}

.study-pet {
    right: clamp(14px, 2vw, 28px) !important;
    bottom: clamp(14px, 2vw, 26px) !important;
    z-index: 20 !important;
}

.pet-bubble {
    max-width: 245px !important;
}

@media (max-width: 1120px) {
}

@media (max-width: 520px) {
}

/* Clean light mode priority layer */
body.light-mode,
body.light-theme,
[data-theme="light"] {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
}

body.light-mode .app,
body.light-mode .app-shell,
body.light-mode .main-content,
body.light-mode .page,
body.light-mode #landing-page,
body.light-mode .section,
body.light-mode .dashboard-content,
body.light-mode .content-area,
body.light-mode .dashboard-main,
body.light-mode .page-content,
body.light-theme .app,
body.light-theme .app-shell,
body.light-theme .main-content,
body.light-theme .page,
body.light-theme #landing-page,
body.light-theme .section,
body.light-theme .dashboard-content,
body.light-theme .content-area,
body.light-theme .dashboard-main,
body.light-theme .page-content,
[data-theme="light"] .app,
[data-theme="light"] .app-shell,
[data-theme="light"] .main-content,
[data-theme="light"] .page,
[data-theme="light"] #landing-page,
[data-theme="light"] .section,
[data-theme="light"] .dashboard-content,
[data-theme="light"] .content-area,
[data-theme="light"] .dashboard-main,
[data-theme="light"] .page-content {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
}body.light-mode #landing-page .benefits, body.light-mode #landing-page .about-project, body.light-mode #landing-page .use-benefits, body.light-theme #landing-page .benefits, body.light-theme #landing-page .about-project, body.light-theme #landing-page .use-benefits, [data-theme="light"] #landing-page .benefits, [data-theme="light"] #landing-page .about-project, [data-theme="light"] #landing-page .use-benefits{
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode p,
body.light-mode label,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme p,
body.light-theme label,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] p,
[data-theme="light"] label {
    color: #0f172a !important;
}

body.light-mode .muted,
body.light-mode .subtitle,
body.light-mode .section-subtitle,
body.light-mode .about-description,
body.light-mode .feature-list li,
body.light-mode .card-subtitle,
body.light-theme .muted,
body.light-theme .subtitle,
body.light-theme .section-subtitle,
body.light-theme .about-description,
body.light-theme .feature-list li,
body.light-theme .card-subtitle,
[data-theme="light"] .muted,
[data-theme="light"] .subtitle,
[data-theme="light"] .section-subtitle,
[data-theme="light"] .about-description,
[data-theme="light"] .feature-list li,
[data-theme="light"] .card-subtitle {
    color: #475569 !important;
}body.light-mode .landing-nav, body.light-mode .sidebar, body.light-mode .card, body.light-mode .glass-card, body.light-mode .feature-card, body.light-mode .benefit-card, body.light-mode .use-benefit-card, body.light-mode .ai-window, body.light-mode .ai-orbit-card, body.light-mode .stat-card, body.light-mode .summary-card, body.light-mode .subject-card, body.light-mode .task-card, body.light-mode .calendar-container, body.light-mode .calendar-month-card, body.light-mode .event-card, body.light-mode .grade-card, body.light-mode .resource-card, body.light-mode .profile-card, body.light-mode .auth-card, body.light-mode .quick-modal-card, body.light-theme .landing-nav, body.light-theme .sidebar, body.light-theme .card, body.light-theme .glass-card, body.light-theme .feature-card, body.light-theme .benefit-card, body.light-theme .use-benefit-card, body.light-theme .ai-window, body.light-theme .ai-orbit-card, body.light-theme .stat-card, body.light-theme .summary-card, body.light-theme .subject-card, body.light-theme .task-card, body.light-theme .calendar-container, body.light-theme .calendar-month-card, body.light-theme .event-card, body.light-theme .grade-card, body.light-theme .resource-card, body.light-theme .profile-card, body.light-theme .auth-card, body.light-theme .quick-modal-card, [data-theme="light"] .landing-nav, [data-theme="light"] .sidebar, [data-theme="light"] .card, [data-theme="light"] .glass-card, [data-theme="light"] .feature-card, [data-theme="light"] .benefit-card, [data-theme="light"] .use-benefit-card, [data-theme="light"] .ai-window, [data-theme="light"] .ai-orbit-card, [data-theme="light"] .stat-card, [data-theme="light"] .summary-card, [data-theme="light"] .subject-card, [data-theme="light"] .task-card, [data-theme="light"] .calendar-container, [data-theme="light"] .calendar-month-card, [data-theme="light"] .event-card, [data-theme="light"] .grade-card, [data-theme="light"] .resource-card, [data-theme="light"] .profile-card, [data-theme="light"] .auth-card, [data-theme="light"] .quick-modal-card{
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-theme input,
body.light-theme select,
body.light-theme textarea,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Official AC Edunity logo */
.brand-logo,
.nav-logo .brand-logo,
.sidebar-logo .brand-logo,
.auth-brand-logo {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex: 0 0 46px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.18) !important;
  filter: none !important;
}

.auth-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0.01em !important;
}

body.light-theme .auth-brand,
body.light-mode .auth-brand,
[data-theme="light"] .auth-brand {
  color: #0f172a !important;
}

@media (max-width: 520px) {
  .brand-logo,
  .nav-logo .brand-logo,
  .sidebar-logo .brand-logo,
  .auth-brand-logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
  }
}

/* Animation compatibility: keep animated visuals visible on older/mobile browsers */
#landing-page .reveal,
#landing-page .reveal-left,
#landing-page .reveal-right,
#landing-page .reveal-scale {
  visibility: visible !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

#landing-page .reveal.active,
#landing-page .reveal-left.active,
#landing-page .reveal-right.active,
#landing-page .reveal-scale.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@media (max-width: 760px) {
  #landing-page .reveal,
  #landing-page .reveal-left,
  #landing-page .reveal-right,
  #landing-page .reveal-scale {
    transform: translate3d(0, 22px, 0) scale(0.98) !important;
  }

  #landing-page .reveal.active,
  #landing-page .reveal-left.active,
  #landing-page .reveal-right.active,
  #landing-page .reveal-scale.active {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}#login-page .auth-visual, #register-page .auth-visual, #login-page .auth-visual-inner, #register-page .auth-visual-inner, .study-pet, .pet-robot, .auth-study-scene, .study-window, .study-chat, .study-pencil, .study-gear, .study-particle{
  animation-play-state: running !important;
}

@media (max-width: 980px) {
  #login-page .auth-layout,
  #register-page .auth-layout {
    gap: 18px !important;
  }

  #login-page .auth-visual,
  #register-page .auth-visual {
    display: flex !important;
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    overflow: visible !important;
    justify-self: center !important;
    transform: none !important;
  }

  #login-page .auth-visual-inner,
  #register-page .auth-visual-inner {
    width: 720px !important;
    height: 620px !important;
    transform: scale(0.46) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 620px) {
  #login-page .auth-visual,
  #register-page .auth-visual {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  #login-page .auth-visual-inner,
  #register-page .auth-visual-inner {
    transform: scale(0.36) !important;
  }
}

@supports not (animation-name: fadeIn) {
  #landing-page .reveal,
  #landing-page .reveal-left,
  #landing-page .reveal-right,
  #landing-page .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
body.light-theme input::placeholder,
body.light-theme textarea::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #64748b !important;
}

body.light-mode .btn-large,
body.light-mode .btn-primary,
body.light-mode .quick-action-btn,
body.light-theme .btn-large,
body.light-theme .btn-primary,
body.light-theme .quick-action-btn,
[data-theme="light"] .btn-large,
[data-theme="light"] .btn-primary,
[data-theme="light"] .quick-action-btn {
    color: #ffffff !important;
}

body.light-mode .btn-secondary,
body.light-mode .btn-ghost,
body.light-theme .btn-secondary,
body.light-theme .btn-ghost,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost {
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.quick-modal-form input[type="file"] {
    cursor: pointer !important;
    padding: 13px 14px !important;
    line-height: 1.4 !important;
}

.quick-modal-form input[type="file"]::file-selector-button {
    margin-right: 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 9px 13px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #7b68ee, #49ccf9, #fd71af) !important;
}

.avatar-upload-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.avatar-upload-row input[type="file"] {
    width: auto !important;
    min-width: 260px !important;
    flex: 1 1 280px !important;
}

.remove-avatar-btn {
    width: fit-content !important;
    border: 1px solid rgba(244, 114, 182, 0.55) !important;
    background: rgba(244, 114, 182, 0.12) !important;
    color: #f472b6 !important;
    border-radius: 18px !important;
    padding: 14px 20px !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.remove-avatar-btn:hover:not(:disabled) {
    background: rgba(244, 114, 182, 0.22) !important;
    border-color: rgba(244, 114, 182, 0.65) !important;
    transform: translateY(-1px) !important;
}

.remove-avatar-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#profile .profile-avatar-premium img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 24px !important;
}

/* Perfil y Progreso: separar identidad personal de gamificacion academica */
#profile .profile-layout {
    align-items: start !important;
}

#profile .profile-academic-summary {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 12px !important;
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    justify-self: end !important;
}

#profile .profile-summary-title {
    grid-column: 1 / -1 !important;
    color: #49ccf9 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

#profile .profile-academic-summary > div {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 12px 14px !important;
    text-align: left !important;
}

#profile .profile-academic-summary .profile-summary-icon {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
}

#profile .profile-academic-summary > div > span:not(.profile-summary-icon) {
    grid-column: 2 !important;
    min-width: 0 !important;
    line-height: 1.1 !important;
}

#profile .profile-academic-summary strong {
    grid-column: 2 !important;
    max-width: 100% !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

#profile .profile-goals-card,
#profile .profile-activity-card {
    min-height: 0 !important;
}

#profile .profile-goals-card {
    grid-column: 1 / 2 !important;
}

#profile .profile-activity-card {
    grid-column: 2 / 3 !important;
}

#progress .premium-achievements-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
    gap: 16px !important;
}

#progress .progress-achievement-card {
    min-height: 178px !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    overflow: hidden !important;
    text-align: center !important;
    border-radius: 24px !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease !important;
}

#progress .progress-achievement-card::after {
    content: none !important;
}

#progress .progress-achievement-card.unlocked {
    border-color: rgba(73, 204, 249, 0.38) !important;
    background:
        linear-gradient(145deg, rgba(73, 204, 249, 0.14), rgba(123, 104, 238, 0.10)),
        rgba(255, 255, 255, 0.045) !important;
    box-shadow: 0 18px 46px rgba(73, 204, 249, 0.12) !important;
}

#progress .progress-achievement-card.locked {
    opacity: 0.62 !important;
    filter: grayscale(0.55) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

#progress .progress-achievement-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(73, 204, 249, 0.55) !important;
    box-shadow: 0 24px 60px rgba(73, 204, 249, 0.18) !important;
}

#progress .progress-achievement-icon {
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #7b68ee, #49ccf9) !important;
    box-shadow: 0 16px 36px rgba(73, 204, 249, 0.22) !important;
}

#progress .progress-achievement-icon svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#progress .progress-achievement-card.locked .progress-achievement-icon {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    box-shadow: none !important;
}

#progress .achievement-lock {
    position: absolute !important;
    right: -6px !important;
    bottom: -6px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    background: #111827 !important;
}

#progress .achievement-lock svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.3 !important;
}

#progress .progress-achievement-card p {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
}

#progress .progress-achievement-card small {
    color: var(--text-tertiary) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.light-theme #profile .profile-summary-title {
    color: #0284c7 !important;
}

body.light-theme #profile .profile-academic-summary > div {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light-theme #progress .progress-achievement-card.unlocked {
    background:
        linear-gradient(145deg, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.08)),
        #ffffff !important;
    border-color: rgba(14, 165, 233, 0.24) !important;
}

body.light-theme #progress .progress-achievement-card.locked {
    background: #f8fafc !important;
}

body.light-theme #progress .progress-achievement-card p {
    color: #172033 !important;
}

body.light-theme #progress .progress-achievement-card small {
    color: #64748b !important;
}

@media (max-width: 1180px) {
    #profile .profile-academic-summary {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    #profile .profile-academic-summary,
    #profile .profile-goals-card,
    #profile .profile-activity-card {
        grid-column: 1 / -1 !important;
    }

    #profile .profile-academic-summary {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    #progress .premium-achievements-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }

    #progress .progress-achievement-card {
        min-height: 160px !important;
        padding: 18px 12px !important;
    }
}

/* Perfil: panel superior limpio con resumen academico tipo lista */
#profile .profile-hero {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 360px) !important;
    align-items: center !important;
    gap: 34px !important;
}

#profile .profile-summary-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 380px !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 26px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18) !important;
}

#profile .profile-summary-card .profile-summary-title {
    display: block !important;
    margin: 0 !important;
    color: #38bdf8 !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.10em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

#profile .profile-summary-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#profile .profile-summary-item {
    width: 100% !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.28) !important;
    overflow: hidden !important;
}

#profile .profile-summary-label {
    min-width: 0 !important;
    display: block !important;
    color: rgba(226, 232, 240, 0.74) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#profile .profile-summary-card .profile-summary-icon {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.20) !important;
}

#profile .profile-summary-card .profile-summary-icon svg {
    width: 21px !important;
    height: 21px !important;
}

#profile .profile-summary-value {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    color: #f8fafc !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.light-theme #profile .profile-summary-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09) !important;
}

body.light-theme #profile .profile-summary-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-theme #profile .profile-summary-label {
    color: #475569 !important;
}

body.light-theme #profile .profile-summary-value {
    color: #0f172a !important;
}

@media (max-width: 1100px) {
    #profile .profile-hero {
        grid-template-columns: 200px minmax(0, 1fr) !important;
    }

    #profile .profile-summary-card {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 720px) {
    #profile .profile-hero {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    #profile .profile-summary-card {
        padding: 20px !important;
    }

    #profile .profile-summary-card .profile-summary-title {
        text-align: center !important;
    }
}

/* Perfil: resumen academico reconstruido como lista limpia */
#profile .profile-hero,
#profile .profile-identity-card {
    align-items: center !important;
}

#profile .profile-summary-card {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 28px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#profile .profile-summary-title {
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: #38bdf8 !important;
}

#profile .profile-summary-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#profile .profile-summary-row {
    width: 100% !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.28) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#profile .profile-summary-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.20) !important;
}

#profile .profile-summary-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#profile .profile-summary-label {
    min-width: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: rgba(226, 232, 240, 0.75) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#profile .profile-summary-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #f8fafc !important;
    white-space: nowrap !important;
    text-align: right !important;
}

body.light-mode #profile .profile-summary-card,
body.light-theme #profile .profile-summary-card,
[data-theme="light"] #profile .profile-summary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode #profile .profile-summary-row,
body.light-theme #profile .profile-summary-row,
[data-theme="light"] #profile .profile-summary-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode #profile .profile-summary-label,
body.light-theme #profile .profile-summary-label,
[data-theme="light"] #profile .profile-summary-label {
    color: #475569 !important;
}

body.light-mode #profile .profile-summary-value,
body.light-theme #profile .profile-summary-value,
[data-theme="light"] #profile .profile-summary-value {
    color: #0f172a !important;
}

@media (max-width: 1100px) {
    #profile .profile-summary-card {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 720px) {
    #profile .profile-summary-card {
        padding: 22px !important;
    }

    #profile .profile-summary-title {
        text-align: left !important;
    }
}

/* Perfil: resumen academico definitivo con estructura nueva sin clases heredadas */
#profile .profile-hero,
#profile .profile-identity-card {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 430px !important;
    gap: 36px !important;
    align-items: center !important;
}

#profile .profile-academic-box {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 28px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
}

#profile .profile-academic-title {
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: #38bdf8 !important;
}

#profile .profile-academic-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#profile .profile-academic-row {
    width: 100% !important;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.32) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
}

#profile .profile-academic-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
    box-shadow: 0 12px 26px rgba(56, 189, 248, 0.22) !important;
    position: static !important;
    transform: none !important;
}

#profile .profile-academic-icon svg {
    width: 23px !important;
    height: 23px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#profile .profile-academic-label {
    min-width: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: rgba(226, 232, 240, 0.78) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.2 !important;
}

#profile .profile-academic-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #f8fafc !important;
    white-space: nowrap !important;
    text-align: right !important;
    line-height: 1 !important;
}

body.light-mode #profile .profile-academic-box,
body.light-theme #profile .profile-academic-box,
[data-theme="light"] #profile .profile-academic-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode #profile .profile-academic-row,
body.light-theme #profile .profile-academic-row,
[data-theme="light"] #profile .profile-academic-row {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode #profile .profile-academic-label,
body.light-theme #profile .profile-academic-label,
[data-theme="light"] #profile .profile-academic-label {
    color: #475569 !important;
}

body.light-mode #profile .profile-academic-value,
body.light-theme #profile .profile-academic-value,
[data-theme="light"] #profile .profile-academic-value {
    color: #0f172a !important;
}

@media (max-width: 1150px) {
    #profile .profile-hero,
    #profile .profile-identity-card {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    #profile .profile-academic-box {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 720px) {
    #profile .profile-hero,
    #profile .profile-identity-card {
        grid-template-columns: 1fr !important;
    }
}

/* Scroll limpio del menu principal: solo html controla la landing. */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
}

body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
}

body.landing-active {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

html.is-landing,
html.landing-mode {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

body.is-landing,
body.landing-mode {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

body.landing-active #app-page,
body.landing-active #app-page.page:not(.active) {
    display: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.landing-active #app,
body.landing-active .app,
body.landing-active .app-shell,
body.landing-active .main-app,
body.landing-active .page-shell,
body.landing-active .page-wrapper,
body.landing-active .main-content,
body.landing-active .content-area,
body.landing-active #landing-page,
body.landing-active #landing-page.page,
body.landing-active #landing-page.page.active,
body.landing-active .landing-page,
body.landing-active .landing-wrapper,
body.landing-active .landing-main,
body.landing-active .landing-content,
body.landing-active .public-page,
body.landing-active .marketing-page,
body.landing-active .home-page,
body.landing-active .sections-wrapper,
body.landing-active .hero-section,
body.landing-active .features-section,
body.landing-active .ai-section,
body.landing-active .benefits-section,
body.is-landing #landing-page,
body.is-landing #landing-page.page,
body.is-landing #landing-page.page.active,
body.is-landing .landing-page,
body.is-landing .landing-wrapper,
body.is-landing .landing-main,
body.is-landing .landing-content,
body.is-landing .public-page,
body.is-landing .marketing-page,
body.is-landing .home-page,
body.is-landing .sections-wrapper,
body.is-landing .hero-section,
body.is-landing .features-section,
body.is-landing .ai-section,
body.is-landing .benefits-section {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    overscroll-behavior: auto !important;
    scroll-snap-type: none !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

/* Rendimiento del scroll en landing: animar solo transform/opacity y aligerar filtros. */
body.landing-active #landing-page,
body.landing-active .landing-page,
body.landing-active .landing-wrapper,
body.landing-active .landing-main,
body.landing-active .sections-wrapper {
    scroll-snap-type: none !important;
}body.landing-active #landing-page .floating-card, body.landing-active .study-pet, body.landing-active .pet-robot{
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform, opacity;
}body.landing-active #landing-page .floating-card, body.landing-active #landing-page .landing-nav, body.landing-active #landing-page .benefit-card, body.landing-active #landing-page .use-benefit-card{
    backdrop-filter: blur(6px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
}body.landing-active #landing-page .benefit-card::after{
    filter: blur(4px) !important;
}

html.is-landing::-webkit-scrollbar,
html.landing-mode::-webkit-scrollbar,
body.is-landing::-webkit-scrollbar,
body.landing-mode::-webkit-scrollbar,
body.landing-active::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}

html.is-landing::-webkit-scrollbar-track,
html.landing-mode::-webkit-scrollbar-track,
body.is-landing::-webkit-scrollbar-track,
body.landing-mode::-webkit-scrollbar-track,
body.landing-active::-webkit-scrollbar-track {
    background: #ffffff !important;
}

html.is-landing::-webkit-scrollbar-thumb,
html.landing-mode::-webkit-scrollbar-thumb,
body.is-landing::-webkit-scrollbar-thumb,
body.landing-mode::-webkit-scrollbar-thumb,
body.landing-active::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 4px solid #ffffff !important;
    border-radius: 999px !important;
}

@media (max-width: 768px), (pointer: coarse) {body.landing-active #landing-page .benefit-card::after{
        filter: none !important;
        opacity: 0.55 !important;
    }body.landing-active #landing-page .floating-card, body.landing-active #landing-page .landing-nav{
        backdrop-filter: blur(6px) !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16) !important;
    }
}

/* ============================================
   FIX DEFINITIVO: LANDING CON UN SOLO SCROLL REAL
   El scroll de la landing lo maneja SOLO body.
   html queda sin scroll para que no aparezcan dos barras.
   ============================================ */
html.is-landing,
html.landing-mode {
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
}

body.is-landing,
body.landing-mode,
body.landing-active {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
}

body.is-landing #landing-page,
body.landing-mode #landing-page,
body.landing-active #landing-page,
body.is-landing #landing-page.page,
body.landing-mode #landing-page.page,
body.landing-active #landing-page.page,
body.is-landing #landing-page.page.active,
body.landing-mode #landing-page.page.active,
body.landing-active #landing-page.page.active {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    scroll-snap-type: none !important;
}

body.is-landing #app,
body.landing-mode #app,
body.landing-active #app,
body.is-landing .page-wrapper,
body.landing-mode .page-wrapper,
body.landing-active .page-wrapper,
body.is-landing .main-content,
body.landing-mode .main-content,
body.landing-active .main-content,
body.is-landing .landing-wrapper,
body.landing-mode .landing-wrapper,
body.landing-active .landing-wrapper,
body.is-landing .landing-main,
body.landing-mode .landing-main,
body.landing-active .landing-main,
body.is-landing .landing-content,
body.landing-mode .landing-content,
body.landing-active .landing-content,
body.is-landing .sections-wrapper,
body.landing-mode .sections-wrapper,
body.landing-active .sections-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    scroll-snap-type: none !important;
}

body.is-landing #app-page,
body.landing-mode #app-page,
body.landing-active #app-page,
body.is-landing #login-page:not(.active),
body.landing-mode #login-page:not(.active),
body.landing-active #login-page:not(.active),
body.is-landing #register-page:not(.active),
body.landing-mode #register-page:not(.active),
body.landing-active #register-page:not(.active) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

body.student-active,
body.is-dashboard {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html.is-dashboard,
html:not(.is-landing):not(.landing-mode) {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ============================================
   SONIDOS DE INTERFAZ Y CONFIGURACION
   ============================================ */
.ui-press-feedback {
    animation: uiPressFeedback 170ms ease-out;
}

@keyframes uiPressFeedback {
    0% { transform: scale(1); }
    45% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.sidebar-icon-settings {
    --sidebar-icon-a: #0ea5e9;
    --sidebar-icon-b: #8b5cf6;
    --sidebar-icon-c: #38bdf8;
}

.settings-layout {
    display: grid;
    gap: 22px;
    width: 100%;
}

.settings-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(236, 72, 153, 0.08)),
        rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
}

.settings-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #38bdf8;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-card h2 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 950;
}

.settings-card p {
    max-width: 620px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.settings-switch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch-track {
    position: relative;
    width: 76px;
    height: 40px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.22);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.settings-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8fafc, #cbd5e1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transition: transform 180ms ease, background 180ms ease;
}

.settings-switch input:checked + .settings-switch-track {
    background: linear-gradient(135deg, #6366f1, #38bdf8, #ec4899);
    border-color: rgba(56, 189, 248, 0.56);
    box-shadow: 0 12px 28px rgba(56, 189, 248, 0.20);
}

.settings-switch input:checked + .settings-switch-track .settings-switch-thumb {
    transform: translateX(36px);
    background: #ffffff;
}

.settings-switch input:focus-visible + .settings-switch-track {
    outline: 3px solid rgba(56, 189, 248, 0.35);
    outline-offset: 3px;
}

.settings-switch-label {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

body.light-theme .settings-card,
body.light-mode .settings-card,
[data-theme="light"] .settings-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

body.light-theme .settings-card p,
body.light-mode .settings-card p,
[data-theme="light"] .settings-card p {
    color: #475569;
}

body.light-theme .settings-switch-track,
body.light-mode .settings-switch-track,
[data-theme="light"] .settings-switch-track {
    background: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 6px rgba(15, 23, 42, 0.08);
}

body.light-theme .settings-switch-label,
body.light-mode .settings-switch-label,
[data-theme="light"] .settings-switch-label {
    color: #0f172a;
}

@media (max-width: 760px) {
    .settings-card {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* AC EDUNITY LANDING PREMIUM 2026 */
html.is-landing,html.landing-mode,body.is-landing,body.landing-mode,body.landing-active,#landing-page{--lp-bg:#07131f;--lp-surface:rgba(13,31,45,.82);--lp-border:rgba(148,178,199,.16);--lp-text:#f3f7fa;--lp-muted:#9eb0be;--lp-accent:#55b7c9;background-color:var(--lp-bg);background-image:none}#landing-page{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;color:var(--lp-text)}
#landing-page::before{content:none;display:none;background:none;mask:none}
#landing-page .landing-nav{width:min(1180px,calc(100% - 40px));min-height:68px;margin:14px auto 0;padding:10px 14px 10px 18px;border:1px solid var(--lp-border);border-radius:14px;background:rgba(7,19,31,.82);box-shadow:0 14px 42px rgba(0,0,0,.20);backdrop-filter:blur(18px);position:sticky;top:10px;z-index:100}
#landing-page .nav-logo{gap:10px;font-weight:700;letter-spacing:-.02em}#landing-page .brand-logo{width:36px;height:36px;object-fit:contain}
#landing-page .landing-links{gap:4px}#landing-page .landing-links a{padding:9px 12px;border-radius:8px;color:var(--lp-muted);font-size:.92rem;font-weight:550}#landing-page .landing-links a:hover{color:var(--lp-text);background:rgba(255,255,255,.05)}
#landing-page .nav-actions{gap:8px}#landing-page .nav-actions button{min-height:40px;border-radius:9px;font-weight:650;box-shadow:none}
#landing-page .nav-actions .btn-secondary{color:var(--lp-text);border-color:var(--lp-border);background:transparent}
#landing-page .nav-actions .btn-primary,#landing-page .btn-large{color:#06131b;border:1px solid rgba(255,255,255,.16);background:var(--lp-accent)}
#landing-page .nav-actions .btn-primary:hover,#landing-page .btn-large:hover{background:#70c6d5;transform:translateY(-1px);box-shadow:0 10px 28px rgba(47,143,165,.22)}
#landing-page .theme-toggle{border-color:var(--lp-border);background-color:rgba(255,255,255,.035)}#landing-page .section-eyebrow{position:relative;z-index:1;color:#8fd0dc;background:rgba(85,183,201,.08);border:1px solid rgba(85,183,201,.18);box-shadow:none;letter-spacing:.08em}#landing-page .btn-large{min-height:48px;padding:0 22px;font-size:.98rem}
#landing-page .benefits,#landing-page .about-project,#landing-page .use-benefits{position:relative;display:flow-root;margin:0;padding:88px 20px;border:0;background:transparent;box-shadow:none}
#landing-page .benefits>h2,#landing-page .about-project h2,#landing-page .use-benefits h2{color:var(--lp-text);letter-spacing:-.035em;font-size:clamp(2rem,3.6vw,3.15rem)}
#landing-page .benefits-grid,#landing-page .use-benefits-grid{gap:0;border-top:1px solid var(--lp-border);border-bottom:1px solid var(--lp-border)}
#landing-page .benefit-card,#landing-page .use-benefit-card{height:100%;min-height:260px;padding:30px 26px;border:0;border-right:1px solid var(--lp-border);border-radius:0;background:transparent;box-shadow:none}#landing-page .benefit-card:last-child,#landing-page .use-benefit-card:last-child{border-right:0}
#landing-page .benefit-card:hover,#landing-page .use-benefit-card:hover{transform:none;background:rgba(255,255,255,.022);box-shadow:none}#landing-page .benefit-icon, #landing-page .use-benefit-icon, #landing-page .feature-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;margin:0 0 22px;color:var(--lp-accent);border:1px solid rgba(85,183,201,.18);border-radius:10px;background:rgba(85,183,201,.055);box-shadow:none}#landing-page .use-benefit-icon::before, #landing-page .use-benefit-icon::after, #landing-page .plan-icon::before, #landing-page .plan-icon::after, #landing-page .focus-icon::before, #landing-page .focus-icon::after, #landing-page .growth-icon::before, #landing-page .growth-icon::after{content:none;display:none;background:none;background-image:none;mask:none;-webkit-mask:none;clip-path:none;box-shadow:none}#landing-page .benefit-icon svg, #landing-page .use-benefit-icon svg, #landing-page .feature-icon svg{position:relative;z-index:1;display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;filter:none}
#landing-page .benefit-card h3,#landing-page .use-benefit-card h3{color:var(--lp-text)}
#landing-page .benefit-card p,#landing-page .use-benefit-card p,#landing-page .use-benefits-intro,#landing-page .about-description{color:var(--lp-muted);line-height:1.65}
#landing-page .feature-list li{color:#b9c6cf}#landing-page .feature-list li::before{color:var(--lp-accent)}
#landing-page .use-benefits-intro{max-width:650px}#landing-page .use-benefit-icon{display:grid;place-items:center}
#landing-page .benefits-path{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:42px;padding:0;border:0;background:transparent}
#landing-page .benefits-path::before{content:"";position:absolute;top:20px;left:8%;right:8%;height:1px;background:var(--lp-border)}
#landing-page .benefits-path span{position:relative;display:grid;justify-items:center;gap:12px;padding:0 10px;color:var(--lp-muted);border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
#landing-page .benefits-path span b{z-index:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(85,183,201,.30);border-radius:50%;color:var(--lp-accent);background:var(--lp-bg);font-size:.78rem;font-weight:700}
#landing-page .benefits-path span em{color:var(--lp-muted);font-size:.9rem;font-style:normal;line-height:1.35}
#landing-page .landing-footer{margin:0;border:0;color:var(--lp-muted);background:transparent;box-shadow:none}#landing-page .study-pet{filter:saturate(.72)}
html.is-landing:has(body.light-theme),html.landing-mode:has(body.light-theme),body.light-theme{--lp-bg:#f4f7f9;background-color:var(--lp-bg);background-image:none}body.light-theme #landing-page{--lp-bg:#f4f7f9;--lp-surface:rgba(255,255,255,.86);--lp-border:rgba(24,56,77,.13);--lp-text:#102331;--lp-muted:#5d7180;background-color:var(--lp-bg);background-image:none}
body.light-theme #landing-page .landing-nav{background:rgba(248,251,252,.90)}body.light-theme #landing-page .benefit-card, body.light-theme #landing-page .use-benefit-card{background:rgba(255,255,255,.82)}
@media(max-width:980px){#landing-page .landing-nav{width:min(100% - 24px,760px);flex-wrap:wrap}#landing-page .landing-links{order:3;width:100%;justify-content:center;border-top:1px solid var(--lp-border);padding-top:8px}#landing-page .study-pet{right:10px;bottom:12px;transform:scale(.86);transform-origin:bottom right}#landing-page .benefits-grid,#landing-page .use-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#landing-page .landing-nav{margin-top:8px;top:6px;padding:9px 10px;border-radius:12px}#landing-page .nav-logo span{font-size:.96rem}#landing-page .brand-logo{width:32px;height:32px}#landing-page .nav-actions .btn-secondary{display:none}#landing-page .nav-actions .btn-primary{min-height:38px;padding-inline:12px;font-size:.84rem}#landing-page .landing-links{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}#landing-page .landing-links a{white-space:nowrap;padding:8px 10px;font-size:.83rem}#landing-page .benefits,#landing-page .about-project,#landing-page .use-benefits{padding:68px 16px}#landing-page .benefits-grid,#landing-page .use-benefits-grid{grid-template-columns:1fr}#landing-page .benefit-card,#landing-page .use-benefit-card{padding:22px}#landing-page .benefits-path{grid-template-columns:1fr;margin-top:34px;padding-left:2px}#landing-page .benefits-path::before{top:20px;bottom:20px;left:20px;right:auto;width:1px;height:auto}#landing-page .benefits-path span{grid-template-columns:40px 1fr;justify-items:start;align-items:center;gap:14px;min-height:64px;padding:0;text-align:left}#landing-page .study-pet{right:6px;bottom:8px;transform:scale(.76);transform-origin:bottom right}}
@media(prefers-reduced-motion:reduce){#landing-page .benefit-card:hover, #landing-page .use-benefit-card:hover{transform:none}}


/* AC EDUNITY TUTOR COMPACT 2026 */
#landing-page #ai-preview{padding:72px 20px;background:transparent;overflow:visible}
#landing-page #ai-preview::before,#landing-page #ai-preview::after{content:none;display:none}
#landing-page #ai-preview .ai-showcase-container{display:grid;grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);align-items:center;gap:clamp(44px,5vw,72px);width:min(1120px,100%);margin:auto}
#landing-page #ai-preview .ai-copy h2{max-width:570px;margin:0;color:var(--lp-text);font-size:clamp(2.15rem,3.8vw,3.35rem);line-height:1.08;letter-spacing:-.045em}
#landing-page #ai-preview .ai-copy h2 span{color:var(--lp-text);background-image:linear-gradient(110deg,var(--lp-accent),#8a82b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#landing-page #ai-preview .ai-copy .about-description{max-width:560px;margin:16px 0 0;color:var(--lp-muted);font-size:1.02rem;line-height:1.58}
#landing-page #ai-preview .ai-feature-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
#landing-page #ai-preview .about-feature{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;min-height:76px;padding:12px 13px;border:1px solid var(--lp-border);border-left:1px solid var(--lp-border);border-radius:10px;background:rgba(255,255,255,.018);box-shadow:none}
#landing-page #ai-preview .about-feature:hover{transform:translateY(-2px);border-color:rgba(85,183,201,.28);background:rgba(255,255,255,.03)}
#landing-page #ai-preview .about-feature .feature-icon{display:grid;place-items:center;width:40px;height:40px;min-width:40px;margin:0;border:1px solid rgba(85,183,201,.18);border-radius:9px;color:var(--lp-accent);background:rgba(85,183,201,.055);box-shadow:none;overflow:visible}
#landing-page #ai-preview .about-feature .feature-icon::before,#landing-page #ai-preview .about-feature .feature-icon::after{content:none;display:none}
#landing-page #ai-preview .about-feature .feature-icon svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transform:none}
#landing-page #ai-preview .ai-feature-copy{display:grid;gap:3px;min-width:0}
#landing-page #ai-preview .ai-feature-copy strong{color:var(--lp-text);font-size:.9rem}
#landing-page #ai-preview .ai-feature-copy small{color:var(--lp-muted);font-size:.76rem;line-height:1.35}
#landing-page #ai-preview .ai-trust-bar{display:flex;flex-wrap:wrap;margin-top:18px;color:var(--lp-muted);font-size:.78rem}
#landing-page #ai-preview .ai-trust-bar span{display:inline-flex;color:inherit}
#landing-page #ai-preview .ai-trust-bar span+span::before{content:"·";margin:0 9px;color:var(--lp-accent)}
#landing-page #ai-preview .ai-panel{position:relative;display:block;min-height:0}
#landing-page #ai-preview .ai-chat-shell{display:grid;gap:10px;width:min(100%,540px);margin:auto}
#landing-page #ai-preview .ai-window{position:relative;z-index:1;width:100%;margin:0;padding:0;border:1px solid var(--lp-border);border-radius:15px;background:#0c1e2c;box-shadow:0 24px 54px rgba(0,0,0,.25);overflow:hidden}
#landing-page #ai-preview .ai-window-top{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;margin:0;padding:13px 15px;border-bottom:1px solid var(--lp-border);background:rgba(255,255,255,.018)}
#landing-page #ai-preview .ai-status-dot{width:8px;height:8px;border-radius:50%;background:var(--lp-accent);box-shadow:0 0 0 3px rgba(85,183,201,.1)}
#landing-page #ai-preview .ai-window-top strong{margin:0;color:var(--lp-text);font-size:.85rem}
#landing-page #ai-preview .ai-window-top small{color:var(--lp-muted);font-size:.69rem}
#landing-page #ai-preview .ai-chat-body{display:grid;gap:11px;padding:16px}
#landing-page #ai-preview .ai-message{width:fit-content;max-width:84%;margin:0;padding:10px 12px;border:1px solid var(--lp-border);border-radius:11px;color:#dce7ed;font-size:.84rem;line-height:1.45;box-shadow:none}
#landing-page #ai-preview .user-message{justify-self:end;background:rgba(255,255,255,.04)}
#landing-page #ai-preview .tutor-message{justify-self:start;background:rgba(85,183,201,.055);border-color:rgba(85,183,201,.16)}
#landing-page #ai-preview .tutor-message strong{display:block;margin-bottom:4px;color:#9ed8e2;font-size:.75rem}
#landing-page #ai-preview .tutor-message p{margin:0;color:inherit;font-size:inherit}
#landing-page #ai-preview .ai-tool-row{display:flex;flex-wrap:wrap;gap:7px;margin:1px 0 0}
#landing-page #ai-preview .ai-tool-row span{padding:6px 9px;border:1px solid rgba(85,183,201,.16);border-radius:7px;color:#9ed8e2;background:transparent;font-size:.72rem}
#landing-page #ai-preview .ai-chat-input{display:grid;grid-template-columns:1fr 34px;align-items:center;gap:10px;margin:0 12px 12px;padding:7px 7px 7px 12px;border:1px solid var(--lp-border);border-radius:10px;color:var(--lp-muted);background:rgba(255,255,255,.018);font-size:.78rem}
#landing-page #ai-preview .ai-chat-input button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;color:#06151c;background:var(--lp-accent);box-shadow:none;pointer-events:none}
#landing-page #ai-preview .ai-chat-input button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
#landing-page #ai-preview .ai-orbit-card{position:relative;inset:auto;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;width:calc(100% - 42px);min-height:60px;margin:0;padding:10px 12px;border:1px solid var(--lp-border);border-radius:11px;background:rgba(13,31,45,.88);box-shadow:none;animation:none}
#landing-page #ai-preview .ai-card-one{justify-self:end}#landing-page #ai-preview .ai-card-two{justify-self:start}
#landing-page #ai-preview .ai-orbit-icon{display:grid;place-items:center;width:36px;height:36px;min-width:36px;border:1px solid rgba(85,183,201,.17);border-radius:8px;color:var(--lp-accent);background:rgba(85,183,201,.055);box-shadow:none}
#landing-page #ai-preview .ai-orbit-icon svg,#landing-page #ai-preview .ai-card-arrow{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#landing-page #ai-preview .ai-orbit-card p{display:grid;gap:2px;min-width:0;margin:0}
#landing-page #ai-preview .ai-orbit-card p strong{color:var(--lp-text);font-size:.8rem}#landing-page #ai-preview .ai-orbit-card p small{color:var(--lp-muted);font-size:.69rem}
#landing-page #ai-preview .ai-card-arrow{width:16px;height:16px;color:var(--lp-muted)}
body.light-theme #landing-page #ai-preview .ai-copy h2{color:#102431}body.light-theme #landing-page #ai-preview .ai-copy h2 span{background-image:linear-gradient(110deg,#227f94,#5a5688)}
body.light-theme #landing-page #ai-preview .about-feature,body.light-theme #landing-page #ai-preview .ai-orbit-card,body.light-theme #landing-page #ai-preview .ai-window{background:#fff;border-color:rgba(25,57,76,.13);box-shadow:none}
body.light-theme #landing-page #ai-preview .ai-window{box-shadow:0 20px 46px rgba(15,35,48,.09)}
body.light-theme #landing-page #ai-preview .ai-window-top,body.light-theme #landing-page #ai-preview .ai-chat-input{background:#f7fafb}
body.light-theme #landing-page #ai-preview .ai-message{color:#304b5a}body.light-theme #landing-page #ai-preview .user-message{background:#f2f6f8}body.light-theme #landing-page #ai-preview .tutor-message{background:rgba(63,150,168,.07)}
body.light-theme #landing-page #ai-preview .ai-feature-copy strong,body.light-theme #landing-page #ai-preview .ai-orbit-card p strong{color:#102431}
body.light-theme #landing-page #ai-preview .ai-feature-copy small,body.light-theme #landing-page #ai-preview .ai-orbit-card p small{color:#607583}
@media(max-width:1024px){#landing-page #ai-preview{padding:64px 20px}#landing-page #ai-preview .ai-showcase-container{grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr);gap:34px}#landing-page #ai-preview .ai-copy h2{font-size:clamp(2rem,4vw,2.8rem)}}
@media(max-width:768px){#landing-page #ai-preview{padding:60px 18px}#landing-page #ai-preview .ai-showcase-container{grid-template-columns:1fr;gap:36px}#landing-page #ai-preview .ai-copy{max-width:640px;margin:auto;text-align:center}#landing-page #ai-preview .ai-copy h2,#landing-page #ai-preview .ai-copy .about-description{margin-inline:auto}#landing-page #ai-preview .ai-trust-bar{justify-content:center}#landing-page #ai-preview .ai-chat-shell{width:min(100%,580px)}}
@media(max-width:480px){#landing-page #ai-preview{padding:54px 16px}#landing-page #ai-preview .ai-copy h2{font-size:clamp(2rem,10vw,2.65rem)}#landing-page #ai-preview .ai-feature-stack{grid-template-columns:1fr}#landing-page #ai-preview .about-feature{text-align:left}#landing-page #ai-preview .ai-trust-bar{justify-content:flex-start;text-align:left}#landing-page #ai-preview .ai-orbit-card{width:100%}#landing-page #ai-preview .ai-message{max-width:92%}#landing-page #ai-preview .ai-tool-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#landing-page #ai-preview .ai-tool-row span{padding-inline:5px;font-size:.68rem}}
@media(max-width:360px){#landing-page #ai-preview .ai-chat-body{padding:13px}#landing-page #ai-preview .ai-chat-input{margin-inline:9px}#landing-page #ai-preview .ai-orbit-card{grid-template-columns:34px minmax(0,1fr) 16px}}

/* AC EDUNITY HERO DASHBOARD COMPACT 2026 */
#landing-page .hero{position:relative;display:block;width:100%;min-height:640px;height:auto;margin:0;padding:64px 20px 58px;overflow:visible;background:var(--lp-bg)}
#landing-page .hero::before,#landing-page .hero::after,#landing-page .hero-visual::before,#landing-page .hero-visual::after,#landing-page .dashboard-mockup::before,#landing-page .dashboard-mockup::after{content:none;display:none;background:none;filter:none}
#landing-page .hero-content{display:grid;grid-template-columns:minmax(0,.96fr) minmax(430px,1.04fr);align-items:center;gap:clamp(42px,5vw,68px);width:min(1160px,100%);margin:auto;overflow:visible}
#landing-page .hero-left{min-width:0;max-width:590px;overflow:visible}
#landing-page .hero-badge{display:inline-flex;width:fit-content;margin:0 0 17px;padding:7px 11px;border:1px solid rgba(88,183,199,.2);border-radius:7px;color:#92d0db;background:rgba(88,183,199,.055);font-size:.72rem;font-weight:700;letter-spacing:.075em}
#landing-page .hero h1{display:block;max-width:650px;height:auto;max-height:none;margin:0 0 12px;padding:0 0 .12em;overflow:visible;color:#f4f8fa;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;font-size:clamp(2.7rem,4.65vw,4.25rem);line-height:1.09;letter-spacing:-.05em;opacity:1;filter:none;transform:none}
#landing-page .hero h1 span{color:#79c5d2;background-image:linear-gradient(110deg,#69becd,#8b85b7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#landing-page .hero-left>p{max-width:570px;margin:0;color:#9fb1bd;font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.58}
#landing-page .hero-actions{display:flex;margin-top:22px}
#landing-page .hero-actions .btn-large{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 19px;border-radius:8px;font-size:.94rem}
#landing-page .hero-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#landing-page .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:25px;border:0}
#landing-page .hero-proof>span{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;min-width:0;padding:9px 8px;border:1px solid rgba(157,188,207,.12);border-radius:8px;color:#9fb1bd;background:rgba(255,255,255,.015);font-size:.72rem;line-height:1.25}
#landing-page .hero-proof svg{width:21px;height:21px;fill:none;stroke:#58b7c7;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#landing-page .hero-proof small{display:block;color:inherit;font-size:inherit}#landing-page .hero-proof strong{display:block;margin:0 0 2px;color:#edf5f7;font-size:.76rem}
#landing-page .hero-right,#landing-page .hero-visual{align-self:center;min-width:0}
#landing-page .hero-visual{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:550px;min-height:0;height:auto;margin:0;overflow:visible;transform:none}
#landing-page .dashboard-mockup{position:relative;inset:auto;display:block;width:100%;max-width:none;min-height:0;height:auto;margin:0;padding:0;border:1px solid rgba(157,188,207,.14);border-radius:14px;background:#0c1e2c;box-shadow:0 22px 48px rgba(0,0,0,.24);overflow:hidden;backdrop-filter:none}
#landing-page .mockup-top{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:9px;margin:0;padding:12px 14px;border-bottom:1px solid rgba(157,188,207,.12);color:#9fb1bd;background:rgba(255,255,255,.015)}
#landing-page .panel-status{width:8px;height:8px;border-radius:50%;background:#58b7c7;box-shadow:0 0 0 3px rgba(88,183,199,.1)}
#landing-page .mockup-top strong{margin:0;color:#eef5f7;font-size:.82rem}#landing-page .mockup-top small{color:#7f949f;font-size:.65rem}
#landing-page .mockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
#landing-page .mockup-card{position:relative;min-height:68px;padding:12px;border:1px solid rgba(157,188,207,.12);border-radius:9px;background:rgba(255,255,255,.018);box-shadow:none}
#landing-page .mockup-card.wide{grid-column:span 2}#landing-page .mockup-card-heading{display:flex;justify-content:space-between;gap:10px}
#landing-page .mockup-card-heading small,#landing-page .mockup-card>small{margin:0;color:#91a5b0;font-size:.68rem;font-weight:650}#landing-page .mockup-card-heading span{color:#6f8793;font-size:.61rem}
#landing-page .progress-card{min-height:142px}
#landing-page .mockup-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:8px;height:92px;margin-top:7px}
#landing-page .mockup-bars>span{display:grid;grid-template-rows:1fr 13px;align-items:end;justify-items:center;height:100%;gap:4px}
#landing-page .mockup-bars i{display:block;width:min(100%,13px);height:var(--bar);min-height:12px;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,#63bdcc,#367f95)}
#landing-page .mockup-bars small{color:#718994;font-size:.55rem;line-height:1}
#landing-page .metric-card{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:9px}
#landing-page .metric-icon{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(88,183,199,.18);border-radius:8px;color:#58b7c7;background:rgba(88,183,199,.055)}
#landing-page .xp-icon{color:#d6ad52;border-color:rgba(214,173,82,.18);background:rgba(214,173,82,.055)}
#landing-page .metric-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#landing-page .metric-card small{align-self:end;color:#8399a4;font-size:.62rem}#landing-page .metric-card b{align-self:start;color:#eef5f7;font-size:.84rem}
#landing-page .tutor-card{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;min-height:62px}#landing-page .tutor-card small{display:block;margin:0 0 3px;color:#8399a4;font-size:.62rem}#landing-page .tutor-card p{margin:0;color:#dbe7eb;font-size:.77rem}
#landing-page .hero-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:0}
#landing-page .hero-mini-card{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:54px;min-height:54px;max-height:none;margin:0;padding:9px;border:1px solid rgba(157,188,207,.12);border-radius:9px;color:#9fb1bd;background:rgba(13,31,45,.72);box-shadow:none;transform:none;overflow:visible}
#landing-page .hero-mini-card:hover{transform:translateY(-2px);border-color:rgba(88,183,199,.27)}#landing-page .hero-mini-card svg{width:19px;height:19px;fill:none;stroke:#58b7c7;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}#landing-page .hero-mini-card .mini-title{margin:0;color:#dce7eb;font-size:.73rem}
body.light-theme #landing-page .hero{background:var(--lp-bg)}body.light-theme #landing-page .hero h1{color:#102431;-webkit-text-fill-color:currentColor}body.light-theme #landing-page .hero h1 span{color:#277f93;background-image:linear-gradient(110deg,#237c90,#5e5a88);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.light-theme #landing-page .hero-left>p{color:#5a7180}body.light-theme #landing-page .dashboard-mockup{background:#fff;border-color:rgba(25,57,76,.13);box-shadow:0 18px 38px rgba(15,35,48,.09)}
body.light-theme #landing-page .mockup-card,body.light-theme #landing-page .hero-mini-card,body.light-theme #landing-page .hero-proof>span{background:#fff;border-color:rgba(25,57,76,.11)}body.light-theme #landing-page .mockup-top strong,body.light-theme #landing-page .metric-card b,body.light-theme #landing-page .tutor-card p,body.light-theme #landing-page .mini-title,body.light-theme #landing-page .hero-proof strong{color:#17303e}
@media(max-width:1024px){#landing-page .hero{min-height:610px;padding:58px 20px 52px}#landing-page .hero-content{grid-template-columns:minmax(0,.94fr) minmax(400px,1.06fr);gap:32px}#landing-page .hero h1{font-size:clamp(2.45rem,4.8vw,3.55rem)}#landing-page .hero-proof{grid-template-columns:1fr;gap:6px}}
@media(max-width:768px){#landing-page .hero{min-height:0;padding:62px 18px 54px}#landing-page .hero-content{grid-template-columns:1fr;gap:34px}#landing-page .hero-left{max-width:660px;margin:auto;text-align:center}#landing-page .hero-left>p{margin-inline:auto}#landing-page .hero-actions{justify-content:center}#landing-page .hero-proof{grid-template-columns:repeat(3,minmax(0,1fr));text-align:left}#landing-page .hero-visual{max-width:580px;margin:auto}}
@media(max-width:480px){#landing-page .hero{padding:56px 16px 48px}#landing-page .hero h1{font-size:clamp(2.25rem,11vw,2.9rem);line-height:1.12}#landing-page .hero-proof{grid-template-columns:1fr}#landing-page .mockup-grid{gap:7px;padding:9px}#landing-page .mockup-bars{gap:5px}#landing-page .hero-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#landing-page .study-pet{right:5px;bottom:8px;transform:scale(.74);transform-origin:bottom right}}
@media(max-width:360px){#landing-page .hero{padding-inline:12px}#landing-page .hero h1{font-size:2.18rem}#landing-page .mockup-card{padding:9px}#landing-page .mockup-bars{gap:3px}}


/* AC EDUNITY HERO SEAM CONTINUITY 2026 */
body.is-landing #landing-page,
body.landing-mode #landing-page,
body.landing-active #landing-page {
    background-color: var(--lp-bg);
    background-image: none;
}

body.is-landing #landing-page > .hero,
body.landing-mode #landing-page > .hero,
body.landing-active #landing-page > .hero,
body.is-landing #landing-page > .hero + #features,
body.landing-mode #landing-page > .hero + #features,
body.landing-active #landing-page > .hero + #features {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
}

body.is-landing #landing-page > .hero::before,
body.is-landing #landing-page > .hero::after,
body.landing-mode #landing-page > .hero::before,
body.landing-mode #landing-page > .hero::after,
body.landing-active #landing-page > .hero::before,
body.landing-active #landing-page > .hero::after {
    content: none;
    display: none;
}


/* Progreso: interfaz SaaS profesional, compacta y responsive */
body #progress {
    --progress-surface: rgba(27, 32, 43, 0.92);
    --progress-surface-muted: rgba(255, 255, 255, 0.035);
    --progress-surface-hover: rgba(255, 255, 255, 0.055);
    --progress-border: rgba(226, 232, 240, 0.11);
    --progress-border-strong: rgba(226, 232, 240, 0.18);
    --progress-text: #f8fafc;
    --progress-text-muted: #9aa7b8;
    --progress-text-subtle: #748196;
    --progress-accent: #7b68ee;
    --progress-info: #55bfe8;
    --progress-success: #36c98f;
    --progress-warning: #e7ab48;
    --progress-danger: #f06a83;
    --progress-locked: #7f8a9c;
    --progress-track: rgba(148, 163, 184, 0.16);
    width: 100% !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
}

body #progress .section-header {
    margin-bottom: 24px !important;
}

body #progress .section-header h1 {
    margin: 0 !important;
    color: var(--progress-text) !important;
    font-size: clamp(34px, 3vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

body #progress .section-header .subtitle {
    max-width: 680px !important;
    margin: 6px 0 0 !important;
    color: var(--progress-text-muted) !important;
    font-size: clamp(15px, 1.35vw, 17px) !important;
    line-height: 1.5 !important;
}

body #progress .progress-container {
    display: grid !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body #progress .premium-border {
    position: relative !important;
    isolation: auto !important;
    overflow: hidden !important;
    border: 1px solid var(--progress-border) !important;
    box-shadow: 0 10px 30px rgba(4, 9, 18, 0.12) !important;
}

body #progress .premium-border::before,
body #progress .premium-border::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

body #progress .progress-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 2.3fr) minmax(160px, 0.7fr) !important;
    gap: 32px !important;
    align-items: center !important;
    min-height: 240px !important;
    padding: 30px 34px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(85, 191, 232, 0.055), transparent 34%),
        var(--progress-surface) !important;
    backdrop-filter: none !important;
}

body #progress .progress-hero-copy {
    min-width: 0 !important;
}

body #progress .progress-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 28px !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(123, 104, 238, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(123, 104, 238, 0.085) !important;
    color: #a79df6 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

body #progress .progress-hero h2 {
    margin: 12px 0 6px !important;
    color: var(--progress-text) !important;
    font-size: clamp(52px, 5vw, 68px) !important;
    font-weight: 780 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    text-shadow: none !important;
}

body #progress .progress-hero p {
    max-width: 620px !important;
    margin: 0 !important;
    color: var(--progress-text-muted) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body #progress .progress-xp-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 12px !important;
}

body #progress .progress-xp-meta span {
    display: inline-flex !important;
    min-height: 30px !important;
    align-items: center !important;
    padding: 5px 10px !important;
    border: 1px solid var(--progress-border) !important;
    border-radius: 9px !important;
    background: var(--progress-surface-muted) !important;
    color: var(--progress-text-muted) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    text-transform: none !important;
}

body #progress .progress-xp-bar {
    width: min(100%, 680px) !important;
    height: 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--progress-track) !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.07) !important;
}

body #progress .progress-xp-bar .xp-fill {
    min-width: 3px !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #7768df, #55aee0) !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    animation: none !important;
    transition: width 220ms ease !important;
}

body #progress .progress-hero small {
    display: block !important;
    width: min(100%, 680px) !important;
    min-height: 0 !important;
    margin-top: 7px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--progress-text-subtle) !important;
    font-size: 11px !important;
    font-weight: 590 !important;
    line-height: 1.4 !important;
    text-align: right !important;
}

body #progress .progress-level-orb {
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: 176px !important;
    height: 176px !important;
    aspect-ratio: 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, var(--progress-surface) 0 66%, transparent 67%),
        conic-gradient(#7768df var(--xp, 0%), var(--progress-track) 0) !important;
    box-shadow: inset 0 0 0 1px var(--progress-border) !important;
}

body #progress .progress-level-orb strong {
    align-self: end !important;
    color: var(--progress-text) !important;
    font-size: 54px !important;
    font-weight: 760 !important;
    line-height: 0.9 !important;
    text-shadow: none !important;
}

body #progress .progress-level-orb span {
    align-self: start !important;
    margin: 7px 0 0 !important;
    color: var(--progress-text-muted) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

body #progress .progress-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body #progress .premium-progress-stat {
    --progress-color: var(--progress-info);
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 104px !important;
    padding: 16px 17px !important;
    overflow: hidden !important;
    border: 1px solid var(--progress-border) !important;
    border-radius: 18px !important;
    background: var(--progress-surface) !important;
    box-shadow: 0 8px 24px rgba(4, 9, 18, 0.10) !important;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

body #progress .premium-progress-stat::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 14px 0 !important;
    display: block !important;
    height: 2px !important;
    border-radius: 999px 999px 0 0 !important;
    background: var(--progress-color) !important;
    opacity: 0.42 !important;
}

body #progress .premium-progress-stat:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--progress-color), transparent 56%) !important;
    background: var(--progress-surface-hover) !important;
    box-shadow: 0 12px 30px rgba(4, 9, 18, 0.15) !important;
}

body #progress .stat-streak { --progress-color: var(--progress-warning); }
body #progress .stat-trophy { --progress-color: #9d8cf2; }
body #progress .stat-status { --progress-color: var(--progress-info); }
body #progress .stat-activity { --progress-color: #7689ec; }
body #progress .stat-tasks { --progress-color: var(--progress-success); }

body #progress .progress-stat-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid color-mix(in srgb, var(--progress-color), transparent 65%) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--progress-color), transparent 87%) !important;
    box-shadow: none !important;
    color: var(--progress-color) !important;
}

body #progress .progress-stat-icon::before,
body #progress .progress-stat-icon::after {
    box-shadow: none !important;
}

body #progress .premium-progress-stat > div {
    min-width: 0 !important;
}

body #progress .premium-progress-stat .stat-label {
    display: block !important;
    overflow: visible !important;
    color: var(--progress-text-muted) !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

body #progress .premium-progress-stat .stat-value {
    display: block !important;
    margin: 3px 0 2px !important;
    overflow: visible !important;
    color: var(--progress-text) !important;
    font-size: clamp(20px, 2vw, 25px) !important;
    font-weight: 750 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

body #progress .premium-progress-stat small {
    display: block !important;
    color: var(--progress-text-subtle) !important;
    font-size: 10px !important;
    font-weight: 550 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

body #progress .progress-path,
body #progress .progress-achievements,
body #progress .progress-empty-callout {
    padding: 24px !important;
    border-radius: 18px !important;
    background: var(--progress-surface) !important;
    box-shadow: 0 10px 30px rgba(4, 9, 18, 0.10) !important;
}

body #progress .progress-section-title {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

body #progress .progress-section-title h3 {
    margin: 0 !important;
    color: var(--progress-text) !important;
    font-size: 18px !important;
    font-weight: 720 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.012em !important;
}

body #progress .progress-section-title p {
    max-width: 440px !important;
    margin: 0 !important;
    color: var(--progress-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: right !important;
}

body #progress .student-path {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(92px, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 4px 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
}

body #progress .student-path::-webkit-scrollbar {
    display: none !important;
}

body #progress .student-path::before {
    content: "" !important;
    position: absolute !important;
    left: 10% !important;
    right: 10% !important;
    top: 38px !important;
    z-index: 0 !important;
    display: block !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--progress-track) !important;
    box-shadow: none !important;
}

body #progress .path-step {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 76px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body #progress .path-step span {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border: 1px solid var(--progress-border-strong) !important;
    border-radius: 50% !important;
    background: var(--progress-surface) !important;
    color: var(--progress-text-subtle) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body #progress .path-step.active span {
    border-color: rgba(123, 104, 238, 0.36) !important;
    background: var(--progress-accent) !important;
    color: #ffffff !important;
}

body #progress .path-step.current span {
    outline: 4px solid rgba(123, 104, 238, 0.13) !important;
    outline-offset: 3px !important;
    border-color: #a79df6 !important;
}

body #progress .path-step small {
    color: var(--progress-text-subtle) !important;
    font-size: 10px !important;
    font-weight: 590 !important;
    line-height: 1.3 !important;
}

body #progress .path-step.active small,
body #progress .path-step.current small {
    color: var(--progress-text-muted) !important;
}

body #progress .progress-empty-callout {
    display: grid !important;
    gap: 4px !important;
    padding: 15px 18px !important;
    border-left: 3px solid var(--progress-info) !important;
}

body #progress .progress-empty-callout strong {
    color: var(--progress-text) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
}

body #progress .progress-empty-callout span {
    color: var(--progress-text-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

body #progress .premium-achievements-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body #progress .progress-achievement-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    justify-content: initial !important;
    min-height: 102px !important;
    padding: 15px !important;
    overflow: hidden !important;
    border: 1px solid var(--progress-border) !important;
    border-radius: 16px !important;
    background: var(--progress-surface-muted) !important;
    box-shadow: none !important;
    text-align: left !important;
    opacity: 1 !important;
    filter: none !important;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

body #progress .progress-achievement-card::after {
    content: none !important;
    display: none !important;
}

body #progress .progress-achievement-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--progress-border-strong) !important;
    background: var(--progress-surface-hover) !important;
    box-shadow: 0 8px 22px rgba(4, 9, 18, 0.10) !important;
}

body #progress .progress-achievement-card.unlocked {
    border-color: rgba(85, 191, 232, 0.22) !important;
    background: rgba(85, 191, 232, 0.045) !important;
}

body #progress .progress-achievement-card.locked {
    border-color: var(--progress-border) !important;
    background: var(--progress-surface-muted) !important;
}

body #progress .progress-achievement-icon {
    position: relative !important;
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    overflow: visible !important;
    border: 1px solid rgba(85, 191, 232, 0.24) !important;
    border-radius: 14px !important;
    background: rgba(85, 191, 232, 0.10) !important;
    box-shadow: none !important;
    color: var(--progress-info) !important;
}

body #progress .progress-achievement-card.locked .progress-achievement-icon {
    border-color: var(--progress-border-strong) !important;
    background: rgba(127, 138, 156, 0.08) !important;
    color: var(--progress-locked) !important;
    filter: grayscale(0.35) !important;
}

body #progress .progress-achievement-icon svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body #progress .achievement-lock {
    position: absolute !important;
    right: -4px !important;
    bottom: -4px !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid var(--progress-border-strong) !important;
    border-radius: 50% !important;
    background: var(--progress-surface) !important;
    color: var(--progress-text-muted) !important;
    box-shadow: none !important;
}

body #progress .achievement-lock svg {
    width: 11px !important;
    height: 11px !important;
}

body #progress .progress-achievement-card p {
    grid-column: 2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--progress-text) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body #progress .progress-achievement-card small {
    grid-column: 2 !important;
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--progress-text-muted) !important;
    font-size: 10px !important;
    font-weight: 550 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body.light-theme #progress {
    --progress-surface: #ffffff;
    --progress-surface-muted: #f7f9fc;
    --progress-surface-hover: #f1f5f9;
    --progress-border: rgba(15, 23, 42, 0.09);
    --progress-border-strong: rgba(15, 23, 42, 0.16);
    --progress-text: #172033;
    --progress-text-muted: #607086;
    --progress-text-subtle: #8190a4;
    --progress-track: rgba(100, 116, 139, 0.15);
}

body.light-theme #progress .progress-hero,
body.light-theme #progress .premium-progress-stat,
body.light-theme #progress .progress-path,
body.light-theme #progress .progress-achievements,
body.light-theme #progress .progress-empty-callout {
    box-shadow: 0 8px 24px rgba(29, 43, 68, 0.07) !important;
}

body.light-theme #progress .progress-level-orb {
    background:
        radial-gradient(circle, #ffffff 0 66%, transparent 67%),
        conic-gradient(#7768df var(--xp, 0%), var(--progress-track) 0) !important;
}

body.light-theme #progress .progress-achievement-card.unlocked {
    border-color: rgba(37, 154, 199, 0.20) !important;
    background: rgba(85, 191, 232, 0.045) !important;
}

@media (max-width: 1280px) {
    body #progress .progress-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body #progress .premium-achievements-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    body #progress .progress-hero {
        grid-template-columns: minmax(0, 1fr) 160px !important;
        padding: 28px !important;
    }

    body #progress .progress-level-orb {
        width: 156px !important;
        height: 156px !important;
    }

    body #progress .progress-level-orb strong {
        font-size: 48px !important;
    }
}

@media (max-width: 768px) {
    body #progress .section-header {
        margin-bottom: 20px !important;
    }

    body #progress .section-header h1 {
        font-size: 32px !important;
    }

    body #progress .progress-container {
        gap: 16px !important;
    }

    body #progress .progress-hero {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        min-height: 0 !important;
        padding: 24px !important;
    }

    body #progress .progress-level-orb {
        grid-row: 2 !important;
        width: 148px !important;
        height: 148px !important;
    }

    body #progress .progress-level-orb strong {
        font-size: 44px !important;
    }

    body #progress .progress-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body #progress .progress-section-title {
        display: grid !important;
        gap: 4px !important;
    }

    body #progress .progress-section-title p {
        text-align: left !important;
    }

    body #progress .student-path {
        grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
        min-width: 620px !important;
    }

    body #progress .premium-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    body #progress .progress-hero {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    body #progress .progress-hero h2 {
        font-size: 48px !important;
    }

    body #progress .progress-xp-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body #progress .progress-xp-meta span {
        width: 100% !important;
    }

    body #progress .premium-progress-stat {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 94px !important;
        padding: 14px !important;
        border-radius: 15px !important;
    }

    body #progress .progress-stat-icon {
        width: 40px !important;
        height: 40px !important;
    }

    body #progress .progress-path,
    body #progress .progress-achievements,
    body #progress .progress-empty-callout {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    body #progress .progress-achievement-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        min-height: 94px !important;
        padding: 12px !important;
    }

    body #progress .progress-achievement-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
}

@media (max-width: 375px) {
    body #progress .progress-stat-grid,
    body #progress .premium-achievements-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #progress .progress-xp-bar .xp-fill,
    body #progress .premium-progress-stat,
    body #progress .progress-achievement-card {
        transition: none !important;
        animation: none !important;
    }

    body #progress .premium-progress-stat:hover,
    body #progress .progress-achievement-card:hover {
        transform: none !important;
    }
}


/* Perfil: interfaz SaaS profesional, compacta y responsive */
body #profile {
    --profile-surface: rgba(27, 32, 43, 0.92);
    --profile-surface-muted: rgba(255, 255, 255, 0.035);
    --profile-surface-hover: rgba(255, 255, 255, 0.055);
    --profile-border: rgba(226, 232, 240, 0.11);
    --profile-border-strong: rgba(226, 232, 240, 0.18);
    --profile-text: #f8fafc;
    --profile-text-muted: #9aa7b8;
    --profile-text-subtle: #748196;
    --profile-accent: #7b68ee;
    --profile-info: #55bfe8;
    --profile-success: #36c98f;
    --profile-warning: #e7ab48;
    --profile-danger: #f06a83;
    --profile-timeline: rgba(148, 163, 184, 0.18);
    width: 100% !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
}

body #profile .section-header {
    margin-bottom: 24px !important;
}

body #profile .section-header h1 {
    margin: 0 !important;
    color: var(--profile-text) !important;
    font-size: clamp(34px, 3vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

body #profile .section-header .subtitle {
    max-width: 680px !important;
    margin: 6px 0 0 !important;
    color: var(--profile-text-muted) !important;
    font-size: clamp(15px, 1.35vw, 17px) !important;
    line-height: 1.5 !important;
}

body #profile .profile-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: stretch !important;
}

body #profile .premium-profile-card {
    position: relative !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: 18px !important;
    background: var(--profile-surface) !important;
    box-shadow: 0 10px 30px rgba(4, 9, 18, 0.11) !important;
    backdrop-filter: none !important;
}

body #profile .premium-profile-card::before,
body #profile .premium-profile-card::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

body #profile .profile-hero {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) minmax(280px, 0.62fr) !important;
    gap: 28px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 30px 34px !important;
    background:
        radial-gradient(circle at 94% 8%, rgba(85, 191, 232, 0.05), transparent 32%),
        var(--profile-surface) !important;
}

body #profile .profile-avatar-zone {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body #profile .profile-avatar-premium,
body #profile .profile-avatar {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 124px !important;
    height: 124px !important;
    min-width: 124px !important;
    flex-basis: 124px !important;
    overflow: hidden !important;
    border: 1px solid var(--profile-border-strong) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(123, 104, 238, 0.20), rgba(85, 191, 232, 0.12)) !important;
    box-shadow: 0 12px 28px rgba(4, 9, 18, 0.15) !important;
    color: var(--profile-text) !important;
    font-size: 34px !important;
    font-weight: 720 !important;
    text-shadow: none !important;
}

body #profile .profile-avatar-premium img,
body #profile .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: none !important;
}

body #profile .profile-avatar-zone > button {
    width: 124px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid var(--profile-border-strong) !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--profile-text-muted) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #profile .profile-avatar-zone > button:hover {
    transform: translateY(-1px) !important;
    color: var(--profile-text) !important;
    border-color: rgba(85, 191, 232, 0.34) !important;
    background: rgba(85, 191, 232, 0.07) !important;
}

body #profile .profile-avatar-zone > button:focus-visible,
body #profile .profile-details-premium > button:focus-visible,
body #profile .profile-section-header > button:focus-visible,
body #profile .profile-goal:focus-visible {
    outline: 3px solid rgba(85, 191, 232, 0.32) !important;
    outline-offset: 3px !important;
}

body #profile .profile-details-premium {
    display: grid !important;
    justify-items: start !important;
    align-content: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body #profile .profile-role {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 27px !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(123, 104, 238, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(123, 104, 238, 0.085) !important;
    color: #a79df6 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

body #profile .profile-details-premium h2 {
    max-width: 100% !important;
    margin: 10px 0 5px !important;
    overflow: hidden !important;
    color: var(--profile-text) !important;
    font-size: clamp(46px, 4.2vw, 58px) !important;
    font-weight: 780 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

body #profile .profile-career {
    margin: 0 0 7px !important;
    color: var(--profile-info) !important;
    font-size: clamp(17px, 1.55vw, 20px) !important;
    font-weight: 680 !important;
    line-height: 1.35 !important;
}

body #profile .profile-details-premium > p:not(.profile-career) {
    max-width: 620px !important;
    margin: 0 !important;
    color: var(--profile-text-muted) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body #profile .profile-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 13px 0 15px !important;
}

body #profile .profile-tags span {
    display: inline-flex !important;
    min-height: 27px !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: 999px !important;
    background: var(--profile-surface-muted) !important;
    color: var(--profile-text-muted) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 590 !important;
}

body #profile .profile-details-premium > button {
    min-height: 44px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(123, 104, 238, 0.34) !important;
    border-radius: 12px !important;
    background: #7163e8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(59, 46, 151, 0.16) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

body #profile .profile-details-premium > button:hover {
    transform: translateY(-1px) !important;
    background: #7b6cef !important;
    border-color: rgba(154, 142, 247, 0.54) !important;
    box-shadow: 0 10px 24px rgba(59, 46, 151, 0.22) !important;
}

body #profile .profile-academic-box {
    align-self: stretch !important;
    display: grid !important;
    align-content: start !important;
    min-width: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: 16px !important;
    background: var(--profile-surface-muted) !important;
    box-shadow: none !important;
}

body #profile .profile-academic-title {
    margin: 0 0 8px !important;
    color: var(--profile-text-muted) !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

body #profile .profile-academic-list {
    display: grid !important;
    gap: 0 !important;
}

body #profile .profile-academic-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--profile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 180ms ease !important;
}

body #profile .profile-academic-row:last-child {
    border-bottom: 0 !important;
}

body #profile .profile-academic-row:hover {
    background: var(--profile-surface-hover) !important;
}

body #profile .profile-academic-icon {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 1px solid rgba(85, 191, 232, 0.24) !important;
    border-radius: 12px !important;
    background: rgba(85, 191, 232, 0.09) !important;
    color: var(--profile-info) !important;
    box-shadow: none !important;
}

body #profile .profile-academic-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body #profile .profile-academic-label {
    min-width: 0 !important;
    color: var(--profile-text-muted) !important;
    font-size: 11px !important;
    font-weight: 590 !important;
    line-height: 1.3 !important;
}

body #profile .profile-academic-value {
    color: var(--profile-text) !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
    font-weight: 730 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body #profile .profile-goals-card,
body #profile .profile-activity-card {
    min-height: 0 !important;
    padding: 24px !important;
}

body #profile .profile-goals-card {
    grid-column: 1 !important;
}

body #profile .profile-activity-card {
    grid-column: 2 !important;
}

body #profile .profile-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

body #profile .profile-section-kicker {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--profile-text-subtle) !important;
    font-size: 10px !important;
    font-weight: 620 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

body #profile .profile-section-header h3,
body #profile .profile-activity-card > h3 {
    margin: 0 !important;
    color: var(--profile-text) !important;
    font-size: 18px !important;
    font-weight: 720 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.012em !important;
}

body #profile .profile-section-header > button {
    min-height: 40px !important;
    padding: 0 13px !important;
    border: 1px solid var(--profile-border-strong) !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--profile-text-muted) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #profile .profile-section-header > button:hover {
    transform: translateY(-1px) !important;
    color: var(--profile-text) !important;
    border-color: rgba(123, 104, 238, 0.34) !important;
    background: rgba(123, 104, 238, 0.07) !important;
}

body #profile .profile-goals-list {
    display: grid !important;
    gap: 9px !important;
}

body #profile .profile-goal {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--profile-border) !important;
    border-radius: 13px !important;
    background: var(--profile-surface-muted) !important;
    box-shadow: none !important;
    color: var(--profile-text) !important;
    text-align: left !important;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease !important;
}

body #profile .profile-goal:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(123, 104, 238, 0.28) !important;
    background: var(--profile-surface-hover) !important;
}

body #profile .profile-goal > span {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(123, 104, 238, 0.28) !important;
    border-radius: 10px !important;
    background: rgba(123, 104, 238, 0.09) !important;
    color: #a79df6 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

body #profile .profile-goal > strong {
    min-width: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1.4 !important;
}

body #profile .profile-goal.done {
    border-color: rgba(54, 201, 143, 0.20) !important;
    background: rgba(54, 201, 143, 0.05) !important;
}

body #profile .profile-goal.done > span {
    border-color: rgba(54, 201, 143, 0.30) !important;
    background: rgba(54, 201, 143, 0.10) !important;
    color: var(--profile-success) !important;
}

body #profile .profile-activity-card > .profile-section-kicker {
    margin-bottom: 4px !important;
}

body #profile .profile-activity-card > h3 {
    margin-bottom: 15px !important;
}

body #profile .profile-activity-list {
    position: relative !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #profile .profile-activity-list::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 1px !important;
    background: var(--profile-timeline) !important;
    box-shadow: none !important;
}

body #profile .profile-activity-list li {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 54px !important;
    align-items: center !important;
    padding: 10px 0 10px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--profile-border) !important;
    background: transparent !important;
}

body #profile .profile-activity-list li:last-child {
    border-bottom: 0 !important;
}

body #profile .profile-activity-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 1px !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    border: 2px solid var(--profile-surface) !important;
    border-radius: 50% !important;
    background: var(--profile-info) !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

body #profile .profile-activity-list li > span {
    color: var(--profile-info) !important;
    font-size: 10px !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

body #profile .profile-activity-list li > strong {
    min-width: 0 !important;
    color: var(--profile-text-muted) !important;
    font-size: 13px !important;
    font-weight: 590 !important;
    line-height: 1.45 !important;
}

body #profile .profile-empty-note {
    display: grid !important;
    gap: 4px !important;
    min-height: 96px !important;
    place-content: center start !important;
    padding: 16px !important;
    border: 1px dashed var(--profile-border-strong) !important;
    border-radius: 13px !important;
    background: var(--profile-surface-muted) !important;
}

body #profile .profile-empty-note strong {
    color: var(--profile-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

body #profile .profile-empty-note span {
    color: var(--profile-text-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

body.light-theme #profile {
    --profile-surface: #ffffff;
    --profile-surface-muted: #f7f9fc;
    --profile-surface-hover: #f1f5f9;
    --profile-border: rgba(15, 23, 42, 0.09);
    --profile-border-strong: rgba(15, 23, 42, 0.16);
    --profile-text: #172033;
    --profile-text-muted: #607086;
    --profile-text-subtle: #8190a4;
    --profile-timeline: rgba(100, 116, 139, 0.20);
}

body.light-theme #profile .premium-profile-card {
    box-shadow: 0 8px 24px rgba(29, 43, 68, 0.07) !important;
}

body.light-theme #profile .profile-avatar-premium,
body.light-theme #profile .profile-avatar {
    background: linear-gradient(145deg, rgba(123, 104, 238, 0.14), rgba(85, 191, 232, 0.08)) !important;
}

@media (max-width: 1180px) {
    body #profile .profile-hero {
        grid-template-columns: 112px minmax(0, 1fr) minmax(260px, 0.58fr) !important;
        gap: 22px !important;
        padding: 28px !important;
    }

    body #profile .profile-avatar-premium,
    body #profile .profile-avatar {
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        flex-basis: 112px !important;
    }

    body #profile .profile-avatar-zone > button {
        width: 112px !important;
    }
}

@media (max-width: 900px) {
    body #profile .profile-hero {
        grid-template-columns: 104px minmax(0, 1fr) !important;
    }

    body #profile .profile-academic-box {
        grid-column: 1 / -1 !important;
        grid-template-columns: 150px minmax(0, 1fr) !important;
        align-items: center !important;
    }

    body #profile .profile-academic-title {
        margin: 0 !important;
    }

    body #profile .profile-academic-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body #profile .profile-academic-row {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        min-height: 64px !important;
        padding: 7px !important;
        border: 1px solid var(--profile-border) !important;
        border-radius: 12px !important;
    }

    body #profile .profile-academic-value {
        grid-column: 2 !important;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    body #profile .section-header {
        margin-bottom: 20px !important;
    }

    body #profile .section-header h1 {
        font-size: 32px !important;
    }

    body #profile .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body #profile .profile-hero {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 24px !important;
        text-align: center !important;
    }

    body #profile .profile-avatar-zone {
        justify-self: center !important;
    }

    body #profile .profile-details-premium {
        justify-items: center !important;
        text-align: center !important;
    }

    body #profile .profile-details-premium h2 {
        font-size: 40px !important;
        white-space: normal !important;
    }

    body #profile .profile-tags {
        justify-content: center !important;
    }

    body #profile .profile-details-premium > button {
        min-width: 180px !important;
    }

    body #profile .profile-academic-box {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    body #profile .profile-academic-title {
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    body #profile .profile-academic-list {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    body #profile .profile-academic-row {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        min-height: 58px !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--profile-border) !important;
        border-radius: 0 !important;
    }

    body #profile .profile-academic-row:last-child {
        border-bottom: 0 !important;
    }

    body #profile .profile-academic-value {
        grid-column: auto !important;
        text-align: right !important;
    }

    body #profile .profile-goals-card,
    body #profile .profile-activity-card {
        grid-column: 1 !important;
        padding: 18px !important;
    }
}

@media (max-width: 480px) {
    body #profile .profile-hero {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    body #profile .profile-avatar-premium,
    body #profile .profile-avatar {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        flex-basis: 100px !important;
        border-radius: 22px !important;
    }

    body #profile .profile-avatar-zone > button {
        width: 120px !important;
    }

    body #profile .profile-details-premium h2 {
        font-size: 34px !important;
    }

    body #profile .profile-career {
        font-size: 16px !important;
    }

    body #profile .profile-details-premium > p:not(.profile-career) {
        font-size: 14px !important;
    }

    body #profile .profile-details-premium > button {
        width: 100% !important;
    }

    body #profile .profile-section-header {
        align-items: flex-end !important;
    }

    body #profile .profile-goal {
        padding: 10px 12px !important;
    }

    body #profile .profile-activity-list li {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #profile .profile-avatar-zone > button,
    body #profile .profile-details-premium > button,
    body #profile .profile-section-header > button,
    body #profile .profile-goal {
        transition: none !important;
    }

    body #profile .profile-avatar-zone > button:hover,
    body #profile .profile-details-premium > button:hover,
    body #profile .profile-section-header > button:hover,
    body #profile .profile-goal:hover {
        transform: none !important;
    }
}


/* Mochila Digital: biblioteca academica SaaS compacta y responsive */
body #backpack {
    --backpack-surface: #111827;
    --backpack-surface-raised: #172033;
    --backpack-surface-soft: #1b2538;
    --backpack-border: rgba(148, 163, 184, 0.17);
    --backpack-border-strong: rgba(148, 163, 184, 0.28);
    --backpack-text: #f4f7fb;
    --backpack-muted: #a8b3c5;
    --backpack-subtle: #7f8ca3;
    --backpack-accent: #7c6ff0;
    width: 100% !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding: 0 0 32px !important;
    color: var(--backpack-text);
}

body #backpack > .section-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    gap: 20px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #backpack > .section-header h1 {
    margin: 0 !important;
    color: var(--backpack-text) !important;
    font-size: clamp(2.125rem, 3vw, 2.5rem) !important;
    font-weight: 780 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    text-shadow: none !important;
}

body #backpack > .section-header .subtitle {
    margin: 7px 0 0 !important;
    color: var(--backpack-muted) !important;
    font-size: clamp(.94rem, 1.2vw, 1.05rem) !important;
    line-height: 1.45 !important;
}

body #backpack .backpack-toolbar {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.7fr) repeat(3, minmax(142px, .72fr)) auto !important;
    align-items: end !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
    padding: 18px !important;
    border: 1px solid var(--backpack-border) !important;
    border-radius: 18px !important;
    background: var(--backpack-surface) !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .16) !important;
    overflow: visible !important;
}

body #backpack .backpack-toolbar label {
    min-width: 0 !important;
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: var(--backpack-muted) !important;
    font-size: .76rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

body #backpack .backpack-toolbar input,
body #backpack .backpack-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    color: var(--backpack-text) !important;
    font: inherit !important;
    font-size: .89rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background-color: var(--backpack-surface-soft) !important;
    border: 1px solid var(--backpack-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

body #backpack .backpack-toolbar input::placeholder {
    color: var(--backpack-subtle) !important;
    opacity: 1 !important;
}

body #backpack .backpack-toolbar input:hover,
body #backpack .backpack-toolbar select:hover {
    border-color: var(--backpack-border-strong) !important;
    background-color: #202b3f !important;
}

body #backpack .backpack-toolbar input:focus,
body #backpack .backpack-toolbar select:focus {
    border-color: color-mix(in srgb, var(--backpack-accent) 70%, white 8%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--backpack-accent) 18%, transparent) !important;
}

body #backpack .backpack-toolbar .btn-primary {
    width: auto !important;
    min-width: 126px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    align-self: end !important;
    justify-self: end !important;
    border: 1px solid color-mix(in srgb, var(--backpack-accent) 74%, white 8%) !important;
    border-radius: 12px !important;
    background: #6f63df !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(74, 62, 180, .18) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

body #backpack .backpack-toolbar .btn-primary:hover {
    transform: translateY(-1px) !important;
    background: #7b70e8 !important;
    box-shadow: 0 8px 18px rgba(74, 62, 180, .22) !important;
}

body #backpack .backpack-toolbar .btn-primary:focus-visible,
body #backpack .resource-actions button:focus-visible,
body #backpack .empty-state button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--backpack-accent) 42%, transparent) !important;
    outline-offset: 2px !important;
}

body #backpack .backpack-container,
body #backpack .backpack-grid,
body #backpack .resources-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #backpack .resource-card.library-resource-card,
body #backpack .library-resource-card {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
    color: var(--backpack-text) !important;
    background: var(--backpack-surface) !important;
    border: 1px solid var(--backpack-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(2, 8, 23, .14) !important;
    transform: none !important;
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, background-color 190ms ease !important;
}

body #backpack .resource-card.library-resource-card::before,
body #backpack .library-resource-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 4px !important;
    height: auto !important;
    background: var(--resource-color, #7c6ff0) !important;
    border: 0 !important;
    border-radius: 18px 0 0 18px !important;
    box-shadow: none !important;
    opacity: .9 !important;
    pointer-events: none !important;
}

body #backpack .resource-card.library-resource-card::after,
body #backpack .library-resource-card::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
    background: linear-gradient(225deg, var(--backpack-surface-soft) 0 49%, transparent 51%) !important;
    border: 0 !important;
    opacity: .7 !important;
    pointer-events: none !important;
}

body #backpack .resource-card.library-resource-card:hover,
body #backpack .library-resource-card:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--resource-color, #7c6ff0) 34%, var(--backpack-border)) !important;
    background: var(--backpack-surface-raised) !important;
    box-shadow: 0 13px 30px rgba(2, 8, 23, .2) !important;
}

body #backpack .library-resource-card .neon-border-lines {
    display: none !important;
}

body #backpack .library-resource-card .resource-top {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 18px 0 0 !important;
    border: 0 !important;
}

body #backpack .library-resource-card .resource-icon.resource-pdf-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: var(--resource-color, #7c6ff0) !important;
    background: color-mix(in srgb, var(--resource-color, #7c6ff0) 13%, var(--backpack-surface-soft)) !important;
    border: 1px solid color-mix(in srgb, var(--resource-color, #7c6ff0) 28%, transparent) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

body #backpack .library-resource-card .resource-icon.resource-pdf-icon svg {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
}

body #backpack .library-resource-card .resource-info {
    min-width: 0 !important;
}

body #backpack .library-resource-card .resource-info h4 {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
    overflow: hidden !important;
    color: var(--backpack-text) !important;
    font-size: clamp(1.08rem, 1.35vw, 1.24rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    text-shadow: none !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body #backpack .library-resource-card .resource-type {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--backpack-muted) !important;
    font-size: .86rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body #backpack .resource-meta-row {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
}

body #backpack .resource-subject-chip,
body #backpack .resource-status {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 680 !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
    overflow-wrap: anywhere !important;
}

body #backpack .resource-subject-chip {
    color: color-mix(in srgb, var(--resource-color, #7c6ff0) 66%, white) !important;
    background: color-mix(in srgb, var(--resource-color, #7c6ff0) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--resource-color, #7c6ff0) 28%, transparent) !important;
}

body #backpack .resource-status {
    color: #c7c1ff !important;
    background: rgba(124, 111, 240, .11) !important;
    border: 1px solid rgba(143, 132, 245, .24) !important;
}

body #backpack .resource-status.completed,
body #backpack .resource-status.reviewed,
body #backpack .resource-status.ready {
    color: #86d9ac !important;
    background: rgba(34, 197, 94, .09) !important;
    border-color: rgba(74, 222, 128, .22) !important;
}

body #backpack .resource-description {
    min-width: 0 !important;
    min-height: 0 !important;
    display: -webkit-box !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    overflow: hidden !important;
    color: var(--backpack-muted) !important;
    background: var(--backpack-surface-soft) !important;
    border: 1px solid var(--backpack-border) !important;
    border-radius: 11px !important;
    font-size: .86rem !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
    box-shadow: none !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

body #backpack .resource-data {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #backpack .resource-data span {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--backpack-subtle) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: .73rem !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    overflow-wrap: anywhere !important;
}

body #backpack .resource-data span:not(:last-child)::after {
    content: "·" !important;
    display: inline-block !important;
    margin: 0 7px !important;
    color: var(--backpack-border-strong) !important;
}

body #backpack .library-resource-card > .resource-actions,
body #backpack .resource-card > .resource-actions.resource-actions-grid {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid var(--backpack-border) !important;
    background: transparent !important;
}

body #backpack .resource-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .79rem !important;
    font-weight: 660 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

body #backpack .resource-actions button:hover {
    transform: translateY(-1px) !important;
}

body #backpack .resource-actions .btn-secondary {
    color: #dbe3f0 !important;
    background: var(--backpack-surface-soft) !important;
    border: 1px solid var(--backpack-border) !important;
}

body #backpack .resource-actions .btn-secondary:hover {
    color: #fff !important;
    background: #253146 !important;
    border-color: var(--backpack-border-strong) !important;
}

body #backpack .resource-actions [data-resource-ai] {
    color: #d4d0ff !important;
    background: rgba(124, 111, 240, .12) !important;
    border-color: rgba(143, 132, 245, .27) !important;
}

body #backpack .resource-actions [data-resource-ai]:hover {
    color: #eceaff !important;
    background: rgba(124, 111, 240, .19) !important;
    border-color: rgba(143, 132, 245, .4) !important;
}

body #backpack .resource-actions .btn-danger {
    color: #f2a6ad !important;
    background: rgba(239, 68, 68, .07) !important;
    border: 1px solid rgba(248, 113, 113, .18) !important;
}

body #backpack .resource-actions .btn-danger:hover {
    color: #ffc2c7 !important;
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(248, 113, 113, .3) !important;
}

body #backpack .backpack-container > .empty-state {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 260px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 34px 22px !important;
    text-align: center !important;
    background: var(--backpack-surface) !important;
    border: 1px dashed var(--backpack-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

body #backpack .empty-state .empty-icon {
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    background-color: var(--backpack-surface-soft) !important;
    border: 1px solid var(--backpack-border) !important;
    box-shadow: none !important;
}

body #backpack .empty-state h3 {
    max-width: 480px !important;
    margin: 0 !important;
    color: var(--backpack-text) !important;
    font-size: 1.05rem !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

body #backpack .empty-state .btn-primary {
    min-height: 42px !important;
    margin: 2px 0 0 !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
    background: #6f63df !important;
    box-shadow: none !important;
}

/* Tema claro: superficies documentales limpias, sin alterar el dashboard */
body.light-theme #backpack,
body.light-mode #backpack,
body[data-theme="light"] #backpack {
    --backpack-surface: #ffffff;
    --backpack-surface-raised: #ffffff;
    --backpack-surface-soft: #f6f8fb;
    --backpack-border: rgba(15, 23, 42, .1);
    --backpack-border-strong: rgba(15, 23, 42, .18);
    --backpack-text: #172033;
    --backpack-muted: #617087;
    --backpack-subtle: #7b8799;
    --backpack-accent: #675bd4;
}

body.light-theme #backpack .backpack-toolbar,
body.light-mode #backpack .backpack-toolbar,
body[data-theme="light"] #backpack .backpack-toolbar,
body.light-theme #backpack .library-resource-card,
body.light-mode #backpack .library-resource-card,
body[data-theme="light"] #backpack .library-resource-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

body.light-theme #backpack .backpack-toolbar input:hover,
body.light-theme #backpack .backpack-toolbar select:hover,
body.light-mode #backpack .backpack-toolbar input:hover,
body.light-mode #backpack .backpack-toolbar select:hover,
body[data-theme="light"] #backpack .backpack-toolbar input:hover,
body[data-theme="light"] #backpack .backpack-toolbar select:hover {
    background-color: #f1f4f8 !important;
}

body.light-theme #backpack .library-resource-card::after,
body.light-mode #backpack .library-resource-card::after,
body[data-theme="light"] #backpack .library-resource-card::after {
    background: linear-gradient(225deg, #eef2f7 0 49%, transparent 51%) !important;
}

body.light-theme #backpack .resource-subject-chip,
body.light-mode #backpack .resource-subject-chip,
body[data-theme="light"] #backpack .resource-subject-chip {
    color: color-mix(in srgb, var(--resource-color, #675bd4) 78%, #172033) !important;
}

body.light-theme #backpack .resource-status,
body.light-mode #backpack .resource-status,
body[data-theme="light"] #backpack .resource-status {
    color: #5e53c5 !important;
}

body.light-theme #backpack .resource-actions .btn-secondary,
body.light-mode #backpack .resource-actions .btn-secondary,
body[data-theme="light"] #backpack .resource-actions .btn-secondary {
    color: #3f4b5f !important;
    background: #f7f9fc !important;
}

body.light-theme #backpack .resource-actions .btn-secondary:hover,
body.light-mode #backpack .resource-actions .btn-secondary:hover,
body[data-theme="light"] #backpack .resource-actions .btn-secondary:hover {
    color: #172033 !important;
    background: #eef2f7 !important;
}

@media (max-width: 1180px) {
    body #backpack .backpack-toolbar {
        grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, .75fr)) !important;
    }

    body #backpack .backpack-toolbar label:nth-of-type(4) {
        grid-column: 1 / 2 !important;
    }

    body #backpack .backpack-toolbar .btn-primary {
        grid-column: 3 / 4 !important;
    }

    body #backpack .backpack-container,
    body #backpack .backpack-grid,
    body #backpack .resources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body #backpack {
        padding-bottom: 26px !important;
    }

    body #backpack > .section-header {
        margin-bottom: 18px !important;
    }

    body #backpack .backpack-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    body #backpack .backpack-toolbar .backpack-search {
        grid-column: 1 / -1 !important;
    }

    body #backpack .backpack-toolbar label:nth-of-type(4) {
        grid-column: auto !important;
    }

    body #backpack .backpack-toolbar .btn-primary {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
    }
}

@media (max-width: 560px) {
    body #backpack {
        padding-bottom: 20px !important;
    }

    body #backpack > .section-header {
        align-items: flex-start !important;
        margin-bottom: 16px !important;
    }

    body #backpack > .section-header h1 {
        font-size: clamp(1.9rem, 9vw, 2.15rem) !important;
    }

    body #backpack > .section-header .subtitle {
        margin-top: 5px !important;
        font-size: .92rem !important;
    }

    body #backpack .backpack-toolbar {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        margin-bottom: 16px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    body #backpack .backpack-toolbar .backpack-search,
    body #backpack .backpack-toolbar label,
    body #backpack .backpack-toolbar label:nth-of-type(4),
    body #backpack .backpack-toolbar .btn-primary {
        grid-column: 1 !important;
    }

    body #backpack .backpack-toolbar .btn-primary {
        width: 100% !important;
        justify-self: stretch !important;
    }

    body #backpack .backpack-container,
    body #backpack .backpack-grid,
    body #backpack .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body #backpack .resource-card.library-resource-card,
    body #backpack .library-resource-card {
        gap: 12px !important;
        padding: 17px !important;
        border-radius: 16px !important;
    }

    body #backpack .library-resource-card .resource-top {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body #backpack .library-resource-card .resource-icon.resource-pdf-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
    }

    body #backpack .resource-data {
        row-gap: 4px !important;
    }

    body #backpack .library-resource-card > .resource-actions,
    body #backpack .resource-card > .resource-actions.resource-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body #backpack .resource-actions button {
        min-height: 40px !important;
        height: auto !important;
        padding-block: 8px !important;
    }
}

@media (max-width: 390px) {
    body #backpack .library-resource-card > .resource-actions,
    body #backpack .resource-card > .resource-actions.resource-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #backpack .library-resource-card,
    body #backpack .resource-actions button,
    body #backpack .backpack-toolbar .btn-primary,
    body #backpack .backpack-toolbar input,
    body #backpack .backpack-toolbar select {
        transition: none !important;
        animation: none !important;
    }

    body #backpack .library-resource-card:hover,
    body #backpack .resource-actions button:hover,
    body #backpack .backpack-toolbar .btn-primary:hover {
        transform: none !important;
    }
}


/* Materias: cuadernos digitales modernos y modal compacto */
body #subjects {
    --subjects-surface: #111827;
    --subjects-surface-raised: #172033;
    --subjects-surface-soft: #1b2538;
    --subjects-border: rgba(148, 163, 184, .17);
    --subjects-border-strong: rgba(148, 163, 184, .28);
    --subjects-text: #f4f7fb;
    --subjects-muted: #a8b3c5;
    --subjects-subtle: #7f8ca3;
    --subjects-accent: #7467df;
    --subjects-metal: #75839a;
    width: 100% !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding: 0 0 32px !important;
    color: var(--subjects-text) !important;
}

body #subjects > .section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 4px 20px !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #subjects > .section-header h1 {
    grid-column: 1 !important;
    margin: 0 !important;
    color: var(--subjects-text) !important;
    font-size: clamp(2.125rem, 3vw, 2.5rem) !important;
    font-weight: 780 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-shadow: none !important;
}

body #subjects > .section-header .subtitle {
    grid-column: 1 !important;
    margin: 3px 0 0 !important;
    color: var(--subjects-muted) !important;
    font-size: clamp(.94rem, 1.2vw, 1.05rem) !important;
    line-height: 1.45 !important;
}

body #subjects > .section-header .btn-primary {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: end !important;
    width: auto !important;
    min-width: 146px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    color: #fff !important;
    background: #6f63df !important;
    border: 1px solid rgba(164, 154, 255, .36) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(74, 62, 180, .18) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

body #subjects > .section-header .btn-primary:hover {
    transform: translateY(-1px) !important;
    background: #7b70e8 !important;
}

body #subjects > .section-header .btn-primary:focus-visible,
body #subjects .subjects-toolbar input:focus,
body #subjects .subjects-toolbar select:focus,
body #subjects .card-actions button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--subjects-accent) 38%, transparent) !important;
    outline-offset: 2px !important;
}

body #subjects .subjects-toolbar {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(180px, 280px) !important;
    align-items: end !important;
    gap: 16px !important;
    margin: 0 0 22px !important;
    padding: 18px 20px !important;
    background: var(--subjects-surface) !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .16) !important;
}

body #subjects .subjects-toolbar label {
    min-width: 0 !important;
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: var(--subjects-muted) !important;
    font-size: .76rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

body #subjects .subjects-toolbar input,
body #subjects .subjects-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    color: var(--subjects-text) !important;
    background-color: var(--subjects-surface-soft) !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    font: inherit !important;
    font-size: .89rem !important;
    font-weight: 500 !important;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

body #subjects .subjects-toolbar input::placeholder {
    color: var(--subjects-subtle) !important;
    opacity: 1 !important;
}

body #subjects .subjects-toolbar input:hover,
body #subjects .subjects-toolbar select:hover {
    background-color: #202b3f !important;
    border-color: var(--subjects-border-strong) !important;
}

body #subjects .subjects-toolbar input:focus,
body #subjects .subjects-toolbar select:focus {
    border-color: color-mix(in srgb, var(--subjects-accent) 68%, white 8%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--subjects-accent) 16%, transparent) !important;
    outline: none !important;
}

body #subjects .subjects-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #subjects .subject-card.subject-space-card {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px 20px 20px 34px !important;
    overflow: hidden !important;
    color: var(--subjects-text) !important;
    background: var(--subjects-surface) !important;
    background-image: none !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(2, 8, 23, .14) !important;
    transform: none !important;
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, background-color 190ms ease !important;
}

body #subjects .subject-card.subject-space-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 17px !important;
    height: auto !important;
    background: color-mix(in srgb, var(--subject-color, #7467df) 78%, #273047) !important;
    border: 0 !important;
    border-radius: 18px 0 0 18px !important;
    box-shadow: inset -2px 0 4px rgba(2, 8, 23, .18) !important;
    opacity: .92 !important;
    pointer-events: none !important;
}

body #subjects .subject-card.subject-space-card::after {
    content: none !important;
    display: none !important;
}

body #subjects .subject-card.subject-space-card:hover {
    transform: translateY(-2px) !important;
    background: var(--subjects-surface-raised) !important;
    border-color: color-mix(in srgb, var(--subject-color, #7467df) 30%, var(--subjects-border)) !important;
    box-shadow: 0 13px 30px rgba(2, 8, 23, .2) !important;
}

body #subjects .subject-card.subject-space-card .neon-border-lines {
    display: none !important;
}

body #subjects .subject-card.subject-space-card .subject-orbit {
    position: absolute !important;
    z-index: 3 !important;
    top: 18px !important;
    bottom: 18px !important;
    left: 4px !important;
    width: 28px !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(ellipse 12px 7px at 50% 50%,
            transparent 0 43%,
            var(--subjects-metal) 47% 62%,
            rgba(255, 255, 255, .2) 64% 69%,
            transparent 72%)
        center top / 28px 48px repeat-y !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

body #subjects .subject-card.subject-space-card .subject-orbit::before,
body #subjects .subject-card.subject-space-card .subject-orbit::after {
    content: none !important;
    display: none !important;
}

body #subjects .subject-header {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #subjects .subject-title {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

body #subjects .subject-title > div:last-child {
    min-width: 0 !important;
}

body #subjects .subject-title .subject-book-icon,
body #subjects .subject-title .subject-icon,
body #subjects .subject-title [class*="subject-icon"],
body #subjects .subject-title [class*="book-icon"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: var(--subject-color, #7467df) !important;
    background: color-mix(in srgb, var(--subject-color, #7467df) 13%, var(--subjects-surface-soft)) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color, #7467df) 27%, transparent) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    filter: none !important;
}

body #subjects .subject-title svg {
    width: 23px !important;
    height: 23px !important;
    filter: none !important;
}

body #subjects .subject-title h3 {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
    overflow: hidden !important;
    color: var(--subjects-text) !important;
    font-size: clamp(1.18rem, 1.6vw, 1.42rem) !important;
    font-weight: 720 !important;
    line-height: 1.22 !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body #subjects .subject-title p {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--subjects-muted) !important;
    font-size: .86rem !important;
    font-weight: 450 !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body #subjects .subject-chip {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 40% !important;
    min-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 1px 0 0 !important;
    padding: 4px 9px !important;
    color: color-mix(in srgb, var(--subject-color, #7467df) 66%, white) !important;
    background: color-mix(in srgb, var(--subject-color, #7467df) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color, #7467df) 28%, transparent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .7rem !important;
    font-weight: 680 !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

body #subjects .subject-progress-block {
    min-width: 0 !important;
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #subjects .subject-progress-block > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--subjects-muted) !important;
    font-size: .78rem !important;
    font-weight: 620 !important;
}

body #subjects .subject-progress-block strong {
    color: var(--subject-color, #7467df) !important;
    font-size: .84rem !important;
    font-weight: 760 !important;
}

body #subjects .subject-progress-block .progress-bar {
    width: 100% !important;
    height: 9px !important;
    min-height: 9px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--subjects-surface-soft) !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body #subjects .subject-progress-block .progress-fill {
    height: 100% !important;
    min-height: 0 !important;
    background: var(--subject-color, #7467df) !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    filter: none !important;
}

body #subjects .subject-metric-grid {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #subjects .subject-metric-grid > div {
    min-width: 0 !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--subjects-surface-soft) !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

body #subjects .subject-metric-grid span {
    color: var(--subjects-muted) !important;
    font-size: .72rem !important;
    font-weight: 590 !important;
    line-height: 1.25 !important;
}

body #subjects .subject-metric-grid strong {
    color: color-mix(in srgb, var(--subject-color, #7467df) 68%, white) !important;
    font-size: 1.08rem !important;
    font-weight: 740 !important;
    line-height: 1.1 !important;
}

body #subjects .subject-card-footer {
    min-width: 0 !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 2px 12px !important;
    background: var(--subjects-surface-soft) !important;
    border: 1px solid var(--subjects-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

body #subjects .subject-card-footer p {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    color: var(--subjects-muted) !important;
    font-size: .76rem !important;
    font-weight: 470 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

body #subjects .subject-card-footer p + p {
    border-top: 1px solid var(--subjects-border) !important;
}

body #subjects .subject-card-footer strong {
    color: var(--subjects-text) !important;
    font-weight: 650 !important;
}

body #subjects .subject-card .card-actions {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(72px, .7fr)) !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 13px 0 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--subjects-border) !important;
}

body #subjects .subject-card .card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 680 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

body #subjects .subject-card .card-actions button:hover {
    transform: translateY(-1px) !important;
}

body #subjects .subject-card .card-actions .btn-primary {
    color: #fff !important;
    background: color-mix(in srgb, var(--subject-color, #7467df) 78%, #3f3a78) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color, #7467df) 68%, white 10%) !important;
}

body #subjects .subject-card .card-actions .btn-secondary {
    color: #dbe3f0 !important;
    background: var(--subjects-surface-soft) !important;
    border: 1px solid var(--subjects-border) !important;
}

body #subjects .subject-card .card-actions .btn-danger {
    color: #f2a6ad !important;
    background: rgba(239, 68, 68, .07) !important;
    border: 1px solid rgba(248, 113, 113, .18) !important;
}

body #subjects .subject-card .card-actions .btn-danger:hover {
    color: #ffc2c7 !important;
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(248, 113, 113, .3) !important;
}

body #subjects .subjects-grid > .empty-state {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 250px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 32px 22px !important;
    text-align: center !important;
    background: var(--subjects-surface) !important;
    border: 1px dashed var(--subjects-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

/* Modal exclusivo de Crear/Editar materia */
body .quick-modal:has(.quick-modal-card[aria-label="Crear materia"]),
body .quick-modal:has(.quick-modal-card[aria-label="Editar materia"]) {
    --subject-modal-bg: #111827;
    --subject-modal-soft: #192337;
    --subject-modal-border: rgba(148, 163, 184, .18);
    --subject-modal-text: #f4f7fb;
    --subject-modal-muted: #a8b3c5;
    padding: 20px !important;
    background: rgba(2, 8, 23, .7) !important;
    backdrop-filter: blur(8px) !important;
}

body .quick-modal-card[aria-label="Crear materia"],
body .quick-modal-card[aria-label="Editar materia"] {
    position: relative !important;
    width: min(820px, calc(100vw - 40px)) !important;
    max-width: 820px !important;
    max-height: 88vh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--subject-modal-text) !important;
    background: var(--subject-modal-bg) !important;
    border: 1px solid var(--subject-modal-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(2, 8, 23, .42) !important;
}

body .quick-modal-card[aria-label="Crear materia"] > h3,
body .quick-modal-card[aria-label="Editar materia"] > h3 {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 20px 66px 20px 24px !important;
    color: var(--subject-modal-text) !important;
    background: var(--subject-modal-bg) !important;
    border-bottom: 1px solid var(--subject-modal-border) !important;
    font-size: 1.22rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
}

body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-close,
body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-close {
    position: absolute !important;
    z-index: 5 !important;
    top: 15px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--subject-modal-muted) !important;
    background: var(--subject-modal-soft) !important;
    border: 1px solid var(--subject-modal-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-close:hover,
body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-close:hover {
    color: var(--subject-modal-text) !important;
    background: #222d42 !important;
}

body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-close:focus-visible,
body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-close:focus-visible {
    outline: 3px solid rgba(124, 111, 240, .32) !important;
    outline-offset: 2px !important;
}

body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-form,
body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-form {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 22px 24px 86px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: var(--subject-modal-bg) !important;
}

body .quick-modal-card[aria-label="Crear materia"] .quick-modal-form > label,
body .quick-modal-card[aria-label="Editar materia"] .quick-modal-form > label {
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    color: var(--subject-modal-muted) !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

body .quick-modal-card[aria-label="Crear materia"] .quick-modal-form > label:has(.choice-grid),
body .quick-modal-card[aria-label="Editar materia"] .quick-modal-form > label:has(.choice-grid),
body .quick-modal-card[aria-label="Crear materia"] .quick-modal-form > label:has(textarea),
body .quick-modal-card[aria-label="Editar materia"] .quick-modal-form > label:has(textarea) {
    grid-column: 1 / -1 !important;
}

body .quick-modal-card[aria-label="Crear materia"] input:not([type="radio"]),
body .quick-modal-card[aria-label="Editar materia"] input:not([type="radio"]),
body .quick-modal-card[aria-label="Crear materia"] textarea,
body .quick-modal-card[aria-label="Editar materia"] textarea,
body .quick-modal-card[aria-label="Crear materia"] select,
body .quick-modal-card[aria-label="Editar materia"] select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    color: var(--subject-modal-text) !important;
    background: var(--subject-modal-soft) !important;
    border: 1px solid var(--subject-modal-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
}

body .quick-modal-card[aria-label="Crear materia"] textarea,
body .quick-modal-card[aria-label="Editar materia"] textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.48 !important;
}

body .quick-modal-card[aria-label="Crear materia"] input:not([type="radio"]):focus,
body .quick-modal-card[aria-label="Editar materia"] input:not([type="radio"]):focus,
body .quick-modal-card[aria-label="Crear materia"] textarea:focus,
body .quick-modal-card[aria-label="Editar materia"] textarea:focus {
    border-color: #8074e8 !important;
    box-shadow: 0 0 0 3px rgba(124, 111, 240, .16) !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-grid,
body .quick-modal-card[aria-label="Editar materia"] .choice-grid {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-pill,
body .quick-modal-card[aria-label="Editar materia"] .choice-pill {
    position: relative !important;
    min-width: 0 !important;
    min-height: 78px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    color: var(--subject-modal-muted) !important;
    background: var(--subject-modal-soft) !important;
    border: 1px solid var(--subject-modal-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-pill:hover,
body .quick-modal-card[aria-label="Editar materia"] .choice-pill:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(148, 163, 184, .34) !important;
    background: #202b40 !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-pill:has(input:checked),
body .quick-modal-card[aria-label="Editar materia"] .choice-pill:has(input:checked) {
    color: var(--subject-modal-text) !important;
    background: color-mix(in srgb, var(--choice-color, #7467df) 12%, var(--subject-modal-soft)) !important;
    border-color: color-mix(in srgb, var(--choice-color, #7467df) 58%, #9d94ff) !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-pill input,
body .quick-modal-card[aria-label="Editar materia"] .choice-pill input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-dot,
body .quick-modal-card[aria-label="Editar materia"] .choice-dot {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    margin: 0 !important;
    background: var(--choice-color, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--choice-color, #7f8ca3) 45%, var(--subject-modal-border)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body .quick-modal-card[aria-label="Crear materia"] .choice-pill strong,
body .quick-modal-card[aria-label="Editar materia"] .choice-pill strong {
    max-width: 100% !important;
    color: inherit !important;
    font-size: .75rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

body .quick-modal-card[aria-label="Crear materia"] .quick-modal-actions,
body .quick-modal-card[aria-label="Editar materia"] .quick-modal-actions {
    position: sticky !important;
    z-index: 4 !important;
    bottom: -86px !important;
    grid-column: 1 / -1 !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 -24px -86px !important;
    padding: 13px 24px !important;
    background: var(--subject-modal-bg) !important;
    border-top: 1px solid var(--subject-modal-border) !important;
    box-shadow: 0 -8px 18px rgba(2, 8, 23, .12) !important;
}

body .quick-modal-card[aria-label="Crear materia"] .quick-modal-actions .btn-primary,
body .quick-modal-card[aria-label="Editar materia"] .quick-modal-actions .btn-primary {
    width: auto !important;
    min-width: 168px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #fff !important;
    background: #6f63df !important;
    border: 1px solid rgba(164, 154, 255, .36) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
}

/* Variantes claras, acotadas a Materias */
body.light-theme #subjects,
body.light-mode #subjects,
body[data-theme="light"] #subjects {
    --subjects-surface: #ffffff;
    --subjects-surface-raised: #ffffff;
    --subjects-surface-soft: #f6f8fb;
    --subjects-border: rgba(15, 23, 42, .1);
    --subjects-border-strong: rgba(15, 23, 42, .18);
    --subjects-text: #172033;
    --subjects-muted: #617087;
    --subjects-subtle: #7b8799;
    --subjects-accent: #675bd4;
    --subjects-metal: #a6afbd;
}

body.light-theme #subjects .subjects-toolbar,
body.light-theme #subjects .subject-card.subject-space-card,
body.light-mode #subjects .subjects-toolbar,
body.light-mode #subjects .subject-card.subject-space-card,
body[data-theme="light"] #subjects .subjects-toolbar,
body[data-theme="light"] #subjects .subject-card.subject-space-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

body.light-theme #subjects .subjects-toolbar input:hover,
body.light-theme #subjects .subjects-toolbar select:hover,
body.light-mode #subjects .subjects-toolbar input:hover,
body.light-mode #subjects .subjects-toolbar select:hover,
body[data-theme="light"] #subjects .subjects-toolbar input:hover,
body[data-theme="light"] #subjects .subjects-toolbar select:hover {
    background-color: #f1f4f8 !important;
}

body.light-theme #subjects .subject-metric-grid strong,
body.light-mode #subjects .subject-metric-grid strong,
body[data-theme="light"] #subjects .subject-metric-grid strong,
body.light-theme #subjects .subject-chip,
body.light-mode #subjects .subject-chip,
body[data-theme="light"] #subjects .subject-chip {
    color: color-mix(in srgb, var(--subject-color, #675bd4) 78%, #172033) !important;
}

body.light-theme .quick-modal:has(.quick-modal-card[aria-label="Crear materia"]),
body.light-theme .quick-modal:has(.quick-modal-card[aria-label="Editar materia"]),
body.light-mode .quick-modal:has(.quick-modal-card[aria-label="Crear materia"]),
body.light-mode .quick-modal:has(.quick-modal-card[aria-label="Editar materia"]),
body[data-theme="light"] .quick-modal:has(.quick-modal-card[aria-label="Crear materia"]),
body[data-theme="light"] .quick-modal:has(.quick-modal-card[aria-label="Editar materia"]) {
    --subject-modal-bg: #ffffff;
    --subject-modal-soft: #f6f8fb;
    --subject-modal-border: rgba(15, 23, 42, .11);
    --subject-modal-text: #172033;
    --subject-modal-muted: #617087;
    background: rgba(15, 23, 42, .35) !important;
}

body.light-theme .quick-modal-card[aria-label="Crear materia"] .choice-pill:hover,
body.light-theme .quick-modal-card[aria-label="Editar materia"] .choice-pill:hover,
body.light-mode .quick-modal-card[aria-label="Crear materia"] .choice-pill:hover,
body.light-mode .quick-modal-card[aria-label="Editar materia"] .choice-pill:hover {
    background: #eef2f7 !important;
}

@media (max-width: 1180px) {
    body #subjects .subjects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body #subjects {
        padding-bottom: 24px !important;
    }

    body #subjects > .section-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    body #subjects > .section-header h1,
    body #subjects > .section-header .subtitle,
    body #subjects > .section-header .btn-primary {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body #subjects > .section-header .btn-primary {
        width: 100% !important;
        margin-top: 8px !important;
    }

    body #subjects .subjects-toolbar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    body #subjects .quick-modal-form {
        grid-template-columns: 1fr !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-form,
    body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-form {
        grid-template-columns: 1fr !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .quick-modal-form > label,
    body .quick-modal-card[aria-label="Editar materia"] .quick-modal-form > label {
        grid-column: 1 !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .choice-grid,
    body .quick-modal-card[aria-label="Editar materia"] .choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    body #subjects .subjects-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body #subjects .subject-card.subject-space-card {
        padding: 18px 17px 18px 31px !important;
        border-radius: 16px !important;
    }

    body #subjects .subject-card.subject-space-card::before {
        width: 15px !important;
        border-radius: 16px 0 0 16px !important;
    }

    body #subjects .subject-card.subject-space-card .subject-orbit {
        left: 2px !important;
        width: 26px !important;
        background-size: 26px 46px !important;
    }

    body #subjects .subject-card .card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body #subjects .subject-card .card-actions [data-subject-open] {
        grid-column: 1 / -1 !important;
    }

    body .quick-modal:has(.quick-modal-card[aria-label="Crear materia"]),
    body .quick-modal:has(.quick-modal-card[aria-label="Editar materia"]) {
        padding: 10px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"],
    body .quick-modal-card[aria-label="Editar materia"] {
        width: calc(100vw - 20px) !important;
        max-height: 92vh !important;
        border-radius: 18px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] > h3,
    body .quick-modal-card[aria-label="Editar materia"] > h3 {
        min-height: 64px !important;
        padding: 17px 60px 17px 18px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-close,
    body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-close {
        top: 12px !important;
        right: 12px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] > .quick-modal-form,
    body .quick-modal-card[aria-label="Editar materia"] > .quick-modal-form {
        gap: 15px !important;
        padding: 18px 18px 82px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .choice-grid,
    body .quick-modal-card[aria-label="Editar materia"] .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .choice-pill,
    body .quick-modal-card[aria-label="Editar materia"] .choice-pill {
        min-height: 74px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .quick-modal-actions,
    body .quick-modal-card[aria-label="Editar materia"] .quick-modal-actions {
        bottom: -82px !important;
        min-height: 66px !important;
        margin: 0 -18px -82px !important;
        padding: 10px 18px !important;
    }

    body .quick-modal-card[aria-label="Crear materia"] .quick-modal-actions .btn-primary,
    body .quick-modal-card[aria-label="Editar materia"] .quick-modal-actions .btn-primary {
        width: 100% !important;
    }
}

@media (max-width: 400px) {
    body #subjects .subject-header {
        display: grid !important;
    }

    body #subjects .subject-chip {
        max-width: 100% !important;
    }

    body #subjects .subject-card .card-actions {
        grid-template-columns: 1fr !important;
    }

    body #subjects .subject-card .card-actions [data-subject-open] {
        grid-column: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #subjects .subject-card.subject-space-card,
    body #subjects .subject-card .card-actions button,
    body #subjects > .section-header .btn-primary,
    body .quick-modal-card[aria-label="Crear materia"] .choice-pill,
    body .quick-modal-card[aria-label="Editar materia"] .choice-pill {
        transition: none !important;
        animation: none !important;
    }

    body #subjects .subject-card.subject-space-card:hover,
    body #subjects .subject-card .card-actions button:hover,
    body #subjects > .section-header .btn-primary:hover,
    body .quick-modal-card[aria-label="Crear materia"] .choice-pill:hover,
    body .quick-modal-card[aria-label="Editar materia"] .choice-pill:hover {
        transform: none !important;
    }
}


/* Materias: correccion exclusiva de contraste y portada en tema claro */
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects {
    --subjects-card-bg: #ffffff;
    --subjects-card-border: #d8dee8;
    --subjects-card-text: #172033;
    --subjects-card-muted: #536174;
    --subjects-card-subtle: #6b778a;
    --subjects-stat-bg: #f5f7fa;
    --subjects-stat-border: #dfe4ec;
    --subjects-progress-track: #e7ebf1;
    --subjects-action-bg: #ffffff;
    --subjects-action-text: #273244;
    --subjects-action-border: #cfd6e1;
    --subjects-danger-bg: #fff1f2;
    --subjects-danger-text: #b42332;
    --subjects-danger-border: #f2bdc3;
    --subjects-ring: #8b97a8;
    --subjects-ring-highlight: rgba(255, 255, 255, .88);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card {
    padding-left: 40px !important;
    color: var(--subjects-card-text) !important;
    background-color: var(--subjects-card-bg) !important;
    background-image: none !important;
    border-color: var(--subjects-card-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card:hover {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--subject-color, #675bd4) 27%, var(--subjects-card-border)) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card::before {
    width: 14px !important;
    background: color-mix(in srgb, var(--subject-color, #675bd4) 76%, #ffffff 24%) !important;
    border: 0 !important;
    box-shadow: inset -1px 0 2px rgba(15, 23, 42, .12) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card .neon-border-lines,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card .neon-line {
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card .subject-orbit {
    top: 18px !important;
    bottom: 18px !important;
    left: 0 !important;
    width: 28px !important;
    background:
        radial-gradient(ellipse 12px 7px at 50% 50%,
            transparent 0 42%,
            var(--subjects-ring) 47% 61%,
            var(--subjects-ring-highlight) 63% 68%,
            transparent 71%)
        center top / 28px 48px repeat-y !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-header,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-metric-grid,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions {
    background-image: none !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title {
    min-width: 0 !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title > div:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title h3 {
    max-width: 100% !important;
    color: var(--subjects-card-text) !important;
    font-weight: 720 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title p {
    color: var(--subjects-card-muted) !important;
    opacity: 1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title .subject-book-icon,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title .subject-icon,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title [class*="subject-icon"],
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title [class*="book-icon"] {
    color: color-mix(in srgb, var(--subject-color, #675bd4) 88%, #172033 12%) !important;
    background: color-mix(in srgb, var(--subject-color, #675bd4) 13%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--subject-color, #675bd4) 34%, #d4dae4) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title svg,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title path,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-title use {
    color: inherit !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    filter: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-chip {
    max-width: none !important;
    color: color-mix(in srgb, var(--subject-color, #675bd4) 82%, #172033 18%) !important;
    background: color-mix(in srgb, var(--subject-color, #675bd4) 11%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--subject-color, #675bd4) 34%, #d4dae4) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block > div:first-child,
body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block > div:first-child span {
    color: #3f4b5d !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block strong {
    color: color-mix(in srgb, var(--subject-color, #675bd4) 84%, #172033 16%) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block .progress-bar {
    background: var(--subjects-progress-track) !important;
    border-color: #d6dce5 !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-progress-block .progress-fill {
    background: color-mix(in srgb, var(--subject-color, #675bd4) 90%, #374151 10%) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-metric-grid > div {
    background: var(--subjects-stat-bg) !important;
    background-image: none !important;
    border-color: var(--subjects-stat-border) !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-metric-grid span {
    color: #4d596b !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-metric-grid strong {
    color: color-mix(in srgb, var(--subject-color, #675bd4) 82%, #172033 18%) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card-footer {
    background: var(--subjects-stat-bg) !important;
    background-image: none !important;
    border-color: var(--subjects-stat-border) !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card-footer p {
    color: var(--subjects-card-muted) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card-footer p + p {
    border-top-color: var(--subjects-stat-border) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card-footer strong {
    color: #2c3748 !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions {
    border-top-color: var(--subjects-stat-border) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions button {
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-primary {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--subject-color, #675bd4) 86%, #273244 14%) !important;
    border-color: color-mix(in srgb, var(--subject-color, #675bd4) 82%, #273244 18%) !important;
    text-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-primary:hover {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--subject-color, #675bd4) 72%, #172033 28%) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-secondary {
    color: var(--subjects-action-text) !important;
    background: var(--subjects-action-bg) !important;
    border-color: var(--subjects-action-border) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-secondary:hover {
    color: #172033 !important;
    background: #eef1f5 !important;
    border-color: #aeb8c7 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-danger {
    color: var(--subjects-danger-text) !important;
    background: var(--subjects-danger-bg) !important;
    border-color: var(--subjects-danger-border) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions .btn-danger:hover {
    color: #8f1725 !important;
    background: #ffe4e6 !important;
    border-color: #e9959f !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--subject-color, #675bd4) 34%, transparent) !important;
    outline-offset: 2px !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card .card-actions button:disabled {
    color: #8994a5 !important;
    background: #edf0f4 !important;
    border-color: #d9dee6 !important;
    opacity: .72 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

@media (max-width: 620px) {
    body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card {
        padding-left: 36px !important;
    }

    body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card::before {
        width: 13px !important;
    }

    body:is(.light-theme, .light-mode, [data-theme="light"]) #subjects .subject-card.subject-space-card .subject-orbit {
        left: -1px !important;
        width: 26px !important;
        background-size: 26px 46px !important;
    }
}


/* Tareas: flujo academico SaaS compacto y profesional */
body #tasks {
    --tasks-surface: #111827;
    --tasks-surface-raised: #172033;
    --tasks-surface-soft: #1b2538;
    --tasks-border: rgba(148, 163, 184, .17);
    --tasks-border-strong: rgba(148, 163, 184, .28);
    --tasks-text: #f4f7fb;
    --tasks-muted: #a8b3c5;
    --tasks-subtle: #7f8ca3;
    --tasks-accent: #7467df;
    --tasks-success: #34b873;
    --tasks-warning: #d59a36;
    --tasks-danger: #e36570;
    width: 100% !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding: 0 0 32px !important;
    color: var(--tasks-text) !important;
}

body #tasks > .section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 4px 20px !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #tasks > .section-header h1 {
    grid-column: 1 !important;
    margin: 0 !important;
    color: var(--tasks-text) !important;
    font-size: clamp(2.125rem, 3vw, 2.5rem) !important;
    font-weight: 780 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-shadow: none !important;
}

body #tasks > .section-header .subtitle {
    grid-column: 1 !important;
    margin: 3px 0 0 !important;
    color: var(--tasks-muted) !important;
    font-size: clamp(.94rem, 1.2vw, 1.05rem) !important;
    line-height: 1.45 !important;
}

body #tasks > .section-header .btn-primary {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: end !important;
    width: auto !important;
    min-width: 136px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    color: #fff !important;
    background: #6f63df !important;
    border: 1px solid rgba(164, 154, 255, .36) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(74, 62, 180, .18) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

body #tasks > .section-header .btn-primary:hover {
    transform: translateY(-1px) !important;
    background: #7b70e8 !important;
}

body #tasks > .section-header .btn-primary:focus-visible,
body #tasks .filter-btn:focus-visible,
body #tasks .task-card-actions button:focus-visible,
body #tasks .empty-state button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tasks-accent) 38%, transparent) !important;
    outline-offset: 2px !important;
}

body #tasks .tasks-container,
body #tasks #tasks-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #tasks .task-filter.task-filter-modern {
    width: fit-content !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    background: var(--tasks-surface) !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 22px rgba(2, 8, 23, .12) !important;
}

body #tasks .task-filter.task-filter-modern::-webkit-scrollbar {
    display: none !important;
}

body #tasks .task-filter .filter-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    color: var(--tasks-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: .81rem !important;
    font-weight: 640 !important;
    white-space: nowrap !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

body #tasks .task-filter .filter-btn span {
    min-width: 21px !important;
    height: 21px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 5px !important;
    color: var(--tasks-subtle) !important;
    background: var(--tasks-surface-soft) !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 740 !important;
}

body #tasks .task-filter .filter-btn:hover {
    color: var(--tasks-text) !important;
    background: var(--tasks-surface-soft) !important;
}

body #tasks .task-filter .filter-btn.active {
    color: #fff !important;
    background: #665bd1 !important;
    border-color: rgba(164, 154, 255, .32) !important;
}

body #tasks .task-filter .filter-btn.active span {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .2) !important;
}

body #tasks .task-summary-strip {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body #tasks .task-summary-strip > div {
    position: relative !important;
    min-width: 0 !important;
    min-height: 78px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 14px 16px 14px 18px !important;
    overflow: hidden !important;
    background: var(--tasks-surface) !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 20px rgba(2, 8, 23, .1) !important;
}

body #tasks .task-summary-strip > div::before {
    content: "" !important;
    position: absolute !important;
    inset: 14px auto 14px 0 !important;
    width: 3px !important;
    background: var(--tasks-accent) !important;
    border-radius: 0 4px 4px 0 !important;
}

body #tasks .task-summary-strip > div:nth-child(2)::before { background: var(--tasks-warning) !important; }
body #tasks .task-summary-strip > div:nth-child(3)::before { background: var(--tasks-success) !important; }
body #tasks .task-summary-strip > div:nth-child(4)::before { background: var(--tasks-danger) !important; }

body #tasks .task-summary-strip strong {
    color: color-mix(in srgb, var(--tasks-accent) 72%, white) !important;
    font-size: 1.4rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
}

body #tasks .task-summary-strip > div:nth-child(2) strong { color: #e0ac52 !important; }
body #tasks .task-summary-strip > div:nth-child(3) strong { color: #62cf92 !important; }
body #tasks .task-summary-strip > div:nth-child(4) strong { color: #f08790 !important; }

body #tasks .task-summary-strip span {
    color: var(--tasks-muted) !important;
    font-size: .76rem !important;
    font-weight: 580 !important;
    line-height: 1.25 !important;
}

body #tasks .task-board.task-list-modern {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body #tasks .task-item.task-card-modern {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
    color: var(--tasks-text) !important;
    background: var(--tasks-surface) !important;
    background-image: none !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 24px rgba(2, 8, 23, .14) !important;
    transform: none !important;
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, background-color 190ms ease !important;
}

body #tasks .task-item.task-card-modern::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    height: 3px !important;
    background: var(--subject-color, var(--tasks-accent)) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: .9 !important;
}

body #tasks .task-item.task-card-modern::after {
    content: none !important;
    display: none !important;
}

body #tasks .task-item.task-card-modern:hover {
    transform: translateY(-2px) !important;
    background: var(--tasks-surface-raised) !important;
    border-color: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 28%, var(--tasks-border)) !important;
    box-shadow: 0 13px 30px rgba(2, 8, 23, .2) !important;
}

body #tasks .task-item.task-card-modern > .neon-border-lines {
    display: none !important;
}

body #tasks .task-item.task-card-modern[data-status="overdue"] {
    border-color: rgba(227, 101, 112, .35) !important;
}

body #tasks .task-item.task-card-modern[data-status="completed"] {
    opacity: .82 !important;
}

body #tasks .task-item.task-card-modern[data-status="completed"] .task-title-row h4 {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: color-mix(in srgb, var(--tasks-muted) 65%, transparent) !important;
}

body #tasks .task-card-main {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body #tasks .task-checkbox.task-check-modern {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

body #tasks .task-checkbox.task-check-modern input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body #tasks .task-checkbox.task-check-modern > span {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    background: var(--tasks-surface-soft) !important;
    border: 2px solid color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 55%, var(--tasks-border)) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #tasks .task-checkbox.task-check-modern input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--tasks-accent) 38%, transparent) !important;
    outline-offset: 2px !important;
}

body #tasks .task-checkbox.task-check-modern input:checked + span {
    background: var(--tasks-success) !important;
    border-color: var(--tasks-success) !important;
}

body #tasks .task-checkbox.task-check-modern input:checked + span::after {
    content: "✓" !important;
    color: #fff !important;
    font-size: .85rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body #tasks .task-content {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
}

body #tasks .task-title-row {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 !important;
}

body #tasks .task-title-row h4 {
    display: -webkit-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--tasks-text) !important;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -.015em !important;
    text-shadow: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body #tasks .task-status {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 120px !important;
    min-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 680 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
}

body #tasks .task-status.status-pending {
    color: #c9c3ff !important;
    background: rgba(116, 103, 223, .12) !important;
    border: 1px solid rgba(137, 125, 238, .27) !important;
}

body #tasks .task-status.status-upcoming {
    color: #e8bb6d !important;
    background: rgba(213, 154, 54, .11) !important;
    border: 1px solid rgba(229, 174, 79, .25) !important;
}

body #tasks .task-status.status-completed {
    color: #82d9a8 !important;
    background: rgba(52, 184, 115, .1) !important;
    border: 1px solid rgba(74, 205, 139, .23) !important;
}

body #tasks .task-status.status-overdue {
    color: #f1979f !important;
    background: rgba(227, 101, 112, .1) !important;
    border: 1px solid rgba(238, 120, 131, .24) !important;
}

body #tasks .task-subject {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    color: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 70%, white) !important;
    background: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 11%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 25%, transparent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .69rem !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    overflow-wrap: anywhere !important;
}

body #tasks .task-description {
    display: -webkit-box !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--tasks-muted) !important;
    font-size: .86rem !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

body #tasks .task-meta-grid {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 1px 0 0 !important;
    padding: 7px 0 !important;
    background: var(--tasks-surface-soft) !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

body #tasks .task-meta-grid > span {
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    color: var(--tasks-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 470 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body #tasks .task-meta-grid > span:nth-child(even) {
    border-left: 1px solid var(--tasks-border) !important;
}

body #tasks .task-meta-grid > span:nth-child(n+3) {
    border-top: 1px solid var(--tasks-border) !important;
}

body #tasks .task-meta-grid strong {
    color: var(--tasks-text) !important;
    font-weight: 640 !important;
}

body #tasks .task-priority {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

body #tasks .task-priority.high,
body #tasks .task-priority.alta { color: #ef8b94 !important; }
body #tasks .task-priority.medium,
body #tasks .task-priority.media { color: #e0ac52 !important; }
body #tasks .task-priority.low,
body #tasks .task-priority.baja { color: #62cf92 !important; }

body #tasks .task-reminder-alert {
    margin: 0 !important;
    padding: 9px 10px !important;
    color: #e1b76d !important;
    background: rgba(213, 154, 54, .09) !important;
    border: 1px solid rgba(229, 174, 79, .22) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .73rem !important;
    font-weight: 560 !important;
    line-height: 1.35 !important;
}

body #tasks .task-card-actions {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 13px 0 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--tasks-border) !important;
}

body #tasks .task-card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .76rem !important;
    font-weight: 670 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

body #tasks .task-card-actions button:hover {
    transform: translateY(-1px) !important;
}

body #tasks .task-card-actions .btn-primary {
    color: #fff !important;
    background: #329f64 !important;
    border: 1px solid #43b878 !important;
}

body #tasks .task-card-actions .btn-primary:hover {
    background: #2b8d58 !important;
}

body #tasks .task-card-actions .btn-secondary {
    color: #dbe3f0 !important;
    background: var(--tasks-surface-soft) !important;
    border: 1px solid var(--tasks-border) !important;
}

body #tasks .task-card-actions .btn-secondary:hover {
    color: #fff !important;
    background: #253146 !important;
    border-color: var(--tasks-border-strong) !important;
}

body #tasks .task-card-actions .btn-danger {
    color: #f2a6ad !important;
    background: rgba(239, 68, 68, .07) !important;
    border: 1px solid rgba(248, 113, 113, .18) !important;
}

body #tasks .task-card-actions .btn-danger:hover {
    color: #ffc2c7 !important;
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(248, 113, 113, .3) !important;
}

body #tasks .task-card-actions.no-complete [data-task-calendar] {
    grid-column: auto !important;
}

body #tasks .task-empty-filter,
body #tasks #tasks-list > .empty-state {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 240px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 30px 22px !important;
    color: var(--tasks-muted) !important;
    text-align: center !important;
    background: var(--tasks-surface) !important;
    border: 1px dashed var(--tasks-border-strong) !important;
    border-radius: 17px !important;
    box-shadow: none !important;
}

body #tasks .task-empty-filter strong,
body #tasks #tasks-list > .empty-state h3 {
    color: var(--tasks-text) !important;
    font-size: 1.02rem !important;
    font-weight: 670 !important;
}

body #tasks .task-empty-filter span {
    color: var(--tasks-muted) !important;
    font-size: .86rem !important;
}

/* Modal exclusivo de Crear/Editar tarea */
body .quick-modal:has(.quick-modal-card[aria-label="Crear tarea"]),
body .quick-modal:has(.quick-modal-card[aria-label="Editar tarea"]) {
    --task-modal-bg: #111827;
    --task-modal-soft: #192337;
    --task-modal-border: rgba(148, 163, 184, .18);
    --task-modal-text: #f4f7fb;
    --task-modal-muted: #a8b3c5;
    padding: 20px !important;
    background: rgba(2, 8, 23, .7) !important;
    backdrop-filter: blur(8px) !important;
}

body .quick-modal-card[aria-label="Crear tarea"],
body .quick-modal-card[aria-label="Editar tarea"] {
    position: relative !important;
    width: min(760px, calc(100vw - 40px)) !important;
    max-width: 760px !important;
    max-height: 88vh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--task-modal-text) !important;
    background: var(--task-modal-bg) !important;
    border: 1px solid var(--task-modal-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(2, 8, 23, .42) !important;
}

body .quick-modal-card[aria-label="Crear tarea"] > h3,
body .quick-modal-card[aria-label="Editar tarea"] > h3 {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 20px 66px 20px 24px !important;
    color: var(--task-modal-text) !important;
    background: var(--task-modal-bg) !important;
    border-bottom: 1px solid var(--task-modal-border) !important;
    font-size: 1.22rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] > .quick-modal-close,
body .quick-modal-card[aria-label="Editar tarea"] > .quick-modal-close {
    position: absolute !important;
    z-index: 5 !important;
    top: 15px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--task-modal-muted) !important;
    background: var(--task-modal-soft) !important;
    border: 1px solid var(--task-modal-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

body .quick-modal-card[aria-label="Crear tarea"] > .quick-modal-form,
body .quick-modal-card[aria-label="Editar tarea"] > .quick-modal-form {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 22px 24px 82px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: var(--task-modal-bg) !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-form > label,
body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-form > label {
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    color: var(--task-modal-muted) !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-form > label:has(textarea),
body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-form > label:has(textarea),
body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-form > label:has(.quick-check),
body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-form > label:has(.quick-check) {
    grid-column: 1 / -1 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] input:not([type="checkbox"]),
body .quick-modal-card[aria-label="Editar tarea"] input:not([type="checkbox"]),
body .quick-modal-card[aria-label="Crear tarea"] textarea,
body .quick-modal-card[aria-label="Editar tarea"] textarea,
body .quick-modal-card[aria-label="Crear tarea"] select,
body .quick-modal-card[aria-label="Editar tarea"] select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    color: var(--task-modal-text) !important;
    background: var(--task-modal-soft) !important;
    border: 1px solid var(--task-modal-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] textarea,
body .quick-modal-card[aria-label="Editar tarea"] textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.48 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] input:not([type="checkbox"]):focus,
body .quick-modal-card[aria-label="Editar tarea"] input:not([type="checkbox"]):focus,
body .quick-modal-card[aria-label="Crear tarea"] textarea:focus,
body .quick-modal-card[aria-label="Editar tarea"] textarea:focus,
body .quick-modal-card[aria-label="Crear tarea"] select:focus,
body .quick-modal-card[aria-label="Editar tarea"] select:focus {
    border-color: #8074e8 !important;
    box-shadow: 0 0 0 3px rgba(124, 111, 240, .16) !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-check,
body .quick-modal-card[aria-label="Editar tarea"] .quick-check {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: var(--task-modal-text) !important;
    background: var(--task-modal-soft) !important;
    border: 1px solid var(--task-modal-border) !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
    font-weight: 520 !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-check input,
body .quick-modal-card[aria-label="Editar tarea"] .quick-check input {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto !important;
    accent-color: #7467df !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-actions,
body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-actions {
    position: sticky !important;
    z-index: 4 !important;
    bottom: -82px !important;
    grid-column: 1 / -1 !important;
    min-height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 -24px -82px !important;
    padding: 11px 24px !important;
    background: var(--task-modal-bg) !important;
    border-top: 1px solid var(--task-modal-border) !important;
    box-shadow: 0 -8px 18px rgba(2, 8, 23, .12) !important;
}

body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-actions .btn-primary,
body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-actions .btn-primary {
    width: auto !important;
    min-width: 156px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #fff !important;
    background: #6f63df !important;
    border: 1px solid rgba(164, 154, 255, .36) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
}

/* Tema claro */
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks {
    --tasks-surface: #ffffff;
    --tasks-surface-raised: #ffffff;
    --tasks-surface-soft: #f5f7fa;
    --tasks-border: rgba(15, 23, 42, .1);
    --tasks-border-strong: rgba(15, 23, 42, .18);
    --tasks-text: #172033;
    --tasks-muted: #58667b;
    --tasks-subtle: #758196;
    --tasks-accent: #675bd4;
    --tasks-success: #258a55;
    --tasks-warning: #aa711c;
    --tasks-danger: #bd3947;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-filter.task-filter-modern,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-summary-strip > div,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-item.task-card-modern {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-summary-strip strong {
    color: #5c51c5 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-summary-strip > div:nth-child(2) strong { color: #996616 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-summary-strip > div:nth-child(3) strong { color: #237b4d !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-summary-strip > div:nth-child(4) strong { color: #b42f3e !important; }

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-subject {
    color: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 82%, #172033) !important;
    background: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 10%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--subject-color, var(--tasks-accent)) 29%, #d5dbe5) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-status.status-pending {
    color: #584cc4 !important;
}
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-status.status-upcoming {
    color: #946015 !important;
}
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-status.status-completed {
    color: #1f7a49 !important;
}
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-status.status-overdue {
    color: #b62f3d !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.high,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.alta { color: #b72f3e !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.medium,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.media { color: #946015 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.low,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-priority.baja { color: #1f7a49 !important; }

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-actions .btn-secondary {
    color: #2f3a4b !important;
    background: #ffffff !important;
    border-color: #cfd6e1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-actions .btn-secondary:hover {
    color: #172033 !important;
    background: #eef2f7 !important;
    border-color: #aeb8c7 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-actions .btn-danger {
    color: #ad2635 !important;
    background: #fff1f2 !important;
    border-color: #f0bbc1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-actions .btn-danger:hover {
    color: #861724 !important;
    background: #ffe4e6 !important;
    border-color: #e7919b !important;
}

body.light-theme .quick-modal:has(.quick-modal-card[aria-label="Crear tarea"]),
body.light-theme .quick-modal:has(.quick-modal-card[aria-label="Editar tarea"]),
body.light-mode .quick-modal:has(.quick-modal-card[aria-label="Crear tarea"]),
body.light-mode .quick-modal:has(.quick-modal-card[aria-label="Editar tarea"]),
body[data-theme="light"] .quick-modal:has(.quick-modal-card[aria-label="Crear tarea"]),
body[data-theme="light"] .quick-modal:has(.quick-modal-card[aria-label="Editar tarea"]) {
    --task-modal-bg: #ffffff;
    --task-modal-soft: #f5f7fa;
    --task-modal-border: rgba(15, 23, 42, .11);
    --task-modal-text: #172033;
    --task-modal-muted: #58667b;
    background: rgba(15, 23, 42, .35) !important;
}

@media (max-width: 1180px) {
    body #tasks .task-board.task-list-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body #tasks .task-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body #tasks {
        padding-bottom: 24px !important;
    }

    body #tasks > .section-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    body #tasks > .section-header h1,
    body #tasks > .section-header .subtitle,
    body #tasks > .section-header .btn-primary {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body #tasks > .section-header .btn-primary {
        width: 100% !important;
        margin-top: 8px !important;
    }

    body #tasks .task-filter.task-filter-modern {
        width: 100% !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] > .quick-modal-form,
    body .quick-modal-card[aria-label="Editar tarea"] > .quick-modal-form {
        grid-template-columns: 1fr !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-form > label,
    body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-form > label {
        grid-column: 1 !important;
    }
}

@media (max-width: 620px) {
    body #tasks .task-board.task-list-modern {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body #tasks .task-item.task-card-modern {
        padding: 17px !important;
        border-radius: 16px !important;
    }

    body #tasks .task-card-main {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body #tasks .task-checkbox.task-check-modern {
        width: 36px !important;
        height: 38px !important;
        min-width: 36px !important;
    }

    body #tasks .task-title-row {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body #tasks .task-meta-grid {
        grid-template-columns: 1fr !important;
    }

    body #tasks .task-meta-grid > span {
        border-left: 0 !important;
    }

    body #tasks .task-meta-grid > span + span {
        border-top: 1px solid var(--tasks-border) !important;
    }

    body #tasks .task-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .quick-modal:has(.quick-modal-card[aria-label="Crear tarea"]),
    body .quick-modal:has(.quick-modal-card[aria-label="Editar tarea"]) {
        padding: 10px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"],
    body .quick-modal-card[aria-label="Editar tarea"] {
        width: calc(100vw - 20px) !important;
        max-height: 92vh !important;
        border-radius: 18px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] > h3,
    body .quick-modal-card[aria-label="Editar tarea"] > h3 {
        min-height: 64px !important;
        padding: 17px 60px 17px 18px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] > .quick-modal-close,
    body .quick-modal-card[aria-label="Editar tarea"] > .quick-modal-close {
        top: 12px !important;
        right: 12px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] > .quick-modal-form,
    body .quick-modal-card[aria-label="Editar tarea"] > .quick-modal-form {
        gap: 15px !important;
        padding: 18px 18px 80px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-actions,
    body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-actions {
        bottom: -80px !important;
        min-height: 66px !important;
        margin: 0 -18px -80px !important;
        padding: 10px 18px !important;
    }

    body .quick-modal-card[aria-label="Crear tarea"] .quick-modal-actions .btn-primary,
    body .quick-modal-card[aria-label="Editar tarea"] .quick-modal-actions .btn-primary {
        width: 100% !important;
    }
}

@media (max-width: 400px) {
    body #tasks .task-summary-strip {
        grid-template-columns: 1fr !important;
    }

    body #tasks .task-card-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #tasks .task-item.task-card-modern,
    body #tasks .task-card-actions button,
    body #tasks > .section-header .btn-primary,
    body #tasks .task-filter .filter-btn {
        transition: none !important;
        animation: none !important;
    }

    body #tasks .task-item.task-card-modern:hover,
    body #tasks .task-card-actions button:hover,
    body #tasks > .section-header .btn-primary:hover {
        transform: none !important;
    }
}


/* Tareas: correccion puntual de grid 2x2 y proporciones de tarjetas */
body #tasks .task-board.task-list-modern {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #tasks .task-board.task-list-modern > .task-item.task-card-modern {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 21px 22px !important;
    border-width: 1px !important;
    border-radius: 17px !important;
    box-shadow: 0 7px 20px rgba(2, 8, 23, .13) !important;
}

body #tasks .task-board.task-list-modern > .task-item.task-card-modern:hover {
    box-shadow: 0 11px 26px rgba(2, 8, 23, .18) !important;
}

body #tasks .task-card-modern .task-card-main {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
}

body #tasks .task-card-modern .task-content {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
}

body #tasks .task-card-modern .task-title-row {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}

body #tasks .task-card-modern .task-title-row h4 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.27 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    -webkit-line-clamp: 2 !important;
}

body #tasks .task-card-modern .task-status {
    align-self: start !important;
    flex: 0 0 auto !important;
}

body #tasks .task-card-modern .task-subject {
    max-width: 100% !important;
    margin-top: 1px !important;
}

body #tasks .task-card-modern .task-description {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.46 !important;
    -webkit-line-clamp: 3 !important;
}

body #tasks .task-card-modern .task-meta-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body #tasks .task-card-modern .task-meta-grid > span {
    min-width: 0 !important;
    min-height: 54px !important;
    display: block !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--tasks-surface-soft) !important;
    border: 1px solid var(--tasks-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

body #tasks .task-card-modern .task-meta-grid > span:nth-child(even),
body #tasks .task-card-modern .task-meta-grid > span:nth-child(n+3),
body #tasks .task-card-modern .task-meta-grid > span + span {
    border: 1px solid var(--tasks-border) !important;
}

body #tasks .task-card-modern .task-meta-grid strong {
    display: block !important;
    margin-bottom: 3px !important;
}

body #tasks .task-card-modern .task-reminder-alert {
    margin: 1px 0 0 !important;
}

body #tasks .task-card-modern .task-card-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    margin: auto 0 0 !important;
    padding: 12px 0 0 !important;
}

body #tasks .task-card-modern .task-card-actions.has-complete,
body #tasks .task-card-modern .task-card-actions.no-complete {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body #tasks .task-card-modern .task-card-actions button,
body #tasks .task-card-modern .task-card-actions [data-task-calendar],
body #tasks .task-card-modern .task-card-actions [data-task-delete] {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 41px !important;
    height: 41px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
}

body #tasks .task-board.task-list-modern > .task-empty-filter {
    grid-column: 1 / -1 !important;
}

@media (max-width: 899px) {
    body #tasks .task-board.task-list-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    body #tasks .task-board.task-list-modern > .task-item.task-card-modern {
        padding: 19px !important;
    }
}

@media (max-width: 599px) {
    body #tasks .task-board.task-list-modern {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important;
    }

    body #tasks .task-board.task-list-modern > .task-item.task-card-modern {
        width: 100% !important;
        height: auto !important;
        padding: 17px !important;
    }

    body #tasks .task-card-modern .task-card-main {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body #tasks .task-card-modern .task-title-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }
}

@media (max-width: 419px) {
    body #tasks .task-card-modern .task-title-row,
    body #tasks .task-card-modern .task-meta-grid,
    body #tasks .task-card-modern .task-card-actions,
    body #tasks .task-card-modern .task-card-actions.has-complete,
    body #tasks .task-card-modern .task-card-actions.no-complete {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body #tasks .task-card-modern .task-status {
        justify-self: start !important;
    }

    body #tasks .task-card-modern .task-meta-grid > span {
        min-height: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #tasks .task-board.task-list-modern > .task-item.task-card-modern {
        transition: none !important;
        animation: none !important;
    }
}


/* Tareas: grid de informacion con borde completo v4 */
body #tasks .task-card-modern .task-content {
    display: flex !important;
    flex-direction: column !important;
}

body #tasks .task-card-modern .task-title-row { order: 1 !important; }
body #tasks .task-card-modern .task-subject { order: 2 !important; }
body #tasks .task-card-modern .task-description { order: 3 !important; }

body #tasks .task-card-modern .task-content::after {
    content: "Información de la tarea" !important;
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 2px !important;
    padding: 0 !important;
    color: rgba(248, 250, 252, .94) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .015em !important;
}

body #tasks .task-card-modern .task-meta-grid {
    --task-info-divider: rgba(148, 163, 184, .24);
    order: 5 !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(120px, auto)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--task-info-divider) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .28) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body #tasks .task-card-modern .task-meta-grid::before,
body #tasks .task-card-modern .task-meta-grid::after {
    content: none !important;
    display: none !important;
}

body #tasks .task-card-modern .task-meta-grid > span {
    position: static !important;
    z-index: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 24px 28px !important;
    color: rgba(248, 250, 252, .96) !important;
    font-size: 1.03rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow-wrap: anywhere !important;
}

body #tasks .task-card-modern .task-meta-grid > span:nth-child(1) {
    border-right: 1px solid var(--task-info-divider) !important;
    border-bottom: 1px solid var(--task-info-divider) !important;
}

body #tasks .task-card-modern .task-meta-grid > span:nth-child(2) {
    border-bottom: 1px solid var(--task-info-divider) !important;
}

body #tasks .task-card-modern .task-meta-grid > span:nth-child(3) {
    border-right: 1px solid var(--task-info-divider) !important;
}

body #tasks .task-card-modern .task-meta-grid > span:nth-child(4) {
    border: 0 !important;
}

body #tasks .task-card-modern .task-meta-grid > span::before {
    content: none !important;
    display: none !important;
}

body #tasks .task-card-modern .task-meta-grid > span > strong {
    display: block !important;
    margin: 0 !important;
    color: rgba(148, 163, 184, .96) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

body #tasks .task-card-modern .task-meta-grid .task-priority {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body #tasks .task-card-modern .task-meta-grid .task-priority.high,
body #tasks .task-card-modern .task-meta-grid .task-priority.alta {
    color: #fecdd3 !important;
    background: rgba(244, 63, 94, .13) !important;
    border-color: rgba(251, 113, 133, .25) !important;
}

body #tasks .task-card-modern .task-meta-grid .task-priority.medium,
body #tasks .task-card-modern .task-meta-grid .task-priority.media {
    color: #fde68a !important;
    background: rgba(245, 158, 11, .13) !important;
    border-color: rgba(251, 191, 36, .25) !important;
}

body #tasks .task-card-modern .task-meta-grid .task-priority.low,
body #tasks .task-card-modern .task-meta-grid .task-priority.baja {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, .13) !important;
    border-color: rgba(74, 222, 128, .24) !important;
}

body #tasks .task-card-modern .task-reminder-alert {
    order: 6 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-content::after {
    color: #172033 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid {
    --task-info-divider: rgba(15, 23, 42, .20);
    background: #f7f8fa !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid > span {
    color: #202a3a !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid > span > strong {
    color: #667085 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.high,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.alta {
    color: #b4233a !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.medium,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.media {
    color: #8a5a08 !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.low,
body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks .task-card-modern .task-meta-grid .task-priority.baja {
    color: #18753c !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

@media (max-width: 599px) {
    body #tasks .task-card-modern .task-meta-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
    }

    body #tasks .task-card-modern .task-meta-grid > span,
    body #tasks .task-card-modern .task-meta-grid > span:nth-child(1),
    body #tasks .task-card-modern .task-meta-grid > span:nth-child(2),
    body #tasks .task-card-modern .task-meta-grid > span:nth-child(3),
    body #tasks .task-card-modern .task-meta-grid > span:nth-child(4) {
        min-height: 104px !important;
        padding: 24px 28px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--task-info-divider) !important;
    }

    body #tasks .task-card-modern .task-meta-grid > span:nth-child(4) {
        border-bottom: 0 !important;
    }
}


/* Calendario: rediseño SaaS compacto v1 */
body #calendar {
    --calendar-surface: #171c27;
    --calendar-surface-soft: #1d2431;
    --calendar-surface-muted: #111722;
    --calendar-border: rgba(148, 163, 184, .16);
    --calendar-border-strong: rgba(148, 163, 184, .25);
    --calendar-text: #f5f7fb;
    --calendar-muted: #9ba8bb;
    --calendar-accent: #7c6ff0;
    --calendar-accent-soft: rgba(124, 111, 240, .14);
    --calendar-danger: #f87171;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 4px clamp(0px, 1vw, 12px) 28px !important;
}

body #calendar > .section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title action" "subtitle action" !important;
    align-items: center !important;
    gap: 5px 20px !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

body #calendar > .section-header h1 {
    grid-area: title !important;
    margin: 0 !important;
    color: var(--calendar-text) !important;
    font-size: clamp(2.1rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
}

body #calendar > .section-header .subtitle {
    grid-area: subtitle !important;
    margin: 0 !important;
    color: var(--calendar-muted) !important;
    font-size: clamp(.94rem, 1.3vw, 1.02rem) !important;
    line-height: 1.45 !important;
}

body #calendar > .section-header .btn-primary {
    grid-area: action !important;
    min-width: 152px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(139, 128, 246, .48) !important;
    border-radius: 12px !important;
    background: #7165df !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(10, 15, 28, .18) !important;
    font-size: .9rem !important;
    font-weight: 750 !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #calendar > .section-header .btn-primary:hover {
    background: #7d72e6 !important;
    border-color: rgba(167, 157, 255, .7) !important;
    box-shadow: 0 8px 20px rgba(10, 15, 28, .22) !important;
    transform: translateY(-1px) !important;
}

body #calendar :is(button, [tabindex]):focus-visible {
    outline: 3px solid rgba(125, 114, 230, .32) !important;
    outline-offset: 2px !important;
}

body #calendar .calendar-container {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 2.2fr) minmax(300px, .95fr) !important;
    align-items: start !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body #calendar .calendar-side {
    min-width: 0 !important;
    display: grid !important;
    gap: 20px !important;
}

body #calendar .calendar-sync-card {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 4px 16px !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 17px !important;
    background: var(--calendar-surface) !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .13) !important;
}

body #calendar .calendar-sync-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 14px !important;
    background-color: var(--calendar-surface-soft) !important;
    background-size: 26px !important;
    box-shadow: none !important;
}

body #calendar .calendar-sync-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: var(--calendar-text) !important;
    font-size: 1.02rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
}

body #calendar .calendar-sync-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--calendar-muted) !important;
    font-size: .84rem !important;
    line-height: 1.45 !important;
}

body #calendar .calendar-sync-card .btn-primary {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    min-width: 132px !important;
    min-height: 43px !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid rgba(139, 128, 246, .45) !important;
    border-radius: 11px !important;
    background: #7165df !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: .84rem !important;
    font-weight: 750 !important;
}

body #calendar .calendar-mini,
body #calendar .events-list {
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 18px !important;
    background: var(--calendar-surface) !important;
    box-shadow: 0 12px 32px rgba(2, 8, 23, .14) !important;
    backdrop-filter: none !important;
}

body #calendar .calendar-mini {
    padding: clamp(20px, 2vw, 26px) !important;
}

body #calendar .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
}

body #calendar .calendar-title-block {
    min-width: 0 !important;
    text-align: center !important;
}

body #calendar .calendar-title {
    margin: 0 !important;
    color: var(--calendar-text) !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
}

body #calendar .calendar-title-block p {
    margin: 4px 0 0 !important;
    color: var(--calendar-muted) !important;
    font-size: .76rem !important;
    line-height: 1.3 !important;
}

body #calendar .calendar-month-btn {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    border: 1px solid var(--calendar-border-strong) !important;
    border-radius: 11px !important;
    background: var(--calendar-surface-soft) !important;
    color: var(--calendar-text) !important;
    box-shadow: none !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #calendar .calendar-month-btn:hover {
    border-color: rgba(139, 128, 246, .48) !important;
    background: var(--calendar-accent-soft) !important;
    transform: translateY(-1px) !important;
}

body #calendar .calendar-grid.calendar-grid-wide {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(6px, .8vw, 9px) !important;
}

body #calendar .calendar-day-label {
    min-width: 0 !important;
    min-height: 28px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--calendar-muted) !important;
    font-size: .68rem !important;
    font-weight: 750 !important;
    letter-spacing: .04em !important;
}

body #calendar .calendar-day {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / .82 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: clamp(7px, .8vw, 10px) !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 11px !important;
    background: var(--calendar-surface-muted) !important;
    color: var(--calendar-text) !important;
    box-shadow: none !important;
    font-size: clamp(.72rem, 1vw, .84rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: default !important;
    overflow: hidden !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body #calendar .calendar-day:not(.muted):hover {
    border-color: rgba(139, 128, 246, .40) !important;
    background: var(--calendar-surface-soft) !important;
    transform: translateY(-1px) !important;
}

body #calendar .calendar-day.muted {
    border-color: transparent !important;
    background: rgba(15, 23, 42, .16) !important;
    color: transparent !important;
    opacity: .42 !important;
}

body #calendar .calendar-day.is-today {
    border-color: rgba(139, 128, 246, .82) !important;
    background: var(--calendar-accent-soft) !important;
    color: var(--calendar-text) !important;
    box-shadow: inset 0 0 0 1px rgba(139, 128, 246, .18) !important;
}

body #calendar .calendar-day.is-today::before {
    content: "Hoy" !important;
    position: absolute !important;
    right: 7px !important;
    bottom: 7px !important;
    color: #bcb5ff !important;
    font-size: .56rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

body #calendar .calendar-day.has-event {
    border-color: rgba(96, 181, 255, .42) !important;
    background: rgba(70, 129, 191, .11) !important;
    color: var(--calendar-text) !important;
    box-shadow: none !important;
}

body #calendar .calendar-day.has-event::after {
    content: "" !important;
    position: absolute !important;
    right: auto !important;
    bottom: 8px !important;
    left: 9px !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #60a5fa !important;
    box-shadow: none !important;
}

body #calendar .calendar-event-marker {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 5px !important;
    border: 1px solid rgba(96, 165, 250, .28) !important;
    border-radius: 999px !important;
    background: rgba(96, 165, 250, .16) !important;
    color: #b9dcff !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

body #calendar .events-list {
    position: sticky !important;
    top: 20px !important;
    padding: 22px !important;
}

body #calendar .events-list > h3 {
    margin: 0 0 16px !important;
    color: var(--calendar-text) !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body #calendar #custom-events-list {
    display: grid !important;
    gap: 13px !important;
    max-height: min(720px, calc(100vh - 210px)) !important;
    padding: 0 4px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, .28) transparent !important;
}

body #calendar .event-item {
    position: relative !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 15px !important;
    border: 1px solid var(--calendar-border) !important;
    border-left-width: 1px !important;
    border-radius: 14px !important;
    background: var(--calendar-surface-muted) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body #calendar .event-item::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
    background: #7c6ff0 !important;
    opacity: .72 !important;
}

body #calendar .event-item.event-soon {
    border-color: rgba(248, 113, 113, .28) !important;
    box-shadow: none !important;
}

body #calendar .event-item.event-soon::before {
    background: #f87171 !important;
}

body #calendar .event-date {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    min-width: 0 !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border: 1px solid var(--calendar-border) !important;
    border-radius: 12px !important;
    background: var(--calendar-surface-soft) !important;
}

body #calendar .event-date .day {
    color: var(--calendar-text) !important;
    font-size: 1.15rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

body #calendar .event-date .month {
    margin-top: 3px !important;
    color: var(--calendar-muted) !important;
    font-size: .6rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

body #calendar .event-content {
    min-width: 0 !important;
}

body #calendar .event-content h4 {
    margin: 0 0 5px !important;
    color: var(--calendar-text) !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
}

body #calendar .event-content > p:not(.event-alert):not(.email-simulation) {
    margin: 0 0 8px !important;
    color: var(--calendar-muted) !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
}

body #calendar .event-badge,
body #calendar .event-alert,
body #calendar .email-simulation {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 0 5px 5px 0 !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    border-radius: 999px !important;
    background: rgba(96, 165, 250, .10) !important;
    color: #a9d4ff !important;
    font-size: .64rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    overflow-wrap: anywhere !important;
}

body #calendar .event-alert {
    border-color: rgba(248, 113, 113, .24) !important;
    background: rgba(248, 113, 113, .10) !important;
    color: #fca5a5 !important;
}

body #calendar .email-simulation {
    border-color: rgba(52, 211, 153, .22) !important;
    background: rgba(52, 211, 153, .09) !important;
    color: #9ce7c8 !important;
}

body #calendar .card-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
}

body #calendar .card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;
    height: 39px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 750 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    transition: background-color 180ms ease, border-color 180ms ease !important;
}

body #calendar .card-actions .btn-secondary {
    border: 1px solid var(--calendar-border-strong) !important;
    background: var(--calendar-surface-soft) !important;
    color: var(--calendar-text) !important;
}

body #calendar .card-actions .btn-secondary:hover {
    border-color: rgba(139, 128, 246, .38) !important;
    background: var(--calendar-accent-soft) !important;
    transform: none !important;
}

body #calendar .card-actions .btn-danger {
    border: 1px solid rgba(248, 113, 113, .26) !important;
    background: rgba(248, 113, 113, .09) !important;
    color: #fca5a5 !important;
}

body #calendar .card-actions .btn-danger:hover {
    border-color: rgba(248, 113, 113, .42) !important;
    background: rgba(248, 113, 113, .15) !important;
    transform: none !important;
}

body #calendar .empty-state {
    min-height: 210px !important;
    gap: 12px !important;
    padding: 24px !important;
    border: 1px dashed var(--calendar-border-strong) !important;
    border-radius: 14px !important;
    background: var(--calendar-surface-muted) !important;
    box-shadow: none !important;
}

body #calendar .empty-state .empty-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--calendar-accent-soft) !important;
    box-shadow: none !important;
}

body #calendar .empty-state h3 {
    margin: 0 !important;
    color: var(--calendar-muted) !important;
    font-size: .88rem !important;
    font-weight: 650 !important;
    text-align: center !important;
}

body #calendar .empty-state h3::after {
    content: none !important;
}

body #calendar .empty-state .btn-primary {
    min-height: 42px !important;
    border-radius: 11px !important;
    background: #7165df !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar {
    --calendar-surface: #ffffff;
    --calendar-surface-soft: #f4f6fa;
    --calendar-surface-muted: #f8f9fc;
    --calendar-border: rgba(15, 23, 42, .10);
    --calendar-border-strong: rgba(15, 23, 42, .17);
    --calendar-text: #172033;
    --calendar-muted: #667085;
    --calendar-accent: #6558d8;
    --calendar-accent-soft: rgba(101, 88, 216, .09);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .calendar-mini,
body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .events-list,
body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .calendar-sync-card {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .calendar-day.has-event {
    border-color: rgba(37, 99, 235, .22) !important;
    background: rgba(37, 99, 235, .06) !important;
    color: #172033 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .calendar-event-marker {
    border-color: rgba(37, 99, 235, .18) !important;
    background: rgba(37, 99, 235, .09) !important;
    color: #245fad !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .calendar-day.is-today::before {
    color: #6558d8 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .event-badge {
    color: #245fad !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .email-simulation {
    color: #16734b !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .event-alert,
body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar .card-actions .btn-danger {
    color: #b73745 !important;
}

body .quick-modal:has(.quick-modal-card[aria-label="Crear evento"]),
body .quick-modal:has(.quick-modal-card[aria-label="Editar evento"]) {
    padding: clamp(14px, 2vw, 24px) !important;
    background: rgba(3, 7, 18, .64) !important;
    backdrop-filter: blur(8px) !important;
}

body .quick-modal-card[aria-label="Crear evento"],
body .quick-modal-card[aria-label="Editar evento"] {
    width: min(780px, 100%) !important;
    max-height: 88vh !important;
    padding: 24px 26px 0 !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 20px !important;
    background: #171c27 !important;
    box-shadow: 0 24px 64px rgba(2, 8, 23, .38) !important;
}

body .quick-modal-card[aria-label="Crear evento"] > h3,
body .quick-modal-card[aria-label="Editar evento"] > h3 {
    flex: 0 0 auto !important;
    margin: 0 46px 18px 0 !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .15) !important;
    color: #f5f7fb !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-close,
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-close {
    top: 18px !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 10px !important;
    background: #202838 !important;
    color: #e6eaf1 !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form,
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px 16px !important;
    padding: 0 4px 0 0 !important;
    overflow-y: auto !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form > label,
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form > label {
    min-width: 0 !important;
    gap: 7px !important;
    color: #9ba8bb !important;
    font-size: .72rem !important;
    font-weight: 750 !important;
    letter-spacing: .035em !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form > label:has(textarea),
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form > label:has(textarea),
body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form > label:has(.quick-check),
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form > label:has(.quick-check) {
    grid-column: 1 / -1 !important;
}

body .quick-modal-card[aria-label="Crear evento"] :is(input, select, textarea),
body .quick-modal-card[aria-label="Editar evento"] :is(input, select, textarea) {
    min-height: 44px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    border-radius: 11px !important;
    background: #111722 !important;
    color: #f5f7fb !important;
    box-shadow: none !important;
}

body .quick-modal-card[aria-label="Crear evento"] textarea,
body .quick-modal-card[aria-label="Editar evento"] textarea {
    min-height: 94px !important;
    resize: vertical !important;
}

body .quick-modal-card[aria-label="Crear evento"] :is(input, select, textarea):focus-visible,
body .quick-modal-card[aria-label="Editar evento"] :is(input, select, textarea):focus-visible {
    outline: 3px solid rgba(124, 111, 240, .22) !important;
    outline-offset: 1px !important;
    border-color: rgba(139, 128, 246, .72) !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-check,
body .quick-modal-card[aria-label="Editar evento"] .quick-check {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 11px !important;
    background: #111722 !important;
    color: #d7dde8 !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-actions,
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-actions {
    grid-column: 1 / -1 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    margin: 3px 0 0 !important;
    padding: 16px 0 20px !important;
    border-top: 1px solid rgba(148, 163, 184, .15) !important;
    background: #171c27 !important;
}

body .quick-modal-card[aria-label="Crear evento"] .quick-modal-actions .btn-primary,
body .quick-modal-card[aria-label="Editar evento"] .quick-modal-actions .btn-primary {
    min-height: 44px !important;
    border-radius: 11px !important;
    background: #7165df !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"],
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] {
    border-color: rgba(15, 23, 42, .10) !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] > h3,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] > h3 {
    border-color: rgba(15, 23, 42, .10) !important;
    color: #172033 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] .quick-modal-close,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] .quick-modal-close,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] :is(input, select, textarea),
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] :is(input, select, textarea),
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] .quick-check,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] .quick-check {
    border-color: rgba(15, 23, 42, .12) !important;
    background: #f7f8fb !important;
    color: #172033 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] .quick-modal-form > label,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] .quick-modal-form > label {
    color: #667085 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Crear evento"] .quick-modal-actions,
body:is(.light-theme, .light-mode, [data-theme="light"]) .quick-modal-card[aria-label="Editar evento"] .quick-modal-actions {
    border-color: rgba(15, 23, 42, .10) !important;
    background: #ffffff !important;
}

@media (max-width: 1100px) {
    body #calendar .calendar-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body #calendar .events-list {
        position: static !important;
    }

    body #calendar #custom-events-list {
        max-height: 620px !important;
    }
}

@media (max-width: 720px) {
    body #calendar {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body #calendar > .section-header {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "title" "subtitle" "action" !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    body #calendar > .section-header h1 {
        font-size: clamp(1.85rem, 8vw, 2.2rem) !important;
    }

    body #calendar > .section-header .btn-primary {
        width: 100% !important;
        margin-top: 9px !important;
    }

    body #calendar .calendar-sync-card {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        padding: 20px !important;
    }

    body #calendar .calendar-sync-icon {
        width: 46px !important;
        height: 46px !important;
    }

    body #calendar .calendar-sync-card .btn-primary {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    body #calendar .calendar-mini,
    body #calendar .events-list {
        border-radius: 16px !important;
    }

    body #calendar .calendar-mini {
        padding: 16px !important;
    }

    body #calendar .calendar-toolbar {
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        gap: 8px !important;
        margin-bottom: 13px !important;
    }

    body #calendar .calendar-month-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    body #calendar .calendar-grid.calendar-grid-wide {
        gap: 5px !important;
    }

    body #calendar .calendar-day {
        padding: 6px !important;
        border-radius: 9px !important;
        font-size: .7rem !important;
    }

    body #calendar .calendar-event-marker {
        top: 4px !important;
        right: 4px !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 0 3px !important;
        font-size: .48rem !important;
    }

    body #calendar .calendar-day.has-event::after {
        bottom: 5px !important;
        left: 6px !important;
        width: 12px !important;
        height: 2px !important;
    }

    body #calendar .calendar-day.is-today::before {
        content: "" !important;
        right: 5px !important;
        bottom: 5px !important;
        width: 4px !important;
        height: 4px !important;
        border-radius: 50% !important;
        background: #8b80f6 !important;
    }

    body #calendar .events-list {
        padding: 18px !important;
    }

    body #calendar #custom-events-list {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    body #calendar .event-item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 13px !important;
    }

    body #calendar .event-date {
        width: 48px !important;
        height: 48px !important;
    }

    body #calendar .card-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body #calendar .card-actions button {
        min-height: 42px !important;
        height: 42px !important;
        font-size: .72rem !important;
    }

    body .quick-modal-card[aria-label="Crear evento"],
    body .quick-modal-card[aria-label="Editar evento"] {
        max-height: 90vh !important;
        padding: 20px 18px 0 !important;
        border-radius: 18px !important;
    }

    body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form,
    body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .quick-modal-card[aria-label="Crear evento"] .quick-modal-form > label,
    body .quick-modal-card[aria-label="Editar evento"] .quick-modal-form > label {
        grid-column: 1 !important;
    }

    body .quick-modal-card[aria-label="Crear evento"] .quick-modal-actions,
    body .quick-modal-card[aria-label="Editar evento"] .quick-modal-actions {
        grid-column: 1 !important;
    }

    body .quick-modal-card[aria-label="Crear evento"] .quick-modal-actions .btn-primary,
    body .quick-modal-card[aria-label="Editar evento"] .quick-modal-actions .btn-primary {
        width: 100% !important;
    }
}

@media (max-width: 420px) {
    body #calendar .calendar-sync-card {
        grid-template-columns: minmax(0, 1fr) !important;
        text-align: left !important;
    }

    body #calendar .calendar-sync-icon,
    body #calendar .calendar-sync-card h3,
    body #calendar .calendar-sync-card p,
    body #calendar .calendar-sync-card .btn-primary {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body #calendar .calendar-sync-card h3 {
        margin-top: 5px !important;
    }

    body #calendar .calendar-title {
        font-size: 1.08rem !important;
    }

    body #calendar .calendar-title-block p {
        display: none !important;
    }

    body #calendar .calendar-mini {
        padding: 13px !important;
    }

    body #calendar .calendar-grid.calendar-grid-wide {
        gap: 4px !important;
    }

    body #calendar .calendar-day-label {
        min-height: 22px !important;
        font-size: .58rem !important;
    }

    body #calendar .calendar-day {
        padding: 5px !important;
        border-radius: 8px !important;
        font-size: .64rem !important;
    }

    body #calendar .calendar-event-marker {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #calendar *,
    body #calendar *::before,
    body #calendar *::after,
    body .quick-modal-card[aria-label="Crear evento"] *,
    body .quick-modal-card[aria-label="Editar evento"] * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    body #calendar :is(button, .calendar-day):hover {
        transform: none !important;
    }
}


/* Calendario: separación de celdas y mes local actual v2 */
body #calendar {
    --calendar-day-border: var(--calendar-border);
}

body #calendar .calendar-mini {
    padding: 24px !important;
}

body #calendar .calendar-grid.calendar-grid-wide {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

body #calendar .calendar-day-label,
body #calendar .calendar-day {
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body #calendar .calendar-day {
    min-height: 92px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 13px !important;
    border: 1px solid var(--calendar-day-border) !important;
    border-radius: 13px !important;
    transform: none !important;
}

body #calendar .calendar-day:not(.muted):hover {
    transform: none !important;
}

body #calendar .calendar-day-number {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body #calendar .calendar-day.muted {
    border-color: transparent !important;
}

@media (max-width: 1100px) {
    body #calendar .calendar-mini {
        padding: 20px !important;
    }

    body #calendar .calendar-grid.calendar-grid-wide {
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    body #calendar .calendar-day {
        min-height: 78px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    body #calendar .calendar-day-number {
        font-size: 16px !important;
    }
}

@media (max-width: 720px) {
    body #calendar .calendar-mini {
        padding: 16px !important;
    }

    body #calendar .calendar-grid.calendar-grid-wide {
        column-gap: 5px !important;
        row-gap: 5px !important;
    }

    body #calendar .calendar-day {
        min-height: 54px !important;
        padding: 6px !important;
        border-radius: 9px !important;
    }

    body #calendar .calendar-day-number {
        font-size: 13px !important;
    }

    body #calendar .calendar-event-marker {
        top: 4px !important;
        right: 4px !important;
    }
}

@media (max-width: 420px) {
    body #calendar .calendar-mini {
        padding: 13px !important;
    }

    body #calendar .calendar-grid.calendar-grid-wide {
        column-gap: 4px !important;
        row-gap: 4px !important;
    }

    body #calendar .calendar-day {
        min-height: 46px !important;
        padding: 5px !important;
        border-radius: 8px !important;
    }

    body #calendar .calendar-day-number {
        font-size: 12px !important;
    }

    body #calendar .calendar-event-marker {
        top: 3px !important;
        right: 3px !important;
        min-width: 12px !important;
        width: auto !important;
        height: 12px !important;
        display: grid !important;
        padding: 0 2px !important;
        font-size: 8px !important;
    }
}


/* Mochila Digital: modal PDF compacto y acceso funcional al Tutor */
body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-form,
body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-form {
    align-items: start !important;
    row-gap: 14px !important;
}

body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-form > label:nth-child(5),
body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-form > label:nth-child(5) {
    grid-column: 1 / -1 !important;
}

body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-actions,
body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-actions {
    margin-top: 2px !important;
}

body #backpack [data-resource-ai] {
    cursor: pointer !important;
    touch-action: manipulation;
}

@media (max-width: 720px) {
    body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-form,
    body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-form > label,
    body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-form > label,
    body .quick-modal-card[aria-label="Subir PDF"] .quick-modal-actions,
    body .quick-modal-card[aria-label="Editar recurso"] .quick-modal-actions {
        grid-column: 1 !important;
    }
}


/* Tema claro global suave y accesible */
body:is(.light-theme, .light-mode, [data-theme="light"]) {
    --bg-primary: #F3F4F6;
    --bg-secondary: #EEF1F5;
    --bg-tertiary: #E6EAF0;
    --bg-dark: #F3F4F6;
    --surface: #FAFAFA;
    --surface-soft: #F7F8FA;
    --surface-muted: #EEF1F5;
    --surface-hover: #E9EDF3;
    --input-bg: #F1F3F6;
    --border-color: #D5DAE2;
    --border-strong: #C4CBD6;
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-muted: #7A8494;
    --text-tertiary: #7A8494;
    --light-bg-primary: #F3F4F6;
    --light-bg-secondary: #EEF1F5;
    --light-bg-tertiary: #E6EAF0;
    --light-text-primary: #1F2937;
    --light-text-secondary: #4B5563;
    --light-text-tertiary: #7A8494;
    --focus-ring: rgba(94, 82, 190, .30);
    --soft-shadow: 0 8px 24px rgba(31, 41, 55, .07);
    color-scheme: light;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    #app-page,
    #landing-page,
    .page,
    .main-content,
    .section,
    .content-wrapper,
    .dashboard-content
) {
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .sidebar,
    .landing-nav,
    .navbar,
    .topbar,
    .top-bar,
    .mobile-header,
    .app-header,
    .sidebar-header,
    .sidebar-footer
) {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .sidebar {
    border-right: 1px solid var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .sidebar-logo,
    .sidebar-logo span,
    .nav-label,
    .section-header h1,
    .section-header h2,
    .section-header h3,
    h1,
    h2,
    h3,
    h4,
    h5,
    legend,
    strong
) {
    color: var(--text-primary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    p,
    .subtitle,
    .description,
    .helper-text,
    .stat-subtext,
    small,
    .muted,
    .text-muted
) {
    color: var(--text-secondary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .disabled,
    [aria-disabled="true"],
    .placeholder,
    .text-tertiary
) {
    color: var(--text-muted) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .nav-item {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .nav-item:hover {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .nav-item.active {
    color: #5146A8 !important;
    background: #E7E4F6 !important;
    border-color: #CBC5EA !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .nav-icon,
    .sidebar-icon,
    .material-icon,
    .resource-icon,
    .stat-icon,
    .quick-modal-close,
    .modal-close,
    .close-button,
    .app-sidebar-control,
    .sidebar-toggle,
    .theme-toggle
) {
    color: currentColor !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .nav-icon svg,
    .sidebar-icon svg,
    button svg,
    .material-icon svg
) {
    stroke: currentColor !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .stat-card,
    .subject-card,
    .task-card,
    .task-card-modern,
    .calendar-mini,
    .calendar-sync-card,
    .events-list,
    .event-item,
    .grade-card,
    .grades-card,
    .attendance-card,
    .attendance-stat-card,
    .tutor-hero,
    .tutor-chat-card,
    .tutor-message,
    .progress-card,
    .progress-stat,
    .achievement,
    .resource-card,
    .library-resource-card,
    .profile-card,
    .profile-panel,
    .settings-card,
    .empty-state,
    .info-card,
    .summary-card,
    .metric-card,
    .quick-card
) {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--soft-shadow) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .card-header,
    .card-footer,
    .task-meta,
    .task-meta-grid,
    .resource-data,
    .calendar-toolbar,
    .tutor-tabs,
    .tutor-composer-bar,
    .profile-section,
    .settings-section,
    .info-panel,
    .note-panel,
    .muted-panel
) {
    color: var(--text-secondary) !important;
    background-color: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #calendar {
    --calendar-surface: var(--surface);
    --calendar-surface-soft: var(--surface-soft);
    --calendar-surface-muted: var(--surface-muted);
    --calendar-border: rgba(112, 123, 140, .22);
    --calendar-border-strong: var(--border-strong);
    --calendar-text: var(--text-primary);
    --calendar-muted: var(--text-secondary);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #progress {
    --progress-surface: var(--surface);
    --progress-surface-muted: var(--surface-soft);
    --progress-surface-hover: var(--surface-hover);
    --progress-border: var(--border-color);
    --progress-border-strong: var(--border-strong);
    --progress-text: var(--text-primary);
    --progress-text-muted: var(--text-secondary);
    --progress-text-subtle: var(--text-muted);
    --progress-track: #DDE2E9;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #profile {
    --profile-surface: var(--surface);
    --profile-surface-muted: var(--surface-soft);
    --profile-surface-hover: var(--surface-hover);
    --profile-border: var(--border-color);
    --profile-border-strong: var(--border-strong);
    --profile-text: var(--text-primary);
    --profile-text-muted: var(--text-secondary);
    --profile-text-subtle: var(--text-muted);
    --profile-timeline: #DDE2E9;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    input,
    textarea,
    select
) {
    color: var(--text-primary) !important;
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    caret-color: #5146A8 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) select {
    color-scheme: light;
    accent-color: #5E52BE;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) option {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    input,
    textarea
)::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) label,
body:is(.light-theme, .light-mode, [data-theme="light"]) label > span {
    color: var(--text-secondary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    input,
    textarea,
    select,
    button,
    a,
    [tabindex]
):focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .btn-primary,
    button.btn-primary,
    .tutor-send
) {
    color: #F9FAFB !important;
    background: #6256C4 !important;
    border-color: #574BAF !important;
    box-shadow: 0 6px 16px rgba(79, 70, 170, .18) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .btn-primary,
    button.btn-primary,
    .tutor-send
):hover:not(:disabled) {
    color: #F9FAFB !important;
    background: #574BAF !important;
    border-color: #4F449F !important;
    box-shadow: 0 7px 18px rgba(79, 70, 170, .22) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .btn-secondary,
    button.btn-secondary,
    .calendar-month-btn,
    .sidebar-toggle,
    .app-sidebar-control
) {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .btn-secondary,
    button.btn-secondary,
    .calendar-month-btn,
    .sidebar-toggle,
    .app-sidebar-control
):hover:not(:disabled) {
    color: var(--text-primary) !important;
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .btn-danger,
    button.btn-danger,
    .delete-button
) {
    color: #F9FAFB !important;
    background: #B94A55 !important;
    border-color: #A33F49 !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    button,
    .btn-primary,
    .btn-secondary,
    .btn-danger
):disabled,
body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    button,
    .btn-primary,
    .btn-secondary,
    .btn-danger
)[aria-disabled="true"] {
    color: var(--text-muted) !important;
    background: #E3E7ED !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    opacity: .72 !important;
    cursor: not-allowed !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .quick-modal,
    .modal,
    .confirm-modal,
    .dialog-overlay,
    .overlay
) {
    background-color: rgba(31, 41, 55, .38) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .quick-modal-card,
    .modal-card,
    .modal-content,
    .confirm-modal-card,
    [role="dialog"]
) {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 22px 55px rgba(31, 41, 55, .18) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    table,
    .table,
    .data-table
) {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    thead,
    th
) {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    tbody,
    td,
    tr
) {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) tbody tr:hover {
    background: var(--surface-hover) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .badge,
    .tag,
    .pill,
    .status-badge,
    .event-badge,
    .priority-badge
) {
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .toast,
    .app-toast,
    .alert,
    .notification
) {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--soft-shadow) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .toast.success,
    .app-toast.success,
    .alert-success
) {
    color: #245E45 !important;
    background: #E5F2EB !important;
    border-color: #B9DCC9 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .toast.error,
    .app-toast.error,
    .alert-error
) {
    color: #873841 !important;
    background: #F5E8EA !important;
    border-color: #E1BDC2 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .toast.warning,
    .app-toast.warning,
    .alert-warning
) {
    color: #76551A !important;
    background: #F6EFDE !important;
    border-color: #E4D3A9 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) {
    scrollbar-color: #AEB7C4 var(--bg-secondary);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) *::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) *::-webkit-scrollbar-thumb {
    background: #AEB7C4;
    border: 3px solid var(--bg-secondary);
    border-radius: 999px;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) *::-webkit-scrollbar-thumb:hover {
    background: #929EAE;
}


/* Tema claro global suave: correcciones de alta especificidad para la landing */
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .landing-nav {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page :is(
    #features,
    #ai-preview,
    #benefits-use,
    .benefits,
    .about-project,
    .use-benefits
) {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page :is(
    .dashboard-mockup,
    .hero-dashboard,
    .mockup-card,
    .hero-mini-card,
    .benefit-card,
    .about-feature,
    .ai-orbit-card,
    .ai-window,
    .use-benefit-card,
    .pet-bubble
) {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--soft-shadow) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    .auth-card,
    .auth-modal-content,
    .login-card,
    .register-card
) {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 22px 55px rgba(31, 41, 55, .16) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .brand-logo {
    background: transparent !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page :is(
    .benefit-card,
    .about-feature,
    .use-benefit-card,
    .ai-orbit-card,
    .ai-window
) :is(h3, h4, strong) {
    color: var(--text-primary) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page :is(
    .benefit-card,
    .about-feature,
    .use-benefit-card,
    .ai-orbit-card,
    .ai-window
) :is(p, span, small) {
    color: var(--text-secondary) !important;
}


/* Tema claro global suave: autenticación */
body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    #login-page,
    #register-page
) .auth-card {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 22px 55px rgba(31, 41, 55, .16) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) :is(
    #login-page,
    #register-page
) .auth-container {
    background: var(--bg-primary) !important;
}


/* Dashboard principal: sistema visual unificado y compacto */
body #dashboard {
    --dashboard-surface: #151B28;
    --dashboard-surface-soft: #1B2230;
    --dashboard-surface-hover: #202938;
    --dashboard-border: rgba(148, 163, 184, .16);
    --dashboard-border-strong: rgba(148, 163, 184, .26);
    --dashboard-text: #F2F5F9;
    --dashboard-text-muted: #A7B1C2;
    --dashboard-text-subtle: #7F8A9D;
    --dashboard-accent: #7468D8;
    --dashboard-accent-soft: rgba(116, 104, 216, .14);
    --dashboard-success: #4FA77B;
    --dashboard-warning: #D4924A;
    --dashboard-radius: 18px;
    --dashboard-shadow: 0 10px 28px rgba(3, 8, 20, .16);
    --dashboard-spacing: 20px;
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 2px 4px 34px !important;
    color: var(--dashboard-text) !important;
    background: transparent !important;
}

body #dashboard :is(.dashboard-student-hero, .dashboard-stat-card, .dashboard-panel-card) {
    min-width: 0 !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: var(--dashboard-radius) !important;
    background: var(--dashboard-surface) !important;
    box-shadow: var(--dashboard-shadow) !important;
}

body #dashboard :is(.dashboard-student-hero, .dashboard-stat-card, .dashboard-panel-card)::before,
body #dashboard :is(.dashboard-student-hero, .dashboard-stat-card, .dashboard-panel-card)::after {
    content: none !important;
    display: none !important;
}

body #dashboard .dashboard-student-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
    min-height: 0 !important;
    margin: 0 0 var(--dashboard-spacing) !important;
    padding: 24px !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-hero-copy {
    min-width: 0 !important;
    align-self: center !important;
}

body #dashboard .dashboard-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin: 0 0 8px !important;
    padding: 0 10px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 999px !important;
    color: #C3BDFC !important;
    background: var(--dashboard-accent-soft) !important;
    font-size: .72rem !important;
    font-weight: 760 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

body #dashboard .dashboard-hero-copy h1 {
    margin: 0 !important;
    color: var(--dashboard-text) !important;
    font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
    font-weight: 820 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
}

body #dashboard .dashboard-hero-copy > p {
    margin: 8px 0 0 !important;
    color: var(--dashboard-text-muted) !important;
    font-size: .96rem !important;
    line-height: 1.45 !important;
}

body #dashboard .dashboard-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px 14px !important;
    margin: 12px 0 0 !important;
    color: var(--dashboard-text-subtle) !important;
    font-size: .78rem !important;
}

body #dashboard .dashboard-hero-meta span {
    color: inherit !important;
}

body #dashboard .dashboard-hero-actions {
    width: 100% !important;
    max-width: 760px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 17px 0 0 !important;
}

body #dashboard .dashboard-hero-actions button {
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 11px !important;
    color: var(--dashboard-text) !important;
    background: var(--dashboard-surface-soft) !important;
    box-shadow: none !important;
    font-size: .76rem !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease !important;
}

body #dashboard .dashboard-hero-actions button:hover {
    border-color: var(--dashboard-border-strong) !important;
    background: var(--dashboard-surface-hover) !important;
    transform: translateY(-1px) !important;
}

body #dashboard .dashboard-hero-widget {
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-content: center !important;
    align-items: center !important;
    gap: 4px 12px !important;
    justify-self: stretch !important;
    padding: 18px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 15px !important;
    color: var(--dashboard-text) !important;
    background: var(--dashboard-surface-soft) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-hero-widget .hero-widget-icon {
    grid-row: 1 / span 2 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: 1px solid rgba(116, 104, 216, .28) !important;
    border-radius: 13px !important;
    color: #B9B2F4 !important;
    background: var(--dashboard-accent-soft) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-hero-widget strong {
    color: var(--dashboard-text) !important;
    font-size: .96rem !important;
}

body #dashboard .dashboard-hero-widget p {
    margin: 3px 0 0 !important;
    color: var(--dashboard-text-muted) !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
}

body #dashboard .dashboard-hero-widget .btn-primary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 39px !important;
    height: 39px !important;
    margin: 11px 0 0 !important;
    border: 1px solid rgba(139, 128, 232, .48) !important;
    border-radius: 11px !important;
    color: #F7F7FB !important;
    background: #675BC3 !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-hero-widget .btn-primary:hover {
    background: #7165CC !important;
    box-shadow: 0 7px 18px rgba(31, 27, 75, .20) !important;
    transform: translateY(-1px) !important;
}

body #dashboard .dashboard-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin: 0 0 var(--dashboard-spacing) !important;
}

body #dashboard .dashboard-stat-card {
    --dashboard-card-accent: var(--dashboard-accent);
    position: relative !important;
    min-height: 168px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px !important;
    overflow: hidden !important;
    border-top: 3px solid var(--dashboard-card-accent) !important;
    transition: border-color 170ms ease, background-color 170ms ease, transform 170ms ease, box-shadow 170ms ease !important;
}

body #dashboard .dashboard-stat-card:nth-child(1) { --dashboard-card-accent: #5793C8; }
body #dashboard .dashboard-stat-card:nth-child(2) { --dashboard-card-accent: #D4924A; }
body #dashboard .dashboard-stat-card:nth-child(3) { --dashboard-card-accent: #4FA77B; }
body #dashboard .dashboard-stat-card:nth-child(4) { --dashboard-card-accent: #8A72C8; }

body #dashboard .dashboard-stat-card:hover {
    border-color: var(--dashboard-card-accent) !important;
    background: var(--dashboard-surface-hover) !important;
    box-shadow: 0 13px 30px rgba(3, 8, 20, .20) !important;
    transform: translateY(-2px) !important;
}

body #dashboard .dashboard-stat-card .stat-header {
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
}

body #dashboard .dashboard-stat-card .stat-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid color-mix(in srgb, var(--dashboard-card-accent) 34%, transparent) !important;
    border-radius: 10px !important;
    color: var(--dashboard-card-accent) !important;
    background: color-mix(in srgb, var(--dashboard-card-accent) 12%, transparent) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-stat-card .stat-label {
    color: var(--dashboard-text-muted) !important;
    font-size: .78rem !important;
    font-weight: 720 !important;
}

body #dashboard .dashboard-stat-card .stat-value {
    margin: 13px 0 0 !important;
    color: var(--dashboard-text) !important;
    font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
    font-weight: 820 !important;
    line-height: 1 !important;
}

body #dashboard .dashboard-stat-card .stat-subtext {
    min-height: 34px !important;
    margin: 8px 0 12px !important;
    color: var(--dashboard-text-subtle) !important;
    font-size: .7rem !important;
    line-height: 1.42 !important;
}

body #dashboard .dashboard-stat-card .progress-bar {
    width: 100% !important;
    height: 5px !important;
    margin: auto 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, .14) !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-stat-card .progress-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--dashboard-card-accent) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-clean-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: "progress day" "starter weekly" !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin: 0 !important;
}

body #dashboard .dashboard-progress-card { grid-area: progress !important; }
body #dashboard .dashboard-day-card { grid-area: day !important; }
body #dashboard .starter-card { grid-area: starter !important; }
body #dashboard .weekly-progress-card { grid-area: weekly !important; }

body #dashboard .dashboard-panel-card {
    min-height: 300px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
    transition: border-color 170ms ease, background-color 170ms ease, transform 170ms ease, box-shadow 170ms ease !important;
}

body #dashboard .dashboard-panel-card:hover {
    border-color: var(--dashboard-border-strong) !important;
    background: var(--dashboard-surface-hover) !important;
    transform: translateY(-1px) !important;
}

body #dashboard .panel-title {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 0 18px !important;
}

body #dashboard .panel-title .panel-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 11px !important;
    color: #AAA3EE !important;
    background: var(--dashboard-accent-soft) !important;
    box-shadow: none !important;
}

body #dashboard .panel-title h3 {
    margin: 0 !important;
    color: var(--dashboard-text) !important;
    font-size: 1rem !important;
    font-weight: 790 !important;
}

body #dashboard .panel-title p {
    margin: 3px 0 0 !important;
    color: var(--dashboard-text-muted) !important;
    font-size: .73rem !important;
}

body #dashboard .dashboard-progress-body {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 190px !important;
}

body #dashboard .dashboard-xp-ring {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    display: grid !important;
    place-content: center !important;
    border: 8px solid var(--dashboard-surface-soft) !important;
    border-radius: 50% !important;
    color: var(--dashboard-text) !important;
    background: radial-gradient(circle at center, var(--dashboard-surface) 59%, transparent 60%), conic-gradient(var(--dashboard-accent) var(--xp), rgba(148, 163, 184, .14) 0) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-xp-ring span {
    color: var(--dashboard-text) !important;
    font-size: 1.22rem !important;
    font-weight: 820 !important;
}

body #dashboard .dashboard-xp-ring small {
    color: var(--dashboard-text-subtle) !important;
    font-size: .58rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body #dashboard .dashboard-progress-details {
    min-width: 0 !important;
    display: grid !important;
    gap: 10px !important;
}

body #dashboard .dashboard-progress-details > strong { color: var(--dashboard-text) !important; }
body #dashboard .dashboard-progress-details > span { color: var(--dashboard-text-muted) !important; font-size: .75rem !important; }

body #dashboard .dashboard-progress-details .progress-bar {
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, .14) !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-progress-details .progress-fill {
    height: 100% !important;
    background: var(--dashboard-accent) !important;
    box-shadow: none !important;
}

body #dashboard .dashboard-achievements {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

body #dashboard .dashboard-achievements span {
    min-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 999px !important;
    color: var(--dashboard-text-muted) !important;
    background: var(--dashboard-surface-soft) !important;
    font-size: .62rem !important;
}

body #dashboard :is(.dashboard-day-list, .dashboard-steps) {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #dashboard .dashboard-day-list li {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 12px !important;
    background: var(--dashboard-surface-soft) !important;
}

body #dashboard .dashboard-day-list li > span {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border: 1px solid rgba(87, 147, 200, .28) !important;
    border-radius: 999px !important;
    color: #9CC4E5 !important;
    background: rgba(87, 147, 200, .12) !important;
    font-size: .6rem !important;
    font-weight: 780 !important;
}

body #dashboard .dashboard-day-list li strong {
    display: block !important;
    overflow: hidden !important;
    color: var(--dashboard-text) !important;
    font-size: .79rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body #dashboard .dashboard-day-list li small {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: var(--dashboard-text-subtle) !important;
    font-size: .66rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body #dashboard .dashboard-empty-note {
    min-height: 185px !important;
    display: grid !important;
    place-content: center !important;
    gap: 6px !important;
    padding: 20px !important;
    border: 1px dashed var(--dashboard-border-strong) !important;
    border-radius: 13px !important;
    color: var(--dashboard-text-muted) !important;
    background: var(--dashboard-surface-soft) !important;
    text-align: center !important;
}

body #dashboard .dashboard-steps li {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 9px 11px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 12px !important;
    background: var(--dashboard-surface-soft) !important;
}

body #dashboard .dashboard-steps li.done {
    border-color: rgba(79, 167, 123, .25) !important;
    background: color-mix(in srgb, var(--dashboard-success) 7%, var(--dashboard-surface-soft)) !important;
}

body #dashboard .dashboard-steps .step-number {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 10px !important;
    color: var(--dashboard-text-muted) !important;
    background: var(--dashboard-surface) !important;
    font-size: .62rem !important;
    font-weight: 820 !important;
}

body #dashboard .dashboard-steps li.done .step-number,
body #dashboard .dashboard-steps li.done button {
    border-color: rgba(79, 167, 123, .30) !important;
    color: #A9D8BF !important;
    background: rgba(79, 167, 123, .12) !important;
}

body #dashboard .dashboard-steps li strong {
    display: block !important;
    color: var(--dashboard-text) !important;
    font-size: .77rem !important;
}

body #dashboard .dashboard-steps li small {
    display: block !important;
    margin-top: 2px !important;
    color: var(--dashboard-text-subtle) !important;
    font-size: .64rem !important;
}

body #dashboard .dashboard-steps li button {
    min-width: 62px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 9px !important;
    color: var(--dashboard-text) !important;
    background: var(--dashboard-surface) !important;
    box-shadow: none !important;
    font-size: .62rem !important;
    font-weight: 750 !important;
}

body #dashboard .weekly-progress-card {
    border-top: 1px solid var(--dashboard-border) !important;
}

body #dashboard .weekly-chart {
    min-height: 0 !important;
    height: 165px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-around !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px 18px 12px !important;
    border: 1px solid var(--dashboard-border) !important;
    border-radius: 13px !important;
    background: var(--dashboard-surface-soft) !important;
    box-shadow: none !important;
}

body #dashboard .weekly-chart .week-day {
    width: min(28px, 9%) !important;
    min-height: 6px !important;
    border: 0 !important;
    border-radius: 7px 7px 3px 3px !important;
    background: var(--dashboard-warning) !important;
    box-shadow: none !important;
    opacity: .86 !important;
}

body #dashboard .chart-caption {
    margin: 11px 0 0 !important;
    color: var(--dashboard-text-subtle) !important;
    font-size: .68rem !important;
    text-align: center !important;
}

body #dashboard :is(button, [tabindex]):focus-visible {
    outline: 3px solid rgba(116, 104, 216, .34) !important;
    outline-offset: 2px !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard {
    --dashboard-surface: var(--surface);
    --dashboard-surface-soft: var(--surface-soft);
    --dashboard-surface-hover: var(--surface-hover);
    --dashboard-border: var(--border-color);
    --dashboard-border-strong: var(--border-strong);
    --dashboard-text: var(--text-primary);
    --dashboard-text-muted: var(--text-secondary);
    --dashboard-text-subtle: var(--text-muted);
    --dashboard-accent-soft: #EAE7F7;
    --dashboard-shadow: 0 8px 22px rgba(31, 41, 55, .07);
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-eyebrow { color: #5146A8 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-hero-widget .hero-widget-icon { color: #5B50B1 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-day-list li > span { color: #376C98 !important; background: #E7F0F7 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-steps li.done { background: #EDF6F1 !important; }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-steps li.done .step-number,
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-steps li.done button { color: #2F7150 !important; background: #E1F0E8 !important; }

@media (max-width: 1180px) {
    body #dashboard .dashboard-student-hero { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr) !important; }
    body #dashboard .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 920px) {
    body #dashboard .dashboard-student-hero { grid-template-columns: minmax(0, 1fr) !important; }
    body #dashboard .dashboard-clean-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "progress" "day" "starter" "weekly" !important;
    }
    body #dashboard .dashboard-panel-card { min-height: 0 !important; }
}

@media (max-width: 720px) {
    body #dashboard { padding-right: 0 !important; padding-left: 0 !important; }
    body #dashboard .dashboard-student-hero { gap: 14px !important; padding: 19px !important; border-radius: 16px !important; }
    body #dashboard .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    body #dashboard .dashboard-stat-card { min-height: 154px !important; padding: 16px !important; border-radius: 16px !important; }
    body #dashboard .dashboard-panel-card { padding: 17px !important; border-radius: 16px !important; }
    body #dashboard .dashboard-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body #dashboard .dashboard-progress-body { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; text-align: center !important; }
    body #dashboard .dashboard-progress-details { width: 100% !important; }
    body #dashboard .dashboard-achievements { justify-content: center !important; }
    body #dashboard .dashboard-day-list li :is(strong, small) { white-space: normal !important; }
}

@media (max-width: 480px) {
    body #dashboard .dashboard-hero-copy h1 { font-size: 1.75rem !important; }
    body #dashboard .dashboard-hero-meta { display: grid !important; gap: 5px !important; }
    body #dashboard .dashboard-hero-actions { grid-template-columns: minmax(0, 1fr) !important; }
    body #dashboard .dashboard-hero-actions button { white-space: normal !important; }
    body #dashboard .dashboard-hero-widget { grid-template-columns: 42px minmax(0, 1fr) !important; padding: 15px !important; }
    body #dashboard .dashboard-hero-widget .hero-widget-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; }
    body #dashboard .dashboard-steps li { grid-template-columns: 32px minmax(0, 1fr) !important; }
    body #dashboard .dashboard-steps li button { grid-column: 2 !important; justify-self: start !important; }
    body #dashboard .weekly-chart { height: 145px !important; gap: 6px !important; padding: 15px 11px 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
    body #dashboard *,
    body #dashboard *::before,
    body #dashboard *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
    body #dashboard :is(.dashboard-stat-card, .dashboard-panel-card, button):hover { transform: none !important; }
}



/* Panel académico: corrección de maquetación, solapamientos y contraste */
body #dashboard,
body #dashboard *,
body #dashboard *::before,
body #dashboard *::after {
    box-sizing: border-box;
}

body #dashboard {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
}

body #dashboard :is(
    .dashboard-clean-layout,
    .dashboard-panel-card,
    .dashboard-progress-body,
    .dashboard-progress-details,
    .dashboard-day-list,
    .dashboard-steps,
    .weekly-chart,
    .panel-title,
    .panel-title > div
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

body #dashboard .dashboard-clean-layout {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
        "progress day"
        "starter weekly" !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body #dashboard .dashboard-clean-layout > .dashboard-panel-card {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    translate: none !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-clean-layout > .dashboard-panel-card:hover {
    transform: translateY(-1px) !important;
}

body #dashboard .dashboard-progress-card { grid-area: progress !important; }
body #dashboard .dashboard-day-card { grid-area: day !important; }
body #dashboard .starter-card { grid-area: starter !important; }
body #dashboard .weekly-progress-card { grid-area: weekly !important; }

body #dashboard .dashboard-progress-body {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 28px !important;
    padding: 2px 0 0 !important;
    overflow: visible !important;
}

body #dashboard .dashboard-xp-ring {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    line-height: 1 !important;
}

body #dashboard .dashboard-xp-ring :is(span, small) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1 !important;
}

body #dashboard .dashboard-xp-ring span {
    display: block !important;
    font-size: 1.2rem !important;
}

body #dashboard .dashboard-xp-ring small {
    display: block !important;
    font-size: .55rem !important;
    letter-spacing: .08em !important;
}

body #dashboard .dashboard-progress-details {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
}

body #dashboard .dashboard-progress-details > :is(strong, span) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow-wrap: anywhere !important;
}

body #dashboard .dashboard-progress-details .progress-bar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    transform: none !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-achievements {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 2px 0 0 !important;
    transform: none !important;
    overflow: visible !important;
}

body #dashboard .dashboard-achievements span {
    position: static !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 27px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body #dashboard .dashboard-steps {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

body #dashboard .dashboard-steps li {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    overflow: hidden !important;
}

body #dashboard .dashboard-steps li > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

body #dashboard .dashboard-steps li :is(strong, small) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

body #dashboard .dashboard-steps li button {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

body #dashboard .weekly-progress-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

body #dashboard .weekly-chart {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(145px, 16vw, 175px) !important;
    min-height: 145px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-evenly !important;
    gap: clamp(5px, 1vw, 11px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
}

body #dashboard .weekly-chart .week-day {
    position: static !important;
    inset: auto !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 5px !important;
    max-width: 30px !important;
    margin: 0 !important;
    transform: none !important;
}

body #dashboard .chart-caption {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    overflow-wrap: anywhere !important;
}

body #dashboard .dashboard-stat-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
}

body #dashboard .dashboard-icon,
body #dashboard .dashboard-icon svg,
body #dashboard .panel-icon svg,
body #dashboard .stat-icon svg {
    color: inherit !important;
}

body #dashboard .dashboard-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--dashboard-icon-color, var(--dashboard-text)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body #dashboard .dashboard-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard {
    --dashboard-icon-bg: #E8EEF7;
    --dashboard-icon-color: #334155;
    --dashboard-card-blue: #2563EB;
    --dashboard-card-green: #16856B;
    --dashboard-card-orange: #B96716;
    --dashboard-card-purple: #6D4BD1;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card {
    border-color: #CBD5E1 !important;
    box-shadow: 0 7px 20px rgba(31, 41, 55, .07) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card:nth-child(1) { --dashboard-card-accent: var(--dashboard-card-blue); }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card:nth-child(2) { --dashboard-card-accent: var(--dashboard-card-orange); }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card:nth-child(3) { --dashboard-card-accent: var(--dashboard-card-green); }
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card:nth-child(4) { --dashboard-card-accent: var(--dashboard-card-purple); }

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card .stat-icon {
    color: var(--dashboard-card-accent) !important;
    background: color-mix(in srgb, var(--dashboard-card-accent) 10%, #F7F8FA) !important;
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 28%, #CBD5E1) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card .stat-label,
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .panel-title h3 {
    color: #1E293B !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card .stat-value {
    color: #1F2937 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-stat-card .stat-subtext,
body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .panel-title p {
    color: #475569 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard :is(
    .panel-title .panel-icon,
    .dashboard-hero-widget .hero-widget-icon
) {
    color: #5146A8 !important;
    background: #EAE7F7 !important;
    border-color: #CFC8ED !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard .dashboard-hero-copy h1 [aria-hidden="true"] {
    color: #7C5A2B !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard :is(
    .dashboard-hero-actions button,
    .dashboard-steps li button
) {
    color: #334155 !important;
}

@media (max-width: 1024px) {
    body #dashboard .dashboard-clean-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "progress"
            "day"
            "starter"
            "weekly" !important;
        gap: 18px !important;
    }

    body #dashboard .dashboard-clean-layout > .dashboard-panel-card {
        height: auto !important;
    }
}

@media (max-width: 720px) {
    body #dashboard .dashboard-progress-body {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 20px !important;
        text-align: center !important;
    }

    body #dashboard .dashboard-progress-details {
        align-items: stretch !important;
        text-align: center !important;
    }

    body #dashboard .dashboard-achievements {
        justify-content: center !important;
    }

    body #dashboard .dashboard-steps li {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 11px !important;
    }
}

@media (max-width: 480px) {
    body #dashboard .dashboard-clean-layout {
        gap: 14px !important;
    }

    body #dashboard .dashboard-panel-card {
        padding: 15px !important;
    }

    body #dashboard .dashboard-steps li {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: start !important;
        padding: 10px !important;
    }

    body #dashboard .dashboard-steps li button {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body #dashboard .weekly-chart {
        height: 145px !important;
        min-height: 145px !important;
        padding: 14px 10px 10px !important;
    }
}

@media (max-width: 380px) {
    body #dashboard .dashboard-panel-card {
        padding: 13px !important;
    }

    body #dashboard .panel-title {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body #dashboard .panel-title .panel-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    body #dashboard .dashboard-achievements span {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* Panel académico: grid inferior real e iconos visibles */
body #dashboard {
    --dashboard-icon-color: #E8ECF5;
    --dashboard-icon-bg: #252B48;
    --dashboard-icon-border: #3B4266;
}

body #dashboard .dashboard-clean-layout {
    grid-template-areas: none !important;
}

body #dashboard .dashboard-clean-layout > :is(
    .dashboard-progress-card,
    .dashboard-day-card,
    .dashboard-bottom-grid
) {
    grid-area: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body #dashboard .dashboard-bottom-grid {
    grid-column: 1 / -1 !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-grid > :is(
    .starter-card,
    .weekly-progress-card
) {
    grid-area: auto !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body #dashboard .dashboard-bottom-grid > :is(
    .starter-card,
    .weekly-progress-card
):hover {
    transform: none !important;
}

body #dashboard .dashboard-bottom-grid .dashboard-steps,
body #dashboard .dashboard-bottom-grid .dashboard-steps li,
body #dashboard .dashboard-bottom-grid .weekly-chart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-grid .dashboard-steps li {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
}

body #dashboard .dashboard-bottom-grid .dashboard-steps li > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

body #dashboard .dashboard-bottom-grid .dashboard-steps li :is(strong, small) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

body #dashboard .dashboard-bottom-grid .weekly-chart {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
}

body #dashboard :is(
    .stat-icon,
    .panel-icon,
    .hero-widget-icon
) {
    color: var(--dashboard-icon-color) !important;
    background: var(--dashboard-icon-bg) !important;
    border-color: var(--dashboard-icon-border) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body #dashboard .dashboard-stat-card .stat-icon {
    color: var(--dashboard-card-accent) !important;
}

body #dashboard .dashboard-icon svg :is(path, rect, circle, line, polyline, polygon) {
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: currentColor !important;
}

body .theme-toggle {
    color: #E8ECF5 !important;
}

body .theme-toggle svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #dashboard {
    --dashboard-icon-color: #334155;
    --dashboard-icon-bg: #E8EDF5;
    --dashboard-icon-border: #CBD5E1;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) .theme-toggle {
    color: #334155 !important;
}

@media (max-width: 1050px) {
    body #dashboard .dashboard-clean-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body #dashboard .dashboard-bottom-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 480px) {
    body #dashboard .dashboard-bottom-grid {
        gap: 14px !important;
    }

    body #dashboard .dashboard-bottom-grid .dashboard-steps li {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 11px !important;
    }

    body #dashboard .dashboard-bottom-grid .dashboard-steps li button {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}


/* Panel académico: Centro del estudiante y Progreso semanal en una sola columna */
body #dashboard .dashboard-clean-layout > .dashboard-bottom-section {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-section > :is(
    .starter-card,
    .weekly-progress-card
) {
    grid-area: auto !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-section .dashboard-steps {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body #dashboard .dashboard-bottom-section .dashboard-steps li {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-section .dashboard-steps li > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
}

body #dashboard .dashboard-bottom-section .dashboard-steps li :is(strong, small) {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

body #dashboard .dashboard-bottom-section .dashboard-steps li :is(
    .step-number,
    button
) {
    flex-shrink: 0 !important;
    writing-mode: horizontal-tb !important;
}

body #dashboard .dashboard-bottom-section .weekly-progress-card,
body #dashboard .dashboard-bottom-section .weekly-chart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body #dashboard .dashboard-bottom-section .weekly-chart {
    justify-content: space-evenly !important;
    margin-inline: auto !important;
}

body #dashboard .dashboard-bottom-section .chart-caption {
    width: 100% !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 700px) {
    body #dashboard .dashboard-bottom-section {
        gap: 18px !important;
    }

    body #dashboard .dashboard-bottom-section .dashboard-steps li {
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
    }

    body #dashboard .dashboard-bottom-section .dashboard-steps li button {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

@media (max-width: 480px) {
    body #dashboard .dashboard-bottom-section {
        gap: 14px !important;
    }
}

/* Tareas: un único visto visible en el control de estado */
body #tasks {
    --task-check-icon: #8FB3FF;
    --task-check-bg: #16243C;
    --task-check-border: #3A6FD8;
}

body #tasks .task-checkbox.task-check-modern > span {
    color: var(--task-check-icon) !important;
    background: var(--task-check-bg) !important;
    border-color: var(--task-check-border) !important;
}

body #tasks .task-checkbox.task-check-modern > span::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body #tasks .task-checkbox.task-check-modern > span::after {
    content: "✓" !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: var(--task-check-icon) !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    opacity: .72 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
}

body #tasks .task-checkbox.task-check-modern input:checked + span {
    color: var(--task-check-icon) !important;
    background: var(--task-check-bg) !important;
    border-color: var(--task-check-border) !important;
}

body #tasks .task-checkbox.task-check-modern input:checked + span::after {
    content: "✓" !important;
    color: var(--task-check-icon) !important;
    opacity: 1 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #tasks {
    --task-check-icon: #2563EB;
    --task-check-bg: #EEF4FF;
    --task-check-border: #7DA6F8;
}


/* Progress: real, theme-safe icons for the five summary cards */
body #progress {
    --progress-icon-bg: #222A3D;
    --progress-icon-border: #3B4663;
    --progress-icon-color: #E8ECF5;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #progress {
    --progress-icon-bg: #E8EDF5;
    --progress-icon-border: #C7D0DF;
    --progress-icon-color: #334155;
}

body #progress .progress-stat-grid .stat-streak { --progress-color: #D9922E; }
body #progress .progress-stat-grid .stat-trophy { --progress-color: #7C65D9; }
body #progress .progress-stat-grid .stat-status { --progress-color: #3A8EC7; }
body #progress .progress-stat-grid .stat-activity { --progress-color: #6478D8; }
body #progress .progress-stat-grid .stat-tasks { --progress-color: #25A77A; }

body #progress .progress-stat-grid .progress-stat-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border: 1px solid color-mix(in srgb, var(--progress-color) 34%, var(--progress-icon-border));
    border-radius: 18px;
    box-sizing: border-box;
    flex-shrink: 0;
    color: var(--progress-color, var(--progress-icon-color));
    background: color-mix(in srgb, var(--progress-color) 13%, var(--progress-icon-bg));
    box-shadow: none;
    filter: none;
    opacity: 1;
    visibility: visible;
}

body #progress .progress-stat-grid .progress-stat-icon::before,
body #progress .progress-stat-grid .progress-stat-icon::after {
    content: none !important;
    display: none !important;
}

body #progress .progress-stat-grid .progress-stat-icon svg {
    display: block;
    width: 30px;
    height: 30px;
    color: currentColor;
    opacity: 1;
    visibility: visible;
    filter: none;
}

body #progress .progress-stat-grid .progress-stat-icon.stroke-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body #progress .progress-stat-grid .progress-stat-icon.stroke-icon svg path,
body #progress .progress-stat-grid .progress-stat-icon.stroke-icon svg circle {
    fill: none;
    stroke: currentColor;
}

@media (max-width: 600px) {
    body #progress .progress-stat-grid .progress-stat-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 16px;
    }

    body #progress .progress-stat-grid .progress-stat-icon svg {
        width: 27px;
        height: 27px;
    }
}


/* Progress: orderly internal layout for the five summary cards */
body #progress .progress-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

body #progress .progress-stat-grid > .premium-progress-stat {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 132px !important;
    max-height: none !important;
    padding: 24px !important;
    margin: 0 !important;
    transform: none;
    box-sizing: border-box !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > .progress-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
    transform: none !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > div > :is(.stat-label, .stat-value, small) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-align: left !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > div > .stat-label {
    line-height: 1.25 !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > div > .stat-value {
    line-height: 1.08 !important;
}

body #progress .progress-stat-grid > .premium-progress-stat > div > small {
    line-height: 1.35 !important;
}

@media (max-width: 1050px) {
    body #progress .progress-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    body #progress .progress-stat-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 600px) {
    body #progress .progress-stat-grid > .premium-progress-stat {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        min-height: 116px !important;
        padding: 20px !important;
    }
}

/* Calificaciones: tabla semántica reconstruida y alineada */
body #grades {
    --grades-bg: #202633;
    --grades-surface: #293140;
    --grades-surface-soft: #242C39;
    --grades-border: #3A4658;
    --grades-text: #E8ECF3;
    --grades-muted: #AAB4C3;
    --grades-accent: #6D8FD7;
    --grades-success: #59B78C;
    --grades-warning: #D8A75D;
    --grades-danger: #D97878;
    --grades-period-one: #6E98D8;
    --grades-partial: #6FA886;
    --grades-exam: #D28B6C;
    --grades-period-two: #8A7AC8;
    --grades-radius: 20px;
    --grades-shadow: 0 12px 30px rgba(8, 13, 22, 0.18);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #grades {
    --grades-bg: #EEF1F5;
    --grades-surface: #F7F8FA;
    --grades-surface-soft: #F1F3F6;
    --grades-border: #D5DAE2;
    --grades-text: #1F2937;
    --grades-muted: #667085;
    --grades-accent: #4F73B8;
    --grades-success: #348461;
    --grades-warning: #A66E24;
    --grades-danger: #B85454;
    --grades-period-one: #4F78B7;
    --grades-partial: #4E8465;
    --grades-exam: #B26748;
    --grades-period-two: #705EAE;
    --grades-shadow: 0 10px 26px rgba(31, 41, 55, 0.08);
}

body #grades .section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title action" "subtitle action" !important;
    align-items: center !important;
    gap: 7px 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 24px !important;
}

body #grades .section-header h1 {
    grid-area: title !important;
    margin: 0 !important;
    color: var(--grades-text) !important;
}

body #grades .section-header .subtitle {
    grid-area: subtitle !important;
    margin: 0 !important;
    color: var(--grades-muted) !important;
}

body #grades .section-header > .btn-primary {
    grid-area: action !important;
    justify-self: end !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid color-mix(in srgb, var(--grades-accent) 72%, var(--grades-border)) !important;
    border-radius: 13px !important;
    background: var(--grades-accent) !important;
    color: #F8FAFC !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--grades-accent) 18%, transparent) !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    transition: transform 160ms ease, background-color 160ms ease !important;
}

body #grades .section-header > .btn-primary:hover {
    transform: translateY(-1px) !important;
    background: color-mix(in srgb, var(--grades-accent) 88%, #202938) !important;
}

body #grades .grades-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body #grades .grades-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, auto) minmax(260px, 1fr) minmax(190px, auto) !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--grades-border) !important;
    border-radius: var(--grades-radius) !important;
    background: var(--grades-surface) !important;
    box-shadow: var(--grades-shadow) !important;
    box-sizing: border-box !important;
}

body #grades .grade-summary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding-right: 16px !important;
    border-right: 1px solid var(--grades-border) !important;
}

body #grades .grade-summary > strong {
    color: var(--grades-text) !important;
    font-size: clamp(18px, 2vw, 23px) !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
}

body #grades .grade-status {
    padding: 5px 9px !important;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: capitalize !important;
}

body #grades .grade-status.excelente {
    color: var(--grades-success) !important;
    background: color-mix(in srgb, var(--grades-success) 12%, transparent) !important;
}

body #grades .grade-status.aprobado {
    color: var(--grades-accent) !important;
    background: color-mix(in srgb, var(--grades-accent) 12%, transparent) !important;
}

body #grades .grade-status:is(.necesita-mejorar, .reprobado) {
    color: var(--grades-danger) !important;
    background: color-mix(in srgb, var(--grades-danger) 12%, transparent) !important;
}

body #grades .grade-formula-note {
    min-width: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--grades-border) !important;
    border-radius: 12px !important;
    background: var(--grades-surface-soft) !important;
    color: var(--grades-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

body #grades .grades-toolbar select {
    justify-self: end !important;
    width: 100% !important;
    min-width: 190px !important;
    min-height: 42px !important;
    padding: 9px 34px 9px 12px !important;
    border: 1px solid var(--grades-border) !important;
    border-radius: 12px !important;
    background-color: var(--grades-surface-soft) !important;
    color: var(--grades-text) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

body #grades :is(.section-header > .btn-primary, .grades-toolbar select, .period-grade-cell):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--grades-accent) 36%, transparent) !important;
    outline-offset: 2px !important;
}

body #grades .grades-table-wrapper,
body #grades .period-gradebook-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    border: 1px solid var(--grades-border) !important;
    border-radius: var(--grades-radius) !important;
    background: var(--grades-surface) !important;
    box-shadow: var(--grades-shadow) !important;
    scrollbar-color: color-mix(in srgb, var(--grades-accent) 52%, var(--grades-border)) var(--grades-surface-soft) !important;
    box-sizing: border-box !important;
}

body #grades .period-gradebook-table {
    display: table !important;
    width: 100% !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--grades-surface) !important;
}

body #grades .period-gradebook-table thead {
    display: table-header-group !important;
}

body #grades .period-gradebook-table tbody {
    display: table-row-group !important;
}

body #grades .period-gradebook-table tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

body #grades .period-gradebook-table th,
body #grades .period-gradebook-table td {
    display: table-cell !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
}

body #grades .period-gradebook-table .subject-column { width: 210px !important; }
body #grades .period-gradebook-table .average-column { width: 112px !important; }
body #grades .period-gradebook-table .period-average-column { width: 104px !important; }
body #grades .period-gradebook-table .partial-column { width: 104px !important; }
body #grades .period-gradebook-table .exam-column { width: 104px !important; }

body #grades .period-gradebook-table :is(th, td) {
    position: static;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--grades-border) !important;
    border-bottom: 1px solid var(--grades-border) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    transform: none !important;
}

body #grades .period-gradebook-table thead th {
    background: var(--grades-surface-soft) !important;
    color: var(--grades-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .035em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body #grades .period-gradebook-table .period-head {
    display: table-cell !important;
    min-height: 0 !important;
    padding: 15px 10px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    vertical-align: middle !important;
}

body #grades .period-gradebook-table .period-head::before,
body #grades .period-gradebook-table .period-head::after {
    content: none !important;
    display: none !important;
}

body #grades .period-gradebook-table .period-group-head {
    padding: 15px 12px !important;
    color: var(--grades-text) !important;
    font-size: 12px !important;
    border-bottom-width: 2px !important;
}

body #grades .period-gradebook-table .period-group-1 {
    box-shadow: inset 0 3px 0 var(--grades-period-one) !important;
}

body #grades .period-gradebook-table .period-group-2 {
    box-shadow: inset 0 3px 0 var(--grades-period-two) !important;
}

body #grades .period-gradebook-table .period-header-row .period-1 {
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--grades-period-one) 78%, transparent) !important;
}

body #grades .period-gradebook-table .period-header-row .period-2 {
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--grades-period-two) 78%, transparent) !important;
}

body #grades .period-gradebook-table .partial-head { color: var(--grades-partial) !important; }
body #grades .period-gradebook-table .exam-head { color: var(--grades-exam) !important; }

body #grades .period-gradebook-table .subject-head,
body #grades .period-gradebook-table .period-subject-cell {
    position: sticky !important;
    left: 0 !important;
    text-align: left !important;
    background: var(--grades-surface) !important;
    box-shadow: 7px 0 14px rgba(8, 13, 22, .08) !important;
}

body #grades .period-gradebook-table .subject-head {
    z-index: 5 !important;
    padding: 16px 18px !important;
    color: var(--grades-text) !important;
    background: var(--grades-surface-soft) !important;
}

body #grades .period-gradebook-table .period-subject-cell {
    z-index: 2 !important;
    padding: 15px 18px !important;
}

body #grades .period-subject-cell strong,
body #grades .period-subject-cell small,
body #grades .period-average-cell strong,
body #grades .period-average-cell span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body #grades .period-subject-cell strong {
    color: var(--grades-text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
}

body #grades .period-subject-cell small {
    margin-top: 6px !important;
    color: var(--grades-muted) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

body #grades .period-average-cell {
    padding: 14px 8px !important;
    background: var(--grades-surface) !important;
    color: var(--grades-muted) !important;
    text-align: center !important;
}

body #grades .period-average-cell strong {
    color: var(--grades-text) !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
}

body #grades .period-average-cell span {
    margin-top: 7px !important;
    color: var(--grades-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body #grades .grade-table-cell {
    padding: 0 !important;
    background: var(--grades-surface) !important;
}

body #grades .period-grade-cell {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 12px 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--grades-muted) !important;
    box-shadow: none !important;
    text-align: center !important;
    transform: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease !important;
    box-sizing: border-box !important;
}

body #grades .period-grade-cell:hover {
    background: color-mix(in srgb, var(--grades-accent) 9%, var(--grades-surface)) !important;
}

body #grades .period-grade-cell strong,
body #grades .period-grade-cell span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body #grades .period-grade-cell strong {
    color: var(--grades-text) !important;
    font-size: 19px !important;
    font-weight: 850 !important;
}

body #grades .period-grade-cell span {
    color: var(--grades-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

body #grades .period-grade-cell.empty strong {
    color: color-mix(in srgb, var(--grades-muted) 62%, transparent) !important;
}

body #grades .period-grade-cell.empty span {
    width: auto !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--grades-accent) 10%, transparent) !important;
    color: var(--grades-accent) !important;
}

body #grades :is(.period-average-cell, .period-grade-cell).excelente strong { color: var(--grades-success) !important; }
body #grades :is(.period-average-cell, .period-grade-cell).aprobado strong { color: var(--grades-accent) !important; }
body #grades :is(.period-average-cell, .period-grade-cell):is(.reprobado, .necesita-mejorar) strong { color: var(--grades-danger) !important; }

body #grades .period-subject-row:hover > :is(th, td) {
    background-color: color-mix(in srgb, var(--grades-accent) 4%, var(--grades-surface)) !important;
}

body #grades .period-subject-row:last-child > :is(th, td) {
    border-bottom: 0 !important;
}

body #grades .period-gradebook-table tr > :last-child {
    border-right: 0 !important;
}

@media (max-width: 900px) {
    body #grades .grades-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(180px, auto) !important;
    }

    body #grades .grade-summary {
        grid-column: 1 / -1 !important;
        padding-right: 0 !important;
        padding-bottom: 14px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--grades-border) !important;
    }
}

@media (max-width: 700px) {
    body #grades .section-header {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "title" "subtitle" "action" !important;
        gap: 9px !important;
    }

    body #grades .section-header > .btn-primary {
        justify-self: stretch !important;
        width: 100% !important;
        margin-top: 7px !important;
    }

    body #grades .grades-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    body #grades .grade-summary {
        grid-column: auto !important;
    }

    body #grades .grade-formula-note,
    body #grades .grades-toolbar select {
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body #grades .period-gradebook-table {
        min-width: 1080px !important;
    }
}

/* Sidebar brand logo: use the transparent official asset without altering header sizing */
.sidebar .sidebar-logo .brand-logo {
    display: block !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    flex-shrink: 0 !important;
}

/* Boot loader logo: transparent official asset in a circular frame */
.boot-loader-logo-wrapper {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.boot-loader-logo-wrapper .boot-loader-logo {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    background: transparent;
    border: 0;
}


/* Landing mascot: premium futuristic robot; interaction hooks stay unchanged */
#landing-page .study-pet { filter: none !important; }
#landing-page .pet-robot {
    width: 94px; height: 110px; overflow: visible; transform-origin: 50% 80%;
    animation: robotHover 3.2s ease-in-out infinite;
}
#landing-page .robot-head {
    left: 10px; top: 17px; width: 74px; height: 58px;
    border: 1px solid rgba(139,111,255,.56); border-radius: 26px 26px 22px 22px;
    background: linear-gradient(145deg,#fff,#e1e7f6);
    box-shadow: 0 8px 20px rgba(12,18,43,.26), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -3px 8px rgba(94,79,181,.13);
}
#landing-page .robot-head::before, #landing-page .robot-head::after {
    top: 20px; width: 7px; height: 19px; border: 1px solid rgba(125,103,255,.58);
    border-radius: 7px; background: linear-gradient(180deg,#8d75ff,#4c8dff);
    box-shadow: 0 3px 8px rgba(80,91,221,.26);
}
#landing-page .robot-head::before { left: -6px; }
#landing-page .robot-head::after { right: -6px; }
#landing-page .robot-visor {
    position: absolute; inset: 10px 8px 9px; display: block; overflow: hidden;
    border: 1px solid rgba(105,213,255,.28); border-radius: 17px;
    background: radial-gradient(circle at 50% 0%,rgba(82,130,209,.25),transparent 48%),linear-gradient(145deg,#11182c,#080e1f);
    box-shadow: inset 0 0 14px rgba(67,173,255,.13),0 2px 5px rgba(15,23,42,.22);
}
#landing-page .robot-eye {
    top: 12px; width: 12px; height: 7px; border-radius: 999px; background: #78e6ff;
    box-shadow: 0 0 7px rgba(84,221,255,.78);
}
#landing-page .robot-eye::after {
    top: 1px; left: 4px; width: 3px; height: 3px; background: #e8fbff; box-shadow: none;
}
#landing-page .robot-eye-left { left: 12px; }
#landing-page .robot-eye-right { right: 12px; left: auto; }
#landing-page .robot-mouth {
    left: 20px; bottom: 7px; width: 18px; height: 7px; border: 0;
    border-bottom: 2px solid #76e9ff; border-radius: 0 0 14px 14px;
    background: transparent; box-shadow: 0 2px 5px rgba(82,222,255,.38);
}
#landing-page .robot-antenna {
    left: 45px; top: 2px; width: 4px; height: 17px; border-radius: 999px;
    background: linear-gradient(180deg,#9a7cff,#5cbcf7); box-shadow: none;
}
#landing-page .robot-antenna::before {
    top: -3px; left: -3px; width: 10px; height: 10px;
    border: 2px solid rgba(232,225,255,.86); background: #8d74ff;
    box-shadow: 0 0 10px rgba(139,111,255,.7);
}
#landing-page .robot-body {
    left: 21px; top: 72px; width: 52px; height: 34px; overflow: visible;
    border: 1px solid rgba(118,100,225,.52); border-radius: 16px 16px 13px 13px;
    background: linear-gradient(150deg,#fff 0%,#e7ecf8 72%,#d8e1f3 100%);
    box-shadow: 0 8px 16px rgba(12,18,43,.25),inset 0 1px 0 rgba(255,255,255,.94);
}
#landing-page .robot-body::before, #landing-page .robot-body::after { content: none; }
#landing-page .robot-core {
    position: absolute; left: 7px; top: 7px; width: 4px; height: 19px;
    border-radius: 999px; background: linear-gradient(180deg,#8a6fff,#4b9cff);
    box-shadow: 0 0 7px rgba(108,104,255,.48);
}
#landing-page .robot-chest-mark {
    position: absolute; left: 16px; top: 7px; display: grid; place-items: center;
    width: 27px; height: 19px; border: 1px solid rgba(95,116,214,.28); border-radius: 8px;
    color: #312d70; background: linear-gradient(135deg,rgba(137,112,255,.13),rgba(65,169,255,.14));
    font: 900 9px/1 Inter,system-ui,sans-serif; letter-spacing: -.04em;
}
#landing-page .robot-arm, #landing-page .robot-leg {
    position: absolute; display: block; border: 1px solid rgba(119,103,220,.5);
    background: linear-gradient(145deg,#fff,#dce4f5); box-shadow: 0 4px 8px rgba(17,24,53,.2);
}
#landing-page .robot-arm {
    width: 12px; height: 28px; border-radius: 999px; transform-origin: 50% 6px;
}
#landing-page .robot-arm-left { left: -10px; top: 5px; transform: rotate(18deg); }
#landing-page .robot-arm-right {
    right: -9px; top: -2px; transform: rotate(-132deg); animation: robotWave 2.6s ease-in-out infinite;
}
#landing-page .robot-hand {
    position: absolute; left: 2px; bottom: -4px; width: 7px; height: 8px; border-radius: 6px;
    background: linear-gradient(180deg,#7f70f5,#498ef2); box-shadow: 0 2px 5px rgba(75,89,212,.28);
}
#landing-page .robot-leg { bottom: -8px; width: 12px; height: 13px; border-radius: 4px 4px 7px 7px; }
#landing-page .robot-leg-left { left: 10px; }
#landing-page .robot-leg-right { right: 10px; }
#landing-page .robot-shadow {
    left: 22px; bottom: -9px; width: 50px; height: 10px; background: rgba(49,43,103,.3); filter: blur(4px);
}
#landing-page .pet-bubble {
    color: #f5f7ff !important;
    background: linear-gradient(145deg,rgba(20,29,59,.97),rgba(11,18,42,.98)) !important;
    border: 1px solid rgba(121,139,201,.42) !important;
    box-shadow: 0 14px 30px rgba(6,12,31,.3) !important;
}
#landing-page .pet-bubble strong { color: #b89cff; font-weight: 800; }
#landing-page .pet-bubble::after { border-left-color: rgba(13,21,47,.98) !important; }
body:is(.light-theme,.light-mode,[data-theme="light"]) #landing-page .pet-bubble {
    color: #f7f8ff !important; background: linear-gradient(145deg,#172346,#0d1632) !important;
    border-color: rgba(99,114,170,.48) !important; box-shadow: 0 12px 28px rgba(42,54,96,.22) !important;
}
body:is(.light-theme,.light-mode,[data-theme="light"]) #landing-page .pet-bubble::after {
    border-left-color: #101a38 !important;
}
@keyframes robotWave {
    0%,100% { transform: rotate(-132deg); }
    50% { transform: rotate(-116deg); }
}


/* Mascot visual polish v2: seamless body, expressive face and theme-aware bubble */
#landing-page .robot-head {
    top: 16px;
    border-color: rgba(126, 106, 228, .44);
    background: linear-gradient(155deg, #ffffff 0%, #f3f5fb 48%, #dce4f3 100%);
    box-shadow:
        0 9px 20px rgba(12, 18, 43, .24),
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -4px 9px rgba(86, 81, 169, .10);
}

#landing-page .robot-visor {
    inset: 9px 7px 8px;
    border-radius: 18px;
    border-color: rgba(103, 210, 255, .24);
    background:
        radial-gradient(circle at 50% -18%, rgba(94, 153, 235, .22), transparent 54%),
        linear-gradient(150deg, #10182d 0%, #070d1c 68%, #0c1730 100%);
    box-shadow:
        inset 0 0 13px rgba(65, 172, 255, .12),
        inset 0 1px 0 rgba(142, 222, 255, .10),
        0 2px 5px rgba(15, 23, 42, .20);
}

#landing-page .robot-eye {
    top: 12px;
    width: 14px;
    height: 8px;
    border-radius: 0 0 12px 12px;
    border: 0;
    border-bottom: 3px solid #79e8ff;
    background: transparent;
    box-shadow: 0 3px 6px rgba(84, 221, 255, .34);
}

#landing-page .robot-eye-left { left: 11px; transform: rotate(3deg); }
#landing-page .robot-eye-right { right: 11px; left: auto; transform: rotate(-3deg); }

#landing-page .robot-eye::after {
    top: 4px;
    left: 5px;
    width: 4px;
    height: 2px;
    border-radius: 999px;
    background: #dffaff;
    box-shadow: 0 0 5px rgba(109, 230, 255, .54);
}

#landing-page .robot-mouth {
    left: 20px;
    bottom: 6px;
    width: 20px;
    height: 8px;
    border-bottom-width: 2px;
    border-bottom-color: #70e2fb;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 3px 5px rgba(82, 222, 255, .25);
}

#landing-page .robot-body {
    left: 20px;
    top: 71px;
    width: 54px;
    height: 36px;
    border: 1px solid rgba(115, 102, 207, .38);
    border-radius: 17px 17px 14px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .98), transparent 50%),
        linear-gradient(155deg, #ffffff 0%, #eef2fa 56%, #dce4f2 100%);
    box-shadow:
        0 9px 16px rgba(12, 18, 43, .22),
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -3px 7px rgba(86, 81, 169, .08);
}

#landing-page .robot-core {
    display: none;
}

#landing-page .robot-chest-mark {
    left: 50%;
    top: 8px;
    width: 29px;
    height: 20px;
    transform: translateX(-50%);
    border-color: rgba(103, 101, 207, .24);
    border-radius: 9px;
    color: #353072;
    background: linear-gradient(135deg, rgba(139, 112, 255, .14), rgba(65, 169, 255, .16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    letter-spacing: -.03em;
}

#landing-page .robot-arm {
    width: 13px;
    height: 29px;
    border-color: rgba(115, 102, 207, .38);
    background: linear-gradient(155deg, #ffffff 0%, #e8edf7 62%, #d7e0ef 100%);
    box-shadow:
        0 4px 8px rgba(17, 24, 53, .16),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

#landing-page .robot-arm-left {
    left: -9px;
    top: 4px;
    transform: rotate(15deg);
}

#landing-page .robot-arm-right {
    right: -8px;
    top: -1px;
}

#landing-page .robot-hand {
    left: 2px;
    bottom: -4px;
    width: 8px;
    height: 9px;
    border: 1px solid rgba(74, 106, 221, .22);
    background: linear-gradient(180deg, #8875f4, #4d91ef);
}

#landing-page .robot-leg {
    bottom: -7px;
    width: 13px;
    height: 13px;
    border-color: rgba(115, 102, 207, .34);
    background: linear-gradient(160deg, #f8faff, #dbe4f2);
}

#landing-page .robot-leg-left { left: 9px; }
#landing-page .robot-leg-right { right: 9px; }

#landing-page .pet-bubble {
    max-width: 250px;
    padding: 13px 16px !important;
    border-radius: 16px !important;
    color: #f5f7ff !important;
    background: linear-gradient(145deg, rgba(20, 29, 59, .98), rgba(11, 18, 42, .99)) !important;
    border-color: rgba(126, 112, 205, .42) !important;
    box-shadow: 0 13px 28px rgba(6, 12, 31, .28) !important;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

#landing-page .pet-bubble::after {
    border-left-color: #101936 !important;
    filter: drop-shadow(1px 0 0 rgba(126, 112, 205, .30));
}

#landing-page .pet-bubble strong {
    color: #b99cff !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .pet-bubble {
    color: #1e2945 !important;
    background: linear-gradient(145deg, #ffffff, #f4f2fb) !important;
    border-color: rgba(140, 126, 190, .30) !important;
    box-shadow: 0 11px 24px rgba(52, 61, 103, .14) !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .pet-bubble::after {
    border-left-color: #f7f5fc !important;
    filter: drop-shadow(1px 0 0 rgba(140, 126, 190, .22));
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .pet-bubble strong {
    color: #7457d9 !important;
}

body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-head,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-body,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-arm,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-leg {
    border-color: rgba(100, 91, 180, .34);
    box-shadow:
        0 8px 18px rgba(42, 50, 91, .16),
        inset 0 1px 0 rgba(255, 255, 255, .98);
}


/* Mascot face refinement: happy closed eyes and a small friendly smile */
#landing-page .robot-eye {
    top: 13px;
    width: 15px;
    height: 8px;
    border: 0;
    border-top: 3px solid #79e8ff;
    border-radius: 999px 999px 0 0;
    background: transparent;
    box-shadow: 0 -2px 6px rgba(84, 221, 255, .38);
}

#landing-page .robot-eye-left {
    left: 10px;
    transform: rotate(-2deg);
}

#landing-page .robot-eye-right {
    right: 10px;
    left: auto;
    transform: rotate(2deg);
}

#landing-page .robot-eye::after {
    content: none;
}

#landing-page .robot-mouth {
    left: 22px;
    bottom: 7px;
    width: 16px;
    height: 7px;
    border: 0;
    border-bottom: 2px solid #70e2fb;
    border-radius: 0 0 999px 999px;
    background: transparent;
    box-shadow: 0 2px 5px rgba(82, 222, 255, .28);
}


/* Mascot face v3: rebuilt from scratch with a welcoming happy expression */
#landing-page .robot-visor {
    background:
        linear-gradient(180deg, rgba(134, 211, 255, .10) 0%, transparent 24%),
        radial-gradient(circle at 50% -18%, rgba(94, 153, 235, .24), transparent 55%),
        linear-gradient(150deg, #101a31 0%, #060c1a 66%, #0b1730 100%);
    box-shadow:
        inset 0 0 15px rgba(65, 172, 255, .13),
        inset 0 1px 0 rgba(174, 231, 255, .14),
        0 2px 5px rgba(15, 23, 42, .20);
}

#landing-page .robot-visor::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 9px;
    right: 9px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(203, 239, 255, .13), transparent);
    pointer-events: none;
}

#landing-page .robot-happy-eye {
    position: absolute;
    top: 12px;
    display: block;
    width: 21px;
    height: 12px;
    border-top: 4px solid #78e8ff;
    border-radius: 50% 50% 0 0;
    background: transparent;
    filter: drop-shadow(0 -1px 3px rgba(93, 225, 255, .40));
    box-sizing: border-box;
}

#landing-page .robot-happy-eye-left {
    left: 6px;
    transform: rotate(-3deg);
}

#landing-page .robot-happy-eye-right {
    right: 6px;
    transform: rotate(3deg);
}

#landing-page .robot-happy-smile {
    position: absolute;
    left: 50%;
    bottom: 5px;
    display: block;
    width: 23px;
    height: 10px;
    transform: translateX(-50%);
    border: 0;
    border-bottom: 3px solid #70e3fb;
    border-radius: 0 0 50% 50%;
    background: transparent;
    filter: drop-shadow(0 2px 3px rgba(82, 222, 255, .32));
    box-sizing: border-box;
}


/* Mascot glass visor v4: one bright premium finish shared by light and dark themes */
#landing-page .robot-visor,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-visor {
    border: 1px solid rgba(121, 132, 210, .32);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(245, 247, 255, .98) 35%, rgba(226, 239, 255, .97) 70%, rgba(235, 228, 255, .96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -5px 12px rgba(111, 142, 214, .10),
        0 3px 8px rgba(60, 72, 126, .16);
}

#landing-page .robot-visor::before,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-visor::before {
    top: 3px;
    left: 8px;
    right: 8px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .88) 46%, rgba(255, 255, 255, .52) 68%, transparent 100%);
    opacity: .86;
}

#landing-page .robot-happy-eye,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-eye {
    border-top-color: #479cf2;
    filter: drop-shadow(0 -1px 2px rgba(66, 164, 240, .28));
}

#landing-page .robot-happy-smile,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-smile {
    border-bottom-color: #58afea;
    filter: drop-shadow(0 2px 2px rgba(70, 169, 232, .24));
}


/* Mascot tracking eyes v5: open eye shells with cursor-following pupils */
#landing-page .robot-happy-eye,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-eye {
    top: 10px;
    width: 21px;
    height: 16px;
    overflow: hidden;
    border: 1px solid rgba(91, 124, 205, .24);
    border-radius: 9px;
    background: linear-gradient(155deg, #ffffff 0%, #f7fbff 58%, #e9f2ff 100%);
    box-shadow:
        0 2px 5px rgba(57, 79, 136, .14),
        inset 0 1px 0 rgba(255, 255, 255, .98);
    filter: none;
    transform: none;
}

#landing-page .robot-happy-eye-left {
    left: 6px;
}

#landing-page .robot-happy-eye-right {
    right: 6px;
    left: auto;
}

#landing-page .robot-pupil {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(145deg, #69c8ff 0%, #2f83ef 72%, #486ee8 100%);
    box-shadow:
        0 0 4px rgba(64, 157, 239, .32),
        inset 1px 1px 0 rgba(255, 255, 255, .52);
    transform: translate(
        calc(-50% + var(--pet-eye-x, 0px)),
        calc(-50% + var(--pet-eye-y, 0px))
    );
    transition: transform 120ms cubic-bezier(.2, .75, .3, 1);
    will-change: transform;
    pointer-events: none;
}

#landing-page .robot-happy-smile,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-smile {
    width: 20px;
    height: 8px;
    bottom: 4px;
    border-bottom-width: 2px;
    border-bottom-color: #58afea;
    filter: drop-shadow(0 2px 2px rgba(70, 169, 232, .22));
}


/* Mascot fixed face v6: calm welcome expression with no cursor tracking */
#landing-page .robot-visor,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-visor {
    border: 1px solid rgba(118, 151, 220, .28);
    background:
        linear-gradient(180deg, rgba(153, 205, 255, .10) 0%, transparent 25%),
        radial-gradient(circle at 50% -22%, rgba(113, 155, 235, .28), transparent 58%),
        linear-gradient(150deg, #192747 0%, #0d1730 62%, #142442 100%);
    box-shadow:
        inset 0 0 15px rgba(82, 166, 239, .12),
        inset 0 1px 0 rgba(187, 226, 255, .15),
        0 3px 8px rgba(18, 28, 57, .22);
}
#landing-page .robot-visor::before,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-visor::before {
    top: 3px; left: 9px; right: 9px; height: 7px;
    background: linear-gradient(90deg, transparent, rgba(207, 235, 255, .16), transparent);
    opacity: .82;
}
#landing-page .robot-happy-eye,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-eye {
    top: 12px; display: block; width: 21px; height: 12px; overflow: visible;
    border: 0; border-top: 4px solid #78e8ff; border-radius: 50% 50% 0 0;
    background: transparent; box-shadow: none;
    filter: drop-shadow(0 -1px 3px rgba(93, 225, 255, .34));
}
#landing-page .robot-happy-eye-left { left: 6px; transform: rotate(-3deg); }
#landing-page .robot-happy-eye-right { right: 6px; left: auto; transform: rotate(3deg); }
#landing-page .robot-happy-smile,
body:is(.light-theme, .light-mode, [data-theme="light"]) #landing-page .robot-happy-smile {
    left: 50%; bottom: 5px; width: 21px; height: 9px; transform: translateX(-50%);
    border: 0; border-bottom: 2px solid #70e3fb; border-radius: 0 0 50% 50%;
    background: transparent; filter: drop-shadow(0 2px 2px rgba(82, 222, 255, .26));
}