:root {
    color-scheme: light;
    --ink: #17252b;
    --muted: #5d6c72;
    --surface: #ffffff;
    --surface-muted: #eef2f1;
    --surface-subtle: #f7f8f6;
    --surface-elevated: #ffffff;
    --surface-card: #ffffff;
    --surface-faint-card: #f7f8f6;
    --logo-surface: #ffffff;
    --canvas: #f3f5f2;
    --canvas-start: #f3f5f2;
    --school-blue: #087a9d;
    --school-blue-soft: #e3f2f6;
    --primary-on-color: #ffffff;
    --primary-hover: #066c8c;
    --accent: #df693a;
    --accent-soft: #fff0e9;
    --line: #c8d3d1;
    --control-border: #718489;
    --component-border-width: 1.25px;
    --link: #066b8b;
    --focus-ring: rgb(8 122 157 / 24%);
    --success: #167447;
    --success-soft: #edf9f1;
    --success-confirmation: #167447;
    --success-on-confirmation: #ffffff;
    --danger: #b43e38;
    --danger-soft: #fff0ef;
    --shadow: 0 10px 28px rgb(23 37 43 / 9%);
    --operational-shadow: 0 4px 12px rgb(23 37 43 / 8%);
    --operational-nav: #173f4d;
    --operational-nav-text: #dce8eb;
    --neo-control-raised-shadow: 4px 5px 10px rgb(54 77 87 / 18%), -2px -2px 5px rgb(255 255 255 / 78%), inset 0 1px 0 rgb(255 255 255 / 58%);
    --neo-primary-raised-shadow: 0 7px 12px rgb(6 91 128 / 28%), inset 0 1px 0 rgb(255 255 255 / 24%);
    --neo-primary-hover-shadow: 0 10px 18px rgb(6 91 128 / 34%), inset 0 1px 0 rgb(255 255 255 / 28%);
    --neo-primary-pressed-shadow: inset 0 5px 10px rgb(4 69 91 / 52%), inset 0 2px 0 rgb(0 39 53 / 34%);
    --neo-inset-shadow: inset 5px 5px 10px rgb(67 91 101 / 20%), inset -5px -5px 10px rgb(255 255 255 / 90%);
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --canvas-glow-primary: rgb(6 121 181 / 13%);
    --canvas-glow-secondary: rgb(223 98 41 / 11%);
    --layer-navigation: 60;
    --layer-popover: 80;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #edf4f5;
    --muted: #aab8bc;
    --surface: #182326;
    --surface-muted: #202d31;
    --surface-subtle: #1c282c;
    --surface-elevated: #182326;
    --surface-card: #182326;
    --surface-faint-card: #141e21;
    --logo-surface: #ffffff;
    --canvas: #0f1719;
    --canvas-start: #0f1719;
    --school-blue: #59bad4;
    --school-blue-soft: #183943;
    --primary-on-color: #182326;
    --primary-hover: #359ab6;
    --accent: #f17c4d;
    --accent-soft: #3a281f;
    --line: #3b4d52;
    --control-border: #7b8c91;
    --link: #71cbe3;
    --focus-ring: rgb(89 186 212 / 34%);
    --success: #64d29a;
    --success-soft: #173d2b;
    --danger: #ff9d98;
    --danger-soft: #492526;
    --shadow: 0 10px 28px rgb(0 0 0 / 30%);
    --operational-shadow: 0 4px 13px rgb(0 0 0 / 25%);
    --operational-nav: #eaf2f4;
    --operational-nav-text: #53676d;
    --neo-control-raised-shadow: 4px 5px 10px rgb(1 8 12 / 46%), -2px -2px 5px rgb(85 126 142 / 15%), inset 0 1px 0 rgb(199 237 249 / 8%);
    --neo-primary-raised-shadow: 0 7px 12px rgb(0 0 0 / 36%), inset 0 1px 0 rgb(211 243 253 / 14%);
    --neo-primary-hover-shadow: 0 10px 18px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(211 243 253 / 18%);
    --neo-primary-pressed-shadow: inset 0 5px 10px rgb(0 18 25 / 64%), inset 0 2px 0 rgb(0 38 52 / 36%);
    --neo-inset-shadow: inset 5px 5px 10px rgb(1 8 12 / 54%), inset -5px -5px 10px rgb(85 126 142 / 18%);
    --canvas-glow-primary: rgb(73 180 235 / 12%);
    --canvas-glow-secondary: rgb(240 123 70 / 10%);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

@media (display-mode: standalone) {
    html {
        touch-action: pan-x pan-y;
    }
}

body {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% 8%, var(--canvas-glow-primary), transparent 22rem),
        radial-gradient(circle at 8% 92%, var(--canvas-glow-secondary), transparent 20rem),
        linear-gradient(135deg, var(--canvas-start) 0%, var(--canvas) 100%);
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1 {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: -.04em;
    line-height: 1.04;
}

@keyframes panel-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

    .success-transition-fill {
        transform: translate(-50%, -50%) scale(3) !important;
    }

    .success-transition-content,
    .success-transition p {
        opacity: 1 !important;
        transform: none !important;
    }

    .success-transition-check circle,
    .success-transition-check path {
        stroke-dashoffset: 0 !important;
    }
}

.app-background {
    min-height: 100dvh;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;
    padding: 0 0 1.5rem;
    color: var(--muted);
    font-size: .78rem;
}

.app-footer-identity {
    display: grid;
    gap: .15rem;
}

.pwa-install-button .button-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.auth-pwa-install {
    width: 100%;
    margin-top: 1rem;
}

.auth-shell {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 1.5rem;
}

.auth-card {
    position: relative;
    width: min(100%, 34rem);
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    animation: panel-enter 220ms var(--ease-out) both;
}

.auth-card-utility {
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    right: 1.25rem;
}

.theme-toggle-auth {
    display: grid;
}

.auth-card h1 {
    max-width: 18ch;
}

.auth-identity {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    color: var(--school-blue);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-mark {
    position: relative;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--logo-surface);
}

.auth-mark img {
    position: absolute;
    top: -.2rem;
    left: 50%;
    display: block;
    width: auto;
    height: 5.1rem;
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
}

.auth-copy {
    color: var(--muted);
    line-height: 1.6;
}

.form-grid {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

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

label,
.form-field {
    display: grid;
    align-content: start;
    gap: .45rem;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 650;
}

input,
select,
textarea {
    width: 100%;
    min-height: 2.8rem;
    padding: .65rem .75rem;
    border: 1px solid var(--control-border);
    border-radius: .65rem;
    outline: none;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-weight: 400;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

select {
    appearance: auto;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

label em {
    color: var(--muted);
    font-size: .8rem;
    font-style: normal;
    font-weight: 500;
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 2.8rem;
}

.password-field input {
    grid-area: 1 / 1;
    padding-right: 3.75rem;
}

.password-toggle {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    justify-self: end;
    align-self: center;
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: .7rem;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .password-toggle:hover {
        color: var(--ink);
        background: var(--surface-muted);
    }
}

.password-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
}

.password-toggle-icon {
    position: relative;
    display: block;
    width: 1.2rem;
    height: .72rem;
    border: 2px solid currentColor;
    border-radius: 100%;
}

.password-toggle-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
}

.password-toggle-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%) rotate(-38deg);
}

.password-toggle.is-revealed .password-toggle-icon::before {
    display: none;
}

small {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 400;
}

.button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    padding: .65rem 1rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Controles de la interfaz: evitan el callout del navegador sin afectar
 * formularios, textos informativos ni fotografías de evidencia. */
:root :is(
    button,
    .button,
    .brand,
    .main-nav a,
    [data-bottom-navigation] a,
    .order-row-action,
    .photo-source-button
) {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

:root :is(.brand-mark img, .auth-mark img, .button-icon) {
    -webkit-user-drag: none;
    user-drag: none;
}

.button-icon {
    width: 1.16rem;
    height: 1.16rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.asset-mask-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--asset-mask-image);
    -webkit-mask-mode: alpha;
    -webkit-mask-position: var(--asset-mask-position, center);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--asset-mask-size, 104%) auto;
    mask-image: var(--asset-mask-image);
    mask-mode: alpha;
    mask-position: var(--asset-mask-position, center);
    mask-repeat: no-repeat;
    mask-size: var(--asset-mask-size, 104%) auto;
}

/* Centrar el trazo visible de los PNG originales y darle el 90% del ancho del icono. */
.vehicle-type-icon--car {
    --asset-mask-image: url("../images/vehicle-icons/sedan-car.png?v=b1c358259032");
    --asset-mask-size: 96.200%;
    --asset-mask-position: 37.637% -63.736%;
}

.vehicle-type-icon--suv {
    --asset-mask-image: url("../images/vehicle-icons/suv-crossover.png?v=da107afc3d17");
    --asset-mask-size: 93.469%;
    --asset-mask-position: 48.602% 50%;
}

.vehicle-type-icon--motorcycle {
    --asset-mask-image: url("../images/vehicle-icons/motorcycle.png?v=a4cc75dcf986");
    --asset-mask-size: 100.611%;
    --asset-mask-position: 242.857% -319.643%;
}

.vehicle-type-icon--pickup {
    --asset-mask-image: url("../images/vehicle-icons/pickup.png?v=7cde964798c3");
    --asset-mask-size: 91.976%;
    --asset-mask-position: 48.881% 5.224%;
}

.vehicle-type-icon--atv {
    --asset-mask-image: url("../images/vehicle-icons/atv.png?v=8734eac9f331");
    --asset-mask-size: 96.402%;
    --asset-mask-position: 86.628% 102.326%;
}

.interface-icon--catalog {
    --asset-mask-image: url("../images/interface-icons/catalog-tree.png?v=1f80dacf6487");
    --asset-mask-size: 111.036%;
    --asset-mask-position: 33.297% -21.725%;
}

.interface-icon--orders {
    --asset-mask-image: url("../images/interface-icons/orders-stylized.png?v=c32464dbf1fa");
}

.interface-icon--clients {
    --asset-mask-image: url("../images/interface-icons/clients.png?v=cb06a8472fe9");
    --asset-mask-size: 113.219%;
    --asset-mask-position: 40.799% 36.617%;
}

.button-compact .button-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.button:active {
    transform: translateY(1px) scale(.985);
}

.button-primary {
    color: #fff;
    background: var(--accent);
}

.button-danger {
    color: #fff;
    background: #a33d2b;
}

