:root {
    --theme-canvas: #f6f1e8;
    --theme-surface: #fffdf8;
    --theme-surface-muted: #efe7db;
    --theme-ink: #17324d;
    --theme-muted: #5f7080;
    --theme-line: #d8d0c3;
    --theme-coral: #d8684b;
    --theme-blue: #5c8ea7;
    --theme-yellow: #946d17;
    --theme-success: #2f8c72;
    --theme-on-accent: #fffaf4;
    --theme-grid: rgba(92, 142, 167, 0.1);
    --theme-shadow: 0 18px 45px rgba(23, 50, 77, 0.11);
    --theme-glow-1: rgba(216, 104, 75, 0.16);
    --theme-glow-2: rgba(92, 142, 167, 0.18);
    --theme-glow-3: rgba(217, 169, 58, 0.12);

    --bg-dark: var(--theme-canvas);
    --glass-bg: var(--theme-surface);
    --glass-border: var(--theme-line);
    --accent-primary: var(--theme-coral);
    --text-main: var(--theme-ink);
    --text-muted: var(--theme-muted);
    --gradient-color-1: var(--theme-glow-1);
    --gradient-color-2: var(--theme-glow-2);
    --gradient-color-3: var(--theme-glow-3);
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-canvas: #10242f;
    --theme-surface: #172f3b;
    --theme-surface-muted: #1d3c48;
    --theme-ink: #f7f1e5;
    --theme-muted: #b8c5c9;
    --theme-line: rgba(247, 241, 229, 0.18);
    --theme-coral: #f28b70;
    --theme-blue: #86b8c8;
    --theme-yellow: #f0cf72;
    --theme-success: #64b79d;
    --theme-on-accent: #10242f;
    --theme-grid: rgba(134, 184, 200, 0.06);
    --theme-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
    --theme-glow-1: rgba(242, 139, 112, 0.14);
    --theme-glow-2: rgba(134, 184, 200, 0.15);
    --theme-glow-3: rgba(240, 207, 114, 0.1);
}

html[data-theme="light"] .site-header,
html[data-theme="dark"] .site-header {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    border-bottom-color: var(--theme-line);
    box-shadow: var(--theme-shadow);
}

html[data-theme="light"] .site-header-brand,
html[data-theme="dark"] .site-header-brand,
html[data-theme="light"] .site-header-brand:hover,
html[data-theme="dark"] .site-header-brand:hover,
html[data-theme="light"] .site-header-brand:focus-visible,
html[data-theme="dark"] .site-header-brand:focus-visible {
    color: var(--theme-ink);
}

html[data-theme="light"] .site-header-brand-logo-light {
    display: block;
}

html[data-theme="light"] .site-header-brand-logo-dark {
    display: none;
}

html[data-theme="light"] .site-header-link,
html[data-theme="dark"] .site-header-link,
html[data-theme="light"] .site-header-account-link,
html[data-theme="dark"] .site-header-account-link {
    color: var(--theme-muted);
}

html[data-theme="light"] .site-header-link:hover,
html[data-theme="dark"] .site-header-link:hover,
html[data-theme="light"] .site-header-link:focus-visible,
html[data-theme="dark"] .site-header-link:focus-visible,
html[data-theme="light"] .site-header-account-link:hover,
html[data-theme="dark"] .site-header-account-link:hover,
html[data-theme="light"] .site-header-account-link:focus-visible,
html[data-theme="dark"] .site-header-account-link:focus-visible {
    border-color: color-mix(in srgb, var(--theme-blue) 58%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-blue) 13%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] .site-header-link.is-active,
html[data-theme="dark"] .site-header-link.is-active {
    border-color: color-mix(in srgb, var(--theme-coral) 58%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-coral) 15%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] .site-header-greeting,
html[data-theme="dark"] .site-header-greeting {
    color: var(--theme-muted);
}

html[data-theme="light"] .site-header-menu-toggle,
html[data-theme="dark"] .site-header-menu-toggle {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 72%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] .site-header-menu,
html[data-theme="dark"] .site-header-menu {
    background: var(--theme-surface);
    border-color: var(--theme-line);
    box-shadow: var(--theme-shadow);
}

body.home-page {
    min-height: 100vh;
    background: var(--theme-canvas);
    color: var(--theme-ink);
    font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
}

