/* =========================================================================
   ASchedule · AUTOSOL
   Sistema visual. Hereda la paleta y el aire de la web de AS Booking (azul
   marino + turquesa, tarjetas blancas sobre fondo frío, sombras muy suaves)
   y lo lleva a una herramienta de trabajo: más densidad, más contraste y
   tipografía con cifras de ancho fijo, que aquí se leen columnas de números
   todo el día.

   Orden del archivo:
     1. Tipografías          8. Cabecera de página
     2. Variables            9. Resumen (métricas + panel)
     3. Base y utilidades   10. Cuadrante · escritorio
     4. Estructura          11. Cuadrante · móvil
     5. Navegación móvil    12. Mi horario
     6. Piezas comunes      13. Mi cuenta (+ páginas sueltas)
     7. Formularios         14. Equipo · Solicitudes · Reglas · Tablas
                            15. Movimiento (parallax, entradas)
                            16. Impresión
   ========================================================================= */

/* ── 1. Tipografías ─────────────────────────────────────────────────────
   Van en local (public/fonts). La app se usa en la oficina, a veces con la
   red regular: depender de Google Fonts significaba un parpadeo de texto en
   cada carga y quedarse sin fuente si no hay salida a internet. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. Variables ──────────────────────────────────────────────────────── */
:root {
    /* Azules de AS Booking */
    --navy: #063664;
    --navy-2: #0a4a85;
    --navy-deep: #04223f;
    --navy-ink: #021629;
    --teal: #009cb4;
    --teal-2: #00b8d4;
    --teal-3: #4fd3e8;
    --teal-soft: #e4f6fa;

    /* Texto y superficies */
    --ink: #12263a;
    --ink-2: #33475a;
    --muted: #5f7183;
    --muted-2: #8ca0b2;
    --line: #e3eaf2;
    --line-2: #eef3f8;
    --soft: #f5f9fc;
    --canvas: #f3f7fb;
    --card: #ffffff;

    /* Semánticos */
    --ok: #12a35c;
    --ok-soft: #e6f7ee;
    --warn: #d98218;
    --warn-soft: #fdf3e3;
    /* «En espera» tiene su propio amarillo, aparte del naranja de aviso: el
       naranja se confundía de un vistazo con el rojo de «rechazada». */
    --espera: #e8b800;
    --espera-soft: #fdf7d6;
    --espera-ink: #7a5f00;
    --danger: #d4453f;
    --danger-soft: #fdedec;

    /* Formas */
    --r-xs: 7px;
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Sombras: siempre teñidas de azul, nunca gris neutro */
    --sh-1: 0 1px 2px rgba(6, 54, 100, .05), 0 1px 3px rgba(6, 54, 100, .04);
    --sh-2: 0 1px 2px rgba(6, 54, 100, .04), 0 8px 24px rgba(6, 54, 100, .07);
    --sh-3: 0 2px 6px rgba(6, 54, 100, .05), 0 16px 44px rgba(6, 54, 100, .11);
    --sh-4: 0 24px 70px rgba(6, 54, 100, .18);
    --sh-navy: 0 6px 20px rgba(6, 54, 100, .26);

    /* Medidas de la estructura */
    --alto-top: 62px;    /* alto de la barra superior */
    --ancho: 1360px;     /* ancho máximo del contenido */

    /* Curvas */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 3. Base y utilidades ──────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* `hidden` tiene que ganar SIEMPRE.
 *
 * El navegador aplica `[hidden] { display: none }` con una especificidad
 * mínima, así que cualquier componente que fije su propio `display` —una clase
 * basta— lo pisa y el elemento sigue ahí. Eso dejaba el velo del menú móvil
 * (`position: fixed; inset: 0`) tapando la pantalla entera, invisible pero
 * tragándose todos los toques y clics por debajo de 780 px. Y con él, el aviso
 * el campo de compañero de las solicitudes y el botón de borrar semanas, que
 * también se declaran ocultos y también se veían. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* La barra superior va fija, así que tapa los primeros 62 px del documento.
       Sin esto, cualquier salto a un ancla —o un `scrollIntoView`, como el que
       centra el día de hoy en el cuadrante— deja el destino debajo de la barra. */
    scroll-padding-top: var(--alto-top);
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Jakarta', 'Inter', system-ui, sans-serif;
    letter-spacing: -.025em;
    margin: 0;
    color: var(--navy);
    font-weight: 800;
}

p { margin: 0; }
a { color: var(--navy-2); text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Las cifras siempre de ancho fijo: si no, las columnas de horas y de días
   bailan al cambiar de número y cuesta compararlas de un vistazo. */
table, .tnum, .cuadrante, .metric-card strong, .current-time,
.cm-dia-n, .date-box strong, .kpi-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

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

/* Un único anillo de foco en toda la app, visible sobre claro y sobre oscuro. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--teal-2);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.ico { flex: none; }

/* Un mismo dato se cuenta distinto según el sitio: en el escritorio se puede
   explicar el gesto del ratón y en el móvil no, porque ahí no existe. */
/* Van con !important a propósito: son utilidades que tienen que ganar a la
   regla de cada componente sin depender del orden del archivo. */
.solo-estrecho { display: none !important; }
@media (max-width: 900px) {
    .solo-ancho { display: none !important; }
    .solo-estrecho { display: block !important; }
}

.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;
}

/* ── 4. Estructura ─────────────────────────────────────────────────────
   Aplicación de barra SUPERIOR. La lateral se retiró: en un cuadrante lo que
   escasea es el ancho —columnas de días—, no el alto, y 272 px fijos a la
   izquierda eran una semana entera de menos en pantalla. */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* Hueco para la barra, que ya no ocupa sitio en el flujo (es `fixed`). */
    padding-top: var(--alto-top);
}

/* `fixed` y no `sticky`: pegada, la barra temblaba un píxel al desplazar. Un
   elemento pegajoso lo recoloca el compositor en cada fotograma y con esta capa
   —dos degradados radiales y una rejilla con máscara— el redondeo a subpíxel se
   nota. Fija sale del flujo y se ancla a la ventana, así que no hay nada que
   recalcular: no se mueve. El precio es el `padding-top` de arriba. */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    height: var(--alto-top);
    color: #dce9f4;
    background:
        radial-gradient(680px 200px at 12% -60%, rgba(0, 184, 212, .30), transparent 62%),
        radial-gradient(520px 180px at 88% 160%, rgba(0, 156, 180, .20), transparent 60%),
        linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy-2) 130%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 6px 24px rgba(6, 54, 100, .18);
}
/* Rejilla finísima: la misma textura que tenía la barra lateral, para que la
   marca no se pierda al cambiar de sitio. */
.topnav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 220% at 20% 0%, #000 25%, transparent 80%);
}

.topnav-in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 clamp(16px, 2.4vw, 28px);
}

/* ------------------------------------------------------------------ marca */
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    color: #fff;
}
.brand-mark {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 3px 10px rgba(0, 184, 212, .45));
}
.topnav-brand strong {
    display: block;
    font-family: 'Jakarta', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.15;
    color: #fff;
}
.topnav-brand small {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--teal-3);
}

/* Separador entre la marca y las secciones. */
.topnav-sep {
    flex: none;
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------------ secciones */
.topnav-links {
    display: flex;
    align-items: stretch;
    gap: 1px;
    height: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topnav-links::-webkit-scrollbar { display: none; }

/* Cuando no caben todas, la de los extremos se desvanece en lugar de cortarse
   en seco: es lo que dice «sigue habiendo secciones por ahí». Las clases las
   pone el JavaScript solo si de verdad hay algo fuera. */
.topnav-links.hay-mas-der {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent);
}
.topnav-links.hay-mas-izq {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 46px);
    mask-image: linear-gradient(to right, transparent, #000 46px);
}
.topnav-links.hay-mas-izq.hay-mas-der {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent);
}

.topnav-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 0 13px;
    color: #a3c1da;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.008em;
    white-space: nowrap;
    transition: color .16s var(--ease), background .16s var(--ease);
}
.topnav-links a .ico { color: #7ba1c1; transition: color .16s var(--ease); }
.topnav-links a:hover { color: #eaf4fb; background: rgba(255, 255, 255, .06); }
.topnav-links a:hover .ico { color: var(--teal-3); }

.topnav-links a.active {
    color: #fff;
    font-weight: 700;
    /* Un velo que sube desde abajo: da cuerpo a la sección activa sin tener
       que pintarle una pastilla, que en una barra de altura completa queda
       flotando. */
    background: linear-gradient(to top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 78%);
}
.topnav-links a.active .ico { color: var(--teal-2); }
.topnav-links a.active::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 0;
    height: 2.5px;
    border-radius: 3px 3px 0 0;
    background: var(--teal-2);
    box-shadow: 0 -1px 12px rgba(0, 184, 212, .8);
}
/* Distintivo con el número de cosas por decidir. Amarillo, como todo lo que
   está en el aire; el texto va oscuro porque sobre amarillo el blanco no se
   lee. Las cifras, de ancho fijo, para que no baile al pasar de 1 a 9. */
.nav-aviso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--espera);
    color: #4c3c00;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    flex: none;
}
.topnav-links a .nav-aviso { margin-left: 1px; }
/* En el menú lateral del móvil se va al extremo, como en una bandeja. */
.sheet-item .nav-aviso { margin-left: auto; }
.sheet-item.active .nav-aviso { background: var(--espera); color: #4c3c00; }

/* Distintivo de los accesos que abren otra web. Ahora mismo no hay ninguno,
   pero el menú los admite (`'externo' => true` en el elemento). */
.topnav-links a .nav-fuera { opacity: .45; }
.topnav-links a:hover .nav-fuera { opacity: .85; }

/* ------------------------------------------------------------- acciones */
.topnav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    flex: none;
}
.topnav-fecha {
    font-size: 12.5px;
    font-weight: 600;
    color: #8fb2cd;
    white-space: nowrap;
    padding-right: 4px;
}
.topnav-fecha::first-letter { text-transform: uppercase; }

