@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../../vendor/livewire/livewire/dist/**/*.js';

/*
 * Tokens DocenTrack — el mundo es el cuaderno de firmas de la Facultad:
 * tinta (ink), papel del ledger, navy de la credencial institucional y
 * el sello naranja que marca la hora dictada.
 */
:root,
[data-theme='light'] {
    color-scheme: light;

    --ink: #0f1c2e;
    --ink-mute: #3d526c;
    --ink-faint: #7a93b0;
    --paper: #ffffff;
    --ledger: #f3f6fb;
    --blotter: #e7eef6;
    --rule: rgb(11 44 94 / 0.12);
    --rule-strong: rgb(11 44 94 / 0.22);

    --navy: #0b2c5e;
    --navy-deep: #071f42;
    --navy-lift: #1a4a8c;
    --on-navy: #f4f7fb;

    --stamp: #e8571a;
    --stamp-press: #c2410c;
    --stamp-wash: #fff4ed;
    --on-stamp: #ffffff;

    --mark-ok: #0f7a62;
    --on-mark-ok: #ffffff;
    --mark-ok-wash: #e6f5f0;
    --mark-info: #0b2c5e;
    --mark-info-wash: #e8eef8;
    --mark-late: #c2410c;
    --mark-late-wash: color-mix(in srgb, var(--stamp) 12%, var(--paper));
    --mark-alert: #b83a0b;
    --mark-alert-wash: color-mix(in srgb, var(--stamp-press) 12%, var(--paper));

    /* Colores de departamento académico (App\Enums\AcademicDepartment).
       `-ink` es el texto: en amarillo va ámbar oscuro porque el amarillo
       puro no se lee sobre fondo claro. */
    --dept-yellow: #eab308;
    --dept-yellow-ink: #854d0e;
    --dept-orange: #ea580c;
    --dept-orange-ink: #c2410c;
    --dept-red: #dc2626;
    --dept-red-ink: #b91c1c;
    --dept-blue: #2563eb;
    --dept-blue-ink: #1d4ed8;

    /* Paleta curada para que el admin elija el color de cada sede (no un
       input hex libre — evita colores ilegibles o que ya significan algo
       en el sistema). Ver App\Enums\CampusColor; el nombre de cada
       variable es `color.value`, así se usan directo desde Blade sin un
       mapa aparte. */
    --campus-color-navy: var(--navy);
    --campus-color-plum: #6a4c93;
    --campus-color-teal: #0f766e;
    --campus-color-amber: #b45309;
    --campus-color-rose: #be185d;
    --campus-color-indigo: #4338ca;
    --campus-color-forest: #166534;
    --campus-color-slate: #475569;

    --rail: var(--navy);
    --rail-hover: color-mix(in srgb, var(--navy-lift) 42%, var(--navy));
    --rail-edge: var(--stamp);
    --rail-ink: #f0f4fa;
    --rail-mute: #b4c6de;
    --rail-active: color-mix(in srgb, var(--stamp) 24%, var(--navy));

    --lift: 0 0 0 1px rgb(11 44 94 / 0.06), 0 1px 2px -1px rgb(11 44 94 / 0.08), 0 8px 18px -10px rgb(11 44 94 / 0.14);
    --lift-lg: 0 0 0 1px rgb(11 44 94 / 0.08), 0 16px 40px -18px rgb(11 44 94 / 0.28);
    --scrim: rgb(7 31 66 / 0.55);

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--stamp) 35%, transparent);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --duration-fast: 140ms;
    --duration: 200ms;

    --tap: 52px;
}

[data-theme='dark'] {
    color-scheme: dark;

    --ink: #f4f7fb;
    --ink-mute: #a8bdd4;
    --ink-faint: #7a93b0;
    --paper: #0a1c33;
    --ledger: #061222;
    /* Los inputs deben verse hundidos respecto a la tarjeta que los contiene,
       igual que en modo claro — por eso va entre --ledger y --paper, nunca
       más claro que --paper (si no, el campo "flota" en vez de "hundirse"). */
    --blotter: color-mix(in srgb, var(--ledger) 55%, var(--paper) 45%);
    --rule: rgb(255 255 255 / 0.08);
    --rule-strong: rgb(249 115 22 / 0.45);

    --navy: #6b9adb;
    --navy-deep: #8fb4e8;
    --navy-lift: #8fb4e8;
    --on-navy: #061222;

    --stamp: #f97316;
    --stamp-press: #ea580c;
    --stamp-wash: #2a1608;
    --on-stamp: #ffffff;

    --mark-ok: #5dcaa8;
    --on-mark-ok: #061222;
    --mark-ok-wash: color-mix(in srgb, #5dcaa8 16%, var(--ledger));
    --mark-info: #8fb4e8;
    --mark-info-wash: color-mix(in srgb, #8fb4e8 16%, var(--ledger));
    --mark-late: #f97316;
    --mark-late-wash: color-mix(in srgb, var(--stamp) 16%, var(--ledger));
    --mark-alert: #fb923c;
    --mark-alert-wash: color-mix(in srgb, var(--stamp) 16%, var(--ledger));

    --dept-yellow: #facc15;
    --dept-yellow-ink: #fde047;
    --dept-orange: #fb923c;
    --dept-orange-ink: #fdba74;
    --dept-red: #f87171;
    --dept-red-ink: #fca5a5;
    --dept-blue: #60a5fa;
    --dept-blue-ink: #93c5fd;

    /* Mismas 8, versión más clara para que se lean sobre fondo oscuro. */
    --campus-color-navy: var(--navy);
    --campus-color-plum: #b79ce0;
    --campus-color-teal: #2dd4bf;
    --campus-color-amber: #fbbf24;
    --campus-color-rose: #f472b6;
    --campus-color-indigo: #a5b4fc;
    --campus-color-forest: #4ade80;
    --campus-color-slate: #94a3b8;

    --rail: #040e1a;
    --rail-hover: #0a1c33;
    --rail-edge: var(--stamp);
    --rail-ink: #f0f4fa;
    --rail-mute: #8aa0c0;
    --rail-active: color-mix(in srgb, var(--stamp) 26%, #040e1a);

    --lift: 0 0 0 1px rgb(255 255 255 / 0.08);
    --lift-lg: 0 0 0 1px rgb(255 255 255 / 0.1), 0 18px 40px rgb(0 0 0 / 0.45);
    --scrim: rgb(4 14 26 / 0.72);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--stamp) 45%, transparent);
}

@theme {
    --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-heading: 'Outfit', ui-sans-serif, system-ui, sans-serif;

    --color-ink: var(--ink);
    --color-mute: var(--ink-mute);
    --color-faint: var(--ink-faint);
    --color-paper: var(--paper);
    --color-ledger: var(--ledger);
    --color-blotter: var(--blotter);
    --color-navy: var(--navy);
    --color-stamp: var(--stamp);
    --color-rule: var(--rule);
}

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        background: var(--ledger);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 0.875rem;
        line-height: 1.5;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-heading);
        letter-spacing: -0.02em;
        text-wrap: balance;
        color: var(--ink);
    }

    p {
        text-wrap: pretty;
    }

    :focus-visible {
        outline: 2px solid var(--stamp);
        outline-offset: 2px;
    }

    :focus:not(:focus-visible) {
        outline: none;
    }
}