body.home-page .background-glow {
    background-color: var(--theme-canvas);
    background-image:
        linear-gradient(to right, var(--theme-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--theme-grid) 1px, transparent 1px),
        radial-gradient(circle at 10% 0%, var(--theme-glow-1) 0%, transparent 42%),
        radial-gradient(circle at 92% 24%, var(--theme-glow-2) 0%, transparent 44%),
        radial-gradient(circle at 72% 100%, var(--theme-glow-3) 0%, transparent 42%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
    opacity: 0.94;
}

body.home-page main {
    position: relative;
    z-index: 0;
}

body.home-page .hero {
    max-width: 980px;
    padding: clamp(4rem, 9vw, 7rem) 0 4rem;
    text-align: left;
}

body.home-page .hero-eyebrow {
    color: var(--theme-coral);
    background: color-mix(in srgb, var(--theme-coral) 12%, transparent);
    border-color: color-mix(in srgb, var(--theme-coral) 36%, var(--theme-line));
}

body.home-page .hero h1 {
    max-width: 820px;
    margin-bottom: 1.35rem;
    color: var(--theme-ink);
    background: none;
    text-shadow: none;
    -webkit-text-fill-color: initial;
    font-family: "Aptos Display", "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: clamp(3.25rem, 8vw, 6.75rem);
    letter-spacing: -0.065em;
}

body.home-page .subtitle {
    max-width: 700px;
    color: var(--theme-muted);
    font-size: clamp(1.08rem, 2vw, 1.32rem);
}

body.home-page .hero-actions {
    justify-content: flex-start;
}

body.home-page .glass-btn {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--theme-ink) 8%, transparent);
    backdrop-filter: none;
}

body.home-page .glass-btn:hover,
body.home-page .glass-btn:focus-visible {
    border-color: var(--theme-blue);
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--theme-blue) 18%, transparent);
}

body.home-page .glass-btn.primary-btn {
    border-color: var(--theme-coral);
    background: var(--theme-coral);
    color: var(--theme-on-accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-coral) 23%, transparent);
}

body.home-page .glass-btn.primary-btn:hover,
body.home-page .glass-btn.primary-btn:focus-visible {
    border-color: var(--theme-coral);
    background: color-mix(in srgb, var(--theme-coral) 86%, var(--theme-ink));
    color: var(--theme-on-accent);
}

body.home-page .secondary-hero-btn {
    background: color-mix(in srgb, var(--theme-surface-muted) 76%, transparent);
}

body.home-page .hero-stats {
    max-width: 720px;
    margin-left: 0;
}

body.home-page .stat-card,
body.home-page .about-panel,
body.home-page .experiment-card {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-ink) 6%, transparent);
    backdrop-filter: none;
}

body.home-page .stat-card strong,
body.home-page .about-panel h2,
body.home-page .section-heading h2,
body.home-page .experiment-card h3 {
    color: var(--theme-ink);
}

body.home-page .stat-card span,
body.home-page .about-panel p,
body.home-page .section-heading p,
body.home-page .experiment-card p {
    color: var(--theme-muted);
}

body.home-page .about-panel {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-surface) 96%, transparent),
        color-mix(in srgb, var(--theme-blue) 9%, var(--theme-surface)));
}

body.home-page .section-kicker {
    color: var(--theme-coral);
}

body.home-page .experiment-card:hover {
    border-color: var(--theme-blue);
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

body.home-page .card-icon {
    background: color-mix(in srgb, var(--theme-blue) 15%, transparent);
    color: var(--theme-blue);
}

body.home-page .card-category {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin-top: -0.15rem;
    color: color-mix(in srgb, var(--theme-blue) 76%, var(--theme-muted));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.home-page .card-category::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--theme-coral);
    content: "";
}

body.home-page .card-action {
    color: var(--theme-coral);
}

body.home-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 72%, transparent);
    color: var(--theme-muted);
}

body.home-page .status-badge i {
    width: 0.8rem;
    height: 0.8rem;
}

body.home-page .status-badge.status-active {
    border-color: color-mix(in srgb, var(--theme-success) 56%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-success) 14%, transparent);
    color: var(--theme-success);
}

body.home-page .status-badge.status-upcoming {
    border-color: color-mix(in srgb, var(--theme-yellow) 60%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-yellow) 13%, transparent);
    color: var(--theme-yellow);
}

body.home-page .glass-footer {
    color: var(--theme-muted);
}

body.home-page :focus-visible,
html[data-theme="light"] .site-header :focus-visible,
html[data-theme="dark"] .site-header :focus-visible {
    outline-color: var(--theme-coral);
}