/* El título de la página solo aparece en pantalla estrecha, donde la barra
   deja de llevar secciones y hace falta decir dónde estás. */
.topnav-titulo { display: none; min-width: 0; }
.topnav-titulo strong {
    display: block;
    font-family: 'Jakarta', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Controles sobre fondo oscuro: heredan la forma de los claros pero con el
   contraste dado la vuelta. */
.cuenta { position: relative; }
.cuenta-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 11px 0 5px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #eaf4fb;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cuenta-boton:hover,
.cuenta-boton.abierto { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
.cuenta-boton .avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.cuenta-boton .ico { color: #a3c1da; }
.cuenta-nombre { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cuenta-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 90;
    width: 268px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-4);
    animation: cuentaIn .16s var(--ease-out);
}
@keyframes cuentaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.cuenta-cab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-2);
}
.cuenta-cab strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.cuenta-cab span { display: block; font-size: 12px; color: var(--muted); }
.cuenta-campo > span {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.cuenta-menu select {
    width: 100%;
    margin: 0;
    height: 40px;
    padding: 0 32px 0 11px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235f7183' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 13.5px;
    font-weight: 600;
}
.cuenta-menu .secondary-button { height: 40px; font-size: 13.5px; }
.cuenta-menu .demo-pill { align-self: center; }

.topnav .demo-pill {
    color: #7ba1c1;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}

/* ----------------------------------------------------------------- panel */
.main-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 26px clamp(18px, 3vw, 34px) 60px;
}

/* Perfil de usuario (vive en la hoja del móvil). */
.mini-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: var(--r);
    background: var(--soft);
    border: 1px solid var(--line);
}
.mini-profile strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}
.mini-profile span { display: block; font-size: 11.5px; color: var(--muted); }
.mini-profile .avatar {
    background: linear-gradient(145deg, var(--teal), #0782a3);
    box-shadow: 0 3px 10px rgba(0, 156, 180, .3);
}

.demo-pill {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
    background: var(--soft);
    border: 1px solid var(--line);
}

/* Estrechando: primero se van los adornos, luego los rótulos, y por último
   —ya en el móvil— las secciones enteras se bajan a la barra del pulgar. */
@media (max-width: 1320px) {
    .topnav-fecha { display: none; }
}
@media (max-width: 1180px) {
    .cuenta { position: relative; }
.cuenta-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 11px 0 5px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #eaf4fb;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cuenta-boton:hover,
.cuenta-boton.abierto { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
.cuenta-boton .avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.cuenta-boton .ico { color: #a3c1da; }
.cuenta-nombre { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cuenta-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 90;
    width: 268px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-4);
    animation: cuentaIn .16s var(--ease-out);
}
@keyframes cuentaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.cuenta-cab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-2);
}
.cuenta-cab strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.cuenta-cab span { display: block; font-size: 12px; color: var(--muted); }
.cuenta-campo > span {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.cuenta-menu select {
    width: 100%;
    margin: 0;
    height: 40px;
    padding: 0 32px 0 11px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235f7183' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 13.5px;
    font-weight: 600;
}
.cuenta-menu .secondary-button { height: 40px; font-size: 13.5px; }
.cuenta-menu .demo-pill { align-self: center; }

.topnav .demo-pill { display: none; }
    .topnav-links a { padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 1040px) {
    .topnav-brand small { display: none; }
    .topnav-links a .ico { display: none; }
    .view-switch { display: none; }
}

/* ── 5. Navegación móvil ───────────────────────────────────────────────── */
.tabbar { display: none; }
.sheet, .sheet-veil { display: none; }

@media (max-width: 780px) {
    body { font-size: 15px; }

    :root { --alto-top: 58px; }

    .content { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
    .topnav-in { gap: 12px; padding: 0 14px; }
    .topnav-links,
    .topnav-actions,
    .topnav-sep { display: none; }
    .topnav-titulo { display: block; flex: 1; }
    .brand-mark { width: 30px; height: 30px; }
    .topnav-brand strong { display: none; }

    .tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(2, 1fr) 78px repeat(2, 1fr);
        align-items: end;
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .88);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--line);
    }
    /* El reparto es mitad y mitad, redondeando hacia la izquierda: con tres
       secciones van dos a la izquierda y una a la derecha. */
    .tabbar-3 { grid-template-columns: repeat(2, 1fr) 78px 1fr; }
    .tabbar-2 { grid-template-columns: 1fr 78px 1fr; }
    .tabbar-1 { grid-template-columns: 1fr 78px; }

    /* Sobre el icono, como en cualquier app. El anillo blanco lo despega de la
       barra, que es translúcida y deja pasar el contenido de debajo. */
    .tab { position: relative; }
    .tab .nav-aviso {
        position: absolute;
        top: 6px;
        left: 50%;
        margin-left: 3px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
    }

    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 64px;
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: -.01em;
        transition: color .15s var(--ease);
    }
    .tab .ico { color: var(--muted-2); transition: color .15s var(--ease), transform .2s var(--ease-out); }
    .tab.active { color: var(--navy); font-weight: 700; }
    .tab.active .ico { color: var(--teal); transform: translateY(-1px); }
    .tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tab-more {
        justify-self: center;
        align-self: center;
        width: 58px;
        height: 58px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        background: linear-gradient(150deg, var(--navy-2), var(--navy));
        box-shadow: 0 8px 22px rgba(6, 54, 100, .38), 0 0 0 5px rgba(255, 255, 255, .9);
        transition: transform .2s var(--ease-out);
    }
    .tab-more:active { transform: scale(.94); }

    /* -------------------------------------------------- hoja desplegable */
    .sheet-veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: rgba(2, 22, 41, .48);
        backdrop-filter: blur(3px);
        opacity: 0;
        transition: opacity .3s var(--ease);
    }
    .sheet-veil.open { opacity: 1; }

    .sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 85;
        max-height: 88vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        background: #fff;
        box-shadow: 0 -20px 60px rgba(2, 22, 41, .3);
        transform: translateY(101%);
        transition: transform .34s var(--ease-out);
        touch-action: none;
    }
    .sheet.open { transform: none; }

    .sheet-grab {
        display: flex;
        justify-content: center;
        padding: 11px 0 4px;
        cursor: grab;
    }
    .sheet-grab i {
        width: 42px;
        height: 4px;
        border-radius: 4px;
        background: #d3e0ea;
    }
    .sheet-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 18px 14px;
        border-bottom: 1px solid var(--line-2);
    }
    .sheet-head .mini-profile { flex: 1; }
    .sheet-close {
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: var(--r-sm);
        color: var(--muted);
        cursor: pointer;
    }
    .sheet-body {
        overflow-y: auto;
        padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
        touch-action: pan-y;
    }
    .sheet-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }
    .sheet-item {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 13px 14px;
        border-radius: var(--r);
        border: 1px solid var(--line);
        background: var(--soft);
        color: var(--ink-2);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.25;
    }
    .sheet-item .ico { color: var(--muted); }
    .sheet-item.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }
    .sheet-item.active .ico { color: var(--teal-2); }

    .sheet-tools {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--line-2);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .sheet-field { display: block; }
    .sheet-field > span {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted-2);
    }
    /* Dentro de la hoja el fondo es claro: el selector vuelve al estilo normal. */
    .sheet-field select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        max-width: none;
        height: 46px;
        padding: 0 34px 0 13px;
        border-radius: var(--r-sm);
        border: 1px solid var(--line);
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f7183' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E") no-repeat right 11px center;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--ink-2);
        cursor: pointer;
    }
    .sheet-tools .demo-pill { align-self: center; }
}

/* ── 6. Piezas comunes ─────────────────────────────────────────────────── */

/* ------------------------------------------------------------- botones */
.primary-button,
.secondary-button,
.danger-button,
.edit-person-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s var(--ease), border-color .16s var(--ease),
                box-shadow .16s var(--ease), transform .12s var(--ease);
}
.primary-button:active,
.secondary-button:active,
.danger-button:active { transform: translateY(1px); }

.primary-button {
    background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
    color: #fff;
    box-shadow: var(--sh-navy);
}
.primary-button:hover {
    background: linear-gradient(160deg, #0d569b 0%, #074477 100%);
    box-shadow: 0 10px 28px rgba(6, 54, 100, .34);
}

.secondary-button {
    background: #fff;
    border-color: var(--line);
    color: var(--navy);
    box-shadow: var(--sh-1);
}
.secondary-button:hover { background: var(--soft); border-color: #cadcea; }

.danger-button {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 6px 18px rgba(212, 69, 63, .28);
}
.danger-button:hover { background: #c23a35; }

.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.ghost-button:hover { background: var(--soft); color: var(--ink); }

.full { width: 100%; }

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------- paneles */
.panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--sh-2);
}
.panel + .panel { margin-top: 20px; }

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.panel-heading > div > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 3px;
}
/* La ayuda que a veces cuelga del título NO es un antetítulo: si hereda las
   mayúsculas y el espaciado se lee como otra sección. */