@layer components {
    .skip-link {
        position: absolute;
        left: 1rem;
        top: calc(-100% - 1rem);
        z-index: 80;
        border-radius: 8px;
        background: var(--stamp);
        color: var(--on-stamp);
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        transition: top var(--duration-fast) var(--ease-out);
    }

    .skip-link:focus {
        top: 1rem;
    }

    .kicker {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    .kicker-stamp {
        color: var(--stamp);
    }

    .text-mute {
        color: var(--ink-mute);
    }

    .font-heading {
        font-family: var(--font-heading);
    }

    .num {
        font-variant-numeric: tabular-nums;
    }

    .brand-stripe {
        height: 4px;
        background: linear-gradient(
            90deg,
            var(--navy-deep, #071f42) 0%,
            var(--navy-deep, #071f42) 58%,
            var(--stamp) 58%,
            var(--stamp) 100%
        );
    }

    [data-theme='dark'] .brand-stripe {
        background: linear-gradient(90deg, #071f42 0%, #071f42 58%, var(--stamp) 58%, var(--stamp) 100%);
    }

    .brand-geo {
        pointer-events: none;
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .brand-geo::before {
        content: '';
        position: absolute;
        right: -18%;
        top: -10%;
        width: 55%;
        height: 120%;
        background: var(--stamp);
        transform: skewX(-18deg);
        opacity: 0.95;
    }

    .brand-geo::after {
        content: '';
        position: absolute;
        right: -8%;
        bottom: -20%;
        width: 35%;
        height: 70%;
        background: color-mix(in srgb, var(--stamp) 70%, #fff);
        transform: skewX(-18deg);
        opacity: 0.35;
    }

    [data-theme='dark'] .brand-geo::after {
        background: color-mix(in srgb, var(--stamp) 55%, #061222);
    }

    .theme-toggle {
        display: inline-flex;
        height: 2.25rem;
        width: 2.25rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--rule);
        border-radius: 8px;
        background: var(--paper);
        color: var(--ink-mute);
        cursor: pointer;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out);
    }

    .theme-toggle:hover {
        border-color: color-mix(in srgb, var(--stamp) 50%, var(--rule));
        background: var(--stamp-wash);
        color: var(--stamp);
    }

    .theme-toggle:active {
        transform: scale(0.97);
    }

    [data-theme='dark'] .theme-icon-sun,
    :root:not([data-theme='dark']) .theme-icon-moon,
    [data-theme='light'] .theme-icon-moon {
        display: none;
    }

    [data-theme='dark'] .theme-icon-moon {
        display: block;
    }

    .mark {
        display: inline-flex;
        height: 2rem;
        width: 2rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: #0b2c5e;
        font-family: var(--font-heading);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #f4f7fb;
        box-shadow: inset 0 -2px 0 #e8571a;
    }

    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .btn-danger {
        display: inline-flex;
        height: 2.25rem;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border-radius: 6px;
        padding: 0 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out),
            transform var(--duration-fast) var(--ease-out);
    }

    .btn-primary:active:not(:disabled),
    .btn-secondary:active:not(:disabled),
    .btn-ghost:active:not(:disabled),
    .btn-danger:active:not(:disabled) {
        transform: scale(0.97);
    }

    .btn-primary:disabled,
    .btn-secondary:disabled,
    .btn-ghost:disabled,
    .btn-danger:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .btn-primary {
        border: 1px solid transparent;
        background: var(--stamp);
        color: var(--on-stamp);
    }

    .btn-primary:hover:not(:disabled) {
        background: var(--stamp-press);
    }

    .btn-secondary {
        border: 1px solid var(--rule-strong);
        background: var(--paper);
        color: var(--navy);
    }

    .btn-secondary:hover:not(:disabled) {
        border-color: var(--stamp);
        background: var(--stamp-wash);
        color: var(--stamp);
    }

    .btn-ghost {
        border: 1px solid var(--rule);
        background: transparent;
        color: var(--ink-mute);
    }

    .btn-ghost:hover:not(:disabled) {
        background: var(--blotter);
        color: var(--ink);
    }

    .btn-ghost[data-catalog-clear]:hover {
        border-color: color-mix(in srgb, var(--stamp) 40%, var(--rule));
        background: var(--mark-alert-wash);
        color: var(--mark-alert);
    }

    .btn-danger {
        border: 1px solid transparent;
        background: var(--mark-alert);
        color: var(--on-stamp);
    }

    .btn-danger:hover:not(:disabled) {
        background: var(--stamp-press);
    }

    .btn-icon {
        width: 2.25rem;
        min-width: 2.25rem;
        padding: 0;
    }

    .btn-sm {
        height: 2rem;
        padding: 0 0.75rem;
        font-size: 0.75rem;
    }

    .btn-action {
        display: inline-flex;
        width: 2.125rem;
        height: 2.125rem;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 6px;
        padding: 0;
        cursor: pointer;
        line-height: 0;
        transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    }

    .btn-action:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .btn-action-edit {
        background: var(--blotter);
        color: var(--navy);
    }

    .btn-action-edit:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy) 16%, var(--blotter));
    }

    .btn-action-view {
        background: var(--mark-ok-wash);
        color: var(--mark-ok);
    }

    .btn-action-view:hover:not(:disabled) {
        background: color-mix(in srgb, var(--mark-ok) 22%, var(--paper));
    }

    .btn-action-danger {
        background: var(--mark-alert-wash);
        color: var(--mark-alert);
    }

    .btn-action-danger:hover:not(:disabled) {
        background: color-mix(in srgb, var(--stamp) 22%, var(--paper));
    }

    .btn-action-history {
        background: var(--mark-ok-wash);
        color: var(--navy);
    }

    .btn-action-history:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy) 18%, var(--paper));
    }

    .btn-action-groups {
        background: color-mix(in srgb, var(--navy) 10%, var(--paper));
        color: var(--navy);
    }

    .btn-action-groups:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy) 18%, var(--paper));
    }

    .btn-action-reset-password {
        background: color-mix(in srgb, var(--navy-lift) 14%, var(--paper));
        color: var(--navy-lift);
    }

    .btn-action-reset-password:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy-lift) 24%, var(--paper));
    }

    .btn-action-fingerprint {
        background: color-mix(in srgb, var(--navy-lift) 14%, var(--paper));
        color: var(--navy-lift);
    }

    .btn-action-fingerprint:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy-lift) 24%, var(--paper));
    }

    .btn-action-up,
    .btn-action-down {
        background: var(--blotter);
        color: var(--ink-mute);
    }

    .btn-action-up:hover:not(:disabled),
    .btn-action-down:hover:not(:disabled) {
        background: color-mix(in srgb, var(--navy) 10%, var(--blotter));
        color: var(--ink);
    }

    .form-label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    .form-required {
        margin-left: 0.15rem;
        color: var(--stamp);
        font-weight: 700;
    }

    .form-input,
    .form-error,
    select.form-input {
        font-size: 0.875rem;
    }

    .form-input,
    select.form-input {
        height: 2.25rem;
        width: 100%;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: var(--blotter);
        padding: 0 0.75rem;
        color: var(--ink);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out);
    }

    textarea.form-input {
        height: auto;
        min-height: 5.5rem;
        padding-block: 0.65rem;
        line-height: 1.45;
    }

    .form-input:focus,
    select.form-input:focus {
        border-color: var(--stamp);
        outline: none;
        background: var(--paper);
        box-shadow: var(--focus-ring);
    }

    /* Tom Select — mismo look que .form-input (tipografía, alto, colores).
       `!important` en lo cosmético: su CSS llega vía app.js y el orden final
       contra app.css no está garantizado. */
    .searchable-select .ts-wrapper {
        width: 100%;
        font-family: var(--font-sans) !important;
    }

    .ts-wrapper.single .ts-control {
        --ts-pr-caret: 1.35rem;
        display: flex;
        align-items: center;
        height: 2.25rem !important;
        min-height: 2.25rem !important;
        border: 1px solid var(--rule) !important;
        border-radius: 6px !important;
        background: var(--blotter) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0.75rem !important;
        font-family: var(--font-sans) !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        color: var(--ink) !important;
        box-shadow: none !important;
        position: relative;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out);
    }

    .ts-wrapper.single .ts-control > .item {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        font-family: var(--font-sans) !important;
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        line-height: 1.25rem !important;
        color: var(--ink) !important;
    }

    .ts-wrapper.single.input-active .ts-control,
    .focus .ts-control {
        border-color: var(--stamp) !important;
        background: var(--paper) !important;
        box-shadow: var(--focus-ring) !important;
    }

    .ts-wrapper.single .ts-control::after {
        content: '';
        position: absolute;
        right: 0.7rem;
        top: 50%;
        width: 0.7rem;
        height: 0.7rem;
        transform: translateY(-50%);
        background-color: var(--ink-faint);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E")
            center / contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E")
            center / contain no-repeat;
        pointer-events: none;
        transition: transform var(--duration-fast) var(--ease-out);
    }

    .ts-wrapper.dropdown-active .ts-control::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .ts-control input {
        font-family: var(--font-sans) !important;
        color: var(--ink) !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }

    .ts-control input::placeholder {
        color: var(--ink-faint) !important;
        font-family: var(--font-sans) !important;
        font-size: 0.875rem !important;
    }

    .ts-dropdown {
        border: 1px solid var(--rule) !important;
        border-radius: 6px !important;
        background: var(--paper) !important;
        box-shadow: var(--lift-lg) !important;
        margin-top: 0.35rem;
        font-family: var(--font-sans) !important;
        font-size: 0.875rem !important;
        z-index: 60;
    }

    .ts-dropdown .option {
        padding: 0.5rem 0.75rem !important;
        font-family: var(--font-sans) !important;
        font-size: 0.875rem !important;
        color: var(--ink) !important;
    }

    .ts-dropdown .active {
        background: var(--stamp-wash) !important;
        color: var(--stamp) !important;
    }

    .ts-dropdown .no-results {
        padding: 0.5rem 0.75rem !important;
        color: var(--ink-faint) !important;
        font-size: 0.875rem !important;
    }

    .expired-reg-note {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 0.95rem 1.05rem;
    }

    .expired-reg-note-icon {
        display: inline-flex;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--stamp) 18%, var(--paper));
        color: var(--stamp-press);
    }

    .expired-reg-note-body {
        min-width: 0;
        font-size: 0.875rem;
        line-height: 1.45;
        color: var(--ink);
    }

    .expired-reg-note-title {
        margin: 0 0 0.25rem;
        font-family: var(--font-heading);
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--stamp-press);
    }

    .expired-reg-note-body p {
        margin: 0;
        color: var(--ink-mute);
    }

    .expired-reg-note-body .badge {
        vertical-align: middle;
        margin-inline: 0.15rem;
    }

    /* Para un valor que el sistema decide solo (ej. periodo académico
       activo) — mismo tamaño que un input, pero el fondo "ledger" en vez
       de "blotter" avisa que no se puede tocar, sin necesidad de deshabilitar
       un <select> (que igual se ve clickeable). */
    .form-static {
        display: flex;
        align-items: center;
        height: 2.25rem;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: var(--ledger);
        padding: 0 0.75rem;
        color: var(--ink-mute);
        font-size: 0.875rem;
    }

    /* El login es una acción rara y de alto compromiso (una vez por sesión),
       no una fila más de una tabla densa — merece más aire que el resto de
       inputs del panel, que sí necesitan quedar compactos (catálogos). */
    .form-input-lg {
        height: 2.75rem;
        border-radius: 8px;
        font-size: 0.9375rem;
    }

    .input-wrap {
        position: relative;
    }

    .input-wrap .form-input {
        padding-right: 2.5rem;
    }

    .input-reveal-btn {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        height: 100%;
        width: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: none;
        color: var(--ink-faint);
        cursor: pointer;
        transition: color var(--duration-fast) var(--ease-out);
    }

    .input-reveal-btn:hover {
        color: var(--ink-mute);
    }

    .form-error {
        margin-top: 0.35rem;
        color: var(--mark-alert);
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.2rem 0.65rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        border: 1px solid transparent;
    }

    .badge::before {
        content: '';
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 999px;
        background: currentColor;
        flex-shrink: 0;
    }

    .badge-success {
        background: var(--mark-ok-wash);
        color: var(--mark-ok);
        border-color: color-mix(in srgb, var(--mark-ok) 16%, transparent);
    }

    .badge-neutral {
        background: color-mix(in srgb, var(--ink-mute) 14%, var(--paper));
        color: var(--ink-mute);
        border-color: color-mix(in srgb, var(--ink-mute) 16%, transparent);
    }

    .badge-warning {
        background: var(--mark-late-wash);
        color: var(--mark-late);
        border-color: color-mix(in srgb, var(--stamp) 16%, transparent);
    }

    /* Estado "inactivo" (no un error real) — mismo rojo que --mark-alert,
       para que el semáforo total=azul / activo=verde / inactivo=rojo sea
       una sola regla en badges, tarjetas y toggle, no tres criterios sueltos. */
    .badge-danger {
        background: var(--mark-alert-wash);
        color: var(--mark-alert);
        border-color: color-mix(in srgb, var(--mark-alert) 16%, transparent);
    }

    .badge-info {
        background: color-mix(in srgb, var(--navy-lift) 14%, var(--paper));
        color: var(--navy-lift);
        border-color: color-mix(in srgb, var(--navy-lift) 16%, transparent);
    }

    .badge-dept-yellow {
        background: color-mix(in srgb, var(--dept-yellow) 16%, var(--paper));
        color: var(--dept-yellow-ink);
        border-color: color-mix(in srgb, var(--dept-yellow) 32%, transparent);
    }

    .badge-dept-yellow::before {
        background: var(--dept-yellow);
    }

    .badge-dept-orange {
        background: color-mix(in srgb, var(--dept-orange) 16%, var(--paper));
        color: var(--dept-orange-ink);
        border-color: color-mix(in srgb, var(--dept-orange) 32%, transparent);
    }

    .badge-dept-orange::before {
        background: var(--dept-orange);
    }

    .badge-dept-red {
        background: color-mix(in srgb, var(--dept-red) 16%, var(--paper));
        color: var(--dept-red-ink);
        border-color: color-mix(in srgb, var(--dept-red) 32%, transparent);
    }

    .badge-dept-red::before {
        background: var(--dept-red);
    }

    .badge-dept-blue {
        background: color-mix(in srgb, var(--dept-blue) 16%, var(--paper));
        color: var(--dept-blue-ink);
        border-color: color-mix(in srgb, var(--dept-blue) 32%, transparent);
    }

    .badge-dept-blue::before {
        background: var(--dept-blue);
    }

    .modal-scrim {
        background: var(--scrim);
    }

    .modal-panel {
        max-height: calc(100vh - 3rem);
        overflow: auto;
        border-radius: 16px;
        border: 1px solid var(--rule);
        background: var(--paper);
        padding: 1.25rem;
        box-shadow: var(--lift-lg);
    }

    .modal-panel h2 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--ink);
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .catalog-panel {
        border: 1px solid var(--rule);
        border-radius: 12px;
        background: var(--paper);
        box-shadow: var(--lift);
    }

    .catalog-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--rule);
        padding: 1.15rem 1.35rem;
    }

    .catalog-head h2 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--ink);
    }

    .catalog-head-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.75rem;
    }

    .course-period-badge {
        display: inline-flex;
        margin-left: 0.25rem;
        border-radius: 999px;
        padding: 0.1rem 0.45rem;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mark-ok);
        background: var(--mark-ok-wash);
    }

    /* Grupos: ahora solo informativo (el botón de configurar se movió a
       Acciones, junto a Editar) — una fila-lista por sede, cada una con
       el color real que el admin eligió para esa sede (`--row-accent` lo
       pone inline cada `<div>`, ver catalog-simple.blade.php). El default
       de acá abajo solo cubre el caso raro de un grupo sin sede. */
    .course-groups-list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .course-groups-row {
        --row-accent: var(--navy);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        border-radius: 5px;
        border-left: 3px solid var(--row-accent);
        background: color-mix(in srgb, var(--row-accent) 7%, var(--paper));
        padding: 0.2rem 0.5rem 0.2rem 0.4rem;
    }

    .course-groups-campus-label {
        flex-shrink: 0;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--row-accent);
    }

    .course-groups-chips {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .course-group-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        border-radius: 0.35rem;
        padding: 0.15rem 0.4rem;
        font-family: var(--font-heading);
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--row-accent);
        background: color-mix(in srgb, var(--row-accent) 14%, var(--paper));
        border: 1px solid color-mix(in srgb, var(--row-accent) 28%, transparent);
    }

    /* Horas del curso: grilla 2×2 con etiqueta — antes 4 columnas sueltas
       (Cr./HT/HP/TH) ocupando todo el ancho de la fila. El total (TH) se
       resalta un poco porque es el número que más se compara entre
       cursos; el desglose completo queda también en el `title`. */
    .course-hours-grid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 0.1rem 0.9rem;
    }

    .course-hours-stat {
        display: flex;
        align-items: baseline;
        gap: 0.3rem;
    }

    .course-hours-label {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--ink-faint);
    }

    .course-hours-value {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .course-hours-stat.is-total .course-hours-value {
        color: var(--navy);
        font-weight: 700;
    }

    /* Selector de color de sede (modal) — paleta curada de botones, no un
       input hex libre. El aro solo aparece en el elegido, no en hover. */
    .color-swatch-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding-top: 0.15rem;
    }

    .color-swatch {
        width: 1.9rem;
        height: 1.9rem;
        flex-shrink: 0;
        border-radius: 999px;
        border: none;
        background: var(--swatch-color);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
        cursor: pointer;
        transition: transform var(--duration-fast) var(--ease-out);
    }

    .color-swatch:hover {
        transform: scale(1.08);
    }

    .color-swatch.is-selected {
        box-shadow:
            0 0 0 2px var(--paper),
            0 0 0 4px var(--swatch-color);
    }

    /* Mismo color, en la tabla de Sedes — swatch chico + nombre. */
    .color-swatch-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: var(--ink-mute);
    }

    .color-swatch-dot {
        width: 0.8rem;
        height: 0.8rem;
        flex-shrink: 0;
        border-radius: 999px;
        background: var(--swatch-color);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
    }

    .catalog-query {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.75rem;
        border-bottom: 1px solid var(--rule);
        background: var(--ledger);
        padding: 0.9rem 1.35rem;
    }

    .catalog-field {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.35rem;
    }

    .catalog-field label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ink-mute);
    }

    .catalog-field-grow {
        flex: 1 1 16rem;
    }

    .catalog-input,
    .catalog-select {
        height: 2.25rem;
        width: 100%;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: var(--paper);
        padding: 0 0.75rem;
        font-size: 0.875rem;
        color: var(--ink);
    }

    .catalog-input:focus,
    .catalog-select:focus {
        border-color: var(--stamp);
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .catalog-query-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .filter-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: var(--ink);
        cursor: pointer;
    }

    .catalog-table-wrap {
        overflow-x: auto;
    }

    .catalog-table {
        width: 100%;
        min-width: 36rem;
        border-collapse: collapse;
        text-align: left;
        font-size: 0.875rem;
    }

    .catalog-table thead th {
        border-bottom: 1px solid var(--rule);
        background: var(--ledger);
        padding: 0.7rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-mute);
        white-space: nowrap;
    }

    .catalog-table tbody td {
        padding: 0.8rem 1rem;
        color: var(--ink);
        vertical-align: middle;
        box-shadow: inset 0 -1px 0 var(--rule);
    }

    .catalog-table tbody tr:hover {
        background: color-mix(in srgb, var(--navy) 4%, var(--paper));
    }

    .catalog-table .col-primary {
        font-weight: 600;
    }

    .catalog-table .col-muted {
        color: var(--ink-mute);
    }

    .catalog-table .col-num {
        width: 4rem;
        font-variant-numeric: tabular-nums;
    }

    .catalog-table .col-actions {
        text-align: right;
        width: 8rem;
    }

    .catalog-actions {
        display: inline-flex;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .catalog-empty {
        padding: 2rem 1rem !important;
        text-align: center;
        color: var(--ink-mute);
    }

    .catalog-sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        color: inherit;
        cursor: pointer;
    }

    .catalog-sort-icons {
        display: inline-flex;
        flex-direction: column;
        gap: 0.05rem;
        opacity: 0.35;
    }

    .catalog-sort-chevron {
        width: 0.6rem;
        height: 0.4rem;
    }

    .catalog-sort-btn.is-sorted-asc .catalog-sort-up,
    .catalog-sort-btn.is-sorted-desc .catalog-sort-down {
        opacity: 1;
        color: var(--ink);
    }

    .catalog-sort-btn.is-sorted .catalog-sort-icons {
        opacity: 1;
    }

    .catalog-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-top: 1px solid var(--rule);
        padding: 0.85rem 1.35rem;
        font-size: 0.875rem;
        color: var(--ink-mute);
    }

    .catalog-pagination-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .catalog-page-size {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .catalog-page-size-select {
        width: auto;
        min-width: 5rem;
    }

    .catalog-page-btns {
        display: inline-flex;
        gap: 0.25rem;
    }

    .catalog-page-btn {
        display: inline-flex;
        min-width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: var(--paper);
        padding: 0 0.4rem;
        color: var(--navy);
        cursor: pointer;
    }

    .catalog-page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .catalog-page-btn[aria-current='page'] {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--on-navy);
    }

    .catalog-page-btn svg {
        width: 1rem;
        height: 1rem;
    }

    .catalog-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .catalog-summary.is-single {
        grid-template-columns: minmax(12rem, 16rem);
    }

    .catalog-summary-card {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        border: 1px solid var(--rule);
        border-radius: 12px;
        background: var(--paper);
        padding: 1rem 1.15rem;
        box-shadow: var(--lift);
    }

    .catalog-summary-icon {
        display: flex;
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: color-mix(in srgb, var(--navy) 12%, var(--paper));
        color: var(--navy);
    }

    .catalog-summary-icon svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    /* Antes mezclaba solo 8% de navy — al lado de los washes ya crafteados
       de las otras tarjetas (verde/rojo) se veía prácticamente gris/blanco.
       --mark-info-wash es el mismo azul de familia con la fuerza correcta. */
    .catalog-summary-card.is-total {
        background: var(--mark-info-wash);
        border-color: color-mix(in srgb, var(--navy) 34%, var(--rule));
        border-left: 3px solid var(--navy);
    }

    .catalog-summary-card.is-total .catalog-summary-icon {
        background: var(--navy);
        color: var(--on-navy);
    }

    .catalog-summary-card.is-total .catalog-summary-label {
        color: var(--navy);
    }

    .catalog-summary-card.is-success {
        background: var(--mark-ok-wash);
        border-color: color-mix(in srgb, var(--mark-ok) 36%, var(--rule));
        border-left: 3px solid var(--mark-ok);
    }

    .catalog-summary-card.is-success .catalog-summary-icon {
        background: var(--mark-ok);
        color: var(--on-mark-ok);
    }

    .catalog-summary-card.is-success .catalog-summary-label {
        color: var(--mark-ok);
    }

    .catalog-summary-card.is-success .catalog-summary-value {
        color: var(--mark-ok);
    }

    .catalog-summary-card.is-warning {
        background: var(--stamp-wash);
        border-color: color-mix(in srgb, var(--stamp) 34%, var(--rule));
        border-left: 3px solid var(--stamp);
    }

    .catalog-summary-card.is-warning .catalog-summary-icon {
        background: var(--stamp);
        color: var(--on-stamp);
    }

    .catalog-summary-card.is-warning .catalog-summary-label {
        color: var(--stamp-press);
    }

    .catalog-summary-card.is-warning .catalog-summary-value {
        color: var(--stamp);
    }

    /* "Inactivos" en rojo (--mark-alert), no gris — con el total en azul
       al lado, un gris apagado se leía casi igual que "Total" de un
       vistazo. Semáforo consistente con badges y toggle: azul/verde/rojo. */
    .catalog-summary-card.is-muted {
        background: var(--mark-alert-wash);
        border-color: color-mix(in srgb, var(--mark-alert) 34%, var(--rule));
        border-left: 3px solid var(--mark-alert);
    }

    .catalog-summary-card.is-muted .catalog-summary-icon {
        background: var(--mark-alert);
        color: var(--on-stamp);
    }

    .catalog-summary-card.is-muted .catalog-summary-label {
        color: var(--mark-alert);
    }

    .catalog-summary-card.is-muted .catalog-summary-value {
        color: var(--mark-alert);
    }

    .catalog-summary-card.is-info {
        background: color-mix(in srgb, var(--navy-lift) 12%, var(--paper));
        border-color: color-mix(in srgb, var(--navy-lift) 34%, var(--rule));
        border-left: 3px solid var(--navy-lift);
    }

    .catalog-summary-card.is-info .catalog-summary-icon {
        background: var(--navy-lift);
        color: var(--on-navy);
    }

    .catalog-summary-card.is-info .catalog-summary-label {
        color: var(--navy-lift);
    }

    .catalog-summary-card.is-info .catalog-summary-value {
        color: var(--navy-lift);
    }

    .catalog-summary-card.is-muted .catalog-summary-value {
        color: var(--mark-alert);
    }

    .catalog-summary-label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    .catalog-summary-value {
        margin-top: 0.15rem;
        font-family: var(--font-heading);
        font-size: 1.75rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.03em;
        color: var(--navy);
        line-height: 1.1;
    }

    .catalog-summary-sub {
        font-size: 0.75rem;
        color: var(--ink-faint);
    }

    .app-toast-host {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 70;
        display: flex;
        width: min(24rem, calc(100vw - 2rem));
        flex-direction: column;
        gap: 0.5rem;
    }

    .app-toast {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        border: 1px solid var(--rule);
        border-left: 3px solid var(--navy);
        border-radius: 12px;
        background: var(--paper);
        padding: 0.85rem 0.9rem;
        box-shadow: var(--lift-lg);
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.98);
        transition:
            opacity var(--duration) var(--ease-out),
            transform var(--duration) var(--ease-out);
    }

    .app-toast.is-visible {
        opacity: 1;
        transform: none;
    }

    .app-toast.is-leaving {
        opacity: 0;
        transform: translateY(-0.35rem);
    }

    .app-toast-icon {
        display: flex;
        width: 1.75rem;
        height: 1.75rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: color-mix(in srgb, var(--navy) 14%, var(--paper));
        color: var(--navy);
    }

    .app-toast-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .app-toast[data-type='success'] {
        border-left-color: var(--mark-ok);
        background: color-mix(in srgb, var(--mark-ok) 6%, var(--paper));
    }

    .app-toast[data-type='success'] .app-toast-icon {
        background: var(--mark-ok-wash);
        color: var(--mark-ok);
    }

    /* Regla única para todo el sistema (badges, cards, toasts): éxito=verde
       sin importar si fue crear/actualizar/eliminar (las tres terminan bien),
       aviso=naranja, error/no se pudo=rojo. Antes "actualizado" salía azul
       ('info') y "eliminado" gris ('danger') — dos grises/azules que no
       comunicaban "esto funcionó" tan claro como el verde de "creado". */
    .app-toast[data-type='warning'] {
        border-left-color: var(--stamp);
        background: var(--stamp-wash);
    }

    .app-toast[data-type='warning'] .app-toast-icon {
        background: color-mix(in srgb, var(--stamp) 18%, var(--paper));
        color: var(--stamp);
    }

    .app-toast[data-type='error'] {
        border-left-color: var(--mark-alert);
        background: var(--mark-alert-wash);
    }

    .app-toast[data-type='error'] .app-toast-icon {
        background: color-mix(in srgb, var(--mark-alert) 18%, var(--paper));
        color: var(--mark-alert);
    }

    .app-toast-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
    }

    .app-toast-close {
        margin-left: auto;
        color: var(--ink-faint);
        background: none;
        border: 0;
        cursor: pointer;
    }

    /* Thumb a la izquierda = ACTIVO (verde); a la derecha = INACTIVO (rojo)
       — mismo semáforo que las badges y las tarjetas de resumen: azul=total,
       verde=activo, rojo=inactivo, una sola regla en todo el sistema. Más
       ancho y menos borde que la primera versión: con las dos etiquetas
       apretadas contra el borde se sentía comprimido. */
    .status-toggle {
        position: relative;
        display: inline-flex;
        height: 2.25rem;
        min-width: 11rem;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        border: 1px solid color-mix(in srgb, var(--mark-ok) 14%, var(--rule));
        border-radius: 999px;
        background: var(--mark-ok-wash);
        padding: 0.25rem;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out);
    }

    .status-toggle:hover {
        border-color: color-mix(in srgb, var(--mark-ok) 30%, var(--rule));
    }

    .status-toggle[aria-checked='false'] {
        border-color: color-mix(in srgb, var(--mark-alert) 14%, var(--rule));
        background: var(--mark-alert-wash);
    }

    .status-toggle[aria-checked='false']:hover {
        border-color: color-mix(in srgb, var(--mark-alert) 30%, var(--rule));
    }

    .status-toggle-lg {
        height: 2.5rem;
        min-width: 12.5rem;
    }

    .status-toggle-thumb {
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        width: calc(50% - 0.25rem);
        height: calc(100% - 0.5rem);
        border-radius: 999px;
        background: var(--mark-ok);
        box-shadow: var(--lift);
        transition:
            transform var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out);
    }

    .status-toggle[aria-checked='false'] .status-toggle-thumb {
        transform: translateX(100%);
        background: var(--mark-alert);
    }

    .status-toggle-label {
        position: relative;
        z-index: 1;
        flex: 1;
        text-align: center;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--ink-faint);
        transition: color var(--duration-fast) var(--ease-out);
    }

    .status-toggle[aria-checked='true'] [data-on] {
        color: var(--on-mark-ok);
    }

    .status-toggle[aria-checked='false'] [data-off] {
        color: #fff;
    }

    /* En modo oscuro --mark-ok y --mark-alert se aclaran (para leerse bien
       como texto/ícono sobre fondos oscuros) — sobre el thumb sólido eso
       invierte el contraste, así que el texto pasa a oscuro ahí. */
    [data-theme='dark'] .status-toggle[aria-checked='false'] [data-off] {
        color: var(--ledger);
    }

    .admin-sidebar {
        background: var(--rail);
        color: var(--rail-ink);
        box-shadow: inset -3px 0 0 0 var(--rail-edge);
    }

    .admin-sidebar-brand {
        border-bottom: 1px solid color-mix(in srgb, var(--rail-edge) 32%, transparent);
    }

    .admin-nav-link {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        position: relative;
        border-radius: 8px;
        padding: 0.55rem 0.85rem;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--rail-mute);
        text-decoration: none;
        transition:
            background-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
    }

    .admin-nav-link svg {
        opacity: 0.75;
    }

    .admin-nav-link:hover svg,
    .admin-nav-link.is-active svg {
        opacity: 1;
    }

    .admin-nav-link:hover {
        background: var(--rail-hover);
        color: var(--rail-ink);
    }

    .admin-nav-link.is-active {
        background: var(--rail-active);
        color: var(--rail-ink);
        font-weight: 500;
    }

    .admin-nav-link.is-active::after {
        content: '';
        position: absolute;
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.2rem;
        height: 2px;
        border-radius: 999px;
        background: var(--rail-edge);
    }

    .admin-nav-summary {
        display: flex;
        cursor: pointer;
        list-style: none;
        align-items: center;
        gap: 0.65rem;
        border-radius: 8px;
        padding: 0.55rem 0.65rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rail-ink);
        transition: background-color var(--duration-fast) var(--ease-out);
    }

    .admin-nav-summary::-webkit-details-marker {
        display: none;
    }

    .admin-nav-summary:hover {
        background: var(--rail-hover);
    }

    .admin-nav-icon {
        display: flex;
        height: 2rem;
        width: 2rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: color-mix(in srgb, #fff 8%, transparent);
        color: var(--rail-mute);
    }

    .admin-nav-icon.is-active {
        background: color-mix(in srgb, var(--stamp) 28%, transparent);
        color: var(--rail-ink);
    }

    .admin-nav-divider {
        margin: 0.65rem 0;
        border-top: 1px solid color-mix(in srgb, var(--rail-edge) 28%, transparent);
    }

    .admin-topbar {
        border-bottom: 1px solid var(--rule);
        background: color-mix(in srgb, var(--paper) 86%, transparent);
        backdrop-filter: blur(10px);
    }

    .admin-avatar {
        display: inline-flex;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--blotter);
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--navy);
    }

    .user-menu {
        border: 1px solid var(--rule);
        border-radius: 12px;
        background: var(--paper);
        box-shadow: var(--lift-lg);
    }

    .user-menu-item {
        display: block;
        width: 100%;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        text-align: left;
        font-size: 0.875rem;
        color: var(--mark-alert);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .user-menu-item:hover {
        background: var(--mark-alert-wash);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--ink-mute);
        text-decoration: none;
    }

    .back-link:hover {
        color: var(--ink);
    }

    .meta-label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    .meta-value {
        margin-top: 0.2rem;
        color: var(--ink);
        font-weight: 500;
    }

    .panel-inset {
        border: 1px solid var(--rule);
        border-radius: 12px;
        background: var(--ledger);
        padding: 1.15rem;
    }

    .alert-block {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--rule);
        padding: 0.7rem 0.85rem;
        font-size: 0.875rem;
    }

    .alert-block.is-late {
        border-color: color-mix(in srgb, var(--stamp) 36%, var(--rule));
        background: var(--mark-late-wash);
        color: var(--mark-late);
    }

    .alert-block.is-alert {
        border-color: color-mix(in srgb, var(--stamp) 36%, var(--rule));
        background: var(--mark-alert-wash);
        color: var(--mark-alert);
    }

    .table-avatar {
        display: flex;
        height: 2.25rem;
        width: 2.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 999px;
        border: 1px solid var(--rule);
        background: var(--blotter);
        color: var(--ink-faint);
        transition: border-color var(--duration-fast) var(--ease-out);
    }

    a.table-avatar {
        cursor: pointer;
    }

    a.table-avatar:hover {
        border-color: var(--stamp);
    }

    .table-avatar img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .avatar-upload {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .avatar-upload-preview {
        position: relative;
        display: flex;
        height: 4.5rem;
        width: 4.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 999px;
        border: 2px solid var(--rule);
        background: var(--blotter);
        color: var(--ink-faint);
        padding: 0;
        cursor: pointer;
        transition: border-color var(--duration-fast) var(--ease-out);
    }

    .avatar-upload-preview:hover:not(:disabled) {
        border-color: var(--stamp);
        color: var(--stamp);
    }

    .avatar-upload-preview:disabled {
        cursor: not-allowed;
    }

    .avatar-upload-preview img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .avatar-upload-spinner {
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
        background: rgb(7 31 66 / 0.45);
    }

    .avatar-upload-spinner::before {
        content: '';
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 999px;
        border: 2px solid rgb(255 255 255 / 0.35);
        border-top-color: #fff;
        animation: avatar-spin 0.7s linear infinite;
    }

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

    /* Selector de archivo (plan de estudios PDF) — antes un <input
       type="file"> nativo puro ("Seleccionar archivo · Ningún archivo
       seleccionado"), sin ningún estilo del sistema. */
    .file-upload-trigger {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        gap: 0.85rem;
        overflow: hidden;
        border: 2px dashed var(--rule-strong);
        border-radius: 12px;
        background: var(--blotter);
        padding: 0.85rem 1rem;
        text-align: left;
        cursor: pointer;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out);
    }

    .file-upload-trigger:hover:not(:disabled) {
        border-color: var(--stamp);
        background: var(--stamp-wash);
    }

    .file-upload-trigger:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .file-upload-icon {
        display: flex;
        height: 2.25rem;
        width: 2.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--navy) 12%, var(--paper));
        color: var(--navy);
    }

    .file-upload-name {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
    }

    .file-upload-hint {
        display: block;
        margin-top: 0.1rem;
        font-size: 0.75rem;
        color: var(--ink-faint);
    }

    .file-upload-spinner {
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
        background: rgb(7 31 66 / 0.45);
    }

    .file-upload-spinner::before {
        content: '';
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 999px;
        border: 2px solid rgb(255 255 255 / 0.35);
        border-top-color: #fff;
        animation: avatar-spin 0.7s linear infinite;
    }

    .photo-tile {
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--rule);
        background: var(--paper);
    }

    .photo-tile img {
        outline: 1px solid rgb(0 0 0 / 0.08);
        outline-offset: -1px;
    }

    .photo-empty {
        display: flex;
        height: 9rem;
        align-items: center;
        justify-content: center;
        background: var(--ledger);
        font-size: 0.75rem;
        color: var(--ink-faint);
    }

    .photo-caption {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ink-mute);
    }

    .topic-list-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 8px;
        border: 1px solid var(--rule);
        background: var(--paper);
        padding: 0.4rem 0.5rem;
    }

    .login-brand {
        background: #0b2c5e;
        color: #f0f4fa;
    }

    /* La regla global `h1 { color: var(--ink) }` (@layer base) aplica
       directo sobre el elemento y gana por sobre el color heredado de
       .login-brand — en modo claro --ink es casi negro, así que el
       título quedaba prácticamente invisible sobre el navy. */
    .login-brand h1,
    .login-brand h2 {
        color: inherit;
    }

    .login-brand-copy {
        color: #b4c6de;
    }

    /* Vuelta al layout centrado de un solo panel (el riel lateral oscuro
       no gustó — se sentía a menú/panel admin, y le quitaba ancho al
       contenido real). En su lugar: fondo con textura/degradado propio
       (en vez de un `--ledger` liso) para que el espacio alrededor de la
       tarjeta se sienta diseñado, no vacío. */
    .kiosk-shell {
        min-height: 100dvh;
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.5;
        background:
            radial-gradient(ellipse 65% 50% at 12% -10%, color-mix(in srgb, var(--stamp) 16%, transparent), transparent 55%),
            radial-gradient(ellipse 60% 45% at 100% 15%, color-mix(in srgb, var(--navy) 14%, transparent), transparent 50%),
            radial-gradient(ellipse 70% 55% at 50% 115%, color-mix(in srgb, var(--navy-lift) 12%, transparent), transparent 55%),
            var(--ledger);
    }

    .kiosk-shell .font-heading,
    .kiosk-shell .kiosk-title,
    .kiosk-shell .kiosk-display,
    .kiosk-shell h1,
    .kiosk-shell h2 {
        font-family: var(--font-heading);
    }

    .kiosk-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.5rem;
        background: color-mix(in srgb, var(--paper) 78%, transparent);
        backdrop-filter: blur(10px);
    }

    .kiosk-admin-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--ink-mute);
        text-decoration: none;
    }

    .kiosk-admin-link:hover {
        color: var(--stamp);
    }

    .kiosk-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 2.5rem 2rem;
        text-align: center;
    }

    .kiosk-main.is-form {
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 1rem;
        text-align: left;
        min-height: 0;
        overflow: auto;
    }

    .kiosk-card {
        position: relative;
        width: 100%;
        max-width: 40rem;
        overflow: hidden;
        border-radius: 22px;
        border: 1px solid var(--rule);
        background: var(--paper);
        box-shadow: var(--lift);
        padding: 3rem;
    }

    .kiosk-card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, #071f42 0%, #071f42 55%, var(--stamp) 55%, var(--stamp) 100%);
    }

    .kiosk-card-wide {
        max-width: 52rem;
        text-align: left;
    }

    /* Para pantallas con varias tarjetas lado a lado (elegir clase) — usar
       mejor el ancho real de una tablet en vez de quedarse en el mismo
       máximo pensado para una tarjeta de un solo bloque. */
    .kiosk-card-xwide {
        max-width: 74rem;
        text-align: left;
    }

    /* Confirmación de guardado — breve y pasiva, no otro bloque de 3rem
       de padding como el resto del flujo. Bastante más chica que
       `.kiosk-card` base para que se lea como "aviso", no como paso. */
    .kiosk-card-compact {
        max-width: 24rem;
        padding: 1.75rem 2.25rem;
    }

    .kiosk-success-card {
        animation: kiosk-success-pop var(--duration) var(--ease-out);
    }

    .kiosk-success-icon {
        display: flex;
        height: 2.75rem;
        width: 2.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: var(--mark-ok);
        color: var(--on-mark-ok);
    }

    .kiosk-success-title {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ink);
    }

    .kiosk-success-name {
        margin-top: -0.4rem;
        font-size: 0.9375rem;
        color: var(--ink-mute);
    }

    @keyframes kiosk-success-pop {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(4px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .kiosk-fingerprint {
        position: relative;
        display: flex;
        height: 9.5rem;
        width: 9.5rem;
        margin-inline: auto;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 3px solid var(--navy);
        background: color-mix(in srgb, var(--stamp) 8%, var(--paper));
        color: var(--stamp);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--navy) 10%, transparent);
    }

    .kiosk-fingerprint::before {
        content: '';
        position: absolute;
        inset: -14px;
        border-radius: 9999px;
        border: 2px dashed color-mix(in srgb, var(--stamp) 50%, transparent);
        animation: kiosk-pulse-ring 2.4s var(--ease-out) infinite;
    }

    .kiosk-fingerprint.is-ok {
        border-color: var(--navy);
        color: var(--navy);
        background: var(--mark-ok-wash);
    }

    .kiosk-fingerprint.is-ok::before,
    .kiosk-fingerprint.is-error::before,
    .kiosk-fingerprint.is-closed::before {
        display: none;
    }

    .kiosk-fingerprint.is-error,
    .kiosk-fingerprint.is-closed {
        border-color: var(--mark-alert);
        color: var(--mark-alert);
        background: var(--mark-alert-wash);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--stamp) 12%, transparent);
    }

    .kiosk-status {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 999px;
        border: 1.5px solid var(--rule);
        background: var(--paper);
        padding: 0.5rem 1.15rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--navy);
    }

    .kiosk-status::before {
        content: '';
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 9999px;
        background: var(--stamp);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 25%, transparent);
        animation: kiosk-dot 1.4s ease-in-out infinite;
    }

    .kiosk-status.is-manual::before {
        animation: none;
        background: var(--ink-faint);
        box-shadow: none;
    }

    .kiosk-status.is-closed {
        color: var(--mark-alert);
        border-color: color-mix(in srgb, var(--stamp) 40%, var(--rule));
    }

    .kiosk-status.is-closed::before {
        background: var(--mark-alert);
        animation: none;
        box-shadow: none;
    }

    .kiosk-status.is-ok::before {
        background: var(--navy);
        animation: none;
        box-shadow: none;
    }

    .kiosk-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 3.75rem;
        padding-inline: 2rem;
        border-radius: 13px;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        border: 0;
        text-decoration: none;
        transition:
            transform var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out);
    }

    .kiosk-btn:active:not(:disabled) {
        transform: scale(0.97);
    }

    .kiosk-btn-primary {
        background: var(--stamp);
        color: var(--on-stamp);
    }

    .kiosk-btn-primary:hover:not(:disabled) {
        background: var(--stamp-press);
    }

    .kiosk-btn-ghost {
        background: var(--paper);
        color: var(--navy);
        border: 1.5px solid var(--rule-strong);
    }

    .kiosk-btn-ghost:hover:not(:disabled) {
        border-color: var(--stamp);
        background: var(--stamp-wash);
        color: var(--stamp);
    }

    /* Para botones dentro de barras angostas (cabecera del formulario) —
       el tamaño normal de .kiosk-btn es demasiado alto ahí. */
    .kiosk-btn-sm {
        min-height: 2.5rem;
        padding-inline: 1.1rem;
        font-size: 0.9375rem;
    }

    /* Campo a escala de kiosko (modo manual, sin lector) — un docente lo
       llena de pie, a veces con apuro, en una tablet a más distancia que
       una pantalla de escritorio. `.form-input`/`.form-label` (2.25rem,
       0.75rem) son para el panel admin, muy chicos acá. */
    .kiosk-field-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    .kiosk-input {
        width: 100%;
        height: 3.75rem;
        border: 2px solid var(--rule-strong);
        border-radius: 12px;
        background: var(--paper);
        padding: 0 1.15rem;
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--ink);
        text-align: left;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
    }

    .kiosk-input:focus {
        border-color: var(--stamp);
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .kiosk-input:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Curso/ciclo/periodo cuando la clase viene de una asignación elegida
       — ni siquiera es un <select> deshabilitado (que igual invita a
       clickear), es un valor fijo mostrado tal cual, mismo criterio que
       .form-static en el panel admin. */
    .kiosk-static {
        display: flex;
        align-items: center;
        height: 3.75rem;
        border: 2px solid var(--rule);
        border-radius: 12px;
        background: var(--ledger);
        padding: 0 1.15rem;
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--ink-mute);
    }

    /* Pantalla "Confirmar registro" — datos agrupados por bloque temático
       en vez de una sola grilla plana de 9 campos iguales, y valores a
       escala de kiosko (antes reusaba .meta-value/.meta-label del panel
       admin, se leía chico y sin jerarquía). */
    .kiosk-summary-value {
        margin-top: 0.3rem;
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--ink);
    }

    /* Pantalla "Confirmar registro" — panel de detalle bajo la card del
       curso (misma pieza visual que el selector). */
    .kiosk-confirm-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    @media (max-width: 640px) {
        .kiosk-confirm-grid {
            grid-template-columns: 1fr;
        }
    }

    .kiosk-confirm-panel {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        background: var(--paper);
        border: 1px solid var(--rule);
        padding: 1.15rem 1.25rem 1.25rem;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
    }

    .kiosk-confirm-panel::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--navy);
    }

    .kiosk-confirm-panel.is-stamp::before {
        background: var(--stamp);
    }

    .kiosk-confirm-head {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 1rem;
    }

    .kiosk-confirm-head-icon {
        display: flex;
        height: 2.25rem;
        width: 2.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: color-mix(in srgb, var(--navy) 14%, var(--paper));
        color: var(--navy);
    }

    .kiosk-confirm-panel.is-stamp .kiosk-confirm-head-icon {
        background: var(--stamp-wash);
        color: var(--stamp);
    }

    .kiosk-confirm-head-title {
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink);
    }

    .kiosk-confirm-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 1rem;
    }

    .kiosk-confirm-fact {
        min-width: 0;
    }

    .kiosk-confirm-fact.is-wide {
        grid-column: 1 / -1;
    }

    .kiosk-confirm-fact dt {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    .kiosk-confirm-fact dd {
        margin-top: 0.2rem;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        font-weight: 650;
        line-height: 1.35;
        color: var(--ink);
        word-break: break-word;
    }

    .kiosk-confirm-fact dd.num {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }

    .kiosk-confirm-rows {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .kiosk-confirm-row {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .kiosk-confirm-row-icon {
        display: flex;
        height: 2rem;
        width: 2rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--blotter);
        color: var(--ink-mute);
    }

    .kiosk-confirm-row-body {
        min-width: 0;
    }

    /* El campo de identificación es la única cosa en su pantalla — se
       gana el trato de "hero", centrado y más grande que un campo más
       dentro del formulario largo de la clase. */
    .kiosk-input-lg {
        height: 4.75rem;
        font-size: 2rem;
        text-align: center;
    }

    select.kiosk-input {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2.75rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d526c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1.1rem;
    }

    select.kiosk-input:disabled {
        background-image: none;
    }

    input[type='date'].kiosk-input::-webkit-calendar-picker-indicator,
    input[type='time'].kiosk-input::-webkit-calendar-picker-indicator {
        opacity: 0.6;
        cursor: pointer;
        padding: 0.35rem;
    }

    .kiosk-choice {
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        border-radius: 12px;
        border: 1px solid var(--rule);
        background: var(--paper);
        padding: 0.9rem 1rem;
        text-align: left;
        cursor: pointer;
        transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
    }

    .kiosk-choice:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .kiosk-choice:hover:not(:disabled) {
        border-color: var(--stamp);
        background: var(--stamp-wash);
    }

    /* "¿Cuál clase vas a registrar?" — misma card siempre (1 o N, cualquier
       estado). Ancho acotado para que una sola no se estire a todo el panel;
       estados con semántica de color propia (no todo en rojo). */
    .kiosk-assignment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16.5rem, 19.5rem));
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .kiosk-assignment-grid[data-count="1"] {
        grid-template-columns: minmax(16.5rem, 22rem);
    }

    .kiosk-assignment-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        width: 100%;
        min-height: 11.5rem;
        border-radius: 16px;
        border: 1px solid var(--rule);
        background: var(--paper);
        padding: 1.15rem 1.2rem 1.05rem 1.3rem;
        text-align: left;
        overflow: hidden;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out),
            transform var(--duration-fast) var(--ease-out);
    }

    .kiosk-assignment-card::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--navy);
    }

    .kiosk-assignment-card.is-open::before {
        background: var(--mark-ok);
    }

    .kiosk-assignment-card.is-recorded::before {
        background: var(--mark-info);
    }

    .kiosk-assignment-card.is-too_early::before {
        background: var(--stamp);
    }

    .kiosk-assignment-card.is-expired::before {
        background: color-mix(in srgb, var(--ink-mute) 70%, var(--rule));
    }

    .kiosk-assignment-card:not(.is-static) {
        cursor: pointer;
    }

    .kiosk-assignment-card:hover:not(:disabled):not(.is-static) {
        border-color: color-mix(in srgb, var(--mark-ok) 45%, var(--rule));
        background: color-mix(in srgb, var(--mark-ok-wash) 70%, var(--paper));
        box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--navy) 55%, transparent);
        transform: translateY(-2px);
    }

    .kiosk-assignment-card:disabled {
        cursor: not-allowed;
        background: color-mix(in srgb, var(--blotter) 55%, var(--paper));
    }

    .kiosk-assignment-card.is-static {
        cursor: default;
        background: var(--paper);
        border-color: var(--rule);
    }

    .kiosk-assignment-card.is-static .kiosk-assignment-course {
        font-size: 1.25rem;
    }

    .kiosk-assignment-card.is-static .kiosk-assignment-chip {
        font-size: 1.125rem;
        padding: 0.55rem 1.1rem;
        gap: 0.5rem;
    }

    .kiosk-assignment-card.is-static .kiosk-assignment-chip-icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .kiosk-assignment-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .kiosk-assignment-course {
        flex: 1;
        min-width: 0;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .kiosk-assignment-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .kiosk-assignment-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 999px;
        background: var(--mark-info-wash);
        padding: 0.4rem 0.85rem;
        font-size: 0.9375rem;
        font-weight: 650;
        color: var(--navy);
    }

    .kiosk-assignment-chip-icon {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
    }

    .kiosk-assignment-chip.is-group {
        background: var(--mark-info-wash);
        color: var(--navy);
    }

    .kiosk-assignment-chip.is-cycle {
        background: color-mix(in srgb, var(--navy-lift) 18%, var(--paper));
        color: var(--navy-lift);
    }

    .kiosk-assignment-chip.is-time {
        background: var(--stamp-wash);
        color: var(--stamp-press);
    }

    .kiosk-assignment-status {
        margin-top: auto;
        min-height: 1.2rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ink-faint);
    }

    .kiosk-assignment-card.is-open .kiosk-assignment-status {
        color: var(--mark-ok);
    }

    .kiosk-assignment-card.is-too_early .kiosk-assignment-status {
        color: var(--mark-late);
    }

    .kiosk-assignment-card.is-expired .kiosk-assignment-status {
        color: var(--ink-mute);
    }

    .kiosk-assignment-card.is-recorded .kiosk-assignment-status {
        color: var(--mark-info);
    }

    /* Etiqueta con ícono para el nombre del docente (kicker plano se veía
       desnudo) — reusada en cada paso donde ya está identificado. */
    .kiosk-title-sm {
        font-size: 1.15rem;
    }

    /* Identidad confirmada — reemplaza la pantalla aparte de "¿eres tú?"
       con botón "Continuar". Foto + nombre al toque, sin pedir una
       acción extra: la propia huella/documento ya fue la confirmación.
       Header pasivo arriba de la tarjeta, separado de las clases (la
       parte en la que sí hay que tocar algo) por una regla sutil. */
    .kiosk-identity {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--rule);
    }

    .kiosk-identity-photo-wrap {
        position: relative;
        flex-shrink: 0;
        height: 5.5rem;
        width: 5.5rem;
    }

    .kiosk-identity-photo {
        height: 100%;
        width: 100%;
        border-radius: 9999px;
        border: 3px solid var(--navy);
        object-fit: cover;
        background: var(--ledger);
    }

    .kiosk-identity-photo-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: var(--blotter);
    }

    .kiosk-identity-badge {
        position: absolute;
        right: -0.2rem;
        bottom: -0.2rem;
        display: flex;
        height: 1.75rem;
        width: 1.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 2.5px solid var(--paper);
        background: var(--stamp);
        color: var(--on-stamp);
    }

    .kiosk-identity-text {
        min-width: 0;
        text-align: left;
    }

    .kiosk-identity-name {
        margin-top: 0.2rem;
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.2;
        color: var(--ink);
    }

    .kiosk-identity-doc {
        margin-top: 0.15rem;
        font-size: 0.875rem;
        color: var(--ink-mute);
    }

    .kiosk-identity-campus {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.3rem;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--navy);
    }

    /* La pantalla "sin clases hoy" sigue centrada (es un callejón sin
       salida, no hay nada que elegir después) — la identidad ahí se
       apila en vez de ir en fila. */
    .kiosk-identity.is-centered {
        flex-direction: column;
        text-align: center;
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .kiosk-identity.is-centered .kiosk-identity-text {
        text-align: center;
    }

    .kiosk-identity.is-centered .kiosk-identity-campus {
        justify-content: center;
    }

    /* Cabecera del formulario/confirmación: la misma identidad pero sin
       el espacio de "pantalla propia" (foto chica, sin kicker redundante,
       sin el borde/margen que la separaba de las tarjetas de abajo) —
       acá comparte la cabecera con el título y el botón Cancelar. */
    .kiosk-identity.is-compact {
        gap: 0.65rem;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .kiosk-identity.is-compact .kiosk-identity-photo-wrap {
        height: 2.75rem;
        width: 2.75rem;
    }

    .kiosk-identity.is-compact .kiosk-identity-badge {
        height: 1.1rem;
        width: 1.1rem;
        border-width: 2px;
    }

    .kiosk-identity.is-compact .kiosk-identity-badge svg {
        height: 0.6rem;
        width: 0.6rem;
    }

    .kiosk-identity.is-compact .kicker {
        display: none;
    }

    .kiosk-identity.is-compact .kiosk-identity-name {
        margin-top: 0;
        font-size: 1.0625rem;
    }

    .kiosk-identity.is-compact .kiosk-identity-doc,
    .kiosk-identity.is-compact .kiosk-identity-campus {
        margin-top: 0.1rem;
        font-size: 0.75rem;
    }

    /* Casillas de número de documento — una por carácter, en vez de un
       input largo vacío que no comunica cuántos dígitos hacen falta. */
    .kiosk-otp {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
    }

    .kiosk-otp-box {
        height: 4.75rem;
        width: 3.75rem;
        border: 2px solid var(--rule-strong);
        border-radius: 14px;
        background: var(--paper);
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        color: var(--ink);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
    }

    .kiosk-otp-box:focus {
        border-color: var(--stamp);
        outline: none;
        box-shadow: var(--focus-ring);
    }

    @media (max-width: 420px) {
        .kiosk-otp-box {
            height: 3.5rem;
            width: 2.65rem;
            font-size: 1.5rem;
        }
    }

    .kiosk-form-sheet {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        border-radius: 16px;
        border: 1px solid var(--rule);
        background: var(--paper);
        overflow: hidden;
        box-shadow: var(--lift);
    }

    .kiosk-form-head {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-bottom: 1px solid var(--rule);
        background: var(--ledger);
        padding: 0.85rem 1.25rem;
    }

    .kiosk-main.is-form .kiosk-form-sheet {
        height: 100%;
        min-height: 0;
    }

    .kiosk-form-body {
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding: 1rem 1.25rem;
    }

    /* En el formulario/confirmación el aviso es un dato de contexto, no la
       protagonista — más chico y compacto que un .alert-block suelto en
       el panel admin. */
    .kiosk-form-sheet .alert-block {
        padding: 0.55rem 0.8rem;
        font-size: 0.8125rem;
        margin-bottom: 0.85rem;
    }

    /* El formulario de la clase tiene 8 campos — a la escala "hero" de
       3.75rem no entra completo sin scroll en una pantalla normal de
       tablet/monitor. Más compacto acá; el resto del kiosko (identificar,
       elegir clase) sigue con el tamaño grande. */
    .kiosk-form-body .kiosk-input,
    .kiosk-form-body .kiosk-static {
        height: 3.15rem;
        font-size: 1.0625rem;
    }

    .kiosk-form-body .kiosk-field-label {
        font-size: 0.75rem;
    }

    .kiosk-form-foot {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 0.5rem;
        border-top: 1px solid var(--rule);
        background: var(--paper);
        padding: 0.85rem 1.25rem;
    }

    .kiosk-display {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 4.2vw, 3rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: var(--ink);
    }

    .kiosk-title {
        font-family: var(--font-heading);
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
    }

    /* El kicker base (0.6875rem) está pensado para las tablas/formularios
       chicos del panel admin — en el kiosko, visto de pie y a más
       distancia, se lee menudo. Un poco más grande solo acá. */
    .kiosk-main .kicker,
    .kiosk-form-head .kicker {
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
    }

    @keyframes kiosk-pulse-ring {
        0% {
            transform: scale(0.92);
            opacity: 0.85;
        }
        70% {
            transform: scale(1.08);
            opacity: 0;
        }
        100% {
            transform: scale(1.08);
            opacity: 0;
        }
    }

    @keyframes kiosk-dot {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.45;
            transform: scale(0.85);
        }
    }
}