.button-link {
    min-height: auto;
    padding: .25rem;
    color: var(--muted);
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .button-primary:hover {
        background: #bf4820;
    }

    .button-danger:hover {
        background: #862f21;
    }

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

.notice {
    margin-top: 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid;
    border-radius: .7rem;
    line-height: 1.5;
}

.notice ul {
    margin: .45rem 0 0;
    padding-left: 1.25rem;
}

.notice-error {
    border-color: #efb6ab;
    color: #8c2e1f;
    background: #fff3f0;
}

.notice-success {
    border-color: #a8d8be;
    color: #17613b;
    background: #effaf3;
}

html.has-success-transition,
html.has-success-transition body {
    overflow: hidden;
}

.success-transition {
    position: fixed;
    z-index: calc(var(--layer-popover) + 100);
    inset: 0;
    display: grid;
    place-items: center;
    padding:
        max(1.5rem, env(safe-area-inset-top))
        max(1.5rem, env(safe-area-inset-right))
        max(1.5rem, env(safe-area-inset-bottom))
        max(1.5rem, env(safe-area-inset-left));
    color: var(--success-on-confirmation);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.success-transition-fill {
    position: absolute;
    z-index: 0;
    top: var(--success-origin-y, 82%);
    left: var(--success-origin-x, 50%);
    width: 100vmax;
    height: 100vmax;
    border-radius: 50%;
    background: var(--success-confirmation);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(var(--success-fill-start-scale, .07));
    transform-origin: center;
    will-change: transform;
}

.success-transition.is-visible .success-transition-fill {
    animation: success-surface-enter 420ms cubic-bezier(.22, .72, .28, 1) both;
}

.success-transition.is-leaving {
    opacity: 0;
    transition: opacity 180ms ease;
}

.success-transition-content {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 30rem);
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
    opacity: 0;
    transform: translateY(.45rem) scale(.92);
}

.success-transition.is-visible .success-transition-content {
    animation: success-content-enter 560ms 270ms cubic-bezier(.2, .72, .28, 1) both;
}

.success-transition-check {
    width: clamp(5.5rem, 24vw, 7rem);
    height: auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5.5;
}

.success-transition-check circle {
    stroke-dasharray: 246;
    stroke-dashoffset: 246;
}

.success-transition-check path {
    stroke-dasharray: 62;
    stroke-dashoffset: 62;
}

.success-transition.is-visible .success-transition-check circle {
    animation: success-check-draw 230ms 310ms ease-out forwards;
}

.success-transition.is-visible .success-transition-check path {
    animation: success-check-draw 230ms 400ms var(--ease-out) forwards;
}

.success-transition p {
    max-width: 28ch;
    margin: 0;
    font-size: clamp(1.15rem, 5vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(.35rem);
}

.success-transition.is-visible p {
    animation: success-message-enter 180ms 450ms var(--ease-out) both;
}

@keyframes success-surface-enter {
    from {
        transform: translate(-50%, -50%) scale(var(--success-fill-start-scale, .07));
    }
    to {
        transform: translate(-50%, -50%) scale(3);
    }
}

@keyframes success-content-enter {
    0% {
        opacity: 0;
        transform: translateY(.45rem) scale(.92);
    }
    36% {
        opacity: 1;
        transform: translateY(0) scale(1.018);
    }
    68% {
        opacity: 1;
        transform: translateY(0) scale(.996);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes success-check-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes success-message-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.has-bottom-sheet,
html.has-bottom-sheet body {
    overflow: hidden;
}

.bottom-sheet {
    position: fixed;
    z-index: calc(var(--layer-popover) + 20);
    inset: 0;
    display: none;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--ink);
    background: transparent;
}

.bottom-sheet[open] {
    display: block;
}

.bottom-sheet::backdrop {
    background: transparent;
}

.bottom-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgb(13 22 28 / 54%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
    will-change: opacity;
}

.bottom-sheet.is-visible .bottom-sheet-scrim {
    opacity: 1;
}

.bottom-sheet.is-entering .bottom-sheet-scrim {
    transition: none;
}

.bottom-sheet.is-closing .bottom-sheet-scrim {
    opacity: 0;
}

.bottom-sheet-panel {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(100%, 42rem);
    max-height: min(88vh, 44rem);
    max-height: min(88svh, 44rem);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 1.15rem 1.15rem 0 0;
    background: var(--surface-elevated);
    box-shadow: 0 2rem 0 var(--surface-elevated), 0 -1rem 2.5rem rgb(13 22 28 / 22%);
    transform: translate3d(0, calc(100% + 2rem), 0);
    transition: transform 340ms cubic-bezier(.22, .6, .32, 1);
    will-change: transform;
}

.bottom-sheet.is-entering .bottom-sheet-panel {
    transition: none;
}

.bottom-sheet.is-visible .bottom-sheet-panel {
    transform: translate3d(0, var(--bottom-sheet-drag-y, 0), 0);
}

.bottom-sheet.is-closing .bottom-sheet-panel {
    transform: translate3d(0, calc(100% + 2rem), 0);
}

.bottom-sheet.is-dragging .bottom-sheet-panel {
    transition: none;
}

.bottom-sheet-handle-area {
    display: grid;
    min-height: 2.75rem;
    place-items: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.bottom-sheet.is-dragging .bottom-sheet-handle-area {
    cursor: grabbing;
}

.bottom-sheet-handle {
    display: block;
    width: 3rem;
    height: .28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.bottom-sheet-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    align-items: start;
    gap: .75rem;
    padding: .55rem 1rem .9rem;
    border-bottom: 1px solid var(--line);
}

.bottom-sheet-header h2 {
    margin: 0;
    font-size: clamp(1.28rem, 5vw, 1.55rem);
    letter-spacing: -.025em;
    line-height: 1.2;
}

.bottom-sheet-header p {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.bottom-sheet-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: var(--surface-subtle);
    text-decoration: none;
    transition: transform 150ms var(--ease-out), background-color 150ms ease;
}

.bottom-sheet-close svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.bottom-sheet-close:active {
    background: var(--surface-muted);
    transform: scale(.95);
}

.bottom-sheet-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.bottom-sheet-body {
    min-height: 0;
    padding: 1rem max(1rem, env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bottom-sheet-body > .notice,
.bottom-sheet-body [data-bottom-sheet-transient] > .notice {
    margin: 0 0 1rem;
}

.bottom-sheet-form.form-grid {
    gap: .9rem;
    margin: 0;
}

.bottom-sheet-form .form-actions {
    padding-top: .25rem;
}

html:not(.has-js) .bottom-sheet[open] .bottom-sheet-panel,
.bottom-sheet.is-fallback-visible[open] .bottom-sheet-panel {
    transform: none;
}

html:not(.has-js) .bottom-sheet[open] .bottom-sheet-scrim,
.bottom-sheet.is-fallback-visible[open] .bottom-sheet-scrim {
    opacity: 1;
}

.bottom-sheet.is-fallback-visible[open] {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .bottom-sheet-close:hover {
        background: var(--surface-muted);
        transform: translateY(-1px);
    }
}

.notice-info {
    border-color: var(--school-blue);
    color: var(--ink);
    background: var(--school-blue-soft);
}

.topbar {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(1rem, 4vw, 4rem);
    border-bottom: 2px solid rgb(6 121 181 / 20%);
    background: var(--surface);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    position: relative;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--logo-surface);
}

.brand-mark img {
    position: absolute;
    top: -.2rem;
    left: 50%;
    display: block;
    width: auto;
    height: 5.1rem;
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
}

.brand-copy {
    display: grid;
    gap: .08rem;
    line-height: 1.05;
}

.brand-copy strong {
    font-size: .98rem;
    letter-spacing: -.025em;
}

.brand-copy small {
    color: var(--school-blue);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.brand-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .38rem;
}

.brand .role-badge {
    padding: .14rem .38rem;
    font-size: .62rem;
    line-height: 1.15;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .86rem;
}

.theme-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .theme-toggle:hover {
        background: var(--surface-muted);
    }
}

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

.theme-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle-track {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 1.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: #a9d9ef;
    box-shadow: inset 0 0 0 1px rgb(21 33 43 / 8%);
    isolation: isolate;
    transition: background-color 220ms ease, box-shadow 220ms ease;
}

.theme-toggle-track::before {
    position: absolute;
    z-index: 0;
    right: .14rem;
    bottom: .14rem;
    width: .92rem;
    height: .28rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 62%);
    box-shadow: -.28rem -.12rem 0 -.05rem rgb(255 255 255 / 60%);
    content: "";
    opacity: 1;
    transform: translateX(0);
    transition: opacity 160ms ease, transform 220ms var(--ease-out);
}

.theme-toggle-sun,
.theme-toggle-moon,
.theme-toggle-knob,
.theme-toggle-stars {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.theme-toggle-knob {
    z-index: 3;
    top: .16rem;
    left: .16rem;
    width: 1.08rem;
    height: 1.08rem;
    background: #ffffff;
    box-shadow: 0 .08rem .24rem rgb(21 33 43 / 25%);
    transition: transform 240ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease;
}

.theme-toggle-sun {
    z-index: 4;
    top: .36rem;
    left: .36rem;
    display: grid;
    width: .68rem;
    height: .68rem;
    place-items: center;
    color: #df9d13;
    background: transparent;
    filter: drop-shadow(0 .03rem .03rem rgb(136 82 6 / 18%));
    transition: opacity 120ms ease, transform 220ms var(--ease-out);
}

.theme-toggle-moon {
    z-index: 4;
    top: .33rem;
    left: .33rem;
    display: grid;
    width: .74rem;
    height: .74rem;
    place-items: center;
    color: #6b9bb8;
    background: transparent;
    opacity: 0;
    transform: translateX(-.08rem) translateY(.08rem) scale(.86) rotate(-12deg);
    transition: opacity 150ms ease, transform 240ms var(--ease-out);
}

.theme-toggle-sun svg,
.theme-toggle-moon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-toggle-stars {
    z-index: 1;
    top: .26rem;
    left: .34rem;
    width: .11rem;
    height: .11rem;
    border-radius: 50%;
    background: #f7fbff;
    box-shadow: .28rem .42rem 0 -.02rem #f7fbff, .58rem .14rem 0 -.04rem #f7fbff, .42rem -.08rem 0 -.04rem #f7fbff;
    opacity: 0;
    transform: translateY(.08rem) scale(.82);
    transition: opacity 150ms ease 55ms, transform 220ms var(--ease-out) 55ms;
}

:root[data-theme="dark"] .theme-toggle-track {
    background: #244454;
    box-shadow: inset 0 0 0 1px rgb(231 245 255 / 10%);
}

:root[data-theme="dark"] .theme-toggle-track::before {
    opacity: 0;
    transform: translateX(.18rem);
}

:root[data-theme="dark"] .theme-toggle-knob {
    background: #e8f4fa;
    box-shadow: 0 .08rem .3rem rgb(0 0 0 / 28%);
    transform: translateX(1.1rem);
}

:root[data-theme="dark"] .theme-toggle-sun {
    opacity: 0;
    transform: translateX(1.1rem) translateY(.06rem) scale(.78) rotate(18deg);
}

:root[data-theme="dark"] .theme-toggle-moon {
    color: #315f7b;
    filter: drop-shadow(0 .03rem .04rem rgb(11 42 57 / 18%));
    opacity: 1;
    transform: translateX(1.1rem) translateY(0) scale(1) rotate(0);
}

:root[data-theme="dark"] .theme-toggle-stars {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.role-badge {
    padding: .22rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: capitalize;
}

.role-badge-admin {
    color: var(--link);
    background: var(--school-blue-soft);
}

.role-badge-student {
    color: #725b0c;
    background: #faf3dc;
}

.dashboard-shell {
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: .55rem;
    margin-top: 2rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: var(--component-border-width) dashed var(--control-border);
    border-radius: 1rem;
    background: var(--surface-faint-card);
}

.empty-state h2,
.empty-state p {
    margin: 0;
}

.empty-state h2 {
    font-size: 1.25rem;
}

.empty-state p {
    color: var(--muted);
    line-height: 1.6;
}

.empty-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: .75rem;
    font-weight: 800;
}

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

    .topbar,
    .user-menu {
        align-items: flex-start;
    }

    .topbar {
        padding-top: .85rem;
        padding-bottom: .85rem;
    }

    .user-menu {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.main-nav {
    display: flex;
    gap: .25rem;
    margin-right: auto;
    margin-left: 1.5rem;
}

.nav-active-indicator {
    display: none;
}

.main-nav a {
    position: relative;
    padding: .45rem .65rem;
    border-radius: .5rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--ease-out);
}

.main-nav a.is-active {
    color: var(--link);
    background: var(--school-blue-soft);
}

@media (hover: hover) and (pointer: fine) {
    .main-nav a:hover {
        color: var(--link);
        background: var(--school-blue-soft);
    }
}

.main-nav a:active {
    transform: scale(.98);
}

.main-nav a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.main-nav a.is-active::after {
    position: absolute;
    right: .65rem;
    bottom: .2rem;
    left: .65rem;
    height: .12rem;
    border-radius: 999px;
    background: var(--link);
    content: "";
    transform: scaleX(1);
}

.user-name {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-shell {
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.page-shell-narrow {
    max-width: 48rem;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.page-heading h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.page-heading p:not(.eyebrow) {
    max-width: 60ch;
    margin: .85rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.back-link {
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .back-link:hover {
        color: var(--ink);
    }
}

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.list-toolbar > p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.search-form {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .5rem;
}

.search-form input {
    width: min(100%, 24rem);
}

.search-form select {
    width: min(100%, 12rem);
}

.button-secondary {
    border-color: var(--control-border);
    color: var(--ink);
    background: var(--surface);
}

@media (hover: hover) and (pointer: fine) {
    .button-secondary:hover {
        border-color: var(--muted);
        background: var(--surface-muted);
    }
}

.button-compact {
    min-height: 2.3rem;
    padding: .45rem .7rem;
    font-size: .82rem;
}

.form-card {
    margin-top: 1.5rem;
}

.state-badge {
    display: inline-flex;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
}

.state-active {
    color: #17613b;
    background: #effaf3;
}

.state-inactive {
    color: #58656e;
    background: #eef1f2;
}

.record-status-indicator {
    --record-status-color: var(--success);
    display: inline-block;
    width: .62rem;
    height: .62rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--record-status-color);
    box-shadow: 0 0 0 .14rem color-mix(in srgb, var(--record-status-color) 18%, transparent);
}

.record-status-indicator--negative {
    --record-status-color: var(--danger);
}

.record-status-indicator--system {
    --record-status-color: var(--school-blue);
}

.state-solicitud {
    color: #075d8d;
    background: var(--school-blue-soft);
}

.state-aprobada {
    color: #17613b;
    background: #effaf3;
}

.state-rechazada {
    color: #8c2e1f;
    background: #fff0ed;
}

.state-entregada {
    color: #46535c;
    background: #eef1f2;
}

.form-card {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.form-card.form-grid {
    margin-top: 1.5rem;
}

.form-section {
    display: grid;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.form-section:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.form-section-heading .eyebrow {
    margin-bottom: .45rem;
}

.form-section-heading h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.form-grid-compact {
    gap: .85rem;
    margin-top: 0;
}

.readonly-field {
    display: grid;
    align-content: start;
    gap: .45rem;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 650;
}

.readonly-field strong {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface-muted);
    font-size: 1rem;
}

.readonly-field small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
}

.detail-stack {
    display: grid;
    gap: 1.5rem;
}

.history-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-list li {
    display: grid;
    gap: .3rem;
    padding: .8rem .9rem;
    border-left: 3px solid var(--school-blue);
    border-radius: 0 .65rem .65rem 0;
    background: var(--surface-muted);
}

.history-list span,
.history-list p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.checkbox-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.participant-empty {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
}

.check-option {
    display: flex;
    min-height: 4.5rem;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .check-option:hover {
        border-color: #8ebad3;
        background: var(--surface-subtle);
    }
}

.check-option[hidden] {
    display: none;
}

.check-option input {
    flex: 0 0 auto;
    width: 1.1rem;
    min-height: 1.1rem;
    margin: .13rem 0 0;
    padding: 0;
    border: 0;
    border-radius: .2rem;
    background: transparent;
    accent-color: var(--school-blue);
}

.check-option > span {
    display: grid;
    gap: .15rem;
}

.check-option strong {
    font-size: .9rem;
}

.inline-notice,
.role-callout {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #bdd8e7;
    border-radius: .75rem;
    color: var(--ink);
    background: var(--school-blue-soft);
}

.inline-notice {
    display: grid;
    gap: .35rem;
}

.inline-notice a {
    width: fit-content;
    color: var(--link);
    font-weight: 750;
}

.role-callout-icon {
    display: grid;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--school-blue);
    font-weight: 800;
}

.role-callout strong,
.role-callout p {
    margin: 0;
}

.role-callout p {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.45;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: .5rem;
}

.page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

.section-help {
    margin: 0;
}

.section-help {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.page-title-with-help {
    position: relative;
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .4rem;
}

.page-title-with-help h1 {
    min-width: 0;
}

.unit-field-label {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.unit-field-label > label {
    margin: 0;
}

:root .form-mode-help-panel {
    right: 0;
    left: auto;
    width: min(22rem, calc(100vw - 2rem));
}

.historical-delivery-section {
    border-color: var(--school-blue-soft);
}

input.is-available {
    border-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
}

input.is-unavailable {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

[data-client-dni-status],
[data-unit-patent-status] {
    min-height: 1.25rem;
}

/* Las tarjetas nuevas llegan listas: actualizar un filtro no debe simular una carga de pantalla. */
.orders-live-region.is-refreshing .empty-state {
    animation: none;
}
.photo-upload-form {
    display: grid;
    gap: 1rem;
}

.photo-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.photo-source-button {
    display: flex;
    min-height: 5.25rem;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--control-border);
    border-radius: .8rem;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
    transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}

.photo-source-button:active {
    transform: scale(.985);
}

@media (hover: hover) and (pointer: fine) {
    .photo-source-button:hover {
        border-color: var(--school-blue);
        background: var(--surface-muted);
        transform: translateY(-1px);
    }
}

.photo-source-button:focus-within {
    border-color: var(--school-blue);
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.photo-source-button.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.photo-source-icon {
    display: block;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: .43rem;
    border: 1px solid rgb(6 121 181 / 14%);
    border-radius: .7rem;
    color: var(--school-blue);
    background: linear-gradient(145deg, #edf8fd, var(--school-blue-soft));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.photo-source-copy {
    display: grid;
    gap: .15rem;
}

.photo-source-copy strong {
    font-size: .9rem;
}

.photo-source-copy small,
.photo-upload-feedback {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.4;
}

.photo-upload-feedback {
    margin: -.25rem 0 0;
}

.photo-upload-step-heading {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
}

.photo-upload-step-number {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .6rem;
    color: var(--school-blue);
    background: var(--school-blue-soft);
    font-size: .78rem;
    font-weight: 850;
}

.photo-upload-step-heading :is(h3, p) {
    margin: 0;
}

.photo-upload-step-heading h3 {
    font-size: .92rem;
}

.photo-upload-step-heading p {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.photo-upload-queue-panel,
.photo-upload-submit-panel {
    display: grid;
    gap: .8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.photo-upload-queue {
    display: grid;
    gap: .7rem;
}

.photo-upload-queue-item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
    gap: .8rem;
    min-width: 0;
    padding: .72rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface-muted);
    animation: panel-enter 180ms var(--ease-out) both;
}

.photo-upload-queue-item > img {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: .6rem;
    object-fit: cover;
}

.photo-upload-queue-body,
.photo-upload-queue-heading,
.photo-upload-queue-heading > div {
    min-width: 0;
}

.photo-upload-queue-body {
    display: grid;
    gap: .55rem;
}

.photo-upload-queue-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .5rem;
}

.photo-upload-queue-heading strong,
.photo-upload-queue-heading small {
    display: block;
}

.photo-upload-queue-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.photo-upload-queue-heading small {
    margin-top: .1rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
}

.photo-upload-queue-item.is-ready .photo-upload-queue-heading small {
    color: var(--success);
}

.photo-upload-queue-item.has-error {
    border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.photo-upload-queue-item.has-error .photo-upload-queue-heading small {
    color: var(--danger);
}

.photo-upload-remove {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: .25rem .35rem;
    color: var(--link);
    font-size: .74rem;
}

.photo-upload-description {
    display: grid;
    gap: .3rem;
}

.photo-upload-description > span {
    font-size: .74rem;
    font-weight: 750;
}

.photo-upload-description textarea {
    min-height: 3.65rem;
    padding: .55rem .65rem;
    font-size: .8rem;
    resize: vertical;
}

.photo-upload-actions {
    margin-top: 0;
}

.photo-upload-help {
    border-top: 1px solid var(--line);
}

.photo-upload-help summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--link);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 750;
}

.photo-upload-help summary::-webkit-details-marker {
    display: none;
}

.photo-upload-help summary::after {
    margin-left: auto;
    content: "+";
    font-size: 1rem;
}

.photo-upload-help[open] summary::after {
    content: "−";
}

.photo-upload-help > div {
    display: grid;
    gap: .45rem;
    padding: 0 0 .5rem;
}

.photo-upload-help p {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.photo-upload-progress {
    display: grid;
    gap: .4rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface-muted);
}

.photo-upload-progress[hidden] {
    display: none;
}

.photo-upload-progress-track {
    display: block;
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--control-border) 75%, transparent);
}

.photo-upload-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--school-blue);
    transition: width 180ms ease;
}

.photo-upload-progress small {
    color: var(--muted);
    font-size: .78rem;
}

.photo-upload-progress.is-indeterminate .photo-upload-progress-track > span {
    width: 42%;
    animation: photo-progress-indeterminate 900ms ease-in-out infinite alternate;
}

@keyframes photo-progress-indeterminate {
    from {
        transform: translateX(-15%);
    }
    to {
        transform: translateX(155%);
    }
}

.gallery-empty {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px dashed var(--control-border);
    border-radius: .8rem;
    background: var(--surface-muted);
}

.gallery-empty strong,
.gallery-empty p {
    margin: 0;
}

.gallery-empty p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.photo-gallery-feedback {
    min-height: 1.2rem;
    margin: .65rem 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: .9rem;
}

.photo-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.photo-section-heading > div {
    min-width: 0;
}

.photo-gallery-item {
    min-width: 0;
    margin: 0;
}

.photo-gallery-item.is-new {
    animation: photo-added 220ms var(--ease-out) both;
}

.photo-gallery-item.is-pending {
    opacity: .72;
    animation: photo-pending 1.1s ease-in-out infinite alternate;
}

.photo-gallery-item.is-removing {
    pointer-events: none;
    animation: photo-removing 160ms ease both;
}

.photo-gallery-item.is-action-selected .photo-thumbnail-button {
    border-color: var(--school-blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

@keyframes photo-added {
    from {
        opacity: 0;
        transform: translateY(.8rem) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes photo-pending {
    to {
        opacity: 1;
        transform: translateY(-.12rem);
    }
}

@keyframes photo-removing {
    to {
        opacity: 0;
        transform: scale(.94);
    }
}

.photo-thumbnail-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .75rem;
    color: inherit;
    background: var(--surface-muted);
    cursor: zoom-in;
    text-decoration: none;
    aspect-ratio: 4 / 3;
}

.photo-thumbnail-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.photo-thumbnail-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease, filter 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .photo-thumbnail-button:hover img {
        filter: brightness(.83);
        transform: scale(1.045);
    }
}

.photo-zoom-hint {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .2rem .4rem;
    border-radius: .35rem;
    color: #fff;
    background: rgb(21 33 43 / 75%);
    font-size: .7rem;
    font-weight: 750;
    opacity: 0;
    transform: translateY(.2rem);
    transition: opacity 180ms ease, transform 180ms ease;
}

.photo-uploading-hint {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .25rem .45rem;
    border-radius: .35rem;
    color: #fff;
    background: rgb(21 33 43 / 78%);
    font-size: .7rem;
    font-weight: 750;
}

.photo-thumbnail-button:focus-visible .photo-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .photo-thumbnail-button:hover .photo-zoom-hint {
        opacity: 1;
        transform: translateY(0);
    }
}

.photo-gallery-item figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .45rem;
    margin-top: .5rem;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
}

.photo-caption-copy {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.photo-gallery-item figcaption strong {
    color: var(--ink);
    font-size: .78rem;
}

.icon-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .6rem;
    color: var(--muted);
    background: var(--surface);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .icon-button:hover {
        border-color: var(--school-blue);
        color: var(--link);
        background: var(--school-blue-soft);
        transform: translateY(-1px);
    }
}

.icon-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.icon-button svg {
    width: 1.16rem;
    height: 1.16rem;
    fill: currentColor;
}

.photo-options-button {
    margin-top: -.1rem;
}

.photo-dialog {
    width: min(92vw, 46rem);
    max-height: 90dvh;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 1rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.photo-dialog::backdrop {
    background: rgb(13 22 28 / 72%);
    backdrop-filter: blur(2px);
}

.photo-dialog-panel {
    display: grid;
    gap: .8rem;
    padding: 1rem;
}

.photo-dialog-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.photo-dialog-header h2,
.photo-dialog-panel p {
    margin: 0;
}

.photo-dialog-header h2 {
    font-size: 1.05rem;
}

.photo-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.photo-download-button {
    position: relative;
    display: inline-grid;
    min-width: 6.5rem;
    place-items: center;
    overflow: hidden;
}

.photo-download-all-button {
    flex: 0 0 auto;
    min-width: 10.5rem;
}

.photo-download-label,
.photo-download-icon {
    z-index: 1;
    grid-area: 1 / 1;
}

.photo-download-label {
    transition: opacity 120ms ease, transform 180ms var(--ease-out);
}

.photo-download-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0;
    transform: translateY(-.4rem) scale(.94);
    transition: opacity 120ms ease, transform 200ms var(--ease-out);
}

.photo-download-icon path {
    transform-box: fill-box;
    transform-origin: center;
}

.photo-download-shaft {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset 160ms ease 30ms;
}

.photo-download-head {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset 150ms ease 55ms;
}

.photo-download-tray {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    transition: stroke-dashoffset 130ms ease 85ms;
}

.photo-download-button.is-downloading {
    pointer-events: none;
}

.photo-download-button.is-downloading .photo-download-label {
    opacity: 0;
    transform: translateY(-.22rem) scale(.97);
}

.photo-download-button.is-downloading .photo-download-icon {
    opacity: 1;
    transform: translateY(.05rem) scale(1);
}

.photo-download-button.is-downloading .photo-download-shaft {
    stroke-dashoffset: 0;
}

.photo-download-button.is-downloading .photo-download-head {
    stroke-dashoffset: 0;
}

.photo-download-button.is-downloading .photo-download-tray {
    stroke-dashoffset: 0;
}

.photo-dialog-panel img {
    display: block;
    width: 100%;
    max-height: 66dvh;
    aspect-ratio: var(--photo-preview-ratio, 4 / 3);
    border-radius: .7rem;
    opacity: 1;
    object-fit: contain;
    background: var(--surface-muted);
    transition: opacity 180ms ease;
}

.photo-dialog-panel img.is-loading {
    opacity: .42;
}

.photo-dialog-panel p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.photo-dialog-panel [data-photo-dialog-meta] {
    color: var(--ink);
    font-weight: 700;
}

.photo-edit-dialog {
    width: min(92vw, 34rem);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 1rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.photo-edit-dialog::backdrop {
    background: rgb(13 22 28 / 58%);
    backdrop-filter: blur(2px);
}

.photo-edit-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.photo-edit-feedback {
    min-height: 1.25rem;
    margin: -.35rem 0 0;
    color: var(--muted);
    font-size: .84rem;
}

.quick-action-menu {
    position: fixed;
    z-index: var(--layer-popover);
    display: grid;
    min-width: 11.5rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface-elevated);
    box-shadow: 0 .8rem 2rem rgb(21 33 43 / 18%);
    transform-origin: var(--menu-origin-x, 50%) var(--menu-origin-y, 0%);
    animation: action-menu-enter 150ms var(--ease-out) both;
}

.quick-action-menu button {
    display: flex;
    width: 100%;
    min-height: 2.6rem;
    align-items: center;
    padding: .55rem .65rem;
    border: 0;
    border-radius: .5rem;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
}

.quick-action-menu button:focus-visible {
    outline: 0;
    background: var(--surface-muted);
}

@media (hover: hover) and (pointer: fine) {
    .quick-action-menu button:hover {
        background: var(--surface-muted);
    }
}

.quick-action-menu button.is-danger {
    color: var(--danger);
}

@keyframes action-menu-enter {
    from {
        opacity: 0;
        transform: translateY(.2rem) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[data-action-target] {
    transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

[data-action-target].is-action-selected {
    background: color-mix(in srgb, var(--school-blue-soft) 82%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--school-blue) 32%, transparent), inset 0 0 1.25rem color-mix(in srgb, var(--school-blue) 12%, transparent);
}

[data-action-target][tabindex]:focus-visible {
    z-index: 1;
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.row-actions-fallback {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.row-actions-fallback form {
    margin: 0;
}

.has-js .row-actions-fallback {
    display: none;
}

.process-actions {
    margin-top: 0;
}

.decision-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid #bdd8e7;
    border-radius: .9rem;
    background: var(--surface-muted);
}

.decision-card .eyebrow {
    margin-bottom: .45rem;
}

.decision-card h2,
.decision-card p {
    margin: 0;
}

.decision-card h2 {
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.decision-card p:not(.eyebrow) {
    max-width: 68ch;
    margin-top: .45rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.decision-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
}

.orders-toolbar-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
}

.orders-refresh-notice {
    min-height: 2.25rem;
    padding: .35rem .6rem;
    border: 1px solid var(--school-blue);
    border-radius: .55rem;
    color: var(--link);
    background: var(--school-blue-soft);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    transition: transform 140ms var(--ease-out), background-color 140ms ease;
}

.orders-refresh-notice:active {
    transform: scale(.98);
}

.participant-selected {
    display: grid;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface-muted);
}

.participant-selected > span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.participant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.participant-chip {
    min-height: 2rem;
    padding: .3rem .55rem;
    border: 1px solid #a8cfe3;
    border-radius: 999px;
    color: var(--link);
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    transition: transform 140ms var(--ease-out), border-color 140ms ease, background-color 140ms ease;
}

.participant-chip:active {
    transform: scale(.97);
}

.participant-chip:focus-visible,
.orders-refresh-notice:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.order-context-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin-top: 1rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--school-blue);
    border-radius: .7rem;
    background: var(--surface);
    box-shadow: 0 .35rem .9rem rgb(21 33 43 / 5%);
    font-size: .86rem;
}

.order-context-strip > strong {
    letter-spacing: -.01em;
}

.order-context-strip > span:not(.state-badge) {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-context-strip .state-badge {
    margin-left: auto;
}

.delivery-checklist {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface-muted);
}

.delivery-checklist .eyebrow {
    margin-bottom: .35rem;
}

.delivery-checklist h2 {
    margin: 0;
    font-size: 1.05rem;
}

.delivery-checklist ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
    list-style: none;
}

.delivery-checklist li {
    display: flex;
    gap: .45rem;
}

.delivery-checklist li::before {
    color: var(--success);
    content: "✓";
    font-weight: 800;
}

.delivery-confirmation {
    min-height: 3.6rem;
    border-color: #b6d5c3;
    background: var(--surface);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .topbar {
        flex-wrap: wrap;
    }

    .main-nav {
        order: 3;
        width: 100%;
        margin: 0;
    }

    .page-heading {
        grid-template-columns: 1fr;
    }

    .page-heading,
    .list-toolbar {
        display: grid;
        align-items: start;
    }

    .page-heading > .button {
        width: 100%;
    }

    .page-heading-actions {
        display: grid;
        width: 100%;
    }

    .page-heading-actions .button {
        width: 100%;
    }

    .search-form {
        flex-wrap: wrap;
    }

    .search-form input {
        width: 100%;
    }

    .search-form select {
        width: 100%;
    }

    .checkbox-list {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .button {
        width: 100%;
    }

    .photo-dialog {
        width: min(100% - 1.5rem, 46rem);
    }

    .photo-dialog-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .photo-dialog-actions {
        width: 100%;
    }

    .decision-actions {
        flex-direction: column-reverse;
    }

    .decision-actions .button {
        width: 100%;
    }

    .app-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }
}

@media (max-width: 520px) {
    .photo-upload-queue-item {
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: .65rem;
        padding: .65rem;
    }

    .photo-upload-queue-item > img {
        width: 4.25rem;
        height: 4.25rem;
    }

    .photo-upload-actions .button {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .photo-source-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        align-items: center;
        gap: .75rem;
        padding: .7rem 1rem 0;
    }

    .brand {
        min-width: 0;
    }

    .brand-mark {
        width: 2.75rem;
        height: 2.75rem;
    }

    .brand-mark img {
        top: -.14rem;
        height: 3.56rem;
    }

    .brand-copy strong {
        font-size: .9rem;
    }

    .brand-copy small {
        font-size: .6rem;
    }

    .user-menu {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: .4rem;
    }

    .user-name {
        display: none;
    }

    .role-badge {
        padding: .2rem .4rem;
        font-size: .7rem;
    }

    .user-menu .button-link {
        min-height: 2.5rem;
        padding: .35rem .25rem;
    }

    .photo-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .photo-download-all-button {
        width: 100%;
    }

    .main-nav,
    .main-nav.main-nav-admin,
    .main-nav.main-nav-student {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin: 0;
        padding: .65rem 0 .55rem;
        border-top: 1px solid var(--line);
        gap: .4rem;
    }

    .main-nav a {
        display: grid;
        min-height: 2.75rem;
        place-items: center;
        padding: .45rem .35rem;
        text-align: center;
        font-size: .8rem;
        line-height: 1.1;
    }

    .list-toolbar {
        gap: .75rem;
        margin-top: 1.5rem;
        padding: .85rem 0;
    }

    .search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .search-form input {
        grid-column: 1 / -1;
    }

    .search-form select {
        grid-column: 1;
        width: 100%;
    }

    .search-form button {
        grid-column: 2;
    }

    .search-form .button-link {
        grid-column: 1 / -1;
        justify-self: start;
    }

}

@media (max-width: 390px) {
    .brand-copy {
        display: none;
    }
}

:root[data-theme="dark"] .notice-error {
    border-color: #914b42;
    color: #ffb4a6;
    background: #3a201e;
}

:root[data-theme="dark"] .notice-success {
    border-color: #356a51;
    color: #a4e9c3;
    background: #173427;
}

:root[data-theme="dark"] .role-badge-student {
    color: #f0d77e;
    background: #423719;
}

:root[data-theme="dark"] .state-active,
:root[data-theme="dark"] .state-aprobada {
    color: #a4e9c3;
    background: #173427;
}

:root[data-theme="dark"] .state-inactive,
:root[data-theme="dark"] .state-entregada {
    color: #c4d1d8;
    background: #293943;
}

:root[data-theme="dark"] .state-solicitud {
    color: #8fd9ff;
    background: #173b4d;
}

:root[data-theme="dark"] .state-rechazada {
    color: #ffb4a6;
    background: #44241f;
}

:root[data-theme="dark"] .photo-source-icon {
    border-color: rgb(123 208 247 / 38%);
    color: #78d3fb;
    background: linear-gradient(145deg, #1b4b62, #123546);
    box-shadow: inset 0 1px 0 rgb(233 249 255 / 12%), 0 .18rem .4rem rgb(0 0 0 / 18%);
}

@media (hover: hover) and (pointer: fine) {
    .participant-chip:hover {
        border-color: var(--school-blue);
        background: var(--school-blue-soft);
    }

    .orders-refresh-notice:hover {
        background: var(--surface);
    }
}

@media (max-width: 760px) {
    .topbar {
        gap: .6rem;
        padding: .65rem 1rem 0;
    }

    .main-nav,
    .main-nav.main-nav-admin,
    .main-nav.main-nav-student {
        display: flex;
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
        padding: .55rem 0 .5rem;
        overflow-x: auto;
        border-top: 1px solid var(--line);
        gap: .25rem;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a,
    .main-nav.main-nav-admin a {
        display: grid;
        min-height: 2.6rem;
        flex: 1 0 4.1rem;
        place-items: center;
        padding: .42rem .28rem;
        text-align: center;
        font-size: .76rem;
        line-height: 1.05;
    }

    .main-nav.main-nav-student a {
        flex-basis: calc(50% - .15rem);
    }

    .page-shell,
    .dashboard-shell {
        width: min(100% - 1.25rem, 70rem);
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

    .form-card {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: .8rem;
    }

    .order-context-strip {
        position: sticky;
        top: .45rem;
        z-index: 4;
        margin-top: .8rem;
        box-shadow: 0 .5rem 1.1rem rgb(21 33 43 / 12%);
    }

    .order-context-strip > span:not(.state-badge) {
        max-width: 11rem;
    }

    .orders-toolbar-status {
        justify-content: space-between;
        width: 100%;
    }

    .orders-toolbar-status > p {
        min-width: 0;
    }

    .orders-refresh-notice {
        flex: 0 0 auto;
    }

    .delivery-checklist {
        padding: .9rem;
    }

    .photo-source-button {
        min-height: 4.75rem;
    }
}

@media (max-width: 390px) {
    .brand-copy {
        display: grid;
    }

    .brand-copy strong {
        display: none;
    }

    .brand-copy small {
        font-size: .58rem;
        white-space: nowrap;
    }

    .main-nav a,
    .main-nav.main-nav-admin a {
        flex-basis: 3.9rem;
        font-size: .72rem;
    }
}

/* Interfaz del taller: bandeja de trabajo densa, jerarquía por divisores
 * y navegación inferior. Las superficies elevadas se reservan para
 * decisiones o grupos completos.
 */
:root body {
    background: var(--canvas);
}

:root .app-has-navigation {
    padding-bottom: calc(6.35rem + env(safe-area-inset-bottom));
}

:root :is(a, button, input, select, textarea, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}

:root .topbar {
    position: relative;
    z-index: var(--layer-navigation);
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: .6rem max(1rem, calc((100vw - 72rem) / 2));
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 0 1px 0 rgb(23 37 43 / 3%);
}

.module-navigation-progress {
    position: fixed;
    z-index: 100;
    top: 0;
    left: -36%;
    display: none;
    width: 36%;
    height: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--school-blue);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--school-blue) 28%, transparent);
    pointer-events: none;
}

.module-navigation-progress.is-active {
    display: block;
    animation: module-navigation-progress 820ms cubic-bezier(.45, 0, .25, 1) infinite;
}

:root.has-partial-navigation main {
    transition: opacity 150ms ease, transform 180ms var(--ease-out);
}

:root.has-partial-navigation main.is-module-navigation-pending {
    opacity: .66;
    pointer-events: none;
    transform: translateY(.15rem);
}

:root.has-partial-navigation.is-module-context-loading main.is-module-navigation-pending {
    opacity: .82;
    transform: none;
}

:root.has-partial-navigation main.is-module-entering {
    animation: module-content-in 230ms cubic-bezier(.22, .82, .24, 1);
}

:root.has-partial-navigation main.is-module-context-entering {
    animation: module-context-content-in 170ms ease-out;
}

:root.has-partial-navigation .users-notebook-panel.is-users-panel-entering {
    animation: module-context-content-in 170ms ease-out;
}

@keyframes module-navigation-progress {
    from { left: -36%; }
    to { left: 100%; }
}

@keyframes module-content-in {
    from { opacity: 0; transform: translateY(.35rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes module-context-content-in {
    from { opacity: .86; }
    to { opacity: 1; }
}

:root .brand {
    min-width: 0;
}

:root .brand-mark {
    width: 3.15rem;
    height: 3.15rem;
}

:root :is(.brand-mark, .auth-mark) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:root :is(.brand-mark, .auth-mark) img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: none;
}

:root .brand-copy strong {
    font-size: .94rem;
}

:root .brand .role-badge {
    padding: .12rem .36rem;
    font-size: .59rem;
    letter-spacing: 0;
    text-transform: none;
}

:root .user-menu {
    margin-left: auto;
}

:root .theme-toggle {
    width: 3.15rem;
    height: 2.75rem;
    border: 0;
    border-radius: 1.05rem;
    background: var(--surface);
    box-shadow: var(--neo-control-raised-shadow);
    transform: none !important;
    transition: none !important;
}

:root .theme-toggle-track {
    width: 2.48rem;
    height: 1.32rem;
    background: var(--surface-muted);
    box-shadow: var(--neo-inset-shadow);
}

:root .theme-toggle-track::before {
    width: .62rem;
    height: .18rem;
    background: rgb(255 255 255 / 38%);
    box-shadow: none;
    opacity: .55;
}

:root .theme-toggle-knob {
    top: .12rem;
    left: .12rem;
    background: var(--surface);
    box-shadow: .16rem .16rem .36rem rgb(69 95 106 / 21%), -.12rem -.12rem .28rem rgb(255 255 255 / 72%);
    transition: transform 250ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease, box-shadow 160ms ease;
}

:root .theme-toggle-sun {
    color: #c78a11;
}

:root .theme-toggle-moon {
    color: #54778b;
}

:root[data-theme="dark"] .theme-toggle-track {
    background: #182c35;
    box-shadow: inset .22rem .22rem .5rem rgb(2 12 17 / 42%), inset -.16rem -.16rem .42rem rgb(79 112 125 / 13%);
}

:root[data-theme="dark"] .theme-toggle-knob {
    background: #d7e5e9;
    box-shadow: .16rem .16rem .38rem rgb(1 9 13 / 38%), -.1rem -.1rem .24rem rgb(255 255 255 / 17%);
}

:root[data-theme="dark"] .theme-toggle-moon {
    color: #224c63;
}

:root .theme-toggle:active,
:root .theme-toggle:hover {
    background: var(--surface);
    box-shadow: var(--neo-control-raised-shadow);
    transform: none !important;
}

:root .user-menu .button-link {
    min-height: 2.75rem;
    padding: .45rem .72rem;
    border: 0;
    border-radius: .92rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--neo-control-raised-shadow);
    white-space: nowrap;
}

:root .user-menu .button-link:active {
    background: var(--surface);
    box-shadow: var(--neo-inset-shadow);
    transform: translateY(1px) scale(.985);
}

:root .main-nav,
:root .main-nav.main-nav-admin,
:root .main-nav.main-nav-student {
    position: fixed;
    z-index: var(--layer-navigation);
    isolation: isolate;
    right: auto;
    bottom: max(.45rem, env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    grid-template-columns: repeat(var(--navigation-item-count, 4), minmax(0, 1fr));
    width: min(calc(100% - 1rem), 39rem);
    margin: 0;
    padding: .38rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1rem;
    gap: .22rem;
    isolation: isolate;
    overflow: hidden;
    background: var(--operational-nav);
    box-shadow: 0 14px 34px rgb(8 19 23 / 25%);
    transform: translateX(-50%);
}

:root .main-nav.main-nav-student {
    width: min(calc(100% - 1rem), 22rem);
}

:root .main-nav .nav-active-indicator {
    position: absolute;
    z-index: 0;
    top: .38rem;
    bottom: .38rem;
    left: .38rem;
    display: block;
    width: calc((100% - var(--navigation-track-space, 1.42rem)) / var(--navigation-item-count, 4));
    border-radius: .72rem;
    background: #f7fbfc;
    box-shadow: 0 2px 8px rgb(7 22 28 / 14%);
    pointer-events: none;
    transform: translateX(0);
    transition: transform 230ms cubic-bezier(.2, .78, .25, 1);
}

:root .main-nav[data-active-index="1"] .nav-active-indicator {
    transform: translateX(calc(100% + .22rem));
}

:root .main-nav[data-active-index="2"] .nav-active-indicator {
    transform: translateX(calc(200% + .44rem));
}

:root .main-nav[data-active-index="3"] .nav-active-indicator {
    transform: translateX(calc(300% + .66rem));
}

:root .main-nav .nav-active-indicator::after {
    position: absolute;
    right: 50%;
    bottom: .2rem;
    width: 1rem;
    height: .14rem;
    border-radius: 999px;
    background: var(--accent);
    content: "";
    transform: translateX(50%);
}

:root[data-theme="dark"] .main-nav .nav-active-indicator {
    background: #27424b;
    box-shadow: 0 2px 9px rgb(0 0 0 / 22%);
}

:root .main-nav a,
:root .main-nav.main-nav-admin a {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 3.55rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .18rem;
    padding: .35rem .25rem;
    border: 0;
    border-radius: .72rem;
    color: var(--operational-nav-text);
    background: transparent;
    box-shadow: none;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: color 160ms ease, transform 160ms var(--ease-out);
}

:root .main-nav .nav-icon {
    display: block;
    width: 1.38rem;
    height: 1.38rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform 180ms var(--ease-out);
}

:root .main-nav .nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .main-nav a.is-active {
    color: #10272f;
    background: transparent;
    box-shadow: none;
}

:root .main-nav a.is-active::after {
    display: none;
}

:root[data-theme="dark"] .main-nav a.is-active {
    color: #f1f7f8;
}

:root .main-nav a.is-active .nav-icon {
    transform: translateY(-.1rem) scale(1.06);
}

:root .main-nav a:active {
    transform: scale(.96);
}

@media (hover: hover) and (pointer: fine) {
    :root .main-nav a:not(.is-active):hover {
        color: #ffffff;
        background: rgb(255 255 255 / 9%);
    }
}

:root :is(.dashboard-shell, .page-shell) {
    width: min(100% - 2rem, 72rem);
    padding: clamp(1.5rem, 4vw, 2.6rem) 0 2rem;
}

:root .dashboard-operational {
    display: block;
    animation: operational-section-in 220ms var(--ease-out);
}

:root .operational-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

:root .operational-dashboard-header h1 {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.045em;
    line-height: 1.05;
}

:root .eyebrow {
    margin-bottom: .65rem;
    color: var(--accent);
    font-size: .68rem;
}

:root .operational-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: .8rem;
    margin-top: 1.2rem;
}

:root :is(.operational-priority, .operational-overview) {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: var(--operational-shadow);
}

:root .operational-section-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

:root .operational-section-heading > div {
    min-width: 0;
}

:root .operational-section-heading h2 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: -.02em;
}

:root .operational-priority-context {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .28rem;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .065em;
    line-height: 1.1;
    text-transform: uppercase;
}

:root .operational-priority-help {
    position: relative;
    flex: 0 0 auto;
}

:root .operational-priority .operational-section-heading {
    position: relative;
}

:root .operational-priority-help summary {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: var(--link);
    background: transparent;
    cursor: pointer;
    list-style: none;
}

:root .operational-priority-help summary::-webkit-details-marker {
    display: none;
}

:root .operational-priority-help summary svg {
    display: block;
    box-sizing: content-box;
    width: .9rem;
    height: .9rem;
    padding: .35rem;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--surface-muted);
    box-shadow: 0 2px 5px rgb(23 37 43 / 8%);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85;
    transition: transform 150ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

:root .operational-priority-help[open] summary svg {
    border-color: var(--school-blue);
    color: var(--primary-on-color);
    background: var(--school-blue);
    box-shadow: var(--neo-primary-raised-shadow);
}

:root .operational-priority-help summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:root .operational-priority-help-panel {
    position: absolute;
    z-index: var(--layer-popover);
    top: calc(100% + .45rem);
    right: 0;
    width: min(19rem, calc(100vw - 3.5rem));
    margin: 0;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
}

:root.has-js .operational-priority-help[open] .operational-priority-help-panel {
    visibility: hidden;
}

:root.has-js .operational-priority-help[open] .operational-priority-help-panel.is-positioned {
    position: fixed;
    top: var(--help-top);
    right: auto;
    left: var(--help-left);
    width: var(--help-width);
    visibility: visible;
}

:root .operational-priority-help-panel strong {
    display: block;
    margin-bottom: .3rem;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
}

:root .operational-priority-help-panel p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.45;
    text-transform: none;
}

:root .page-heading:has(.form-mode-help[open]) {
    position: relative;
    z-index: calc(var(--layer-popover) + 1);
}

:root .form-mode-help[open],
:root .form-mode-help[open] .form-mode-help-panel {
    z-index: calc(var(--layer-popover) + 2);
}

@media (hover: hover) and (pointer: fine) {
    :root .operational-priority-help summary:hover svg {
        border-color: var(--school-blue);
        background: var(--school-blue-soft);
        transform: translateY(-1px);
    }
}

:root .operational-priority-help summary:active svg {
    transform: translateY(1px) scale(.97);
}

:root .operational-priority-order {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
}

:root .operational-priority-order strong {
    overflow: hidden;
    font-size: 1.08rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .operational-priority-order time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .72rem;
}

:root .operational-priority-copy {
    margin: .55rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

:root .operational-priority > .button {
    margin-top: .8rem;
}

:root .operational-priority-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
}

:root .operational-text-link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: .25rem;
    border-radius: .45rem;
    color: var(--link);
    font-size: .76rem;
    font-weight: 750;
    text-decoration: none;
}

:root .operational-text-link span {
    transition: transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    :root .operational-text-link:hover span {
        transform: translateX(.18rem);
    }
}

:root .operational-activity-list {
    margin-top: .75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .72rem;
}

:root .operational-activity-row {
    --activity-color: var(--school-blue);
    display: grid;
    grid-template-columns: .58rem minmax(0, 1fr) auto .85rem;
    min-width: 0;
    min-height: 3.45rem;
    align-items: center;
    gap: .58rem;
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface-subtle);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

:root .operational-activity-row.is-empty {
    cursor: default;
}

:root .operational-activity-row:last-child {
    border-bottom: 0;
}

:root .operational-activity-row.activity-active {
    --activity-color: #26855c;
}

:root .operational-activity-row.activity-delivery {
    --activity-color: #65747a;
}

:root .operational-activity-row.activity-rejected {
    --activity-color: #bc4b42;
}

:root .operational-activity-marker {
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: var(--activity-color);
}

:root .operational-activity-row.is-empty .operational-activity-marker {
    border: 1.5px solid var(--activity-color);
    background: transparent;
    opacity: .62;
}

:root .operational-activity-copy {
    display: grid;
    min-width: 0;
    gap: .08rem;
}

:root .operational-activity-copy strong,
:root .operational-activity-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .operational-activity-copy strong {
    font-size: .76rem;
}

:root .operational-activity-copy small {
    color: var(--muted);
    font-size: .63rem;
}

:root .operational-activity-count {
    display: grid;
    min-width: 1.72rem;
    height: 1.72rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--surface);
    font-size: .78rem;
    font-weight: 850;
}