.panel-heading > div > .field-help {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}
.panel-heading h2 {
    font-size: 19px;
    line-height: 1.25;
}

/* --------------------------------------------------------------- píldoras */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 0 0 8px;
}

.status-chip,
.pending-count,
.pending-pill,
.role-pill,
.department-pill,
.request-status,
.shift-chip,
.swap-state,
.rule-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.status-chip.good { background: var(--ok-soft); color: #0b7a44; }
.pending-count,
.pending-pill { background: var(--espera-soft); color: var(--espera-ink); }
.role-pill { background: var(--line-2); color: var(--ink-2); }
.role-pill.admin { background: rgba(0, 156, 180, .13); color: #046d7f; }
.department-pill { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.request-status.approved { background: var(--ok-soft); color: #0b7a44; }
.request-status.rejected { background: var(--danger-soft); color: #a8322d; }
.request-status.pending,
.request-status.espera_companero { background: var(--espera-soft); color: var(--espera-ink); }
.request-status.rechazo_companero { background: var(--danger-soft); color: #a8322d; }
.shift-chip { background: var(--soft); color: var(--muted); }
.shift-chip.off, .shift-chip.vacation { background: var(--ok-soft); color: #0b7a44; }
.swap-state.wait { background: var(--espera-soft); color: var(--espera-ink); }
.swap-state.ok { background: var(--ok-soft); color: #0b7a44; }
.rule-tag {
    background: rgba(0, 156, 180, .12);
    color: #046d7f;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 8px;
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted-2);
    flex: none;
}
.dot.orange { background: var(--espera); box-shadow: 0 0 0 4px var(--espera-soft); }

/* --------------------------------------------------------------- avatares */
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 13px;
    font-family: 'Jakarta', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(145deg, var(--navy-2), var(--navy));
    box-shadow: 0 3px 10px rgba(6, 54, 100, .22);
}
.avatar.small { width: 36px; height: 36px; border-radius: 11px; font-size: 12.5px; }
.avatar.tiny { width: 28px; height: 28px; border-radius: 9px; font-size: 10.5px; }
.mini-profile .avatar {
    background: linear-gradient(145deg, var(--teal), #0782a3);
    box-shadow: 0 3px 10px rgba(0, 156, 180, .3);
}

/* ------------------------------------------------------------ vacío/aviso */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 38px 20px;
    border-radius: var(--r);
    background: var(--soft);
    border: 1px dashed #d5e3ee;
}
.empty-state.compact { padding: 26px 16px; }
/* El icono grande es SOLO el de la cabecera del bloque vacío. Antes la regla
   alcanzaba a cualquier `.ico` de dentro y el «+» del botón salía metido en una
   caja de 46 px, como si fuera otro icono suelto. */
.empty-state > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--teal);
    font-size: 19px;
    box-shadow: var(--sh-1);
}
.empty-state strong { font-size: 15.5px; color: var(--navy); font-weight: 700; }
.empty-state p { font-size: 13.5px; color: var(--muted); max-width: 34ch; }

.demo-banner {
    display: block;
    padding: 15px 18px;
    margin-bottom: 20px;
    border-radius: var(--r);
    background: var(--teal-soft);
    border: 1px solid #c4e9f2;
    color: #0a5566;
    font-size: 13.8px;
    line-height: 1.6;
}
.demo-banner strong { color: #084657; }

.field-help {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* --------------------------------------------------------------- avisos */
.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 200;
    transform: translateX(-50%);
    max-width: min(92vw, 460px);
    padding: 13px 20px;
    border-radius: var(--r);
    background: var(--navy);
    color: #eaf4fb;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--sh-4);
    animation: sube .34s var(--ease-out);
}
.toast.error { background: #a8322d; }
@keyframes sube {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 780px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

.gen-report {
    position: relative;
    padding: 17px 46px 17px 18px;
    margin-bottom: 20px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--sh-1);
}
.gen-report.ok { border-left: 4px solid var(--ok); }
.gen-report.warn { border-left: 4px solid var(--warn); }
.gen-report-head strong { display: block; font-size: 15px; color: var(--navy); }
.gen-report-head span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.gen-report-list {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ink-2);
    max-height: 190px;
    overflow-y: auto;
}
.gen-report-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--muted-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.gen-report-close:hover { background: var(--soft); color: var(--ink); }

.request-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    border: 1px solid #f2ddb8;
}
.request-warning strong { display: block; font-size: 13.5px; color: #8a5206; margin-bottom: 4px; }
.request-warning span { display: block; font-size: 13px; color: #7a4a06; }
.request-warning small { display: block; margin-top: 6px; font-size: 12px; color: #9a6a2a; }

/* --------------------------------------------------------------- modales */
.modal {
    width: min(94vw, 520px);
    padding: 0;
    border: none;
    border-radius: var(--r-lg);
    background: transparent;
    overflow: visible;
}
.modal::backdrop {
    background: rgba(2, 22, 41, .55);
    backdrop-filter: blur(4px);
}
.modal[open] { animation: modalIn .26s var(--ease-out); }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.modal-card {
    position: relative;
    padding: 26px;
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-4);
    max-height: 86vh;
    overflow-y: auto;
}
.modal-card h2 { font-size: 21px; margin-bottom: 16px; }
.modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-xs);
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: var(--soft); color: var(--ink); }

.swap-summary {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
}
.swap-summary strong { display: block; font-size: 15px; color: var(--navy); }
.swap-summary span { display: block; font-size: 13px; color: var(--muted); }

.danger-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.clear-confirm {
    margin-top: 12px;
    padding: 14px;
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    border: 1px solid #f3cfcd;
}
.clear-confirm p { font-size: 13.5px; color: #8f2b27; margin-bottom: 12px; }
.clear-confirm-row { display: flex; gap: 10px; }
.clear-confirm-row > * { flex: 1; }

/* ── 7. Formularios ────────────────────────────────────────────────────── */
/* Solo las etiquetas de PRIMER nivel del formulario llevan el rótulo en
   mayúsculas. Las de dentro (casillas de puestos, reglas) son texto normal y
   se marcan aparte, más abajo. */
.modal-card > label,
.add-person > label,
.sheet-field {
    display: block;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
/* El rótulo va en mayúsculas, pero la ayuda que cuelga debajo NO: son frases
   enteras y heredaban el `uppercase`, así que la explicación del encargado o la
   de la contraseña provisional salían gritando. */
.modal-card > label .field-help,
.add-person > label .field-help,
.sheet-field .field-help {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

/* Por atributo NO: en las vistas hay `<input name="…">` sin `type`, que por
   defecto es texto y se quedaba sin ningún estilo —salía un campo estrecho y
   gris al lado de los demás—. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #cadcea; }
input:focus, select:focus, textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 184, 212, .16);
    outline: none;
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--soft);
    color: var(--muted-2);
    cursor: not-allowed;
}
textarea { resize: vertical; min-height: 76px; }

/* Los formularios en línea de las cabeceras (rangos de fecha) no llevan la
   etiqueta arriba: los campos van a la altura del botón. */
.button-row input[type="date"],
.button-row select {
    width: auto;
    margin-top: 0;
    height: 44px;
    padding: 0 13px;
}
/* El ancho natural de un campo de fecha lo decide el navegador y es generoso:
   dos seguidos más el botón no caben en una ventana pequeña y el grupo entero
   se rompía en tres líneas. Con un tope caben en una. */
.button-row input[type="date"] { max-width: 168px; min-width: 0; }

.field-help + input, label small + input { margin-top: 6px; }

.posts-check { margin-bottom: 16px; }
.posts-check-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
}
.post-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
label.post-check {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-2);
    cursor: pointer;
}
.post-check input[type="checkbox"],
.rule-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--teal);
    cursor: pointer;
}
.prio-select {
    width: auto;
    margin-top: 0;
    padding: 6px 9px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ── 8. Cabecera de página ─────────────────────────────────────────────── */
.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
/* El bloque de texto cede espacio para que los controles de la derecha no se
   caigan a una segunda línea en cuanto el título crece. */
.page-intro > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-intro h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.05rem);
    line-height: 1.12;
    margin-bottom: 7px;
}
.page-intro > div > p {
    font-size: 14.5px;
    color: var(--muted);
    max-width: 62ch;
}

/* ── 9. Resumen ────────────────────────────────────────────────────────── */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.metric-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
/* Halo de color en la esquina: identifica la métrica sin pintar la tarjeta.
   Va desenfocado; sin el desenfoque se lee como un círculo recortado y parece
   un error de maquetación, no un acento. */
.metric-card::after {
    content: '';
    position: absolute;
    right: -55px;
    top: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    opacity: .2;
    filter: blur(26px);
    background: var(--tono, var(--teal));
}
.metric-card.blue { --tono: #2b7fd0; }
.metric-card.green { --tono: #16a765; }
.metric-card.violet { --tono: #7b61d8; }
.metric-card.orange { --tono: #e8b800; }

.metric-card > span {
    position: relative;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 8px;
}
.metric-card > div {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.metric-card strong {
    font-family: 'Jakarta', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--navy);
}
.metric-card small { font-size: 13px; color: var(--muted); font-weight: 500; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.dashboard-grid .panel { margin-top: 0; }

.action-list { display: flex; flex-direction: column; gap: 9px; }
.action-item {
    display: flex;
    align-items: center;
    color: inherit;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--soft);
    border: 1px solid var(--line);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.action-item:hover { background: #eef4fa; border-color: #cfe0ee; }
.action-item > div:nth-child(2) { flex: 1; min-width: 0; }
.action-item strong { display: block; font-size: 14px; color: var(--navy); font-weight: 700; }
.action-item span { display: block; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1180px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .metric-card { padding: 15px 16px; }
    .metric-card strong { font-size: 28px; }
    /* La tarjeta es mucho más pequeña: con el mismo halo el color se le come
       entera y el rótulo pierde contraste. */
    .metric-card::after { right: -70px; top: -70px; opacity: .15; }
}

/* En columna estrecha el título y su distintivo no caben en la misma línea:
   el título partía en dos y el conjunto se leía descolocado. */
@media (max-width: 620px) {
    .panel-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }
}

/* ── 10. Cuadrante · escritorio ────────────────────────────────────────── */
.schedule-panel { padding: 18px; }

.cuad-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 16px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-2);
}
.cuad-legend + .cuad-legend { margin-top: 8px; }
.cuad-legend > strong {
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.cuad-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cuad-legend i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-family: 'Jakarta', sans-serif;
    font-size: 12px;
    font-weight: 800;
    font-style: normal;
    box-shadow: inset 0 0 0 1px rgba(6, 54, 100, .07);
}

.cuad-donde {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 10px;
    min-height: 34px;
}
.cuad-mes {
    font-family: 'Jakarta', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy);
}
.cuad-hoy {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border: 1px solid #bfe6ee;
    background: var(--teal-soft);
    color: #056d81;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s var(--ease);
}
.cuad-hoy:hover { background: #d3f0f6; }

.cuad-salto {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}
.cuad-salto a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--navy);
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cuad-salto a:hover { background: var(--soft); border-color: #cadcea; }
.cuad-salto .al-presente {
    background: var(--teal-soft);
    border-color: #bfe6ee;
    color: #056d81;
}
.cuad-salto .al-presente:hover { background: #d3f0f6; }
/* En el móvil va debajo del día, no antes: primero lo que se viene a ver. */
.cm-salto { margin: 16px 0 0; justify-content: center; flex-wrap: wrap; }

.cuadrante-wrap {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: #fff;
    scroll-snap-type: x proximity;
    scroll-padding-left: 168px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.cuadrante-wrap.panning { cursor: grabbing; user-select: none; }

.cuadrante {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
}
.cuadrante th,
.cuadrante td {
    padding: 0;
    text-align: center;
    border-bottom: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
}

/* Cabeceras pegadas: la fila de días arriba y la columna de nombres a la
   izquierda. Sin esto, al desplazar dos meses ya no sabes ni quién ni cuándo. */
.cuadrante thead th {
    position: sticky;
    z-index: 3;
    background: #fbfdff;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 7px 0;
    white-space: nowrap;
}
.cuadrante thead tr:first-child th { top: 0; z-index: 4; }
.cuadrante thead tr:last-child th { top: 34px; }
.cuadrante thead th small {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-2);
    margin-top: 1px;
}

.cuadrante th.wk-label {
    background: linear-gradient(180deg, #f2f7fc, #eaf1f8);
    color: var(--navy);
    font-family: 'Jakarta', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    scroll-snap-align: start;
    cursor: grab;
}
.cuadrante th.wk-label small {
    display: inline;
    margin-left: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    text-transform: none;
}
.cuadrante th.wk-label.is-week-now {
    background: linear-gradient(180deg, #e3f4f8, #d5edf3);
    color: #05586a;
}
.cuadrante th.wk-label.is-week-now small { color: #12798d; }

.cuadrante th.is-today {
    background: var(--teal-soft);
    color: #056d81;
}
.cuadrante th.is-today small { color: #045a6b; }

/* Columna de nombres: pegada y con su propia sombra al desplazar. */
.cuadrante .emp-col {
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: 168px;
    max-width: 168px;
    padding: 0 12px;
    text-align: left;
    background: #fff;
    border-right: 1px solid var(--line);
    box-shadow: 6px 0 12px -8px rgba(6, 54, 100, .18);
}
/* La esquina (nombres × cabecera) tiene que ir por encima de TODO: es la única
   celda que se queda quieta en los dos ejes. Sin subirle la capa, el rótulo de
   la semana anterior se veía por debajo al desplazar. */
.cuadrante thead .emp-col { background: #fbfdff; }
.cuadrante thead tr:first-child th.emp-col { z-index: 8; }
.cuadrante thead tr:last-child th.emp-col { z-index: 7; }
.cuadrante tbody .emp-col {
    height: 38px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
}
.cuadrante tbody tr:hover .emp-col { background: var(--soft); }
.cuadrante tbody .emp-col.is-me {
    color: var(--navy);
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--teal), 6px 0 12px -8px rgba(6, 54, 100, .18);
}
.emp-name { display: inline-block; vertical-align: middle; }

.row-move {
    display: none;
    gap: 2px;
    margin-left: 8px;
    vertical-align: middle;
}
.cuadrante tbody tr:hover .row-move { display: inline-flex; }
.row-move form { display: inline; }
.row-move button {
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 5px;
    color: var(--muted-2);
    font-size: 8px;
    line-height: 1;
    cursor: pointer;
}
.row-move button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.cuadrante td.cell {
    width: 36px;
    min-width: 36px;
    height: 38px;
    vertical-align: middle;
}
.cuadrante tbody tr:hover td.cell { background: rgba(245, 249, 252, .7); }
.cuadrante td.cell.is-today { background: rgba(0, 184, 212, .07); }
.cuadrante .wk-start { border-left: 2px solid #dbe6f0; }

.cuadrante .code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-family: 'Jakarta', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(6, 54, 100, .06);
}
.cuadrante td.empty .code {
    background: transparent;
    color: #cbd8e4;
    box-shadow: none;
    font-weight: 500;
}

.cuadrante td.editable,
.cuadrante td.askable { cursor: pointer; }
.cuadrante td.editable:hover .code,
.cuadrante td.askable:hover .code {
    transform: scale(1.13);
    box-shadow: 0 3px 10px rgba(6, 54, 100, .26);
}
.cuadrante .code { transition: transform .13s var(--ease-out), box-shadow .13s var(--ease-out); }
.cuadrante td.selected { background: rgba(0, 184, 212, .16) !important; }

/* ── 11. Cuadrante · móvil ─────────────────────────────────────────────────
   En el teléfono una rejilla de 12 personas × 112 días no se lee: se acaba
   arrastrando a ciegas por una hoja de cálculo diminuta. Aquí se le da la
   vuelta al problema — se elige UN día y se ve quién cubre cada puesto, que
   es la pregunta que uno trae. La rejilla completa sigue estando, en su
   pestaña, por si hace falta comparar.                                     */
.cuad-movil { display: none; }

@media (max-width: 900px) {
    .schedule-panel .cuadrante-wrap,
    .schedule-panel .cuad-legend,
    .schedule-panel .cuad-donde,
    .schedule-panel > .cuad-salto { display: none; }
    .cuad-movil { display: block; }
}

/* Selector de vista: Día / Personas / Rejilla */
.cm-modo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    margin-bottom: 14px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
}
.cm-modo button {
    padding: 9px 4px;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.cm-modo button.on {
    background: #fff;
    color: var(--navy);
    box-shadow: var(--sh-1);
}

/* Cabecera: mes y flechas de semana */
.cm-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cm-mes {
    flex: 1;
    font-family: 'Jakarta', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy);
}
.cm-nav { display: flex; gap: 6px; }
.cm-nav button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-xs);
    color: var(--navy);
    cursor: pointer;
    box-shadow: var(--sh-1);
}
.cm-nav button:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* Tira de días de la semana */
.cm-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 16px;
}
.cm-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 0 7px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.cm-dia:active { transform: scale(.96); }
.cm-dia-l {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted-2);
    text-transform: uppercase;
}
.cm-dia-n {
    font-family: 'Jakarta', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}
.cm-dia-p {
    width: 5px;
    height: 5px;
    margin-top: 2px;
    border-radius: 50%;
    background: transparent;
}
.cm-dia.tiene .cm-dia-p { background: var(--teal); }
.cm-dia.finde { background: var(--soft); }
.cm-dia.finde .cm-dia-l { color: #a8b9c8; }
.cm-dia.hoy { border-color: var(--teal); }
.cm-dia.hoy .cm-dia-n { color: var(--teal); }
.cm-dia.sel {
    background: linear-gradient(160deg, var(--navy-2), var(--navy));
    border-color: var(--navy);
    box-shadow: var(--sh-navy);
}
.cm-dia.sel .cm-dia-l { color: #9dc3dd; }
.cm-dia.sel .cm-dia-n { color: #fff; }
.cm-dia.sel .cm-dia-p { background: var(--teal-2); }

/* El panel del día se desliza de lado para cambiar de día. `pan-y` deja el
   desplazamiento vertical al navegador y nos reserva el horizontal: sin esto,
   en un móvil de verdad el gesto compite con el scroll de la página. */
.cm-panel { touch-action: pan-y; }

/* Título del día elegido */
.cm-titulo {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 12px;
}
.cm-titulo strong {
    font-family: 'Jakarta', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy);
}
.cm-titulo span { font-size: 13px; color: var(--muted); }

/* Bloque de franja (mañana / tarde) */
.cm-franja { margin-bottom: 14px; }
.cm-franja-cab {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    padding-left: 2px;
}
.cm-franja-cab i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    flex: none;
}
.cm-franja.manana .cm-franja-cab i { background: rgba(226, 87, 76, .14); color: #b83c32; }
.cm-franja.tarde .cm-franja-cab i { background: rgba(120, 170, 205, .2); color: #2c6386; }
.cm-franja-cab strong {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.cm-franja-cab small {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted-2);
}

.cm-puestos {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cm-puesto {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}
.cm-puesto.vacio { background: var(--soft); border-style: dashed; box-shadow: none; }
.cm-let {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    font-family: 'Jakarta', sans-serif;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(6, 54, 100, .07);
}
.cm-puesto-txt { flex: 1; min-width: 0; }
.cm-puesto-txt strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-puesto-txt span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}
.cm-puesto.vacio .cm-puesto-txt strong { color: var(--muted-2); font-weight: 600; }
.cm-yo {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--teal-soft);
    color: #056d81;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    flex: none;
}
.cm-puesto.es-mio { border-color: #a5dfeb; background: #f4fcfe; }
.cm-pedir {
    flex: none;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-xs);
    color: var(--muted);
    cursor: pointer;
}
.cm-pedir:hover { border-color: var(--teal); color: var(--teal); }

/* Quién libra */
.cm-libran {
    padding: 13px 14px;
    border-radius: var(--r);
    background: var(--ok-soft);
    border: 1px solid #c9ecd9;
}
.cm-libran-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0b7a44;
}
.cm-libran-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-libre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 6px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid #cfead9;
    font-size: 13px;
    font-weight: 650;
    color: #0d5c36;
}
.cm-libre i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    flex: none;
}
.cm-libran + .cm-libran { margin-top: 10px; }
/* Ausentes (vacaciones, baja) en gris pizarra: no es tiempo libre, es que no
   está. Neutro a propósito, porque cada tipo ya trae su color en el punto. */
.cm-libran.ausentes { background: #f1f4f8; border-color: #dde5ee; }
.cm-libran.ausentes .cm-libran-cab { color: #4a5b6d; }
.cm-libran.ausentes .cm-libre { border-color: #dde5ee; color: #33475a; }

/* Vista por personas: la semana de cada uno en una tira */
.cm-personas { display: flex; flex-direction: column; gap: 9px; }
.cm-pc {
    padding: 12px 13px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}
.cm-pc.es-mio { border-color: #a5dfeb; background: #f8fdfe; }
.cm-pc-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cm-pc-cab strong {
    flex: 1;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-pc-res {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--muted);
    white-space: nowrap;
}
.cm-pc-sem {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cm-pc-d {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.cm-pc-d > span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted-2);
    text-transform: uppercase;
}
.cm-pc-d > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    border-radius: 8px;
    font-family: 'Jakarta', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    font-style: normal;
    box-shadow: inset 0 0 0 1px rgba(6, 54, 100, .06);
}
.cm-pc-d.vacio > i { background: var(--soft); color: #c3d2de; box-shadow: none; font-weight: 500; }
.cm-pc-d.hoy > span { color: var(--teal); }
.cm-pc-d.hoy > i { box-shadow: inset 0 0 0 2px var(--teal); }

/* Tercera pestaña: la rejilla de siempre. Se deja porque a veces hace falta
   comparar dos semanas seguidas, pero no es la vista por defecto. */
@media (max-width: 900px) {
    /* En la rejilla del móvil los nombres se recortan: cada píxel que ocupa la
       primera columna es un día menos de los que caben en pantalla. */
    .schedule-panel .cuadrante-wrap { scroll-padding-left: 112px; }
    .schedule-panel .cuadrante .emp-col { min-width: 112px; max-width: 112px; padding: 0 8px; }
    .schedule-panel .cuadrante tbody .emp-col { font-size: 12.5px; }
    .schedule-panel .cuad-legend { font-size: 12px; padding: 9px 11px; gap: 6px 12px; }

    .schedule-panel[data-vista="rejilla"] .cuad-legend { display: flex; }
    .schedule-panel[data-vista="rejilla"] .cuadrante-wrap { display: block; }
    .schedule-panel[data-vista="rejilla"] .cm-barra,
    .schedule-panel[data-vista="rejilla"] .cm-dias,
    .schedule-panel[data-vista="rejilla"] .cm-panel { display: none; }
    .schedule-panel[data-vista="rejilla"] .cuadrante-wrap { margin-top: 4px; }
}

/* ── 12. Mi horario ────────────────────────────────────────────────────── */
.my-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 26px;
    border-radius: var(--r-xl);
    color: #e7f2fa;
    background:
        radial-gradient(620px 320px at 88% -20%, rgba(0, 184, 212, .34), transparent 62%),
        radial-gradient(520px 400px at -10% 118%, rgba(0, 156, 180, .22), transparent 60%),
        linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 62%, var(--navy-ink) 100%);
    box-shadow: var(--sh-3);
}
/* Dos manchas de luz que se mueven al bajar (parallax discreto). */
.my-hero .orbe {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(46px);
    will-change: transform;
}
.my-hero .orbe-1 {
    width: 260px; height: 260px;
    top: -110px; right: -60px;
    background: rgba(0, 184, 212, .38);
}
.my-hero .orbe-2 {
    width: 220px; height: 220px;
    bottom: -120px; left: -70px;
    background: rgba(79, 211, 232, .22);
}
.my-hero > * { position: relative; z-index: 1; }

.my-hero-greet .eyebrow { color: var(--teal-3); }
.my-hero-greet h1 {
    font-size: clamp(1.7rem, 4.6vw, 2.2rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 4px;
}
.my-hero-date {
    font-size: 14px;
    color: #a3c4dd;
}
/* Solo la primera letra: `capitalize` subiría también los «de» y los «del». */
.my-hero-date::first-letter { text-transform: uppercase; }

.my-hero-today {
    margin: 20px 0 16px;
    padding: 17px 18px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(6px);
}
.my-hero-cap {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8fb6d3;
    margin-bottom: 11px;
}
.my-hero-shift {
    display: flex;
    align-items: center;
    gap: 14px;
}
.shift-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: var(--r);
    font-family: 'Jakarta', sans-serif;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.shift-badge.is-empty {
    background: rgba(255, 255, 255, .1);
    color: #7fa2bd;
    box-shadow: none;
}
.my-hero-shift-text { min-width: 0; }
.my-hero-shift-text strong {
    display: block;
    font-family: 'Jakarta', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    line-height: 1.2;
}
.my-hero-shift-text span { display: block; font-size: 14px; color: #a3c4dd; }

.my-hero-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.next-item {
    padding: 12px 14px;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}
.next-cap {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #7fa2bd;
    margin-bottom: 5px;
}
.next-val {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.next-val small { font-weight: 500; color: #a3c4dd; }
.next-val.muted { color: #7fa2bd; font-weight: 600; }
.next-val .dot { width: 8px; height: 8px; }

.my-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 18px;
}
.my-hero-actions .pending-pill {
    background: rgba(232, 184, 0, .22);
    color: #ffe9a3;
    border: 1px solid rgba(255, 214, 90, .34);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
a.pending-pill:hover { background: rgba(232, 184, 0, .34); border-color: rgba(255, 214, 90, .6); }
.pending-pill .ico { opacity: .7; }
.my-hero-actions .primary-button {
    margin-left: auto;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.my-hero-actions .primary-button:hover { background: #eaf4fb; }

@media (max-width: 560px) {
    .my-hero { padding: 20px 18px; border-radius: var(--r-lg); }
    .my-hero-next { grid-template-columns: 1fr; }
    .my-hero-actions .primary-button { margin-left: 0; width: 100%; }
}

/* En pantalla ancha el saludo y el turno van uno al lado del otro: apilados
   dejaban media tarjeta vacía a la derecha y el turno —que es el dato— caía
   demasiado abajo. */
@media (min-width: 900px) {
    .my-hero {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-areas:
            'saludo hoy'
            'proximos proximos'
            'acciones acciones';
        column-gap: 30px;
        padding: 30px 32px;
    }
    .my-hero-greet { grid-area: saludo; align-self: center; }
    .my-hero-today { grid-area: hoy; margin: 0; }
    .my-hero-next { grid-area: proximos; margin-top: 18px; }
    .my-hero-actions { grid-area: acciones; }
}

/* -------------------------------------------------------- planificación */
.week-group + .week-group { margin-top: 18px; }
.week-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--line-2);
}
.week-group-head strong {
    font-family: 'Jakarta', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--navy);
}
.week-group-head span { font-size: 12.5px; color: var(--muted-2); }

.my-shift-list { display: flex; flex-direction: column; gap: 7px; }
.my-shift-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 12px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.my-shift-row:hover { border-color: #cadcea; box-shadow: var(--sh-1); }
.my-shift-row.is-weekend { background: var(--soft); }
.my-shift-row.is-today {
    border-color: #a5dfeb;
    background: #f5fcfe;
    box-shadow: inset 3px 0 0 var(--teal);
}

.date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: var(--soft);
    border: 1px solid var(--line);
}
.my-shift-row.is-today .date-box { background: #fff; border-color: #bde8f1; }
.date-box .dow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
    line-height: 1;
}
.date-box strong {
    font-family: 'Jakarta', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--navy);
}

.row-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    font-family: 'Jakarta', sans-serif;
    font-size: 15px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(6, 54, 100, .07);
}
.row-text { flex: 1; min-width: 0; }
.row-text strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.my-shift-row.is-today .row-text strong { color: #056d81; }
.row-text span { display: block; font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
    .my-shift-row .shift-chip { display: none; }
    .my-shift-row { padding: 9px 11px; gap: 10px; }
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}
.pager small { font-size: 12.5px; color: var(--muted-2); }
.pager-nav { display: flex; gap: 8px; }
.pager-nav a,
.pager-nav .is-off {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    color: var(--navy);
}
.pager-nav a:hover { background: var(--soft); border-color: #cadcea; }
.pager-nav .is-off { color: #c3d2de; background: var(--soft); }

.team-link {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 17px 20px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease);
}
.team-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-3);
    border-color: #cadcea;
}
.team-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--r);
    background: var(--teal-soft);
    color: var(--teal);
}
.team-link-text { flex: 1; min-width: 0; }
.team-link-text strong {
    display: block;
    font-family: 'Jakarta', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--navy);
}
.team-link-text span { display: block; font-size: 13px; color: var(--muted); }
.team-link .ico:last-child { color: var(--muted-2); }
.team-link:hover .ico:last-child { color: var(--teal); }

/* ---------------------------------------------------------- cambios turno */
.swap-inbox { border-color: #bfe6ee; box-shadow: 0 0 0 3px rgba(0, 184, 212, .08), var(--sh-2); }
.swap-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: var(--r);
    background: var(--soft);
    border: 1px solid var(--line);
}
.swap-card + .swap-card { margin-top: 9px; }
.swap-card-text { flex: 1; min-width: 200px; }
.swap-card-text strong { display: block; font-size: 15px; color: var(--navy); font-weight: 700; }
.swap-card-text > span { display: block; font-size: 13px; color: var(--muted); }
.swap-note {
    margin-top: 7px;
    font-size: 13px;
    font-style: italic;
    color: var(--ink-2);
}
.swap-card-actions { display: flex; gap: 9px; }
.swap-card-actions .primary-button,
.swap-card-actions .secondary-button { height: 40px; padding: 0 16px; font-size: 13.5px; }

/* ── 13. Mi cuenta ──────────────────────────────────────────────────── */
.perfil-cabecera {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px 26px;
    border-radius: var(--r-xl);
    color: #e7f2fa;
    background:
        radial-gradient(560px 300px at 85% -30%, rgba(0, 184, 212, .32), transparent 62%),
        linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 100%);
    box-shadow: var(--sh-3);
}
.perfil-cabecera .orbe {
    position: absolute;
    width: 240px; height: 240px;
    top: -120px; right: -60px;
    border-radius: 50%;
    filter: blur(46px);
    background: rgba(0, 184, 212, .34);
    pointer-events: none;
    will-change: transform;
}
.perfil-cabecera > *:not(.orbe) { position: relative; z-index: 1; }
.avatar.grande {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    font-size: 22px;
    background: linear-gradient(145deg, var(--teal), #0782a3);
    box-shadow: 0 6px 20px rgba(0, 156, 180, .38);
}
.perfil-quien { min-width: 0; }
.perfil-quien .eyebrow { color: var(--teal-3); margin-bottom: 4px; }
.perfil-quien h1 {
    font-size: clamp(1.4rem, 3.4vw, 1.8rem);
    color: #fff;
    line-height: 1.15;
    margin-bottom: 3px;
}
.perfil-quien > p { font-size: 14px; color: #a3c4dd; }
/* Con qué entra. Va en su propia línea y con el usuario destacado, que es lo que
   viene a mirar quien no se acuerda. */
.perfil-usuario { margin-top: 7px; font-size: 13px; }
.perfil-usuario strong {
    display: inline-block;
    padding: 2px 9px;
    margin-left: 3px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    color: #eaf4fb;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Cada dato con su etiqueta, su campo y su botón al lado. */
.perfil-campo + .perfil-campo { margin-top: 18px; }
.perfil-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.perfil-campo input { margin-top: 0; }
.perfil-campo label + input { margin-bottom: 14px; }
.perfil-fila {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.perfil-fila input { flex: 1; min-width: 0; }
.perfil-fila .secondary-button { flex: none; }
.perfil-fila + .field-help { margin-top: 7px; }

.perfil-raya {
    height: 1px;
    border: 0;
    margin: 22px 0;
    background: var(--line-2);
}

/* Aviso mientras el cambio de correo espera confirmación. */
.perfil-pendiente {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r);
    background: var(--espera-soft);
    border: 1px solid #f0e3a8;
}
.perfil-pendiente-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #f0e3a8;
    color: #a08200;
}
.perfil-pendiente strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--espera-ink);
    margin-bottom: 4px;
}
.perfil-pendiente p { font-size: 13.5px; line-height: 1.6; color: #6b5400; }
.perfil-pendiente .field-help { margin-top: 6px; color: #96803a; }
.perfil-pendiente-botones { display: flex; gap: 8px; margin-top: 12px; }
.perfil-pendiente-botones .secondary-button,
.perfil-pendiente-botones .ghost-button { height: 38px; padding: 0 14px; font-size: 13.5px; }

.perfil-salir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.perfil-salir strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.perfil-salir p { font-size: 13.5px; color: var(--muted); }

@media (max-width: 560px) {
    .perfil-cabecera { padding: 20px; border-radius: var(--r-lg); gap: 14px; }
    .avatar.grande { width: 56px; height: 56px; border-radius: 17px; font-size: 18px; }
    .perfil-fila { flex-direction: column; }
    .perfil-fila .secondary-button { width: 100%; }
    .perfil-salir { flex-direction: column; align-items: stretch; }
    .perfil-salir .danger-button { width: 100%; }
}

/* ── Páginas sueltas (confirmar correo, salida) ──────────────────────────
   No llevan menú: se abren desde un correo o después de salir, puede que sin
   sesión y en otro dispositivo. Se valen por sí solas. */
.suelta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background:
        radial-gradient(700px 400px at 50% -10%, rgba(0, 184, 212, .1), transparent 60%),
        var(--canvas);
}
.suelta-tarjeta {
    width: 100%;
    max-width: 460px;
    padding: 34px 30px;
    text-align: center;
    border-radius: var(--r-xl);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-3);
}
.suelta-logo { margin: 0 auto 18px; }
.suelta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 19px;
}
.suelta-icono.ok { background: var(--ok-soft); color: var(--ok); }
.suelta-icono.no { background: var(--warn-soft); color: var(--warn); }
.suelta-tarjeta h1 {
    font-size: 23px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.suelta-tarjeta p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 22px;
}
.suelta-tarjeta strong { color: var(--ink); }
.suelta-detalle {
    font-size: 13px !important;
    color: var(--muted-2) !important;
    margin: 18px 0 0 !important;
}
.suelta-pie {
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--muted-2);
}

/* ── 14. Equipo · Solicitudes · Reglas · Tablas ────────────────────────── */
.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}
.team-layout .panel { margin-top: 0; }

.people-list { display: flex; flex-direction: column; gap: 7px; }
.people-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    padding: 11px 14px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.people-row:hover { border-color: #cadcea; box-shadow: var(--sh-1); }
.people-main { flex: 1; min-width: 160px; }
.people-main strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.people-main span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-posts { display: flex; gap: 4px; flex: none; }
.post-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-family: 'Jakarta', sans-serif;
    font-size: 12px;
    font-weight: 800;
    background: var(--line-2);
    color: var(--ink-2);
}
.post-chip.prio-1 { background: rgba(0, 156, 180, .16); color: #04697b; }
.post-chip.prio-3 { background: var(--soft); color: var(--muted-2); }
.post-chip.none { background: transparent; color: #cbd8e4; }

.edit-person-button {
    height: 36px;
    padding: 0 14px;
    background: #fff;
    border-color: var(--line);
    color: var(--navy);
    font-size: 13px;
}
.edit-person-button:hover { background: var(--soft); border-color: #cadcea; }

.add-person h2 { font-size: 19px; margin-bottom: 6px; }
.add-person > p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

/* La ficha de cada persona lleva correo, puestos, departamento, perfil y el
   botón: en una columna de 540 px no cabe y el botón se salía de la tarjeta.
   Por debajo de este ancho, el formulario de alta pasa debajo y la lista se
   queda con todo el sitio. */
@media (max-width: 1340px) {
    .team-layout { grid-template-columns: 1fr; }
}
/* En el móvil la ficha se parte SIEMPRE en dos líneas fijas —arriba quién es,
   abajo sus puestos, su perfil y el botón—. Dejar que envolviera sola daba una
   fila distinta para cada persona según cuántos puestos tuviera. */
@media (max-width: 700px) {
    .people-row { row-gap: 11px; }
    .people-row .department-pill { display: none; }
    .people-row .avatar { order: 0; }
    .people-main { order: 1; flex: 1 1 auto; min-width: 0; }
    .people-row::after {
        content: '';
        order: 2;
        flex-basis: 100%;
        height: 0;
    }
    .people-posts { order: 3; }
    .people-row .role-pill { order: 4; }
    .edit-person-button { order: 5; margin-left: auto; }
}

/* --------------------------------------------------------- solicitudes */
.req-card {
    padding: 17px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}
.req-card + .req-card { margin-top: 11px; }
.req-card.has-warning { border-color: #f0dcb6; }
.req-card.is-swap { border-left: 3px solid var(--teal); }

.req-head {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}
.req-who { flex: 1; min-width: 150px; }
.req-who strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.req-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}
.req-type i { font-style: normal; color: var(--teal); }
.req-actions { display: flex; gap: 9px; }
.req-actions .primary-button,
.req-actions .secondary-button { height: 40px; padding: 0 17px; font-size: 13.5px; }

.req-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.req-fact {
    flex: 1;
    min-width: 200px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
}
.req-fact small {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 3px;
}
.req-fact strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}
.req-days {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: none;
}
.swap-fact { background: var(--teal-soft); border-color: #c4e9f2; }
.swap-ok {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--ok-soft);
    color: #0b7a44;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: none;
}
.req-note {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--soft);
    font-size: 13.5px;
    font-style: italic;
    color: var(--ink-2);
}

.req-done-list { display: flex; flex-direction: column; gap: 2px; }
.req-done {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
}
.req-done:hover { background: var(--soft); }
.req-done-name { font-weight: 650; color: var(--ink); }
.req-done-type { flex: 1; color: var(--muted); font-size: 12.5px; }
.req-done-when { color: var(--muted-2); font-size: 12.5px; }

@media (max-width: 640px) {
    .req-head { align-items: flex-start; }
    .req-actions { width: 100%; }
    .req-actions form { flex: 1; }
    .req-actions .primary-button,
    .req-actions .secondary-button { width: 100%; }
    .req-done-type { display: none; }
}

/* ------------------------------------------- solicitudes del trabajador */
/* Tres contadores arriba: en espera, aprobadas y rechazadas. Es la respuesta
   a la pregunta con la que se entra, antes de leer ninguna ficha. */
.estado-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.estado-tarjeta {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 15px 18px;
    border-radius: var(--r-lg);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
    border-left: 4px solid var(--tono);
    /* Son botones: al pulsarlos se filtra la lista de abajo. */
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out),
                background .16s var(--ease), border-color .16s var(--ease);
}
.estado-tarjeta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh-3); }
.estado-tarjeta:disabled { cursor: default; opacity: .55; box-shadow: var(--sh-1); }
/* Filtro puesto: la tarjeta se tiñe de su color y el resto se queda como está,
   para que se vea de un vistazo por qué la lista es más corta. */