/* ── Guía pública (/guia) ─────────────────────────────────────────── */
.guide-body {
    background:
        radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--stamp) 10%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 0%, color-mix(in srgb, var(--navy) 12%, transparent), transparent 50%),
        var(--ledger);
    color: var(--ink);
    font-family: var(--font-sans);
}

.guide-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.65rem 1.25rem;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}

.guide-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.guide-brand-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.guide-brand-name {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 650;
}

.guide-brand-sub {
    font-size: 0.7rem;
    color: var(--ink-mute);
}

.guide-top-nav {
    display: none;
    align-items: center;
    gap: 0.35rem;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .guide-top-nav {
        display: flex;
    }
}

.guide-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-mute);
    text-decoration: none;
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.guide-pill:hover {
    background: var(--blotter);
    color: var(--ink);
}

.guide-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.guide-btn-ghost {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-mute);
    text-decoration: none;
    border: 1px solid var(--rule);
    background: var(--paper);
}

.guide-btn-ghost:hover {
    color: var(--ink);
    border-color: var(--rule-strong);
}

.guide-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--on-stamp);
    background: linear-gradient(135deg, var(--stamp) 0%, var(--stamp-press) 100%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--stamp-press) 40%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--stamp) 70%, transparent);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.guide-launch:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--stamp-press) 40%, transparent), 0 10px 18px -8px color-mix(in srgb, var(--stamp) 80%, transparent);
}