@media (min-width: 721px) {
    body.home-page .experiment-card:nth-child(4):last-child {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    body.home-page .hero {
        padding-top: 3rem;
    }

    body.home-page .hero-stats {
        grid-template-columns: 1fr;
    }

    body.home-page .about-panel {
        grid-template-columns: 1fr;
        padding: 1.4rem;
    }
}

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

/* --- Active teaching app themes --- */
:root {
    --app-accent: var(--theme-blue);
    --app-accent-strong: var(--theme-blue);
    --app-accent-soft: color-mix(in srgb, var(--app-accent) 14%, transparent);
    --app-on-accent: var(--theme-on-accent);
    --app-focus: color-mix(in srgb, var(--app-accent) 28%, transparent);
    --app-secondary: var(--theme-coral);
}

body.worksheet-page,
body.citation-body,
body.calendar-body,
body.jefatura-page,
body.agenda-notes-page {
    --app-accent: var(--theme-blue);
    --app-accent-strong: color-mix(in srgb, var(--app-accent) 78%, var(--theme-ink));
    --app-accent-soft: color-mix(in srgb, var(--app-accent) 14%, transparent);
    --app-on-accent: var(--theme-on-accent);
    --app-focus: color-mix(in srgb, var(--app-accent) 28%, transparent);
    --app-secondary: var(--theme-coral);
}

body.citation-body {
    --app-accent: var(--theme-coral);
    --app-secondary: var(--theme-blue);
}

body.calendar-body {
    --app-accent: var(--theme-yellow);
    --app-secondary: var(--theme-blue);
}

body.agenda-notes-page {
    --app-accent: var(--theme-blue);
    --app-secondary: var(--theme-coral);
}

body.jefatura-page {
    --app-accent: var(--theme-success);
    --app-secondary: var(--theme-blue);
}

body.jefatura-asistencia-page {
    --app-accent: var(--theme-success);
    --app-secondary: var(--theme-yellow);
}

body.jefatura-notas-page {
    --app-accent: var(--theme-blue);
    --app-secondary: var(--theme-yellow);
}

html[data-theme="light"] body.worksheet-page,
html[data-theme="dark"] body.worksheet-page,
html[data-theme="light"] body.citation-body,
html[data-theme="dark"] body.citation-body,
html[data-theme="light"] body.calendar-body,
html[data-theme="dark"] body.calendar-body,
html[data-theme="light"] body.jefatura-page,
html[data-theme="dark"] body.jefatura-page,
html[data-theme="light"] body.agenda-notes-page,
html[data-theme="dark"] body.agenda-notes-page {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--theme-canvas);
    background-image:
        linear-gradient(to right, var(--theme-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--theme-grid) 1px, transparent 1px),
        radial-gradient(circle at 10% 0%, var(--theme-glow-1) 0%, transparent 42%),
        radial-gradient(circle at 92% 24%, var(--theme-glow-2) 0%, transparent 44%),
        radial-gradient(circle at 72% 100%, var(--theme-glow-3) 0%, transparent 42%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
    color: var(--theme-ink);
    font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
}

html[data-theme="light"] body.worksheet-page .background-glow,
html[data-theme="dark"] body.worksheet-page .background-glow,
html[data-theme="light"] body.jefatura-page .background-glow,
html[data-theme="dark"] body.jefatura-page .background-glow {
    background-color: transparent;
    background-image:
        linear-gradient(to right, var(--theme-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--theme-grid) 1px, transparent 1px),
        radial-gradient(circle at 10% 0%, var(--theme-glow-1) 0%, transparent 42%),
        radial-gradient(circle at 92% 24%, var(--theme-glow-2) 0%, transparent 44%),
        radial-gradient(circle at 72% 100%, var(--theme-glow-3) 0%, transparent 42%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
    opacity: 0.92;
}

html[data-theme="light"] body.worksheet-page .site-header-link.is-active,
html[data-theme="dark"] body.worksheet-page .site-header-link.is-active,
html[data-theme="light"] body.citation-body .site-header-link.is-active,
html[data-theme="dark"] body.citation-body .site-header-link.is-active,
html[data-theme="light"] body.calendar-body .site-header-link.is-active,
html[data-theme="dark"] body.calendar-body .site-header-link.is-active,
html[data-theme="light"] body.jefatura-page .site-header-link.is-active,
html[data-theme="dark"] body.jefatura-page .site-header-link.is-active,
html[data-theme="light"] body.agenda-notes-page .site-header-link.is-active,
html[data-theme="dark"] body.agenda-notes-page .site-header-link.is-active {
    border-color: color-mix(in srgb, var(--app-accent) 58%, var(--theme-line));
    background: var(--app-accent-soft);
    color: var(--theme-ink);
}

html[data-theme="light"] body.worksheet-page .worksheet-hero h1,
html[data-theme="dark"] body.worksheet-page .worksheet-hero h1,
html[data-theme="light"] body.citation-body .citation-header h1,
html[data-theme="dark"] body.citation-body .citation-header h1,
html[data-theme="light"] body.calendar-body .calendar-header h1,
html[data-theme="dark"] body.calendar-body .calendar-header h1,
html[data-theme="light"] body.jefatura-page .jefatura-hero h1,
html[data-theme="dark"] body.jefatura-page .jefatura-hero h1 {
    background: none;
    color: var(--theme-ink);
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

html[data-theme="light"] body.worksheet-page .worksheet-hero p,
html[data-theme="dark"] body.worksheet-page .worksheet-hero p,
html[data-theme="light"] body.citation-body .citation-header p,
html[data-theme="dark"] body.citation-body .citation-header p,
html[data-theme="light"] body.calendar-body .calendar-header p,
html[data-theme="dark"] body.calendar-body .calendar-header p,
html[data-theme="light"] body.jefatura-page .jefatura-hero p,
html[data-theme="dark"] body.jefatura-page .jefatura-hero p {
    color: var(--theme-muted);
}

html[data-theme="light"] body.worksheet-page .section-kicker,
html[data-theme="dark"] body.worksheet-page .section-kicker,
html[data-theme="light"] body.citation-body .citation-kicker,
html[data-theme="dark"] body.citation-body .citation-kicker,
html[data-theme="light"] body.calendar-body .calendar-kicker,
html[data-theme="dark"] body.calendar-body .calendar-kicker,
html[data-theme="light"] body.jefatura-page .jefatura-kicker,
html[data-theme="dark"] body.jefatura-page .jefatura-kicker,
html[data-theme="light"] body.jefatura-page .jefatura-card-label {
    color: var(--app-accent-strong);
}

html[data-theme="dark"] body.jefatura-page .jefatura-kicker,
html[data-theme="dark"] body.jefatura-page .jefatura-card-label {
    color: var(--app-accent);
}

html[data-theme="light"] body.worksheet-page .glass-panel,
html[data-theme="dark"] body.worksheet-page .glass-panel,
html[data-theme="light"] body.citation-body .citation-form-panel,
html[data-theme="dark"] body.citation-body .citation-form-panel,
html[data-theme="light"] body.calendar-body .calendar-panel,
html[data-theme="dark"] body.calendar-body .calendar-panel,
html[data-theme="light"] body.calendar-body .upcoming-panel,
html[data-theme="dark"] body.calendar-body .upcoming-panel,
html[data-theme="light"] body.calendar-body .calendar-editor-panel,
html[data-theme="dark"] body.calendar-body .calendar-editor-panel,
html[data-theme="light"] body.jefatura-page .glass-panel,
html[data-theme="dark"] body.jefatura-page .glass-panel {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    box-shadow: var(--theme-shadow);
    backdrop-filter: none;
}

html[data-theme="light"] body.worksheet-page .form-section-heading i,
html[data-theme="dark"] body.worksheet-page .form-section-heading i,
html[data-theme="light"] body.jefatura-page .jefatura-section-icon,
html[data-theme="dark"] body.jefatura-page .jefatura-section-icon {
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.jefatura-page .jefatura-section-icon,
html[data-theme="dark"] body.jefatura-page .jefatura-section-icon {
    border-color: color-mix(in srgb, var(--app-accent) 36%, var(--theme-line));
    background: var(--app-accent-soft);
}

html[data-theme="light"] body.worksheet-page .field-group span,
html[data-theme="dark"] body.worksheet-page .field-group span,
html[data-theme="light"] body.jefatura-page .jefatura-field label,
html[data-theme="dark"] body.jefatura-page .jefatura-field label,
html[data-theme="light"] body.citation-body .citation-field-group label,
html[data-theme="dark"] body.citation-body .citation-field-group label,
html[data-theme="light"] body.calendar-body .calendar-field-group label,
html[data-theme="dark"] body.calendar-body .calendar-field-group label {
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.worksheet-page .field-group input,
html[data-theme="light"] body.worksheet-page .field-group select,
html[data-theme="light"] body.worksheet-page .field-group textarea,
html[data-theme="light"] body.jefatura-page .jefatura-field input,
html[data-theme="light"] body.jefatura-page .jefatura-field select,
html[data-theme="light"] body.citation-body .citation-field-group input,
html[data-theme="light"] body.citation-body .citation-field-group textarea,
html[data-theme="light"] body.calendar-body .calendar-field-group input,
html[data-theme="light"] body.calendar-body .calendar-field-group textarea,
html[data-theme="dark"] body.worksheet-page .field-group input,
html[data-theme="dark"] body.worksheet-page .field-group select,
html[data-theme="dark"] body.worksheet-page .field-group textarea,
html[data-theme="dark"] body.jefatura-page .jefatura-field input,
html[data-theme="dark"] body.jefatura-page .jefatura-field select,
html[data-theme="dark"] body.citation-body .citation-field-group input,
html[data-theme="dark"] body.citation-body .citation-field-group textarea,
html[data-theme="dark"] body.calendar-body .calendar-field-group input,
html[data-theme="dark"] body.calendar-body .calendar-field-group textarea {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 72%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] body.worksheet-page select,
html[data-theme="light"] body.jefatura-page select,
html[data-theme="light"] body.citation-body input,
html[data-theme="light"] body.citation-body textarea,
html[data-theme="light"] body.calendar-body input,
html[data-theme="light"] body.calendar-body textarea {
    color-scheme: light;
}

html[data-theme="dark"] body.worksheet-page select,
html[data-theme="dark"] body.jefatura-page select,
html[data-theme="dark"] body.citation-body input,
html[data-theme="dark"] body.citation-body textarea,
html[data-theme="dark"] body.calendar-body input,
html[data-theme="dark"] body.calendar-body textarea {
    color-scheme: dark;
}

html[data-theme="light"] body.worksheet-page option,
html[data-theme="light"] body.jefatura-page option,
html[data-theme="dark"] body.worksheet-page option,
html[data-theme="dark"] body.jefatura-page option {
    background: var(--theme-surface);
    color: var(--theme-ink);
}

html[data-theme="light"] body.worksheet-page .field-group input:focus,
html[data-theme="light"] body.worksheet-page .field-group select:focus,
html[data-theme="light"] body.worksheet-page .field-group textarea:focus,
html[data-theme="dark"] body.worksheet-page .field-group input:focus,
html[data-theme="dark"] body.worksheet-page .field-group select:focus,
html[data-theme="dark"] body.worksheet-page .field-group textarea:focus,
html[data-theme="light"] body.jefatura-page .jefatura-field input:focus,
html[data-theme="light"] body.jefatura-page .jefatura-field select:focus,
html[data-theme="dark"] body.jefatura-page .jefatura-field input:focus,
html[data-theme="dark"] body.jefatura-page .jefatura-field select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-focus);
    outline: none;
}

html[data-theme="light"] body.worksheet-page .glass-btn,
html[data-theme="dark"] body.worksheet-page .glass-btn,
html[data-theme="light"] body.jefatura-page .glass-btn,
html[data-theme="dark"] body.jefatura-page .glass-btn {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: none;
}

html[data-theme="light"] body.worksheet-page .glass-btn.primary-btn,
html[data-theme="dark"] body.worksheet-page .glass-btn.primary-btn,
html[data-theme="light"] body.jefatura-page .glass-btn.primary-btn,
html[data-theme="dark"] body.jefatura-page .glass-btn.primary-btn {
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: var(--app-on-accent);
}

html[data-theme="light"] body.worksheet-page .glass-btn:hover,
html[data-theme="dark"] body.worksheet-page .glass-btn:hover,
html[data-theme="light"] body.jefatura-page .glass-btn:hover,
html[data-theme="dark"] body.jefatura-page .glass-btn:hover,
html[data-theme="light"] body.worksheet-page .glass-btn:focus-visible,
html[data-theme="dark"] body.worksheet-page .glass-btn:focus-visible,
html[data-theme="light"] body.jefatura-page .glass-btn:focus-visible,
html[data-theme="dark"] body.jefatura-page .glass-btn:focus-visible {
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 12%, var(--theme-surface));
    color: var(--theme-ink);
}

html[data-theme="light"] body.worksheet-page .glass-btn.primary-btn:hover,
html[data-theme="dark"] body.worksheet-page .glass-btn.primary-btn:hover,
html[data-theme="light"] body.jefatura-page .glass-btn.primary-btn:hover,
html[data-theme="dark"] body.jefatura-page .glass-btn.primary-btn:hover,
html[data-theme="light"] body.worksheet-page .glass-btn.primary-btn:focus-visible,
html[data-theme="dark"] body.worksheet-page .glass-btn.primary-btn:focus-visible,
html[data-theme="light"] body.jefatura-page .glass-btn.primary-btn:focus-visible,
html[data-theme="dark"] body.jefatura-page .glass-btn.primary-btn:focus-visible {
    background: color-mix(in srgb, var(--app-accent) 86%, var(--theme-ink));
    color: var(--app-on-accent);
}

html[data-theme="light"] body.worksheet-page .checkbox-grid label,
html[data-theme="dark"] body.worksheet-page .checkbox-grid label {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 64%, transparent);
    color: var(--theme-muted);
}

html[data-theme="light"] body.worksheet-page .checkbox-grid label,
html[data-theme="dark"] body.worksheet-page .checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    cursor: pointer;
}