.estado-tarjeta.on {
    background: var(--fondo);
    border-color: var(--tono);
    box-shadow: 0 0 0 3px var(--halo), var(--sh-2);
}
.estado-tarjeta.espera { --tono: var(--espera); --fondo: var(--espera-soft); --halo: rgba(232, 184, 0, .2); }
.estado-tarjeta.ok { --tono: var(--ok); --fondo: var(--ok-soft); --halo: rgba(18, 163, 92, .16); }
.estado-tarjeta.no { --tono: var(--danger); --fondo: var(--danger-soft); --halo: rgba(212, 69, 63, .16); }
.estado-tarjeta.on strong { color: var(--navy); }
.estado-tarjeta strong {
    font-family: 'Jakarta', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--navy);
}
.estado-tarjeta span { font-size: 13.5px; color: var(--muted); font-weight: 550; }

.quitar-filtro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.quitar-filtro:hover { background: var(--soft); border-color: #cadcea; }

.mi-req {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--tono, var(--line));
    box-shadow: var(--sh-1);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.mi-req + .mi-req { margin-top: 9px; }
.mi-req:hover { box-shadow: var(--sh-2); }
.mi-req.tono-espera { --tono: var(--espera); }
.mi-req.tono-ok { --tono: var(--ok); }
.mi-req.tono-no { --tono: var(--danger); }

.mi-req-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 13px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--teal);
}
.mi-req-texto { flex: 1; min-width: 0; }
.mi-req-texto > strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.mi-req-cuando {
    display: block;
    font-size: 13.5px;
    color: var(--ink-2);
}
.mi-req-cuando em {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    color: var(--muted);
}
.mi-req-con {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal);
}
.mi-req-nota {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    background: var(--soft);
    font-size: 13px;
    font-style: italic;
    color: var(--ink-2);
}
.mi-req-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: none;
}
.mi-req-estado small { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.mi-req-acciones { display: flex; gap: 8px; flex: none; }
.mi-req-acciones .primary-button,
.mi-req-acciones .secondary-button { height: 38px; padding: 0 15px; font-size: 13px; }

@media (max-width: 620px) {
    .estado-resumen { gap: 8px; }
    .estado-tarjeta { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 13px; }
    .estado-tarjeta strong { font-size: 24px; }
    .estado-tarjeta span { font-size: 12px; }

    /* La ficha pasa a dos líneas: arriba qué y cuándo, abajo el desenlace. */
    .mi-req { flex-wrap: wrap; }
    .mi-req-texto { flex: 1 1 auto; }
    .mi-req-estado,
    .mi-req-acciones {
        flex-basis: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding-top: 4px;
    }
    .mi-req-acciones form { flex: 1; }
    .mi-req-acciones .primary-button,
    .mi-req-acciones .secondary-button { width: 100%; }
}

/* ---------------------------------------------- registro de cambios */
.cambio {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 15px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--tono, var(--line));
    box-shadow: var(--sh-1);
}
.cambio + .cambio { margin-top: 8px; }
/* El color del borde dice de un vistazo si lo tocó administración o el
   encargado, que es justo lo que se viene a comprobar. */