.guide-launch:active {
    transform: translateY(0);
}

.guide-launch-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 0.65rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    background: color-mix(in srgb, var(--navy) 8%, var(--paper));
    border: 1px dashed color-mix(in srgb, var(--navy) 28%, transparent);
}

.guide-launch-login:hover {
    background: color-mix(in srgb, var(--navy) 14%, var(--paper));
}

.guide-hero {
    display: grid;
    gap: 2rem;
    max-width: 68rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 1.5rem;
}

@media (min-width: 960px) {
    .guide-hero {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        padding-top: 3.25rem;
    }
}

.guide-kicker {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stamp);
}

.guide-hero h1 {
    margin-top: 0.65rem;
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.guide-lede {
    margin-top: 1rem;
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-mute);
}

.guide-lede strong {
    color: var(--ink);
    font-weight: 650;
}

.guide-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.guide-btn-stamp,
.guide-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.65rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), background var(--duration) var(--ease-out);
}

.guide-btn-stamp {
    color: var(--on-stamp);
    background: var(--stamp);
}

.guide-btn-stamp:hover {
    background: var(--stamp-press);
    transform: translateY(-1px);
}

.guide-btn-outline {
    color: var(--navy);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
}

.guide-btn-outline:hover {
    background: var(--blotter);
}

