/* =============================================================================
   Calendario de empresa · hoja de estilo única (§15.2, §15.5)
   Sin frameworks, sin compilación. Mobile-first: se escribe para 320 px y se
   amplía con @media (min-width). No hay scroll horizontal de página.

   TOKENS (nombres documentados, todos viven en :root)
   ---------------------------------------------------------------------------
   Espaciado            --space-0 (0) … --space-8 (2rem), escala de 4 px.
   Radios               --radius-sm .375rem, --radius-md .625rem,
                        --radius-lg 1rem, --radius-pill 999px.
   Bordes               --border-thin 1px, --border-strong 2px,
                        --border-focus 3px; --color-border / --color-border-strong.
   Tipografía           --font-ui (pila del sistema), --font-mono,
                        --text-2xs 11px, --text-xs 12px, --text-sm 14px,
                        --text-base 16px, --text-lg 18px, --text-xl 22px,
                        --text-2xl 28px; --leading 1.5, --leading-tight 1.3.
   Estados              --color-bg, --color-surface, --color-surface-alt,
                        --color-text, --color-text-muted, --color-primary,
                        --color-primary-dark, --color-primary-soft,
                        --color-success / --color-error / --color-warning /
                        --color-info (y sus variantes -soft y -border),
                        --color-neutral-day (día no laborable),
                        --color-focus.
   Colores de empleado  --w-bg / --w-fg por clase .worker-01 … .worker-12.
                        Clave numérica de BD → clase compilada. Nunca CSS del
                        usuario. Texto blanco SOLO en las claves oscuras:
                        02, 04, 06, 08, 10 y 12 (el resto usa --w-fg oscuro).
   Área segura          --safe-top, --safe-bottom, --safe-left, --safe-right
                        (env(safe-area-inset-*)) y --bottom-nav-h.
   Movimiento           --transition-fast 120ms; se anula con
                        prefers-reduced-motion.
   ========================================================================== */

:root {
    /* Espaciado */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    /* Radios */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Bordes */
    --border-thin: 1px;
    --border-strong: 2px;
    --border-focus: 3px;

    /* Tipografía */
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --leading: 1.5;
    --leading-tight: 1.3;

    /* Colores de estado */
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-alt: #eef2f5;
    --color-text: #17222b;
    --color-text-muted: #55636f;
    --color-border: #c8d2da;
    --color-border-strong: #8c9aa6;
    --color-primary: #1d4e6f;
    --color-primary-dark: #143a53;
    --color-primary-soft: #e2edf5;
    --color-focus: #0b5fa5;
    --color-success: #1d6b3f;
    --color-success-soft: #e3f2e7;
    --color-error: #9c2b25;
    --color-error-soft: #fbe6e4;
    --color-warning: #7a5200;
    --color-warning-soft: #fdf1d8;
    --color-info: #1d4e6f;
    --color-info-soft: #e2edf5;
    --color-neutral-day: #e7ebee;
    --color-neutral-day-strong: #d3dade;
    --color-overlay: rgba(23, 34, 43, 0.55);

    /* Área segura y alturas de chrome */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --bottom-nav-h: 60px;
    --header-h: auto;

    /* Movimiento */
    --transition-fast: 120ms ease-out;

    /* Padding lateral del contenido: mínimo a 320 px para que la cuadrícula
       de 7 columnas quepa sin scroll horizontal (§15.2). */
    --page-pad: 4px;
    --content-max: 760px;
}

@media (min-width: 360px) {
    :root { --page-pad: 10px; }
}

@media (min-width: 480px) {
    :root { --page-pad: 14px; }
}

@media (min-width: 768px) {
    :root { --page-pad: var(--space-4); --content-max: 900px; }
}

/* ---------------------------------------------------------------------------
   Paleta de empleados. Clave 1..12 → clase compilada.
   Claves oscuras (texto blanco): 02, 04, 06, 08, 10, 12.
   Claves claras (texto oscuro):  01, 03, 05, 07, 09, 11.
   -------------------------------------------------------------------------- */