html[data-theme="light"] body.worksheet-page .checkbox-grid input[type="checkbox"],
html[data-theme="dark"] body.worksheet-page .checkbox-grid input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--app-accent);
}

html[data-theme="light"] body.worksheet-page .worksheet-feedback,
html[data-theme="dark"] body.worksheet-page .worksheet-feedback {
    color: var(--theme-success);
}

html[data-theme="light"] body.worksheet-page .worksheet-preview,
html[data-theme="dark"] body.worksheet-page .worksheet-preview {
    border: 1px solid var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 72%, transparent);
    color: #111827;
    box-shadow: none;
}

html[data-theme="light"] body.worksheet-page .worksheet-page-sheet,
html[data-theme="dark"] body.worksheet-page .worksheet-page-sheet {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(23, 50, 77, 0.16);
    color: #111827;
}

html[data-theme="light"] body.citation-body .citation-back-link,
html[data-theme="dark"] body.citation-body .citation-back-link,
html[data-theme="light"] body.calendar-body .calendar-back-link,
html[data-theme="dark"] body.calendar-body .calendar-back-link,
html[data-theme="light"] body.calendar-body .calendar-home-link {
    color: var(--app-accent-strong);
}

html[data-theme="dark"] body.calendar-body .calendar-home-link {
    color: var(--app-accent);
}