.guide-hero-art {
    margin: 0;
}

.guide-hero-art img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border: 1px solid var(--rule);
    box-shadow: var(--lift-lg);
    background: var(--paper);
}

.guide-hero-art figcaption {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
    text-align: center;
}

.guide-compare {
    display: grid;
    gap: 1rem;
    max-width: 68rem;
    margin: 0.5rem auto 0;
    padding: 0 1.25rem 2rem;
}

@media (min-width: 800px) {
    .guide-compare {
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
    }
}

.guide-compare-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.35rem 1.35rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--lift);
}

.guide-compare-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--navy);
}

.guide-compare-card.is-cycle::before {
    background: var(--stamp);
}

.guide-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    color: var(--navy);
    background: color-mix(in srgb, var(--navy) 12%, var(--paper));
    margin-bottom: 0.85rem;
}

.guide-compare-card.is-cycle .guide-compare-icon {
    color: var(--stamp);
    background: var(--stamp-wash);
}

.guide-compare-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.guide-compare-example {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.guide-compare-card > p {
    color: var(--ink-mute);
    line-height: 1.5;
}

.guide-compare-card ul {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.guide-compare-card li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    color: var(--ink-mute);
}

.guide-compare-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--navy);
}

.guide-compare-card.is-cycle li::before {
    background: var(--stamp);
}