.worker-01 { --w-bg: #dce9f7; --w-fg: #14304a; }
.worker-02 { --w-bg: #2f5d8a; --w-fg: #ffffff; }
.worker-03 { --w-bg: #d8ecdf; --w-fg: #14351f; }
.worker-04 { --w-bg: #2f6b4f; --w-fg: #ffffff; }
.worker-05 { --w-bg: #f7e6c4; --w-fg: #4a3208; }
.worker-06 { --w-bg: #8a5a1a; --w-fg: #ffffff; }
.worker-07 { --w-bg: #ecdff2; --w-fg: #38204a; }
.worker-08 { --w-bg: #5b3a7e; --w-fg: #ffffff; }
.worker-09 { --w-bg: #f8dcd8; --w-fg: #4d1c17; }
.worker-10 { --w-bg: #9c3b3b; --w-fg: #ffffff; }
.worker-11 { --w-bg: #d5e8ea; --w-fg: #123c40; }
.worker-12 { --w-bg: #1f5f63; --w-fg: #ffffff; }

/* ---------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-2);
    line-height: var(--leading-tight);
    font-weight: 700;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-primary-dark); text-decoration: underline; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }

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

hr {
    border: 0;
    border-top: var(--border-thin) solid var(--color-border);
    margin: var(--space-4) 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

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

.is-hidden { display: none !important; }

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: calc(-1 * var(--space-8));
    z-index: 40;
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    border: var(--border-strong) solid var(--color-primary);
    border-radius: var(--radius-sm);
    transition: top var(--transition-fast);
}

.skip-link:focus { top: calc(var(--safe-top) + var(--space-2)); }

/* ---------------------------------------------------------------------------
   Estructura de la aplicación
   -------------------------------------------------------------------------- */
.app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-primary);
    color: #ffffff;
    padding: calc(var(--safe-top) + var(--space-2)) calc(var(--page-pad) + var(--safe-right)) var(--space-2) calc(var(--page-pad) + var(--safe-left));
    border-bottom: var(--border-thin) solid var(--color-primary-dark);
}

.app-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    max-width: var(--content-max);
    margin: 0 auto;
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.app-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.app-header__company { font-size: var(--text-base); }

.app-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.app-header .btn--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}

.app-header .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

.app-header .badge { margin-left: var(--space-1); }

/* Sub-cabecera de administración */
.admin-nav {
    background: var(--color-primary-dark);
    color: #ffffff;
    padding: var(--space-2) calc(var(--page-pad) + var(--safe-right)) var(--space-2) calc(var(--page-pad) + var(--safe-left));
}

.admin-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-max);
}

.admin-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    font-size: var(--text-sm);
    text-decoration: none;
}

.admin-nav__link.is-active,
.admin-nav__link[aria-current="page"] {
    background: #ffffff;
    color: var(--color-primary-dark);
    border-color: #ffffff;
    font-weight: 700;
}

.app-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-3) calc(var(--page-pad) + var(--safe-right)) calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--space-5)) calc(var(--page-pad) + var(--safe-left));
}

.app-main--flush { padding-top: 0; }

/* Portada: calendario primero (~mitad superior) y resumen debajo */
.calendar { margin-bottom: var(--space-5); }

.calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.calendar__title {
    margin: 0;
    font-size: var(--text-lg);
    text-align: center;
    flex: 1 1 auto;
    text-transform: capitalize;
}

.calendar__today { margin: 0 0 var(--space-2); text-align: center; }

.home-summary { margin-bottom: var(--space-5); }

.page-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.page-head__text { flex: 1 1 auto; min-width: 0; }
.page-head__title { margin: 0; font-size: var(--text-xl); }
.page-head__subtitle { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Navegación inferior (4 destinos, icono + texto, safe-area)
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border-top: var(--border-thin) solid var(--color-border);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-1) 2px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-2xs);
    line-height: 1.2;
    text-align: center;
    border-top: var(--border-focus) solid transparent;
}

.bottom-nav__item.is-active {
    color: var(--color-primary-dark);
    font-weight: 700;
    border-top-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.bottom-nav__icon { font-size: 1.25rem; line-height: 1; }

.bottom-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Estado «sin navegación»: cambio de contraseña obligatorio. El layout marca
   el body con data-nav="blocked"; no se inventan pestañas nuevas. */
body[data-nav="blocked"] .bottom-nav { display: none; }
body[data-nav="blocked"] .app-main { padding-bottom: calc(var(--space-6) + var(--safe-bottom)); }

@media (min-width: 360px) {
    .bottom-nav__item { font-size: var(--text-xs); }
}

/* ---------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.btn--secondary:hover { background: var(--color-primary-soft); }

.btn--ghost {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
    font-weight: 600;
}

.btn--ghost:hover { background: var(--color-surface-alt); }

/* Destructivo: nunca compite con la acción de guardar. Texto humano. */
.btn--danger {
    background: transparent;
    border-color: var(--color-error);
    color: var(--color-error);
    font-weight: 600;
}

.btn--danger:hover { background: var(--color-error-soft); }

.btn--icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    font-size: var(--text-lg);
    font-weight: 700;
}

