:root {
    color-scheme: light;
    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;
    --ui-text: #172033;
    --ui-muted: #526079;
    --ui-border: #cbd5e1;
    --ui-primary: #4338ca;
    --ui-primary-hover: #3730a3;
    --ui-focus: #2563eb;
    --ui-success: #047857;
    --ui-warning: #b45309;
    --ui-danger: #b91c1c;
    --ui-input-bg: #f8fafc;
    --ui-input-text: #172033;
    --ui-placeholder: #64748b;
    --ui-error-bg: #fee2e2;
    --ui-error-text: #991b1b;
    --ui-error-border: #fca5a5;
    --ui-success-bg: #d1fae5;
    --ui-success-text: #065f46;
    --ui-success-border: #6ee7b7;
    --ui-surface-subtle: #f8fafc;
    --ui-surface-raised: #ffffff;
    --ui-disabled-bg: #e2e8f0;
    --ui-disabled-text: #475569;
    --ui-warning-bg: #fef3c7;
    --ui-warning-text: #78350f;
    --ui-on-primary: #ffffff;
    --ui-space-1: .25rem;
    --ui-space-2: .5rem;
    --ui-space-3: .75rem;
    --ui-space-4: 1rem;
    --ui-space-6: 1.5rem;
    --ui-space-8: 2rem;
    --ui-radius: .625rem;
    --ui-shadow: 0 10px 30px rgb(15 23 42 / .1);
    --ui-radius-lg: 1rem;
    --ui-radius-xl: 1.5rem;
    --ui-primary-solid: #4f46e5;
    --ui-accent: #06b6d4;
    --ui-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #0891b2 100%);
    --ui-gradient-soft: linear-gradient(135deg, rgb(79 70 229 / .12), rgb(8 145 178 / .08));
    --ui-shadow-sm: 0 4px 14px rgb(15 23 42 / .08);
    --ui-shadow-lg: 0 24px 64px rgb(15 23 42 / .15);
    --ui-glow: 0 0 0 1px rgb(99 102 241 / .12), 0 18px 45px rgb(79 70 229 / .14);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-color: #f3f4f6;
    --card-bg: #ffffff;
    --text-color: #1f2937;
    --border-color: #d1d5db;
    --nav-bg: #111827;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --success: #047857;
    --error: #b91c1c;
    --success-bg: #d1fae5;
    --error-bg: #fee2e2;
    --neutral-btn: #e2e8f0;
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --text-main: #172033;
    --text-muted: #526079;
    --border-hover: #4f46e5;
    --card-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ui-bg: #0f172a;
    --ui-surface: #172033;
    --ui-text: #f8fafc;
    --ui-muted: #cbd5e1;
    --ui-border: #475569;
    --ui-primary: #a5b4fc;
    --ui-primary-hover: #c7d2fe;
    --ui-focus: #93c5fd;
    --ui-input-bg: #0f172a;
    --ui-input-text: #f8fafc;
    --ui-placeholder: #94a3b8;
    --ui-error-bg: #450a0a;
    --ui-error-text: #fecaca;
    --ui-error-border: #b91c1c;
    --ui-success-bg: #052e2b;
    --ui-success-text: #a7f3d0;
    --ui-success-border: #047857;
    --ui-surface-subtle: #1e293b;
    --ui-surface-raised: #172033;
    --ui-disabled-bg: #334155;
    --ui-disabled-text: #cbd5e1;
    --ui-warning-bg: #422006;
    --ui-warning-text: #fde68a;
    --ui-on-primary: #111827;
    --bg-color: #0f172a;
    --card-bg: #172033;
    --text-color: #f8fafc;
    --border-color: #475569;
    --nav-bg: #111827;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --success: #10b981;
    --error: #ef4444;
    --success-bg: #064e3b;
    --error-bg: #7f1d1d;
    --neutral-btn: #334155;
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --border-hover: #60a5fa;
    --card-gradient: linear-gradient(180deg, rgb(30 41 59 / 80%) 0%, rgb(15 23 42 / 90%) 100%);
    --ui-primary-solid: #6366f1;
    --ui-accent: #22d3ee;
    --ui-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #0891b2 100%);
    --ui-gradient-soft: linear-gradient(135deg, rgb(99 102 241 / .2), rgb(34 211 238 / .09));
    --ui-shadow-sm: 0 6px 18px rgb(0 0 0 / .2);
    --ui-shadow-lg: 0 26px 72px rgb(0 0 0 / .34);
    --ui-glow: 0 0 0 1px rgb(129 140 248 / .18), 0 22px 55px rgb(49 46 129 / .28);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ui-bg: #0f172a;
        --ui-surface: #172033;
        --ui-text: #f8fafc;
        --ui-muted: #cbd5e1;
        --ui-border: #475569;
        --ui-primary: #a5b4fc;
        --ui-primary-hover: #c7d2fe;
        --ui-focus: #93c5fd;
        --ui-input-bg: #0f172a;
        --ui-input-text: #f8fafc;
        --ui-placeholder: #94a3b8;
        --ui-error-bg: #450a0a;
        --ui-error-text: #fecaca;
        --ui-error-border: #b91c1c;
        --ui-success-bg: #052e2b;
        --ui-success-text: #a7f3d0;
        --ui-success-border: #047857;
        --ui-surface-subtle: #1e293b;
        --ui-surface-raised: #172033;
        --ui-disabled-bg: #334155;
        --ui-disabled-text: #cbd5e1;
        --ui-warning-bg: #422006;
        --ui-warning-text: #fde68a;
        --ui-on-primary: #111827;
        --bg-color: #0f172a;
        --card-bg: #172033;
        --text-color: #f8fafc;
        --border-color: #475569;
        --nav-bg: #111827;
        --primary: #6366f1;
        --primary-hover: #4f46e5;
        --success: #10b981;
        --error: #ef4444;
        --success-bg: #064e3b;
        --error-bg: #7f1d1d;
        --neutral-btn: #334155;
        --bg-body: #0f172a;
        --bg-card: #1e293b;
        --bg-card-hover: #334155;
        --text-main: #f8fafc;
        --text-muted: #cbd5e1;
        --border-hover: #60a5fa;
        --card-gradient: linear-gradient(180deg, rgb(30 41 59 / 80%) 0%, rgb(15 23 42 / 90%) 100%);
    }
}

:focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 10000;
    padding: .75rem 1rem;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

button, input, select, textarea, a {
    font: inherit;
}

input, select, textarea {
    color: var(--ui-input-text);
}

input::placeholder, textarea::placeholder {
    color: var(--ui-placeholder);
    opacity: 1;
}

/* Capa semántica compartida. La especificidad intencional permite reemplazar
   los colores heredados de las vistas mientras se extrae su CSS histórico. */
html[data-theme] body {
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

html[data-theme] :is(.card, .auth-card, .login-container, .register-container, .question-card, .results-container) {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

html[data-theme] :is(
    .welcome-section h2,
    .card h2,
    .card h3,
    .module-header h4,
    .course-card h4,
    .active-course-header h4,
    .course-info h4,
    .content h3,
    .question-text,
    .recs-section h4
) {
    color: var(--ui-text);
}

html[data-theme] :is(
    .welcome-section p,
    .header p,
    .footer-text,
    .breadcrumb,
    .meta-info,
    .course-card p,
    .progress-info,
    .empty-state,
    .review-header,
    .review-comment,
    .course-info span,
    .chk-container,
    .explanation-ref,
    .loader
) {
    color: var(--ui-muted);
}

html[data-theme] :is(
    .module-header,
    .material-list,
    .material-item,
    .course-grid-list .course-card,
    .active-course-row,
    .course-item,
    .review-item,
    .rec-item,
    .explanation-box,
    table th
) {
    background-color: var(--ui-surface-subtle);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

html[data-theme] :is(.material-info, .content, table td) {
    color: var(--ui-text);
}

html[data-theme] :is(input, textarea, select) {
    background-color: var(--ui-input-bg);
    color: var(--ui-input-text);
    border-color: var(--ui-border);
}

html[data-theme] :is(.btn-secondary, .btn-disabled) {
    background-color: var(--ui-disabled-bg);
    color: var(--ui-disabled-text);
}

html[data-theme] .alert-success,
html[data-theme] .badge-success {
    background-color: var(--ui-success-bg);
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
}

html[data-theme] .alert-error,
html[data-theme] .badge-error,
html[data-theme] .badge-requested {
    background-color: var(--ui-error-bg);
    color: var(--ui-error-text);
    border-color: var(--ui-error-border);
}

html[data-theme] .badge-rating {
    background-color: var(--ui-warning-bg);
    color: var(--ui-warning-text);
}

html[data-theme="dark"] :is(.module-block, .material-item, .course-item, .active-course-row) {
    box-shadow: none;
}

html[data-theme="light"] .hero-title {
    background: none;
    color: var(--ui-text);
    -webkit-text-fill-color: currentColor;
}

html[data-theme="light"] :is(.search-input, .pill-btn, .stat-item) {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

html[data-theme="light"] .course-title,
html[data-theme="light"] .instructor-info {
    color: var(--ui-text);
}

html[data-theme="light"] .question-map,
html[data-theme="light"] .option-item,
html[data-theme="light"] .explanation-box,
html[data-theme="light"] .rec-item {
    background-color: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

html[data-theme="light"] .map-item {
    background-color: var(--ui-surface-subtle);
    color: var(--ui-muted);
}

button, [role="button"], input[type="submit"] {
    min-height: 44px;
}

.link-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: .5rem;
    text-decoration: underline;
}

.text-muted { color: var(--ui-muted) !important; }
.text-small { font-size: .8125rem; }
.text-xs { font-size: .75rem; }
.u-inline { display: inline; }
.u-hidden { display: none; }
.u-full-width { width: 100%; }
.u-mt-5 { margin-top: 1.25rem; }
.u-mt-7 { margin-top: 1.875rem; }
.u-mb-6 { margin-bottom: 1.5625rem; }
.u-text-strong-sm { font-size: .8125rem; font-weight: 700; }
.u-section-heading-sm { margin: 1.25rem 0 .625rem; font-size: .875rem; font-weight: 700; }
.u-success-button { background-color: var(--success); }
.external-reference-link { color: var(--ui-primary); }
.read-badge { padding: .1875rem .5rem; font-size: .6875rem; cursor: default; }
.material-link { color: var(--ui-primary); text-decoration: none; font-weight: 600; }
.material-link:hover { text-decoration: underline; }
.final-exam-description { margin-bottom: 1rem; }
.result-summary { margin-bottom: 1.25rem; font-size: .9375rem; }
#questionProgress { font-size: .875rem; font-weight: 600; }

.theme-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    min-width: 44px;
    min-height: 44px;
    padding: .625rem .875rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
    cursor: pointer;
}

.map-item, .option-item {
    font: inherit;
}

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