:root .operational-activity-row.is-empty .operational-activity-count {
    color: var(--muted);
}

:root .operational-activity-arrow {
    color: var(--muted);
    font-size: .82rem;
    transition: transform 150ms var(--ease-out);
}

:root .operational-activity-empty-symbol {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    opacity: .7;
}

@media (hover: hover) and (pointer: fine) {
    :root a.operational-activity-row:hover {
        color: var(--link);
        background: var(--school-blue-soft);
    }

    :root a.operational-activity-row:hover .operational-activity-arrow {
        transform: translateX(.15rem);
    }
}

:root .button {
    min-height: 2.85rem;
    padding: .62rem 1rem;
    border-radius: .82rem;
    box-shadow: 0 3px 8px rgb(23 37 43 / 10%);
    transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background-color 150ms ease, border-color 150ms ease;
}

:root .button-primary {
    color: var(--primary-on-color);
    background: var(--school-blue);
    box-shadow: var(--neo-primary-raised-shadow);
}

:root .button-primary .button-icon {
    transition: transform 150ms var(--ease-out);
}

:root .button-secondary {
    border-color: var(--line);
    color: var(--ink);
    background: var(--surface);
}

:root .button-link {
    box-shadow: none;
}

:root .button:not(.button-link):not(.button-primary):active {
    box-shadow: var(--neo-inset-shadow);
    transform: translateY(2px) scale(.97);
    transition-duration: 75ms;
}