html[data-theme="light"] body.citation-body .citation-button,
html[data-theme="dark"] body.citation-body .citation-button,
html[data-theme="light"] body.calendar-body .calendar-button,
html[data-theme="dark"] body.calendar-body .calendar-button,
html[data-theme="light"] body.calendar-body .calendar-icon-button,
html[data-theme="dark"] body.calendar-body .calendar-icon-button {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: none;
}

html[data-theme="light"] body.citation-body .citation-button-primary,
html[data-theme="dark"] body.citation-body .citation-button-primary,
html[data-theme="light"] body.calendar-body .calendar-button-primary,
html[data-theme="dark"] body.calendar-body .calendar-button-primary {
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: var(--app-on-accent);
}

html[data-theme="light"] body.citation-body .citation-button-secondary,
html[data-theme="dark"] body.citation-body .citation-button-secondary,
html[data-theme="light"] body.calendar-body .calendar-button-secondary,
html[data-theme="dark"] body.calendar-body .calendar-button-secondary {
    border-color: color-mix(in srgb, var(--app-secondary) 52%, var(--theme-line));
    background: color-mix(in srgb, var(--app-secondary) 13%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] body.citation-body .citation-button-account,
html[data-theme="dark"] body.citation-body .citation-button-account {
    border-color: color-mix(in srgb, var(--app-secondary) 54%, var(--theme-line));
    background: color-mix(in srgb, var(--app-secondary) 16%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] body.citation-body .citation-button-quiet,
html[data-theme="dark"] body.citation-body .citation-button-quiet,
html[data-theme="light"] body.calendar-body .calendar-button-quiet,
html[data-theme="dark"] body.calendar-body .calendar-button-quiet {
    background: transparent;
}

html[data-theme="light"] body.citation-body .citation-button:focus-visible,
html[data-theme="dark"] body.citation-body .citation-button:focus-visible,
html[data-theme="light"] body.calendar-body .calendar-button:focus-visible,
html[data-theme="dark"] body.calendar-body .calendar-button:focus-visible,
html[data-theme="light"] body.calendar-body .calendar-icon-button:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-focus);
    outline: none;
}