.btn--small {
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn[aria-busy="true"] { cursor: progress; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.btn-row--end { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   Insignias, avisos, píldoras
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: var(--border-thin) solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

.badge--attention { background: #b3261e; border-color: #b3261e; color: #ffffff; }
.badge--info { background: var(--color-info-soft); border-color: var(--color-info); color: var(--color-info); }
.badge--muted { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-muted); }
.badge--capacity { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.badge--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

.pill--warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.pill--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.pill--error { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error); }

.notice {
    margin: 0 auto var(--space-3);
    padding: var(--space-3);
    border: var(--border-thin) solid var(--color-border);
    border-left-width: 6px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.notice__title { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.notice__message { margin: 0; }
.notice__action { margin-top: var(--space-2); }

.notice--success { background: var(--color-success-soft); border-color: var(--color-success); }
.notice--error { background: var(--color-error-soft); border-color: var(--color-error); }
.notice--warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.notice--info { background: var(--color-info-soft); border-color: var(--color-info); }

/* ---------------------------------------------------------------------------
   Tarjetas y listas
   -------------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.card--compact { padding: var(--space-3); }
.card--attention { border-color: var(--color-warning); background: var(--color-warning-soft); }
.card--danger { border-color: var(--color-error); }

.card__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.card__subtitle {
    margin: calc(-1 * var(--space-1)) 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.card__meta {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.card__body > :last-child { margin-bottom: 0; }

.list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: var(--border-thin) solid var(--color-border);
    min-height: 44px;
}

.list__item:last-child { border-bottom: 0; }

.list__main { flex: 1 1 auto; min-width: 0; font-weight: 600; }

.list__meta {
    flex: 0 1 auto;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
}

.list--plain { border: 0; background: transparent; }
.list--plain .list__item { padding-left: 0; padding-right: 0; }

.stack > * + * { margin-top: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }

.grid-2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }

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

/* ---------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.field {
    margin-bottom: var(--space-4);
    display: block;
}

.field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 600;
    font-size: var(--text-base);
}

.field__input,
.field__select,
.field__textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: var(--border-strong) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
}

.field__textarea { min-height: 96px; resize: vertical; }

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
    border-color: var(--color-error);
    background: var(--color-error-soft);
}

.field__help {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.field__error {
    margin: var(--space-1) 0 0;
    color: var(--color-error);
    font-size: var(--text-sm);
    font-weight: 600;
}

.field__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.field--check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 44px;
}

.field--check input[type="checkbox"],
.field--check input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.field--check .field__label { margin: 0; font-weight: 500; }

.fieldset {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: 0 0 var(--space-4);
    background: var(--color-surface);
}

.fieldset__legend {
    padding: 0 var(--space-1);
    font-weight: 700;
    font-size: var(--text-base);
}

.inline-error {
    margin: var(--space-1) 0 0;
    color: var(--color-error);
    font-size: var(--text-sm);
    font-weight: 600;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Calendario mensual: 7 columnas que caben a 320 px
   -------------------------------------------------------------------------- */
.month-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    /* A 320 px: 7 columnas de ~43,7 px con 1 px de separación. */
    border-spacing: 1px 3px;
    margin: 0 0 var(--space-3);
}

@media (min-width: 360px) {
    .month-grid { border-spacing: 2px 3px; }
}

.month-grid caption {
    caption-side: top;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: 0 0 var(--space-1);
}

.month-grid th {
    padding: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
}

.month-grid th.is-weekend { color: var(--color-primary); }
.month-grid td { padding: 0; vertical-align: stretch; }

.day-cell {
    position: relative;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.day-cell__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    min-height: 52px;
    /* Franja superior reservada a la insignia de vacaciones y a las marcas. */
    padding: 13px 1px 2px;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--w-bg, var(--color-surface));
    color: var(--w-fg, var(--color-text));
    text-decoration: none;
    text-align: center;
}

.day-cell__number {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.1;
}

.day-cell__flags {
    position: absolute;
    top: 1px;
    left: 2px;
    display: flex;
    gap: 1px;
    font-size: var(--text-2xs);
    line-height: 1;
}

.day-cell__badge {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--border-thin) solid var(--color-primary);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1;
}

/* Cupo completo: borde + icono (nunca solo color) */
.day-cell__badge.is-full {
    background: #ffffff;
    border: var(--border-strong) solid var(--color-error);
    color: var(--color-error);
}

.day-cell__marker {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.1;
    padding: 0 2px;
    border-radius: var(--radius-sm);
}

.day-cell__marker--mine {
    background: rgba(23, 34, 43, 0.82);
    color: #ffffff;
    padding: 0 3px;
}

.day-cell__marker--blocked {
    background: repeating-linear-gradient(45deg, #ffffff 0 3px, #b3261e 3px 6px);
    border: var(--border-thin) solid #b3261e;
    color: #7a1710;
    background-color: #ffffff;
}

.day-cell__marker--rest {
    background: rgba(255, 255, 255, 0.85);
    border: var(--border-thin) solid var(--color-border-strong);
    color: var(--color-text);
}

.day-cell__holiday {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-sm);
    padding: 0 2px;
}

/* Festivo: fondo neutro de no trabajo, sin ocultar insignias ni bloqueos */
.day-cell.is-holiday .day-cell__link {
    background: var(--color-neutral-day);
    color: var(--color-text);
}

/* Domingo sin turno: neutro, nunca coloreado como si se trabajara */
.day-cell.is-weekend .day-cell__link,
.day-cell.is-neutral .day-cell__link { background: var(--color-surface-alt); color: var(--color-text); }

.day-cell.is-holiday .day-cell__link { background: var(--color-neutral-day); }

/* Bloqueo: patrón, sin fondo rojo que tape al responsable */
.day-cell.is-blocked .day-cell__link {
    background-image: repeating-linear-gradient(135deg, rgba(179, 38, 30, 0.22) 0 4px, rgba(255, 255, 255, 0) 4px 8px);
}

/* Hoy / seleccionado: solo bordes, el color del empleado no cambia de significado */
.day-cell.is-today .day-cell__link {
    border: var(--border-strong) solid var(--color-text);
    box-shadow: inset 0 0 0 1px #ffffff;
}

.day-cell.is-selected .day-cell__link {
    border: var(--border-strong) dashed var(--color-primary-dark);
}

.day-cell.is-outside .day-cell__link { opacity: 0.55; }

.day-cell.is-past .day-cell__number { color: var(--color-text-muted); }

.day-cell .day-cell__link:hover { border-color: var(--color-primary-dark); }

/* Leyenda de trabajadores */
.legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-3);
    padding: 0;
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    font-size: var(--text-sm);
}