:root .button-primary:active {
    background: var(--primary-hover);
    box-shadow: var(--neo-primary-pressed-shadow);
    transform: translateY(2px) scale(.97);
    transition-duration: 75ms;
}

:root .button-primary:active .button-icon {
    transform: translateY(.1rem) scale(.92);
}

@media (hover: hover) and (pointer: fine) {
    :root .button-primary:hover:not(:active) {
        background: var(--primary-hover);
        box-shadow: var(--neo-primary-hover-shadow);
        transform: translateY(-2px);
    }

    :root .button-primary:hover:not(:active) .button-icon {
        transform: translateY(-.05rem);
    }

    :root .button-secondary:hover:not(:active) {
        border-color: var(--control-border);
        background: var(--surface-subtle);
        transform: translateY(-1px);
    }
}

:root :is(.form-card, .decision-card, .order-context-strip, .delivery-checklist) {
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: var(--operational-shadow);
}

:root :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--control-border);
    border-width: var(--component-border-width);
    border-radius: .72rem;
    background: var(--surface);
    box-shadow: none;
}

:root :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--school-blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

:root input[readonly] {
    background: var(--surface-subtle);
    color: var(--muted);
}

:root .page-heading {
    align-items: end;
    gap: 1.25rem;
    animation: operational-section-in 220ms var(--ease-out);
}