html[data-theme="light"] body.citation-body .citation-preview,
html[data-theme="dark"] body.citation-body .citation-preview {
    border-color: #e2e8f0;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(23, 50, 77, 0.16);
    color: #1e293b;
}

html[data-theme="light"] body.citation-body .citation-preview-label,
html[data-theme="dark"] body.citation-body .citation-preview-label {
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.calendar-body .calendar-weekdays,
html[data-theme="dark"] body.calendar-body .calendar-weekdays,
html[data-theme="light"] body.calendar-body .calendar-day-number,
html[data-theme="dark"] body.calendar-body .calendar-day-number {
    color: var(--theme-muted);
}

html[data-theme="light"] body.calendar-body .calendar-day,
html[data-theme="dark"] body.calendar-body .calendar-day {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 64%, transparent);
    color: var(--theme-ink);
}

html[data-theme="light"] body.calendar-body .calendar-day.is-today,
html[data-theme="dark"] body.calendar-body .calendar-day.is-today {
    border-color: var(--app-accent);
    box-shadow: inset 0 0 0 1px var(--app-accent);
}

html[data-theme="light"] body.calendar-body .calendar-event,
html[data-theme="dark"] body.calendar-body .calendar-event {
    border-color: color-mix(in srgb, var(--app-accent) 58%, var(--theme-line));
    background: var(--app-accent-soft);
    color: var(--theme-ink);
}

html[data-theme="light"] body.calendar-body .calendar-event-time,
html[data-theme="dark"] body.calendar-body .calendar-event-time,
html[data-theme="light"] body.calendar-body .upcoming-citation-date,
html[data-theme="dark"] body.calendar-body .upcoming-citation-date,
html[data-theme="light"] body.calendar-body .upcoming-citation-time {
    color: var(--app-accent-strong);
}

html[data-theme="dark"] body.calendar-body .upcoming-citation-date,
html[data-theme="dark"] body.calendar-body .upcoming-citation-time {
    color: var(--app-accent);
}

html[data-theme="light"] body.calendar-body .calendar-event-course,
html[data-theme="dark"] body.calendar-body .calendar-event-course,
html[data-theme="light"] body.calendar-body .upcoming-citation-course,
html[data-theme="dark"] body.calendar-body .upcoming-citation-course,
html[data-theme="light"] body.calendar-body .upcoming-empty,
html[data-theme="dark"] body.calendar-body .upcoming-empty {
    color: var(--theme-muted);
}

html[data-theme="light"] body.calendar-body .calendar-loading,
html[data-theme="dark"] body.calendar-body .calendar-loading,
html[data-theme="light"] body.calendar-body .calendar-empty {
    border: 1px solid color-mix(in srgb, var(--app-accent) 44%, var(--theme-line));
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
}