.guide-compare-vs {
    display: none;
    align-self: center;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

@media (min-width: 800px) {
    .guide-compare-vs {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        background: var(--paper);
        border: 1px solid var(--rule);
    }
}

.guide-chapter {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.5rem;
    scroll-margin-top: 4.5rem;
}

.guide-chapter + .guide-chapter {
    border-top: 1px dashed var(--rule);
}

.guide-chapter-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.guide-step-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-navy);
    background: var(--navy);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, black 18%, transparent);
}

.guide-step-badge.is-cycle {
    color: var(--on-stamp);
    background: var(--stamp);
}

.guide-chapter-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 750;
}

.guide-chapter-lede {
    margin-top: 0.45rem;
    max-width: 42rem;
    color: var(--ink-mute);
    line-height: 1.55;
}

.guide-steps {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 800px) {
    .guide-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.guide-step {
    display: flex;
    gap: 0.75rem;
    border-radius: 0.85rem;
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
}

.guide-step-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--on-navy);
    background: var(--navy);
}

.guide-step-num.is-cycle {
    color: var(--on-stamp);
    background: var(--stamp);
}

.guide-step h3 {
    font-size: 0.95rem;
    font-weight: 700;
}

.guide-step p {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-mute);
}

.guide-shot {
    margin: 0 0 1.25rem;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--lift-lg);
}