:root .page-heading h1 {
    max-width: 22ch;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.045em;
}

:root .page-heading p:not(.eyebrow) {
    max-width: 62ch;
    line-height: 1.5;
}

:root .page-heading-actions {
    flex-wrap: nowrap;
}

:root .orders-filter-disclosure {
    margin-top: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .82rem;
    background: var(--surface);
    box-shadow: var(--operational-shadow);
}

:root .orders-filter-disclosure > summary {
    display: flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .8rem;
    list-style: none;
    color: var(--ink);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 800;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

:root .orders-filter-disclosure > summary::-webkit-details-marker {
    display: none;
}

:root .orders-filter-disclosure > summary::after {
    width: .56rem;
    height: .56rem;
    flex: 0 0 auto;
    margin-right: .15rem;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    content: "";
    transform: rotate(45deg) translateY(-.14rem);
    transition: transform 200ms var(--ease-out), border-color 180ms ease;
}

:root .orders-filter-disclosure[open] > summary {
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

:root .orders-filter-disclosure[open] > summary::after {
    border-color: var(--school-blue);
    transform: rotate(225deg) translate(-.12rem, -.12rem);
}

:root .orders-filter-disclosure > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

:root .orders-filter-content {
    padding: .75rem .8rem .8rem;
}

:root .orders-filter-disclosure[open] > .orders-filter-content {
    animation: orders-filter-content-open 210ms var(--ease-out) both;
}

:root .orders-filter-content .search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem) auto auto;
    width: 100%;
    min-width: 0;
    gap: .5rem;
}

:root .orders-filter-content .search-form input {
    width: 100%;
}

:root .orders-list-section {
    margin-top: .9rem;
}

:root .orders-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid var(--line);
}

:root .orders-list-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -.015em;
}

:root .page-shell.users-shell {
    width: min(100% - 2rem, 52rem);
}

:root .users-shell .user-list-heading {
    display: block;
}

:root .users-shell .user-list-heading p:not(.eyebrow) {
    margin-top: .45rem;
}

:root .users-notebook {
    margin-top: 1rem;
}

:root .users-notebook-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    max-height: 3.5rem;
    overflow: hidden;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: .78rem;
    background: var(--surface-muted);
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
    transition: max-height 240ms var(--ease-out), padding-block 240ms var(--ease-out), border-width 240ms var(--ease-out), opacity 150ms ease, transform 240ms var(--ease-out);
}

:root .is-user-selection-mode .users-notebook-tabs {
    max-height: 0;
    padding-block: 0;
    border-block-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: scaleY(.9);
}

:root .users-notebook-tab {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: .6rem .75rem;
    border: 0;
    border-radius: .58rem;
    color: var(--muted);
    background: transparent;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

:root .users-notebook-tab.is-active {
    color: var(--school-blue);
    background: var(--surface);
    box-shadow: 0 1px 4px rgb(13 35 46 / 14%);
}

:root .users-notebook-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:root .users-notebook-panel {
    position: relative;
    padding: 1rem 0 0;
}

:root .users-notebook-intro {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

:root .users-notebook-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .42rem;
}

:root .users-notebook-title h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

:root .users-count-badge {
    display: inline-grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    padding-inline: .4rem;
    border-radius: 999px;
    color: var(--school-blue);
    background: var(--school-blue-soft);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1;
}

:root .users-notebook-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .45rem;
    margin-left: 0;
    transition: opacity 160ms ease;
}

:root .is-user-selection-mode .users-notebook-actions {
    opacity: 0;
    pointer-events: none;
}

:root .users-notebook-actions .page-heading-quick-action {
    min-height: 2.75rem;
    padding-inline: .78rem;
    font-size: .82rem;
}

:root .users-state-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    max-height: 4rem;
    margin-top: .72rem;
    overflow: hidden;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: var(--surface-muted);
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
    transition: max-height 200ms var(--ease-out), margin-top 200ms var(--ease-out), padding-block 200ms var(--ease-out), border-width 200ms var(--ease-out), opacity 150ms ease, transform 200ms var(--ease-out);
}

:root .is-user-selection-mode .users-state-filter {
    max-height: 0;
    margin-top: 0;
    padding-block: 0;
    border-block-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: scaleY(.9);
}

:root .users-state-filter-option {
    display: flex;
    min-width: 0;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .65rem;
    border-radius: .52rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 780;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

:root .users-state-filter-option strong {
    min-width: 1.35rem;
    padding: .18rem .38rem;
    border-radius: 999px;
    color: inherit;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: .67rem;
    line-height: 1;
    text-align: center;
}

:root .users-state-filter-option.is-active {
    color: var(--school-blue);
    background: var(--surface);
    box-shadow: 0 1px 4px rgb(13 35 46 / 12%);
}

:root .users-state-filter-option:active {
    transform: scale(.985);
}

:root .users-state-filter-option:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
}

:root .users-bulk-state-form {
    display: none;
}

:root .account-sheet-status {
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    color: var(--muted);
    background: var(--surface-subtle);
    font-size: .82rem;
}

:root .account-sheet-status strong {
    color: var(--ink);
}

:root .list-toolbar-user {
    display: grid;
    min-height: 3rem;
    margin-top: .72rem;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
}

:root .users-list-toolbar-normal,
:root .users-selection-context {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 3rem;
    transition: opacity 170ms ease, transform 190ms var(--ease-out);
}

:root .users-list-toolbar-normal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    opacity: 1;
    transform: translateY(0) scale(1);
}

:root .list-toolbar-user .user-list-search-form {
    display: block;
    min-width: 0;
}

:root .users-selection-toggle {
    min-height: 3rem;
    padding-inline: .75rem;
    font-size: .78rem;
}

:root .users-selection-context {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .38rem;
    padding: .18rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface);
    opacity: 0;
    pointer-events: none;
    transform: translateY(.18rem) scale(.992);
}

:root .is-user-selection-mode .users-list-toolbar-normal {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.18rem) scale(.992);
}

:root .is-user-selection-mode .users-selection-context {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

:root .users-selection-cancel {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: .62rem;
    place-items: center;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

:root .users-selection-cancel svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.9;
}

:root .users-selection-cancel:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

:root .users-selection-count {
    min-width: 0;
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

:root .users-selection-count strong {
    color: var(--ink);
    font-size: .92rem;
}

:root .users-selection-submit {
    min-height: 2.65rem;
    padding-inline: .82rem;
    font-size: .78rem;
}

:root .users-selection-context .users-selection-submit.button-danger:active {
    color: #fff;
    background: #862f21;
    box-shadow: inset 0 2px 5px rgb(67 18 10 / 32%);
    transform: translateY(1px) scale(.98);
}

:root .users-search-field {
    position: relative;
    display: block;
    min-width: 0;
    color: var(--muted);
}

:root .users-search-field > svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: .88rem;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 160ms ease;
}

:root .users-search-field input {
    width: 100%;
    min-height: 3rem;
    padding: .68rem 3rem .68rem 2.65rem;
    border-width: 1px;
    border-radius: .75rem;
    font-size: 1rem;
}

:root .users-search-field input::-webkit-search-cancel-button {
    appearance: none;
}

:root .users-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: .18rem;
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .62rem;
    color: var(--muted);
    text-decoration: none;
    transform: translateY(-50%);
}