.legend__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.worker-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid rgba(23, 34, 43, 0.25);
    background: var(--w-bg, var(--color-surface-alt));
    color: var(--w-fg, var(--color-text));
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.worker-chip__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--w-bg, var(--color-border));
    border: var(--border-thin) solid rgba(23, 34, 43, 0.35);
    flex: 0 0 auto;
}

.worker-chip--light { border-color: var(--color-border-strong); }
.worker-chip--light .worker-chip__dot { border-color: var(--color-border-strong); }

/* ---------------------------------------------------------------------------
   Asistente por pasos
   -------------------------------------------------------------------------- */
.stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
}

.stepper__step {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.stepper__step--current {
    border-color: var(--color-primary);
    border-width: var(--border-strong);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.stepper__step--done { color: var(--color-success); border-color: var(--color-success); }

.stepper__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    border: var(--border-thin) solid currentColor;
    font-size: var(--text-2xs);
    font-weight: 700;
    flex: 0 0 auto;
}

.stepper__label { min-width: 0; overflow-wrap: anywhere; }
.stepper__progress { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }

.step[hidden] { display: none !important; }

/* Pestañas (bandejas) */
.tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    margin: 0 0 var(--space-3);
    padding: 0 0 var(--space-1);
    list-style: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { height: 4px; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.tab.is-active,
.tab[aria-current="page"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Antes / después e impacto
   -------------------------------------------------------------------------- */
.before-after {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    margin: 0 0 var(--space-3);
}

@media (min-width: 480px) {
    .before-after { grid-template-columns: 1fr 1fr; }
}

.before-after__side {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--color-surface);
}

.before-after__side--after { border-color: var(--color-primary); background: var(--color-primary-soft); }

.before-after__label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.before-after__value { display: block; font-size: var(--text-sm); }

.impact {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.impact__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: var(--border-thin) dotted var(--color-border);
    font-size: var(--text-sm);
}

.impact__row:last-of-type { border-bottom: 0; }
.impact__label { color: var(--color-text-muted); }
.impact__value { font-weight: 700; }
.impact__caveat { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.impact__conflicts { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-error); font-size: var(--text-sm); }
.impact__warnings { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-warning); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Tablas (se convierten en tarjetas apiladas bajo 640 px)
   -------------------------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: var(--space-3);
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.table-wrap caption {
    caption-side: top;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: 0 0 var(--space-1);
}

.table-wrap th,
.table-wrap td {
    border: var(--border-thin) solid var(--color-border);
    padding: var(--space-2);
    text-align: left;
    vertical-align: top;
}

.table-wrap thead th { background: var(--color-surface-alt); font-size: var(--text-xs); }

.table-wrap--stack { overflow-x: visible; }

/* Bajo 640 px cualquier tabla de datos se convierte en tarjetas apiladas
   (atributo `data-label` en cada `td`). La cuadrícula del calendario NO usa
   `.table-wrap`: mantiene sus 7 columnas. */
@media (max-width: 639px) {
    .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table-wrap tr {
        display: block;
        border: var(--border-thin) solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-2);
        background: var(--color-surface);
        padding: var(--space-2);
    }
    .table-wrap td {
        display: block;
        border: 0;
        border-bottom: var(--border-thin) dotted var(--color-border);
        padding: var(--space-1) 0;
    }
    .table-wrap td:last-child { border-bottom: 0; }
    .table-wrap td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--text-xs);
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
}