.guide-shot-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    background: color-mix(in srgb, var(--navy) 6%, var(--blotter));
    border-bottom: 1px solid var(--rule);
}

.guide-shot-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink-faint) 55%, transparent);
}

.guide-shot-dot:nth-child(1) {
    background: #ff5f57;
}
.guide-shot-dot:nth-child(2) {
    background: #febc2e;
}
.guide-shot-dot:nth-child(3) {
    background: #28c840;
}

.guide-shot-url {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.guide-shot-body {
    display: grid;
    gap: 1.25rem;
    padding: 1.1rem;
}

@media (min-width: 900px) {
    .guide-shot-body {
        grid-template-columns: 1.35fr 0.9fr;
        align-items: start;
    }
}

.guide-shot figcaption {
    padding: 0 1.1rem 1rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.guide-fake-catalog {
    border-radius: 0.75rem;
    border: 1px solid var(--rule);
    overflow: hidden;
    background: var(--ledger);
}

.guide-fake-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.guide-fake-head strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.guide-fake-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 0.45rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--on-stamp);
    background: var(--stamp);
}

.guide-fake-query {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.guide-fake-input,
.guide-fake-select {
    border-radius: 0.4rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
    background: var(--blotter);
    border: 1px solid var(--rule);
}

.guide-fake-input {
    flex: 1;
}

.guide-fake-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: var(--paper);
}

.guide-fake-table th,
.guide-fake-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.guide-fake-table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: color-mix(in srgb, var(--blotter) 70%, var(--paper));
}

.guide-fake-table tr.is-active-row {
    background: color-mix(in srgb, var(--mark-ok) 8%, var(--paper));
}