:root .users-search-clear svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.9;
}

:root .users-search-field:focus-within > svg,
:root .users-search-clear:focus-visible {
    color: var(--school-blue);
}

:root .users-search-clear:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

:root .orders-toolbar-status p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

:root .users-compact-list {
    display: block;
    margin-top: .68rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .82rem;
    background: var(--surface);
    box-shadow: none;
}

:root .users-search-empty {
    gap: .35rem;
    margin-top: .68rem;
    padding: 1.15rem;
    border-radius: .82rem;
}

:root .users-search-empty h2 {
    font-size: 1rem;
}

:root .users-search-empty p {
    font-size: .82rem;
    line-height: 1.45;
}

:root .users-search-empty-icon {
    width: 2.35rem;
    height: 2.35rem;
}

:root .users-search-empty-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

:root .user-compact-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    min-width: 0;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    transition: background-color 170ms ease, box-shadow 170ms ease;
}

:root .user-compact-row:last-child {
    border-bottom: 0;
}

:root .user-compact-row.is-inactive-account {
    background: color-mix(in srgb, var(--surface-muted) 58%, var(--surface));
}

:root .user-selection-control {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 2.75rem;
    min-height: 0;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(.82);
    transition: opacity 150ms ease, transform 190ms var(--ease-out);
}

:root .user-selection-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    cursor: pointer;
}

:root .user-selection-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 1.42rem;
    height: 1.42rem;
    border: 2px solid var(--control-border);
    border-radius: 50%;
    background: var(--surface);
    transform: translate(-50%, -50%);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}

:root .is-user-selection-mode .user-compact-row {
    cursor: pointer;
}

:root .is-user-selection-mode .user-compact-row[data-action-protected="true"] {
    cursor: default;
}

:root .is-user-selection-mode .user-selection-control {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

:root .is-user-selection-mode .user-compact-row.is-user-selected {
    background: color-mix(in srgb, var(--school-blue-soft) 82%, var(--surface));
}

:root .user-selection-control input:checked + .user-selection-mark {
    border-color: var(--school-blue);
    background: var(--school-blue);
    transform: translate(-50%, -50%) scale(1.04);
}

:root .user-selection-control input:checked + .user-selection-mark::after {
    position: absolute;
    top: .22rem;
    left: .42rem;
    width: .34rem;
    height: .66rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg);
}

:root .user-selection-control input:focus-visible + .user-selection-mark {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:root .user-selection-control input:disabled + .user-selection-mark {
    border-color: var(--line-strong);
    background: var(--surface-muted);
    opacity: .5;
}

:root .user-compact-main {
    display: grid;
    min-width: 0;
    min-height: 4.1rem;
    align-content: center;
    gap: .25rem;
    padding: .55rem .7rem;
    color: var(--ink);
}

:root .user-compact-main strong,
:root .user-compact-main > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .user-compact-main strong {
    font-size: .92rem;
    letter-spacing: -.015em;
}

:root .user-compact-main > span {
    color: var(--muted);
    font-size: .67rem;
}

:root .user-compact-main b {
    color: var(--ink);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

:root .user-compact-main i {
    margin-inline: .25rem;
    font-style: normal;
}

:root .user-compact-row > .record-status-indicator {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    transition: opacity 150ms ease, transform 190ms var(--ease-out);
}

:root .is-user-selection-mode .user-compact-row > .record-status-indicator {
    opacity: 0;
    transform: scale(.72);
}

:root .orders-compact-list {
    display: block;
    margin-top: .75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-width: var(--component-border-width);
    border-radius: .82rem;
    background: var(--surface);
    box-shadow: var(--operational-shadow);
}

:root .orders-live-region {
    min-width: 0;
    max-width: 100%;
}

:root .orders-live-region.is-refreshing {
    animation: orders-content-settle 160ms var(--ease-out) both;
}

:root .pagination {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) minmax(5.5rem, auto);
    align-items: center;
    gap: .65rem;
    margin-top: .75rem;
}

:root .pagination > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
}

:root .pagination .button {
    justify-content: center;
}

:root .pagination .is-disabled {
    pointer-events: none;
    opacity: .42;
}

:root .order-row {
    --order-state-color: var(--school-blue);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    transition: background-color 150ms ease;
}

:root .order-row:last-child {
    border-bottom: 0;
}

:root .order-row::before {
    position: absolute;
    top: .6rem;
    bottom: .6rem;
    left: 0;
    width: .2rem;
    border-radius: 0 .2rem .2rem 0;
    background: var(--order-state-color);
    content: "";
}

:root .order-row.order-state-aprobada {
    --order-state-color: #26855c;
}

:root .order-row.order-state-rechazada {
    --order-state-color: #bc4b42;
}

:root .order-row.order-state-entregada {
    --order-state-color: #65747a;
}

:root .order-row-main {
    display: grid;
    min-width: 0;
    min-height: 4.35rem;
    align-content: center;
    gap: .2rem;
    padding: .5rem .65rem .5rem .9rem;
    color: var(--ink);
}

:root .order-row-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: .65rem;
}

:root .order-row-number {
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: -.02em;
    white-space: nowrap;
}

:root .order-row-unit {
    display: grid;
    min-width: 0;
    gap: .02rem;
}

:root .order-row-unit strong {
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .order-row-unit small {
    overflow: hidden;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

:root .order-row .state-badge {
    flex: 0 0 auto;
    padding: .2rem .42rem;
    font-size: .63rem;
}

:root .order-row-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.25;
}

:root .order-row-meta time {
    flex: 0 0 auto;
    font-weight: 700;
}

:root .order-row-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .order-row-meta span::before {
    margin-right: .45rem;
    content: "·";
}

:root .order-row-action {
    display: inline-flex;
    width: 5rem;
    min-height: 3rem;
    align-items: center;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    gap: .16rem;
    margin: .5rem .55rem .5rem .2rem;
    padding: .35rem .28rem;
    border: 1px solid var(--line);
    border-radius: .68rem;
    color: var(--ink);
    background: var(--surface-subtle);
    box-shadow: 0 2px 6px rgb(23 37 43 / 8%);
    font-size: .75rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: transform 150ms var(--ease-out), box-shadow 150ms ease, background-color 150ms ease;
}

:root .order-row-action.button-primary {
    border-color: transparent;
    color: var(--primary-on-color);
    background: var(--school-blue);
    box-shadow: var(--neo-primary-raised-shadow);
}

:root .order-row-action .button-icon {
    width: 1.1rem;
    height: 1.1rem;
}

:root .order-row-action:not(.button-primary):active {
    box-shadow: var(--neo-inset-shadow);
    transform: translateY(1px) scale(.95);
    transition-duration: 75ms;
}

:root .order-row-action.button-primary:active {
    background: var(--primary-hover);
    box-shadow: var(--neo-primary-pressed-shadow);
    transform: translateY(1px) scale(.95);
    transition-duration: 75ms;
}

:root .order-row-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -2px;
}

:root .orders-preview-list .order-row-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem;
}

:root .orders-preview-list .order-row-number {
    font-size: .8125rem;
}

:root .orders-preview-list .order-row-unit strong {
    font-size: .9375rem;
}

:root .orders-preview-list .order-row-meta {
    flex-wrap: wrap;
    gap: .4rem;
    row-gap: 0;
    font-size: .8125rem;
    line-height: 1.15;
}

:root .orders-preview-list .order-row-meta span::before {
    content: none;
}

:root .order-row-controls {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-right: .45rem;
    padding-block: .2rem;
}

:root .orders-preview-list .state-badge {
    padding: .1rem .35rem;
    font-size: .6875rem;
    line-height: 1.2;
    white-space: nowrap;
}

:root .order-row-controls .order-row-action {
    width: 4.65rem;
    min-height: 44px;
    flex-direction: row;
    gap: .25rem;
    margin: 0;
    padding: .3rem .25rem;
}

@media (hover: hover) and (pointer: fine) {
    :root .users-notebook-tab:not(.is-active):hover {
        border-color: color-mix(in srgb, var(--school-blue) 35%, var(--line));
        color: var(--ink);
        background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface));
    }

    :root .order-row-action:hover:not(:active) {
        background: var(--surface-muted);
        transform: translateY(-1px);
    }

    :root .order-row-action.button-primary:hover:not(:active) {
        background: var(--primary-hover);
        box-shadow: var(--neo-primary-hover-shadow);
    }
}

:root .app-footer {
    width: min(100% - 2rem, 72rem);
    padding-bottom: .75rem;
}

@keyframes operational-section-in {
    from {
        opacity: 0;
        transform: translateY(.45rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes orders-content-settle {
    from { opacity: .82; }
    to { opacity: 1; }
}

@keyframes orders-filter-content-open {
    from { opacity: 0; transform: translateY(-.28rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    :root .operational-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    :root .page-shell.users-shell {
        width: min(100% - 1.5rem, 52rem);
    }

    :root .users-notebook {
        margin-top: .85rem;
    }

    :root .users-notebook-tabs {
        gap: .2rem;
        padding: .2rem;
    }

    :root .users-notebook-tab {
        min-height: 2.7rem;
        padding: .58rem .5rem;
        font-size: .84rem;
    }

    :root .users-notebook-panel {
        padding-top: .85rem;
    }

    :root .users-notebook-intro {
        gap: .55rem;
    }

    :root .users-notebook-actions .page-heading-quick-action {
        min-height: 2.7rem;
        padding-inline: .68rem;
    }

    :root .topbar {
        min-height: 4.15rem;
        gap: .45rem;
        padding: .45rem .75rem;
    }

    :root .brand-mark {
        width: 2.8rem;
        height: 2.8rem;
    }

    :root .brand-copy strong {
        font-size: .84rem;
    }

    :root .brand-copy small {
        font-size: .56rem;
    }

    :root .user-menu {
        gap: .3rem;
    }

    :root .brand .role-badge {
        padding: .22rem .42rem;
        font-size: .64rem;
    }

    :root .user-menu .button-link {
        min-height: 2.75rem;
        padding-inline: .68rem;
    }

    :root .main-nav,
    :root .main-nav.main-nav-admin,
    :root .main-nav.main-nav-student {
        grid-column: auto;
        width: min(calc(100% - 1.5rem), 39rem);
        padding: .38rem;
        border-top: 1px solid rgb(255 255 255 / 12%);
        gap: .22rem;
    }

    :root .main-nav.main-nav-student {
        width: min(calc(100% - 1.5rem), 22rem);
    }

    :root .main-nav a,
    :root .main-nav.main-nav-admin a {
        min-height: 3.45rem;
        padding: .3rem .16rem;
        font-size: .65rem;
    }

    :root :is(.dashboard-shell, .page-shell) {
        width: min(100% - 1.5rem, 72rem);
        padding: 1.2rem 0 1.5rem;
    }

    :root .operational-dashboard-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .7rem;
    }

    :root .operational-dashboard-header h1 {
        font-size: clamp(1.75rem, 8vw, 2.2rem);
    }

    :root .operational-dashboard-header .button {
        min-height: 2.55rem;
        padding: .48rem .65rem;
        font-size: .72rem;
    }

    :root .operational-dashboard-grid {
        gap: .65rem;
        margin-top: .9rem;
    }

    :root :is(.operational-priority, .operational-overview) {
        padding: .8rem;
        border-radius: .8rem;
    }

    :root .app-footer {
        width: min(100% - 1.5rem, 72rem);
    }

    :root .page-heading {
        display: grid;
        align-items: start;
        gap: .85rem;
    }

    :root .page-heading h1 {
        font-size: clamp(1.8rem, 9vw, 2.3rem);
    }

    :root .page-heading p:not(.eyebrow) {
        margin-top: .65rem;
        font-size: .9rem;
        line-height: 1.45;
    }

    :root .page-heading-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    :root .orders-filter-disclosure {
        margin-top: .9rem;
    }

    :root .orders-filter-content {
        padding: .65rem .7rem .75rem;
    }

    :root .orders-filter-content .search-form {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: .4rem;
    }

    :root .orders-filter-content .search-form input {
        grid-column: 1 / -1;
    }

    :root .orders-filter-content .search-form select {
        grid-column: 1;
        width: 100%;
    }

    :root .orders-filter-content .search-form .button {
        min-height: 2.65rem;
        padding-inline: .7rem;
    }

    :root .orders-filter-content .search-form .button-link {
        grid-column: 1 / -1;
        justify-self: start;
    }

    :root .orders-list-heading {
        align-items: flex-start;
        flex-wrap: wrap;
        padding-bottom: .45rem;
    }

    :root .orders-toolbar-status {
        justify-content: space-between;
        width: 100%;
        padding-top: .05rem;
    }

    :root .orders-list-heading .orders-toolbar-status {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    :root .orders-compact-list {
        margin-top: .6rem;
        border-radius: .72rem;
    }

    :root .users-compact-list {
        margin-top: .6rem;
        border-radius: .72rem;
    }

    :root .users-notebook-intro {
        align-items: center;
        flex-wrap: nowrap;
    }

    :root .users-notebook-actions {
        display: flex;
        width: fit-content;
    }

    :root .users-notebook-actions .page-heading-quick-action {
        width: fit-content;
    }

    :root .user-compact-main {
        min-height: 3.9rem;
        padding: .48rem .45rem .48rem .8rem;
    }

    :root .user-compact-row {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
    }

    :root .order-row-main {
        min-height: 4.2rem;
        padding: .45rem .5rem .45rem .8rem;
    }

    :root .order-row-header {
        gap: .5rem;
    }

    :root .order-row-action {
        width: 4.65rem;
        min-height: 2.85rem;
        margin: .45rem .45rem .45rem .12rem;
    }

}

@media (max-width: 390px) {
    :root .brand-copy {
        display: grid;
    }

    :root .page-heading-actions {
        grid-template-columns: minmax(0, 1fr);
    }


    :root .operational-priority-actions {
        align-items: stretch;
        flex-direction: column;
    }

    :root .operational-priority-actions .button {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .module-navigation-progress.is-active {
        left: 0;
        width: 100%;
        animation: none;
    }

    :root.has-partial-navigation main,
    :root.has-partial-navigation main.is-module-entering,
    :root.has-partial-navigation main.is-module-context-entering,
    :root.has-partial-navigation .users-notebook-panel.is-users-panel-entering {
        animation: none;
        transition: none;
    }

    :root .users-list-toolbar-normal,
    :root .users-selection-context,
    :root .users-notebook-tabs,
    :root .users-notebook-actions,
    :root .users-state-filter,
    :root .user-selection-control,
    :root .user-selection-mark,
    :root .user-compact-row > .record-status-indicator {
        transition: none;
    }

    :root .main-nav,
    :root :is(.dashboard-operational, .page-heading),
    :root .main-nav a.is-active::after {
        animation: none;
    }

    :root :is(.main-nav a, .main-nav .nav-icon, .main-nav .nav-active-indicator, .button, .button-primary .button-icon, .order-row, .order-row-action, .operational-text-link span) {
        transition: none;
    }

    :root .orders-live-region.is-refreshing {
        animation: none;
    }

    :root .orders-filter-disclosure[open] > .orders-filter-content {
        animation: none;
    }
}

[data-client-dni-status].is-available,
[data-unit-patent-status].is-available {
    color: var(--success);
}

[data-client-dni-status].is-unavailable,
[data-unit-patent-status].is-unavailable {
    color: var(--danger);
}

[data-client-dni-status].is-checking,
[data-unit-patent-status].is-checking {
    color: var(--school-blue);
}

/* Formularios guiados: el flujo se diseña primero para pantallas móviles. */
.progressive-form-stepper {
    display: none;
}

:root.has-js .progressive-form .progressive-form-stepper {
    --progressive-marker-size: 2.35rem;
    position: relative;
    z-index: 1;
    display: block;
    margin: -.1rem 0 .25rem;
    padding: .2rem .1rem .35rem;
}

.progressive-form-stepper ol {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--progressive-step-count), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.progressive-form-stepper li {
    min-width: 0;
}

.progressive-form-stepper button {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 4.25rem;
    place-items: start center;
    align-content: start;
    gap: .42rem;
    padding: 0 .12rem;
    border: 0;
    outline: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.progressive-form-stepper button:disabled {
    cursor: default;
}

.progressive-form-rail {
    position: absolute;
    z-index: 0;
    top: calc(.2rem + (var(--progressive-marker-size) / 2) - 1.5px);
    right: calc(50% / var(--progressive-step-count));
    left: calc(50% / var(--progressive-step-count));
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--control-border) 45%, transparent);
}

.progressive-form-rail > span {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--success);
    box-shadow: none;
    transition: width 420ms cubic-bezier(.2, .9, .22, 1);
}

.progressive-step-marker {
    position: relative;
    display: grid;
    width: var(--progressive-marker-size);
    height: var(--progressive-marker-size);
    place-items: center;
    border: 2px solid var(--control-border);
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface);
    box-shadow: 0 2px 7px rgb(23 37 43 / 10%);
    font-size: .88rem;
    font-weight: 850;
    transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 260ms ease, transform 260ms var(--ease-out);
}

.progressive-step-number {
    transition: opacity 150ms ease, transform 220ms var(--ease-out);
}

.progressive-step-check {
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    opacity: 0;
    transform: scale(.65) rotate(-8deg);
    transition: opacity 140ms ease, transform 300ms cubic-bezier(.2, 1.4, .35, 1);
}

.progressive-step-check path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 360ms 80ms var(--ease-out);
}

.progressive-step-label {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: clamp(.61rem, 2.75vw, .74rem);
    font-weight: 690;
    line-height: 1.12;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 220ms ease, transform 260ms var(--ease-out);
}

.progressive-form-stepper li.is-current button {
    color: var(--school-blue);
}

.progressive-form-stepper li.is-current .progressive-step-marker {
    border-color: var(--school-blue);
    color: var(--school-blue);
    background: var(--school-blue-soft);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--school-blue) 16%, var(--surface)), 0 5px 12px color-mix(in srgb, var(--school-blue) 20%, transparent);
    animation: progressive-current-arrival 440ms cubic-bezier(.2, 1.35, .35, 1) both;
}