.cambio.rol-admin { --tono: var(--navy-2); }
.cambio.rol-encargado { --tono: var(--teal); }
.cambio.rol-employee { --tono: var(--muted-2); }

.cambio-quien {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    font-family: 'Jakarta', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--tono, var(--muted));
}
.cambio-texto { flex: 1; min-width: 0; }
.cambio-texto > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.cambio-rol {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.cambio-que { display: block; font-size: 13px; color: var(--muted); }
.cambio-que b { color: var(--ink-2); font-weight: 650; }

/* El antes → después, que es el meollo. */
.cambio-flecha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 13px;
}
.cambio-flecha .ico { color: var(--muted-2); }
.cambio-antes,
.cambio-despues {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-weight: 650;
}
.cambio-antes {
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: #c3d2de;
}
.cambio-despues {
    background: var(--teal-soft);
    border: 1px solid #c4e9f2;
    color: #056d81;
}
.cambio-nota { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted-2); }

.cambio-cuando {
    flex: none;
    text-align: right;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--muted);
    white-space: nowrap;
}
.cambio-cuando small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted-2); }

/* Distintivo del rol en la lista de Equipo. */
.role-pill.encargado { background: rgba(0, 156, 180, .13); color: #046d7f; }

@media (max-width: 620px) {
    .cambio { flex-wrap: wrap; }
    .cambio-cuando { flex-basis: 100%; text-align: left; padding-left: 49px; }
    .cambio-cuando small { display: inline; margin-left: 5px; }
}

/* --------------------------------------------------------------- reglas */
.rules-panel + .rules-panel { margin-top: 18px; }
.rule-list { display: flex; flex-direction: column; gap: 7px; }
.rule-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rule-row:hover { border-color: #cadcea; background: var(--soft); }
.rule-row.is-off { background: var(--soft); opacity: .72; }
.rule-row input[type="checkbox"] { margin-top: 2px; }
.rule-text { flex: 1; }
.rule-text strong {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 3px;
}
.rule-text > span { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ------------------------------------------- pestañas de sección */
/* «Historial» y «Registro» son la misma pregunta —qué ha pasado— contada de dos
   maneras, así que comparten un solo hueco en el menú y se alternan aquí. No se
   reutiliza el estilo de `.rango` a propósito: esas pastillas filtran DENTRO de
   una página (los meses, el autor) y confundir las dos cosas haría pensar que
   esto también es un filtro. Estas van con línea inferior, como una pestaña. */
.pestanas {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.pestana {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px 11px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.pestana .ico { color: #9db4c8; transition: color .16s var(--ease); }
.pestana:hover { color: var(--navy); }
.pestana:hover .ico { color: var(--teal); }
.pestana.on {
    color: var(--navy);
    border-bottom-color: var(--teal);
}
.pestana.on .ico { color: var(--teal); }

@media (max-width: 480px) {
    .pestana { padding: 10px 11px 11px; font-size: 13px; }
    .pestana .ico { display: none; }
}

/* ------------------------------------------------- atajos de periodo */
/* Fila de meses en el historial: teclear dos fechas para mirar mayo era un
   peaje absurdo cuando la aplicación ya sabe qué meses tiene guardados. */
.rangos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    margin-bottom: 20px;
    border-radius: var(--r);
    background: var(--soft);
    border: 1px solid var(--line);
}
.rangos-cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-right: 3px;
}
.rango {
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 650;
    color: var(--navy);
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.rango:hover { background: #eef4fa; border-color: #cadcea; }
.rango.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* --------------------------------------------------------------- tablas */
.control-table { font-size: 13.5px; width: 100%; }
.control-table thead th {
    padding: 11px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted-2);
    background: #fbfdff;
    white-space: nowrap;
}
.control-table thead th small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.control-table tbody td {
    padding: 11px 12px;
    text-align: left;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-2);
}
.control-table tbody tr:hover td { background: var(--soft); }
.control-table tbody td strong { color: var(--navy); font-weight: 700; }
.control-table .emp-col {
    min-width: 150px;
    max-width: none;
    font-weight: 650;
    color: var(--ink);
}
.control-table tbody .emp-col { height: auto; }

.flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 800;
}
.flag.low { background: var(--warn-soft); color: #9a5c07; }

/* -------------------------------------- credenciales en Equipo */
/* Quién puede entrar, de un vistazo. Durante el reparto de contraseñas es la
   única pregunta que le importa a administración. */
.acceso-pill {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.acceso-pill.no { background: var(--danger-soft); border-color: #f0cccc; color: #9c2626; }
.acceso-pill.prov { background: var(--espera-soft); border-color: #ecd9a5; color: var(--espera-ink); }
.acceso-pill.si { background: var(--ok-soft); border-color: #b7e4cd; color: #146b42; }

.people-acciones { display: flex; gap: 6px; flex: none; }
.people-acciones .ico { margin-right: -2px; }

/* Resumen de la situación dentro del diálogo de acceso. */
.cred-estado {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: var(--r-sm);
    background: var(--soft);
    border: 1px solid var(--line);
}
.cred-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cred-dato small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.cred-dato strong {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.cred-retirar {
    margin-top: 14px;
    text-align: center;
}
.cred-retirar button {
    padding: 7px 12px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    text-decoration-color: #d9c3c3;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cred-retirar button:hover { color: var(--danger); text-decoration-color: currentColor; }

/* ── 15. Acceso ─────────────────────────────────────────────────────────
   Entrar y estrenar contraseña. Armazón propio, sin barra ni menú: quien está
   aquí todavía no es nadie para la aplicación.

   Dos columnas en escritorio —marca a la izquierda, formulario a la derecha— y
   en el móvil la marca se encoge a una cinta de cabecera: el teclado se come
   media pantalla y lo que tiene que quedar a la vista es el formulario. */
.acceso-body {
    /* El fondo de la marca asoma por detrás en cuanto la pantalla es más alta
       que el contenido, así no aparece una banda blanca al final. */
    background: var(--navy-deep);
}

.acceso {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ------------------------------------------------------- panel de marca */
/* Misma piel que la barra superior: degradados en diagonal y una rejilla finísima
   difuminada. Es lo que ata esta pantalla, que va suelta, con el resto. */
.acceso-marca {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #dce9f4;
    background:
        radial-gradient(760px 420px at 14% 8%, rgba(0, 184, 212, .34), transparent 60%),
        radial-gradient(620px 460px at 86% 96%, rgba(0, 156, 180, .22), transparent 58%),
        linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 52%, var(--navy-2) 130%);
}
.acceso-marca::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 120% at 18% 6%, #000 20%, transparent 78%);
}
.acceso-marca-in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    padding: 56px clamp(32px, 5vw, 72px);
}

.acceso-logo {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    text-decoration: none;
}
.acceso-logo span { display: flex; flex-direction: column; line-height: 1.1; }
.acceso-logo strong {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .015em;
}
.acceso-logo small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal-3);
}

.acceso-lema h2 {
    margin: 0 0 14px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.acceso-lema p { margin: 0; font-size: 15px; color: #a9c6dd; }

.acceso-pie {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    line-height: 1.6;
    color: #8fb0cb;
}

/* --------------------------------------------------------- el formulario */
.acceso-panel {
    display: flex;
    align-items: center;
    background: var(--canvas);
}
.acceso-caja {
    width: 100%;
    max-width: 420px;
    margin-right: auto;
    padding: 56px clamp(24px, 4vw, 60px);
}
.acceso-caja h1 {
    margin: 0 0 10px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(25px, 2.2vw, 31px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy);
}
.acceso-intro {
    margin: 0 0 28px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

.acceso-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink-2);
}
.acceso-form input:not([type="checkbox"]) { width: 100%; }
.acceso-form > input + label { margin-top: 18px; }
.acceso-form .con-ojo + .post-check,
.acceso-form input + .post-check { margin-top: 18px; }
.acceso-form .field-help { display: block; margin-top: 8px; }
.acceso-form .primary-button { margin-top: 24px; }

/* El ojo se mete DENTRO del campo, así que el texto no puede llegar hasta el
   borde derecho o se escondería debajo. */
.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 46px !important; }
.ojo-boton {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: #9db4c8;
    cursor: pointer;
    transition: color .16s var(--ease), background .16s var(--ease);
}
.ojo-boton:hover { color: var(--navy); background: var(--soft); }
.ojo-boton.on { color: var(--teal); }

.acceso-recordar { margin-bottom: 0; font-weight: 500; }

/* Avisos de la pantalla de acceso. No se reutiliza el toast: este mensaje tiene
   que quedarse fijo y leerse con calma, no desaparecer solo. */
.acceso-nota {
    margin-bottom: 22px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    border: 1px solid;
    font-size: 13.5px;
    line-height: 1.55;
}
.acceso-nota.ok { background: var(--ok-soft); border-color: #b7e4cd; color: #146b42; }
.acceso-nota.mal { background: var(--danger-soft); border-color: #f3c2c2; color: #9c2626; }

/* Salida discreta de la pantalla de estrenar contraseña. */
.acceso-escape { margin-top: 26px; text-align: center; }
.acceso-escape button {
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-decoration-color: #c8d8e6;
    text-underline-offset: 3px;
    cursor: pointer;
}
.acceso-escape button:hover { color: var(--danger); text-decoration-color: currentColor; }

@media (max-width: 900px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso-marca { align-items: flex-start; }
    .acceso-marca-in {
        max-width: none;
        margin: 0;
        gap: 22px;
        padding: 28px clamp(20px, 5vw, 40px) 34px;
    }
    /* Fuera el lema largo y la nota de ayuda: en el móvil su sitio lo necesita
       el formulario. El logo se queda, que es lo que dice dónde estás. */
    .acceso-lema p,
    .acceso-pie { display: none; }
    .acceso-lema h2 { font-size: 20px; margin: 0; }
    .acceso-caja {
        max-width: 460px;
        margin: 0 auto;
        padding: 34px clamp(20px, 5vw, 40px) 56px;
    }
}

/* --------------------------------------- suplantando a otra persona */
/* Aviso a lo ancho mientras el administrador mira con los ojos de alguien. Sin
   esto es facilísimo olvidarlo y creer que lo que se ve —o se cambia— es propio.
   Ámbar y no rojo: no es un error, es un modo. */
.suplanta-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px clamp(16px, 2.4vw, 28px);
    background: linear-gradient(90deg, #fff4d6, #fdf7e4);
    border-bottom: 1px solid #ecd9a5;
    color: #6b5200;
    font-size: 13.5px;
}
.suplanta-aviso .ico { color: #a37b00; flex: none; }
.suplanta-aviso span { min-width: 0; }
.suplanta-aviso strong { font-weight: 750; }
.suplanta-aviso form { margin-left: auto; }
.suplanta-aviso button {
    padding: 6px 13px;
    border: 1px solid #d9bf72;
    border-radius: var(--r-pill);
    background: #fff;
    color: #6b5200;
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease);
}
.suplanta-aviso button:hover { background: #fffdf6; border-color: #c9a94e; }

@media print { .suplanta-aviso { display: none; } }

/* ------------------------------- añadidos al menú de cuenta */
.cuenta-enlace {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.cuenta-enlace .ico { color: #9db4c8; }
.cuenta-enlace:hover { background: var(--soft); color: var(--navy); }
.cuenta-enlace:hover .ico { color: var(--teal); }

.secondary-button.peligro { color: #9c2626; border-color: #f0cccc; }
.secondary-button.peligro .ico { color: #c05555; }
.secondary-button.peligro:hover { background: var(--danger-soft); border-color: #e3a9a9; }

/* ── 16. Movimiento ────────────────────────────────────────────────────── */
/* Entrada de los bloques al aparecer. Muy corta y muy corta de recorrido:
   si se nota, molesta cada vez que se abre la página. */
/* Se esconde solo si hay JavaScript (la clase `js` la pone el propio <head>).
   Sin esa condición, un fallo del script dejaría media página invisible. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js [data-reveal].dentro { opacity: 1; transform: none; }
.js [data-reveal].sin-transicion { transition: none; }

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .orbe { display: none; }
}

/* ── 17. Impresión ─────────────────────────────────────────────────────── */
@media print {
    .topnav, .tabbar, .sheet, .sheet-veil,
    .page-intro .button-row, .cuad-donde, .toast, .cuad-movil { display: none !important; }
    .content { padding: 0; max-width: none; }
    .panel { border: none; box-shadow: none; padding: 0; }
    .cuadrante-wrap { overflow: visible; border: none; }
    body { background: #fff; }
}