html[data-theme="dark"] body.calendar-body .calendar-empty {
    border: 1px solid color-mix(in srgb, var(--app-accent) 44%, var(--theme-line));
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

html[data-theme="light"] body.calendar-body .calendar-error,
html[data-theme="dark"] body.calendar-body .calendar-error {
    border: 1px solid color-mix(in srgb, var(--theme-coral) 48%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-coral) 14%, transparent);
    color: var(--theme-coral);
}

html[data-theme="light"] body.calendar-body .upcoming-count,
html[data-theme="dark"] body.calendar-body .upcoming-count {
    border: 1px solid color-mix(in srgb, var(--app-accent) 52%, var(--theme-line));
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
}

html[data-theme="dark"] body.calendar-body .upcoming-count {
    color: var(--app-accent);
}

html[data-theme="light"] body.calendar-body .upcoming-citation,
html[data-theme="dark"] body.calendar-body .upcoming-citation {
    border-left-color: var(--app-accent);
    background: color-mix(in srgb, var(--theme-surface-muted) 66%, transparent);
}

html[data-theme="light"] body.calendar-body .upcoming-citation-student,
html[data-theme="dark"] body.calendar-body .upcoming-citation-student {
    color: var(--theme-ink);
}

html[data-theme="light"] body.calendar-body .upcoming-citation-action,
html[data-theme="dark"] body.calendar-body .upcoming-citation-action {
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.jefatura-page .jefatura-hero h1,
html[data-theme="dark"] body.jefatura-page .jefatura-hero h1,
html[data-theme="light"] body.jefatura-page .jefatura-section-heading h2,
html[data-theme="dark"] body.jefatura-page .jefatura-section-heading h2,
html[data-theme="light"] body.jefatura-page .jefatura-summary-card strong,
html[data-theme="dark"] body.jefatura-page .jefatura-summary-card strong,
html[data-theme="light"] body.jefatura-page .jefatura-table td,
html[data-theme="dark"] body.jefatura-page .jefatura-table td {
    color: var(--theme-ink);
}

html[data-theme="light"] body.jefatura-page .jefatura-summary-card small,
html[data-theme="dark"] body.jefatura-page .jefatura-summary-card small,
html[data-theme="light"] body.jefatura-page .jefatura-section-heading p,
html[data-theme="dark"] body.jefatura-page .jefatura-section-heading p,
html[data-theme="light"] body.jefatura-page .jefatura-mapping-heading p,
html[data-theme="dark"] body.jefatura-page .jefatura-mapping-heading p,
html[data-theme="light"] body.jefatura-page .jefatura-preview-toolbar p,
html[data-theme="dark"] body.jefatura-page .jefatura-preview-toolbar p {
    color: var(--theme-muted);
}

html[data-theme="light"] body.jefatura-page .jefatura-table th,
html[data-theme="dark"] body.jefatura-page .jefatura-table th {
    border-color: var(--theme-line);
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.jefatura-page .jefatura-table td,
html[data-theme="dark"] body.jefatura-page .jefatura-table td {
    border-color: var(--theme-line);
}

html[data-theme="light"] body.jefatura-page .jefatura-feedback:not(:empty),
html[data-theme="dark"] body.jefatura-page .jefatura-feedback:not(:empty) {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 72%, transparent);
}

html[data-theme="light"] body.jefatura-page .jefatura-feedback.success,
html[data-theme="dark"] body.jefatura-page .jefatura-feedback.success {
    border-color: color-mix(in srgb, var(--theme-success) 52%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-success) 14%, transparent);
    color: var(--theme-success);
}

html[data-theme="light"] body.jefatura-page .jefatura-feedback.error,
html[data-theme="dark"] body.jefatura-page .jefatura-feedback.error {
    border-color: color-mix(in srgb, var(--theme-coral) 52%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-coral) 14%, transparent);
    color: var(--theme-coral);
}