.progressive-form-stepper li.is-current .progressive-step-label {
    font-weight: 820;
    transform: translateY(.12rem) scale(1.06);
}

.progressive-form-stepper li.is-complete button {
    color: var(--success);
}

.progressive-form-stepper li.is-complete .progressive-step-marker {
    border-color: var(--success);
    color: #fff;
    background: var(--success);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--success) 18%, transparent);
}

:root[data-theme="dark"] .progressive-form-stepper li.is-complete .progressive-step-marker {
    color: #10231a;
}

.progressive-form-stepper li.is-complete .progressive-step-number {
    opacity: 0;
    transform: scale(.55);
}

.progressive-form-stepper li.is-complete .progressive-step-check {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.progressive-form-stepper li.is-complete .progressive-step-check path {
    stroke-dashoffset: 0;
}

.progressive-form-stepper li:not(.is-current):not(.is-complete) button:disabled {
    opacity: .72;
}

.progressive-form-stepper button:focus-visible .progressive-step-marker {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

:root.has-js .progressive-form [data-progressive-step] {
    display: none;
}

:root.has-js .progressive-form [data-progressive-step].is-active {
    display: grid;
}

.progressive-form,
.progressive-form-stepper,
.progressive-form-stage,
.progressive-form-footer {
    overflow-anchor: none;
}

.progressive-form-stage {
    min-width: 0;
}

.progressive-form-stage.is-resizing {
    will-change: height;
    overflow: clip;
    transition: height 340ms cubic-bezier(.22, .82, .24, 1);
}

.progressive-form.is-progressive-ready [data-progressive-step].is-active {
    display: grid;
    animation: progressive-step-forward 310ms cubic-bezier(.22, .82, .24, 1);
}

.progressive-form.is-progressive-ready[data-step-direction="back"] [data-progressive-step].is-active {
    animation-name: progressive-step-back;
}

.progressive-form [data-progressive-step].has-step-error {
    animation: progressive-step-attention 360ms ease;
}

.progressive-form-footer {
    display: grid;
    gap: .65rem;
}

.progressive-form-status {
    display: none;
    min-height: 1.35rem;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
}

.progressive-form.is-progressive-ready .progressive-form-status {
    display: flex;
}

.progressive-form-status::before {
    display: block;
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border: 2px solid var(--control-border);
    border-radius: 50%;
    content: "";
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease, transform 260ms var(--ease-out);
}

.progressive-form-status.is-ready {
    color: var(--success);
}

.progressive-form-status.is-ready::before {
    border-color: var(--success);
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 13%, transparent);
    transform: scale(1.08);
}

.progressive-form-status.has-error {
    color: var(--danger);
}

.progressive-form-status.has-error::before {
    border-color: var(--danger);
    background: var(--danger-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 11%, transparent);
}

.progressive-next-button {
    position: relative;
    overflow: hidden;
}

.progressive-next-arrow {
    display: inline-block;
    margin-left: .15rem;
    transition: transform 240ms var(--ease-out);
}

.progressive-next-button.is-ready .progressive-next-arrow {
    transform: translateX(.18rem);
}

.progressive-next-button.is-newly-ready::after {
    position: absolute;
    top: -45%;
    left: -35%;
    width: 24%;
    height: 190%;
    background: rgb(255 255 255 / 32%);
    content: "";
    pointer-events: none;
    transform: rotate(18deg);
    animation: progressive-ready-sheen 620ms var(--ease-out) both;
}

@keyframes progressive-current-arrival {
    0% { transform: scale(.82); }
    62% { transform: scale(1.22); }
    100% { transform: scale(1.14); }
}

@keyframes progressive-step-forward {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes progressive-step-back {
    from { opacity: 0; transform: translateX(-.8rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes progressive-step-attention {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-.28rem); }
    65% { transform: translateX(.22rem); }
}

@keyframes progressive-ready-sheen {
    from { left: -35%; opacity: 0; }
    20% { opacity: 1; }
    to { left: 118%; opacity: 0; }
}

@media (max-width: 760px) {
    .progressive-form.form-card {
        gap: .9rem;
        margin-top: 1rem;
        padding: .95rem;
    }

    :root.has-js .progressive-form .progressive-form-stepper {
        margin: 0 -.15rem;
        padding-top: .2rem;
    }

    .progressive-form-stepper button {
        min-height: 4rem;
    }

    .progressive-form [data-progressive-step] {
        min-width: 0;
        padding: .2rem 0 1rem;
        border-bottom: 1px solid var(--line);
    }

    .progressive-form [data-progressive-step] .form-section-heading h2,
    .progressive-form [data-progressive-step].delivery-checklist h2 {
        font-size: 1.08rem;
    }

    .progressive-form-footer .form-actions {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        gap: .65rem;
        margin-top: 0;
    }

    .progressive-form-footer .form-actions .button {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 3rem;
        padding-inline: .65rem;
    }
}

/* Acciones de alta: una misma jerarquía compacta en todas las listas. */
:root .page-heading-quick-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    align-self: start;
    justify-self: end;
}

:root .page-heading-quick-action {
    width: fit-content;
    min-height: 3.2rem;
    padding-inline: 1rem;
    white-space: nowrap;
}

:root .page-heading-quick-action .order-create-icon {
    width: 1.43rem;
    height: 1.43rem;
}

:root .page-heading-quick-actions.is-stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 13rem);
}

:root .page-heading-quick-actions.is-stacked .page-heading-quick-action {
    width: 100%;
}

:root .student-expiration-help {
    position: relative;
    flex: 0 0 auto;
}

:root .users-notebook-panel:has(.student-expiration-help[open]) {
    position: relative;
    z-index: calc(var(--layer-popover) + 1);
}

/* Participantes: un resumen estable y un único lugar para cada selección. */
:root .participant-section-intro {
    margin: -.15rem 0 .15rem;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

:root .participant-picker {
    --participant-ink: var(--school-blue);
    --participant-soft: var(--school-blue-soft);
    --participant-faint: color-mix(in srgb, var(--school-blue-soft) 62%, var(--surface));
    --participant-line: color-mix(in srgb, var(--school-blue) 42%, var(--line));
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: .85rem;
    background: var(--surface-subtle);
    transition: border-color 220ms ease, box-shadow 240ms ease, background-color 220ms ease;
}

:root .participant-picker:focus-within,
:root .participant-picker[open] {
    border-color: var(--participant-line);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--participant-ink) 12%, transparent);
}

:root .participant-picker.has-selection:not([open]) {
    border-color: var(--participant-line);
}

:root .participant-picker > summary {
    display: grid;
    grid-template-columns: .26rem minmax(0, 1fr) .9rem;
    min-height: 4rem;
    align-items: center;
    column-gap: .75rem;
    padding: .68rem .82rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

:root .participant-picker > summary::-webkit-details-marker {
    display: none;
}

:root .participant-picker > summary::before {
    width: .26rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--participant-ink);
    content: "";
}

:root .participant-picker[open] > summary {
    background: var(--participant-faint);
}

:root .participant-picker > summary::after {
    width: .54rem;
    height: .54rem;
    justify-self: center;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    content: "";
    transform: rotate(45deg);
    transition: transform 200ms var(--ease-out), border-color 180ms ease;
}

:root .participant-picker[open] > summary::after {
    border-color: var(--participant-ink);
    transform: rotate(225deg);
}

:root .participant-picker > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

:root .participant-picker-overview {
    display: grid;
    min-width: 0;
    gap: .16rem;
}

:root .participant-picker-overview strong {
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.2;
}

:root .participant-picker-overview small {
    min-height: 1.28em;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.28;
}

:root .participant-picker.has-selection .participant-picker-overview small {
    color: var(--participant-ink);
}

:root .participant-picker-content {
    display: grid;
    gap: .7rem;
    padding: .72rem .82rem .85rem;
    border-top: var(--component-border-width) solid var(--line);
    background: var(--surface);
    animation: participant-panel-open 210ms var(--ease-out) both;
}

:root .participant-picker-content > label {
    gap: .45rem;
}

:root .participant-picker-content > label > span {
    font-size: .83rem;
    font-weight: 800;
}

:root .participant-picker-content input[type="search"] {
    min-height: 2.9rem;
    padding-inline: .8rem;
    border-color: var(--participant-line);
    background: var(--participant-faint);
}

:root .participant-picker .participant-selected {
    gap: .42rem;
    padding: .55rem .62rem;
    border: var(--component-border-width) solid var(--participant-line);
    border-left: 3px solid var(--participant-ink);
    border-radius: .6rem;
    background: var(--participant-faint);
    box-shadow: none;
    animation: participant-selection-in 190ms var(--ease-out) both;
}

:root .participant-picker .participant-selected > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

:root .participant-picker .participant-chip {
    min-height: 2.05rem;
    border-color: var(--participant-line);
    color: var(--participant-ink);
    background: var(--participant-soft);
    box-shadow: none;
}

:root .participant-candidate-list {
    gap: .45rem;
}

:root .participant-picker .check-option {
    min-height: 3.3rem;
    align-items: center;
    gap: .7rem;
    padding: .58rem .68rem;
    border-color: color-mix(in srgb, var(--participant-line) 68%, var(--line));
    border-radius: .65rem;
    background: var(--surface-subtle);
    box-shadow: none;
    transition: transform 150ms var(--ease-out), border-color 180ms ease, background-color 180ms ease;
}

:root .participant-picker .check-option:active {
    transform: scale(.985);
}

:root .participant-picker .check-option input {
    width: 1.2rem;
    height: 1.2rem;
    min-height: 1.2rem;
    accent-color: var(--participant-ink);
}

:root .participant-picker .check-option strong,
:root .participant-picker .check-option small {
    line-height: 1.25;
}

:root .participant-picker .check-option small,
:root .participant-picker-help {
    color: var(--muted);
}

:root .participant-picker .participant-empty {
    color: var(--muted);
}

:root .participant-picker-help {
    font-size: .76rem;
    line-height: 1.4;
}