/* ---------------------------------------------------------------------------
   Vacíos, paginación, suscripción, festivos
   -------------------------------------------------------------------------- */
.empty {
    border: var(--border-thin) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-4);
    text-align: left;
}

.empty__icon { font-size: var(--text-2xl); display: block; margin-bottom: var(--space-1); }
.empty__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.empty__message { margin: 0 0 var(--space-3); color: var(--color-text-muted); }

.pagination {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

.subscription-card { border-color: var(--color-primary); }

.subscription-card__secret {
    display: block;
    word-break: break-all;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-surface-alt);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin: var(--space-2) 0;
}

.holiday-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid var(--color-border-strong);
    background: var(--color-neutral-day);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 700;
}

.holiday-badge--working { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
   Utilidades de estado en vivo y detalles
   -------------------------------------------------------------------------- */
.live-status {
    display: block;
    min-height: 22px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0;
}

.live-status[data-state="error"] { color: var(--color-error); font-weight: 600; }
.live-status[data-state="ok"] { color: var(--color-success); font-weight: 600; }

.history-list { font-size: var(--text-sm); }

.detail-list { margin: 0 0 var(--space-3); }
.detail-list dt { font-weight: 700; margin-top: var(--space-2); }
.detail-list dd { margin: 0; }

.section { margin-bottom: var(--space-5); }
.section__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.section__hint { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }

.confirm-box {
    border: var(--border-strong) solid var(--color-error);
    border-radius: var(--radius-md);
    background: var(--color-error-soft);
    padding: var(--space-3);
    margin-top: var(--space-2);
}

.confirm-box__label { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.confirm-box__message { margin: 0 0 var(--space-2); }
.confirm-box__panel { margin: var(--space-2) 0; }
.confirm-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) calc(var(--page-pad) + var(--safe-right)) calc(var(--space-4) + var(--safe-bottom)) calc(var(--page-pad) + var(--safe-left));
    background: var(--color-bg);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--color-surface);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.auth-card__brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.auth-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

.error-page {
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1);
}

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

@media (prefers-contrast: more) {
    :root { --color-border: #6b7783; --color-text-muted: #3c4854; }
}

/* Escritorio: el contenido no se estira sin estructura */
@media (min-width: 1024px) {
    .app-main { padding-top: var(--space-5); }
    .month-grid { border-spacing: 4px 5px; }
    .day-cell__link { min-height: 64px; }
}