html[data-theme="light"] body.jefatura-page .jefatura-feedback.info,
html[data-theme="dark"] body.jefatura-page .jefatura-feedback.info {
    border-color: color-mix(in srgb, var(--app-secondary) 52%, var(--theme-line));
    background: color-mix(in srgb, var(--app-secondary) 14%, transparent);
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-item,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-item,
html[data-theme="light"] body.jefatura-notas-page .report-preview-summary > div,
html[data-theme="dark"] body.jefatura-notas-page .report-preview-summary > div {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 64%, transparent);
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-present,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-present {
    border-color: color-mix(in srgb, var(--theme-success) 58%, var(--theme-line));
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-absent,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-absent {
    border-color: color-mix(in srgb, var(--theme-coral) 58%, var(--theme-line));
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-late,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-late {
    border-color: color-mix(in srgb, var(--theme-yellow) 58%, var(--theme-line));
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-excused,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-excused {
    border-color: color-mix(in srgb, var(--app-secondary) 58%, var(--theme-line));
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-item span,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-item span,
html[data-theme="light"] body.jefatura-asistencia-page .asistencia-course-summary,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-course-summary,
html[data-theme="light"] body.jefatura-notas-page .report-file-field small,
html[data-theme="dark"] body.jefatura-notas-page .report-file-field small {
    color: var(--theme-muted);
}

html[data-theme="light"] body.jefatura-asistencia-page .asistencia-summary-item strong,
html[data-theme="dark"] body.jefatura-asistencia-page .asistencia-summary-item strong,
html[data-theme="light"] body.jefatura-notas-page .report-preview-summary span,
html[data-theme="dark"] body.jefatura-notas-page .report-preview-summary span,
html[data-theme="light"] body.jefatura-notas-page .report-preview-heading h3,
html[data-theme="dark"] body.jefatura-notas-page .report-preview-heading h3 {
    color: var(--theme-ink);
}

html[data-theme="light"] body.jefatura-notas-page .report-match-badge,
html[data-theme="dark"] body.jefatura-notas-page .report-match-badge {
    border-color: var(--theme-line);
    background: color-mix(in srgb, var(--theme-surface-muted) 66%, transparent);
    color: var(--theme-muted);
}

html[data-theme="light"] body.jefatura-notas-page .report-match-badge.exact,
html[data-theme="dark"] body.jefatura-notas-page .report-match-badge.exact {
    border-color: color-mix(in srgb, var(--theme-success) 54%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-success) 14%, transparent);
    color: var(--theme-success);
}

html[data-theme="light"] body.jefatura-notas-page .report-match-badge.approximate,
html[data-theme="dark"] body.jefatura-notas-page .report-match-badge.approximate {
    border-color: color-mix(in srgb, var(--theme-yellow) 58%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-yellow) 14%, transparent);
    color: var(--theme-yellow);
}

html[data-theme="light"] body.jefatura-notas-page .report-match-badge.not-found,
html[data-theme="dark"] body.jefatura-notas-page .report-match-badge.not-found,
html[data-theme="light"] body.jefatura-notas-page .report-warning-error,
html[data-theme="dark"] body.jefatura-notas-page .report-warning-error {
    border-color: color-mix(in srgb, var(--theme-coral) 54%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-coral) 14%, transparent);
    color: var(--theme-coral);
}

html[data-theme="light"] body.jefatura-notas-page .report-warning,
html[data-theme="dark"] body.jefatura-notas-page .report-warning {
    border-left-color: var(--theme-yellow);
    background: color-mix(in srgb, var(--theme-yellow) 14%, transparent);
    color: var(--app-accent-strong);
}

html[data-theme="light"] body.jefatura-notas-page .report-preview,
html[data-theme="dark"] body.jefatura-notas-page .report-preview {
    border-top-color: var(--theme-line);
}

html[data-theme="light"] body.worksheet-page :focus-visible,
html[data-theme="dark"] body.worksheet-page :focus-visible,
html[data-theme="light"] body.citation-body :focus-visible,
html[data-theme="dark"] body.citation-body :focus-visible,
html[data-theme="light"] body.calendar-body :focus-visible,
html[data-theme="dark"] body.calendar-body :focus-visible,
html[data-theme="light"] body.jefatura-page :focus-visible,
html[data-theme="dark"] body.jefatura-page :focus-visible {
    outline-color: var(--app-accent);
}

@media (max-width: 720px) {
    html[data-theme="light"] body.worksheet-page .checkbox-grid,
    html[data-theme="dark"] body.worksheet-page .checkbox-grid {
        grid-template-columns: 1fr;
    }

    html[data-theme="light"] body.worksheet-page .page-controls,
    html[data-theme="dark"] body.worksheet-page .page-controls {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}

@media print {
    html[data-theme="light"] body.worksheet-page,
    html[data-theme="dark"] body.worksheet-page,
    html[data-theme="light"] body.citation-body,
    html[data-theme="dark"] body.citation-body {
        min-width: 0;
        background: #ffffff !important;
        color: #000000 !important;
    }

    html[data-theme="light"] body.worksheet-page .background-glow,
    html[data-theme="dark"] body.worksheet-page .background-glow,
    html[data-theme="light"] body.worksheet-page .worksheet-preview,
    html[data-theme="dark"] body.worksheet-page .worksheet-preview,
    html[data-theme="light"] body.citation-body .citation-preview,
    html[data-theme="dark"] body.citation-body .citation-preview {
        background: #ffffff !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] body.worksheet-page .worksheet-preview,
    html[data-theme="dark"] body.worksheet-page .worksheet-preview,
    html[data-theme="light"] body.citation-body .citation-preview {
        border-color: transparent !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.worksheet-page *,
    body.worksheet-page *::before,
    body.worksheet-page *::after,
    body.citation-body *,
    body.citation-body *::before,
    body.citation-body *::after,
    body.calendar-body *,
    body.calendar-body *::before,
    body.calendar-body *::after,
    body.jefatura-page *,
    body.jefatura-page *::before,
    body.jefatura-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}