:root .participant-team-summary {
    display: flex;
    align-items: center;
    gap: .48rem;
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

:root .participant-team-summary::before {
    width: .62rem;
    height: .62rem;
    flex: 0 0 auto;
    border: 2px solid var(--muted);
    border-radius: 50%;
    content: "";
}

:root .participant-team-summary.is-complete {
    color: var(--success);
}

:root .participant-team-summary.is-complete::before {
    border-color: var(--success);
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

@keyframes participant-panel-open {
    from { opacity: 0; transform: translateY(-.28rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes participant-selection-in {
    from { opacity: 0; transform: translateY(-.2rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
    :root .participant-picker > summary:hover {
        background: var(--participant-faint);
    }

    :root .participant-picker .check-option:hover {
        border-color: var(--participant-line);
        background: var(--participant-faint);
    }
}

@media (max-width: 760px) {
    :root .page-heading-quick-actions {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        justify-self: end;
    }

    :root .page-heading-quick-action {
        min-height: 3.1rem;
    }

    :root .participant-picker > summary {
        min-height: 3.85rem;
        padding-inline: .75rem;
    }

    :root .participant-picker-content {
        padding: .68rem .75rem .8rem;
    }

    :root .participant-picker .check-option {
        min-height: 3.6rem;
    }
}

:root .management-shell {
    width: min(100% - 2rem, 46rem);
}

:root .management-heading {
    margin-bottom: 1rem;
}

:root .management-heading p {
    max-width: 39rem;
}

:root .management-area-list {
    display: grid;
    gap: .75rem;
}

:root .management-area-card {
    display: grid;
    min-height: 5.75rem;
    align-items: center;
    grid-template-columns: var(--management-icon-width, 3rem) minmax(0, 1fr) auto;
    gap: .8rem;
    padding: .85rem .9rem;
    border: 2px solid var(--line);
    border-radius: .9rem;
    color: var(--ink);
    background: var(--surface-card);
    box-shadow: var(--neo-control-raised-shadow);
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease-out);
    animation: panel-enter 240ms var(--ease-out) both;
}

:root .management-area-card:nth-child(2) {
    animation-delay: 45ms;
}

:root .management-area-card:nth-child(3) {
    animation-delay: 90ms;
}

:root .management-area-card:focus-visible {
    border-color: var(--school-blue);
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:root .management-area-card:active {
    border-color: color-mix(in srgb, var(--school-blue) 45%, var(--line));
    box-shadow: var(--neo-inset-shadow);
    transform: translateY(2px) scale(.97);
}

@media (hover: hover) and (pointer: fine) {
    :root .management-area-card:hover {
        border-color: color-mix(in srgb, var(--school-blue) 45%, var(--line));
        transform: translateY(-1px);
    }
}

:root .management-area-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--school-blue) 32%, var(--line));
    border-radius: .75rem;
    color: var(--school-blue);
    background: var(--school-blue-soft);
}

:root .management-area-icon .management-card-icon {
    width: 2rem;
    height: 2rem;
}

:root .management-area-copy {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

:root .management-area-copy strong {
    font-size: 1rem;
    line-height: 1.2;
}

:root .management-area-copy small,
:root .management-area-side small {
    color: var(--muted);
    line-height: 1.35;
}

:root .management-area-copy small {
    font-size: .78rem;
}

:root .management-area-side {
    display: grid;
    min-width: 4.5rem;
    justify-items: end;
    gap: .25rem;
    text-align: right;
}

:root .management-area-side small {
    font-size: .7rem;
    font-weight: 700;
}

:root .management-area-side > span {
    color: var(--link);
    font-size: 1.1rem;
    font-weight: 800;
    transition: transform 180ms var(--ease-out);
}

:root .management-area-card:active .management-area-side > span {
    transform: translateX(.16rem);
}

:root .management-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem;
    margin-top: 1rem;
}

:root .management-search input {
    width: 100%;
    min-width: 0;
}

:root .management-records-section,
:root .management-history {
    margin-top: 1rem;
}

:root .management-list-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--line);
}

:root .management-list-heading h2,
:root .management-list-heading p {
    margin: 0;
}

:root .management-list-heading h2 {
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -.015em;
}

:root .management-list-heading p {
    margin-top: .14rem;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
}

:root .management-record-list {
    margin-top: .6rem;
    overflow: hidden;
    border: var(--component-border-width) solid var(--line);
    border-radius: .82rem;
    background: var(--surface);
    box-shadow: var(--operational-shadow);
    animation: panel-enter 220ms var(--ease-out) both;
}

:root .management-record-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

:root .management-record-row:last-child {
    border-bottom: 0;
}

:root .management-record-row::before {
    position: absolute;
    top: .58rem;
    bottom: .58rem;
    left: 0;
    width: .2rem;
    border-radius: 0 .2rem .2rem 0;
    background: var(--school-blue);
    content: "";
}

:root .management-record-main {
    display: grid;
    min-width: 0;
    min-height: 4.35rem;
    align-content: center;
    gap: .25rem;
    padding: .52rem .65rem .52rem .9rem;
}

:root .management-record-main header {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .55rem;
}

:root .management-record-main strong,
:root .management-record-main header span,
:root .management-record-main p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .management-record-main strong {
    flex: 0 0 auto;
    color: var(--ink);
    font-size: .88rem;
    letter-spacing: -.015em;
}

:root .management-record-main header span {
    min-width: 0;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 720;
}

:root .management-record-main p {
    margin: 0;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.3;
}

:root .management-record-action {
    width: 5.25rem;
}

:root .management-summary {
    margin-top: 1rem;
    padding: .8rem;
    border: var(--component-border-width) solid var(--line);
    border-radius: .9rem;
    background: var(--surface-card);
    box-shadow: var(--operational-shadow);
    animation: panel-enter 220ms var(--ease-out) both;
}

:root .management-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface);
}

:root .management-summary-grid > div {
    min-width: 0;
    padding: .65rem .7rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

:root .management-summary-grid > div:nth-child(2n) {
    border-right: 0;
}

:root .management-summary-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

:root .management-summary-grid dt {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
}

:root .management-summary-grid dd {
    margin: .16rem 0 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: .83rem;
    font-weight: 720;
    line-height: 1.3;
}

:root .management-history-list {
    margin-top: .6rem;
}

:root .catalog-section {
    margin-top: 1rem;
}

:root .catalog-choice-list {
    display: grid;
    gap: .55rem;
    margin-top: .6rem;
    animation: panel-enter 220ms var(--ease-out) both;
}

:root .catalog-choice-card {
    --management-icon-width: 4.25rem;
    min-height: 4.65rem;
    animation: none;
}

:root .catalog-choice-card .management-area-icon {
    width: var(--management-icon-width);
    height: 3rem;
}

:root .catalog-choice-card .management-card-icon.asset-mask-icon {
    width: 3rem;
    height: 3rem;
}

:root .catalog-choice-symbol {
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

:root .catalog-brand-row {
    grid-template-columns: minmax(0, 1fr) 2.4rem 2.7rem;
}

:root :is(.catalog-brand-row, .catalog-model-row).is-active-record::before {
    background: var(--success);
}

:root :is(.catalog-brand-row, .catalog-model-row).is-inactive-record::before {
    background: var(--danger);
}

:root .catalog-brand-main {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr);
    min-width: 0;
    min-height: 4.35rem;
    align-items: center;
    gap: .62rem;
    padding: .48rem .35rem .48rem .82rem;
    color: var(--ink);
    text-decoration: none;
}

:root .catalog-brand-main .management-area-icon {
    width: 2.65rem;
    height: 2.65rem;
}

:root .catalog-brand-main .management-area-copy {
    gap: .16rem;
}

:root .catalog-brand-main .management-area-copy strong,
:root .catalog-brand-main .management-area-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .catalog-brand-arrow {
    display: grid;
    min-height: 4.35rem;
    place-items: center;
    padding-right: .35rem;
    color: var(--school-blue);
    font-size: 1rem;
    font-weight: 850;
    transition: transform 160ms var(--ease-out);
}

:root .catalog-brand-main:active + .record-status-indicator + .catalog-brand-arrow {
    transform: translateX(.18rem);
}

:root .catalog-model-row {
    grid-template-columns: minmax(0, 1fr) 2.4rem;
}

:root :is(.catalog-brand-row, .catalog-model-row) > .record-status-indicator {
    justify-self: center;
}

:root .catalog-form:not(.bottom-sheet-form) {
    animation: panel-enter 220ms var(--ease-out) both;
}

@media (hover: hover) and (pointer: fine) {
    :root .catalog-brand-main:hover + .record-status-indicator + .catalog-brand-arrow {
        transform: translateX(.18rem);
    }
}

@media (max-width: 520px) {
    :root .management-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    :root .management-search .button-link {
        grid-column: 1 / -1;
        width: fit-content;
        min-height: 2.75rem;
        padding-block: .25rem;
    }

    :root .management-record-main {
        min-height: 4.1rem;
        padding: .48rem .45rem .48rem .8rem;
    }

    :root .management-record-main header {
        gap: .4rem;
    }

    :root .management-record-action {
        width: 4.65rem;
    }

    :root .catalog-brand-row {
        grid-template-columns: minmax(0, 1fr) 2.25rem 2.45rem;
    }

    :root .catalog-model-row {
        grid-template-columns: minmax(0, 1fr) 2.25rem;
    }

    :root .catalog-brand-main {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        min-height: 4.1rem;
        gap: .5rem;
        padding: .45rem .25rem .45rem .72rem;
    }

    :root .catalog-brand-main .management-area-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

}

@media (max-width: 380px) {
    :root .management-area-card {
        grid-template-columns: var(--management-icon-width, 3rem) minmax(0, 1fr) 1rem;
    }

    :root .management-area-side {
        min-width: 0;
    }

    :root .management-area-side small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root :is(.participant-picker, .participant-picker > summary, .participant-picker > summary::after, .participant-picker-content, .participant-picker .participant-selected, .management-area-card, .management-area-side > span, .management-record-list, .management-summary, .management-record-action, .catalog-choice-list, .catalog-brand-arrow, .catalog-form) {
        animation: none;
        transition: none;
    }
}

/* PWA: estado sin conexión y actualización explícita, sin ocultar la navegación. */
.offline-card {
    display: grid;
    justify-items: start;
}

.offline-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin: .25rem 0 1rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--school-blue) 42%, var(--line));
    border-radius: 50%;
    color: var(--school-blue);
    background: var(--school-blue-soft);
}

.offline-icon svg {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.offline-card .button {
    margin-top: .4rem;
}

.offline-privacy {
    display: block;
    margin-top: 1rem;
    color: var(--muted);
    line-height: 1.5;
}

.pwa-update-notice {
    position: fixed;
    z-index: calc(var(--layer-popover) + 3);
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    width: min(calc(100% - 2rem), 31rem);
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    color: var(--ink);
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    animation: pwa-update-enter 240ms var(--ease-out) both;
}

.pwa-install-notice {
    position: fixed;
    z-index: calc(var(--layer-popover) + 3);
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    gap: .7rem;
    width: min(calc(100% - 2rem), 25rem);
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    color: var(--ink);
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    animation: pwa-install-enter 220ms var(--ease-out) both;
}

.app-has-navigation .pwa-update-notice {
    bottom: calc(6.35rem + env(safe-area-inset-bottom));
}

.app-has-navigation .pwa-install-notice {
    bottom: calc(6.35rem + env(safe-area-inset-bottom));
}

.pwa-update-notice span {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.pwa-update-notice strong {
    font-size: .9rem;
}

.pwa-update-notice small {
    color: var(--muted);
    line-height: 1.3;
}

.pwa-update-notice .button {
    min-height: 2.75rem;
    padding-inline: .9rem;
}

.pwa-install-notice span {
    display: grid;
    gap: .2rem;
}

.pwa-install-notice strong {
    font-size: .9rem;
}

.pwa-install-notice small {
    color: var(--muted);
    line-height: 1.4;
}

.pwa-install-notice .button {
    justify-self: end;
}

@keyframes pwa-update-enter {
    from {
        opacity: 0;
        transform: translate(-50%, .75rem) scale(.985);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes pwa-install-enter {
    from { opacity: 0; transform: translateY(.55rem) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 460px) {
    .app-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .pwa-install-button {
        width: 100%;
    }

    .pwa-update-notice {
        grid-template-columns: 1fr;
    }

    .pwa-update-notice .button {
        width: 100%;
    }

    .pwa-install-notice {
        right: 1rem;
    }

    .pwa-install-notice .button {
        width: 100%;
    }
}

/* Acceso móvil: cabe en la vista instalada sin crear desplazamiento residual.
 * Si aparece el teclado o la pantalla es excepcionalmente baja, conserva el scroll natural. */
@media (max-width: 640px) {
    body.app-background,
    .app-background {
        min-height: 100svh;
    }

    .auth-shell {
        min-height: 100svh;
        padding: max(.75rem, env(safe-area-inset-top)) 1rem max(.75rem, env(safe-area-inset-bottom));
    }

    .auth-card {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .auth-card-utility {
        top: .85rem;
        right: .85rem;
    }

    .auth-identity {
        margin-bottom: .7rem;
    }

    .auth-mark {
        width: 3.25rem;
        height: 3.25rem;
    }

    .auth-card h1 {
        padding-right: 2.8rem;
        font-size: clamp(2rem, 10vw, 2.5rem);
    }

    .auth-copy {
        margin: .7rem 0 0;
        line-height: 1.45;
    }

    .auth-card .form-grid {
        gap: .75rem;
        margin-top: 1.2rem;
    }

    .auth-card label,
    .auth-card .form-field {
        gap: .35rem;
    }

    .auth-card small {
        line-height: 1.35;
    }

    .auth-pwa-install {
        margin-top: .75rem;
    }
}

@media (max-width: 640px) and (max-height: 640px) {
    .auth-shell {
        padding-block: .5rem;
    }

    .auth-card {
        padding: 1rem;
    }

    .auth-identity {
        margin-bottom: .45rem;
    }

    .auth-mark {
        width: 2.85rem;
        height: 2.85rem;
    }

    .auth-copy {
        margin-top: .5rem;
    }

    .auth-card .form-grid {
        gap: .6rem;
        margin-top: .85rem;
    }
}

:root [data-logout-form] .button:disabled {
    cursor: wait;
    opacity: .72;
}