.guide-badge-ok,
.guide-badge-off {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.guide-badge-ok {
    color: var(--mark-ok);
    background: var(--mark-ok-wash);
}

.guide-badge-off {
    color: var(--mark-alert);
    background: var(--mark-alert-wash);
}

.guide-fake-actions {
    display: flex;
    gap: 0.35rem;
}

.guide-ico-edit,
.guide-ico-trash,
.guide-ico-activate {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.3rem;
    background: var(--blotter);
    border: 1px solid var(--rule);
    position: relative;
}

.guide-ico-edit::before {
    content: '✎';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    color: var(--navy);
}

.guide-ico-trash::before {
    content: '🗑';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
}

.guide-ico-activate::before {
    content: '↻';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: var(--mark-ok);
    font-weight: 700;
}

.guide-fake-more {
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
    background: var(--paper);
}

.guide-pins {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.guide-pins li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.guide-pin {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--on-navy);
    background: var(--navy);
}

.guide-pin.is-cycle {
    color: var(--on-stamp);
    background: var(--stamp);
}

.guide-pins strong {
    display: block;
    font-size: 0.875rem;
}

.guide-pins p {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-mute);
}

.guide-tip,
.guide-warn {
    display: flex;
    gap: 0.85rem;
    border-radius: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--rule);
}

.guide-tip {
    background: var(--mark-info-wash);
}

.guide-warn {
    background: var(--stamp-wash);
}

.guide-tip-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    color: var(--navy);
    background: var(--paper);
}

.guide-warn .guide-tip-icon {
    color: var(--stamp);
}

.guide-tip h3,
.guide-warn h3 {
    font-size: 0.9rem;
    font-weight: 700;
}

.guide-tip p,
.guide-warn p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-mute);
}

.guide-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.guide-ladder-rung {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.45rem;
    border-radius: 0.55rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--ink-mute);
    background: var(--paper);
    border: 1px solid var(--rule);
}

.guide-ladder-rung.is-lit {
    color: var(--on-stamp);
    background: var(--stamp);
    border-color: transparent;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--stamp) 70%, transparent);
}

.guide-ladder-caption {
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.guide-next {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.guide-next-card {
    border-radius: 1.1rem;
    padding: 1.75rem 1.5rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--navy) 92%, black) 0%, var(--navy-lift) 100%);
    color: var(--on-navy);
    box-shadow: var(--lift-lg);
}

.guide-next-card .guide-kicker {
    color: color-mix(in srgb, var(--stamp) 70%, white);
}

.guide-next-card h2 {
    margin-top: 0.4rem;
    color: inherit;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.guide-next-card > p {
    margin-top: 0.5rem;
    max-width: 36rem;
    color: color-mix(in srgb, var(--on-navy) 78%, transparent);
}

.guide-next-card .guide-btn-outline {
    border-color: color-mix(in srgb, white 35%, transparent);
    background: color-mix(in srgb, white 10%, transparent);
    color: white;
}

.guide-next-card .guide-btn-outline:hover {
    background: color-mix(in srgb, white 18%, transparent);
}

.guide-footer {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-mute);
}

.guide-footer a {
    color: var(--navy);
    font-weight: 600;
}

.guide-footer-mute {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* Guía embebida en el panel admin (mismo sidebar) */
.guide-embedded .guide-hero {
    padding-top: 0.5rem;
    padding-inline: 0;
    max-width: none;
}

.guide-embedded .guide-compare,
.guide-embedded .guide-chapter,
.guide-embedded .guide-next,
.guide-embedded .guide-footer {
    max-width: none;
    padding-inline: 0;
}

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

    .kiosk-fingerprint::before,
    .kiosk-status::before {
        animation: none !important;
    }

    .btn-primary:active,
    .kiosk-btn:active,
    .theme-toggle:active {
        transform: none;
    }
}

/* —— Asignaciones: tablero semanal / cargas —— */
.schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-context {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.15rem 1.25rem;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--lift);
}

.schedule-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stamp);
}

.schedule-context h2 {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.schedule-context-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.schedule-context-period {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 11rem;
}

.schedule-context-period label {
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.schedule-context-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.schedule-stat {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-mute);
}

.schedule-stat strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.schedule-view-toggle {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--ledger);
    border: 1px solid var(--rule);
}

.schedule-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-mute);
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.schedule-view-btn.is-active {
    background: var(--stamp);
    color: #fff;
}

.schedule-toolbar,
.schedule-more-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink-faint) 35%, transparent);
}

.schedule-more-btn {
    height: 2.25rem;
    padding: 0 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 45%, transparent);
    background: var(--ledger);
    color: var(--ink-mute);
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.schedule-more-btn.is-open {
    border-color: var(--stamp);
    color: var(--stamp);
    background: var(--stamp-wash);
}

.schedule-day-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink-faint) 32%, transparent);
}

.schedule-day-picker-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schedule-day-picker-presets {
    display: inline-flex;
    gap: 0.35rem;
}

.schedule-preset-btn {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 40%, transparent);
    background: var(--ledger);
    color: var(--ink-mute);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.schedule-preset-btn:hover {
    border-color: var(--stamp);
    color: var(--stamp);
}

.schedule-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.schedule-pdf-classrooms-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.schedule-pdf-classrooms-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.schedule-pdf-classrooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.45rem;
    max-height: 14rem;
    overflow: auto;
    padding: 0.15rem;
}

.schedule-pdf-classroom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 35%, transparent);
    background: var(--ledger);
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--ink-mute);
    cursor: pointer;
}

.schedule-pdf-classroom.is-on {
    border-color: color-mix(in srgb, var(--stamp) 45%, transparent);
    background: var(--stamp-wash);
    color: var(--ink);
}

.schedule-pdf-classroom input {
    accent-color: var(--stamp);
}

/* Sede del aula, solo cuando el filtro muestra "todas" — dos sedes
   pueden tener una aula con el mismo nombre (ej. "202"), sin esto no
   había forma de distinguirlas en esta lista. */
.schedule-pdf-classroom-campus {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ink-faint);
}

.schedule-day-toggle {
    min-width: 2.75rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 40%, transparent);
    background: var(--ledger);
    color: var(--ink-faint);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.schedule-day-toggle.is-on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.schedule-day-toggle.is-on:nth-child(even) {
    background: var(--stamp);
    border-color: var(--stamp);
}

.schedule-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.schedule-day {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink-faint) 30%, transparent);
    min-height: 16rem;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--navy) 6%, transparent);
}

.schedule-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 22%, transparent);
    background: color-mix(in srgb, var(--navy) 4%, var(--paper));
}

.schedule-day-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.schedule-day-title strong {
    font-size: 0.92rem;
    font-weight: 750;
    color: var(--ink);
}

.schedule-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.schedule-day:nth-child(3n+2) .schedule-day-badge {
    background: var(--stamp);
}

.schedule-day:nth-child(3n) .schedule-day-badge {
    background: color-mix(in srgb, var(--navy) 70%, var(--stamp));
}

.schedule-day-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schedule-day-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem;
    flex: 1;
}

.schedule-day-empty {
    margin: auto;
    padding: 1.25rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.schedule-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
    padding: 0.75rem 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--navy) 5%, var(--paper)) 0%, var(--paper) 100%);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.schedule-chip:hover {
    border-color: color-mix(in srgb, var(--stamp) 55%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--navy) 12%, transparent);
    transform: translateY(-1px);
}

.schedule-chip.is-inactive {
    opacity: 0.55;
}

.schedule-chip-time {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--stamp);
    font-variant-numeric: tabular-nums;
}

.schedule-chip-teacher {
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.25;
    color: var(--ink);
}

.schedule-chip-course {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.schedule-chip-course-name {
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ink-mute);
}

.schedule-chip-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.12rem 0.4rem;
    border-radius: 0.4rem;
    background: var(--navy);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 750;
}

.schedule-chip-room {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.1rem;
    padding-top: 0.4rem;
    border-top: 1px dashed color-mix(in srgb, var(--ink-faint) 35%, transparent);
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--ink-mute);
}

.schedule-chip-meta {
    font-size: 0.68rem;
    color: var(--ink-mute);
    line-height: 1.3;
}

.schedule-loads {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.schedule-load-card {
    border-radius: 1.05rem;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 32%, transparent);
    background: var(--paper);
    overflow: hidden;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--navy) 7%, transparent);
}

.schedule-load-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    padding: 1.25rem 1.4rem 1.15rem;
    background: color-mix(in srgb, var(--navy) 4%, var(--paper));
    border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 22%, transparent);
}

.schedule-load-identity {
    flex: 1 1 18rem;
    min-width: 0;
}

.schedule-load-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.schedule-load-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ink);
}

.schedule-load-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.schedule-load-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink-faint) 28%, transparent);
}

.schedule-load-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.schedule-load-meta-value {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    word-break: break-word;
}

.schedule-load-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.schedule-load-blocks-wrap {
    padding: 0.35rem 0.5rem 0.5rem;
}

.schedule-load-blocks-head,
.schedule-load-blocks li {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(10rem, 1.4fr) minmax(8rem, 1.2fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.95rem 1rem;
}

.schedule-load-blocks-head {
    margin: 0.35rem 0.5rem 0;
    padding-bottom: 0.45rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.schedule-load-blocks {
    list-style: none;
    margin: 0;
    padding: 0 0.35rem 0.35rem;
}

.schedule-load-blocks li {
    margin: 0 0.15rem 0.45rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ink-faint) 22%, transparent);
    background: color-mix(in srgb, var(--ledger) 55%, var(--paper));
}

.schedule-load-blocks li:last-child {
    margin-bottom: 0.15rem;
}

.schedule-load-block-day {
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--ink);
}

.schedule-load-block-time {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--stamp);
    font-variant-numeric: tabular-nums;
}

.schedule-load-block-room {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ink-mute);
}

.schedule-load-block-info {
    display: none;
}

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

    .schedule-load-blocks-head {
        display: none;
    }

    .schedule-load-blocks li {
        grid-template-columns: 1fr auto;
        gap: 0.55rem 0.75rem;
    }

    .schedule-load-block-day {
        grid-column: 1;
    }

    .schedule-load-block-time,
    .schedule-load-block-room {
        grid-column: 1;
    }

    .schedule-load-blocks li .catalog-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
    }
}

.schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent);
    background: color-mix(in srgb, var(--ledger) 65%, var(--paper));
    color: var(--ink-mute);
}

.schedule-empty h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
}

.schedule-empty p {
    margin: 0;
    max-width: 28rem;
    font-size: 0.9rem;
}

.schedule-step-note {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    color: var(--ink-mute);
}

.schedule-locked-identity {
    padding: 0.75rem 0.9rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--navy) 6%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
}

.schedule-locked-line {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

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

@media (max-width: 720px) {
    .schedule-context {
        border-radius: 0.85rem;
    }

    .schedule-board {
        grid-template-columns: 1fr;
    }

    .schedule-day {
        min-height: 0;
    }

    .schedule-day.is-empty {
        display: none;
    }
}