/* ============================================================
 * CSS del módulo "labor" para el skin "sky".
 * Este archivo es un SUSTITUTO COMPLETO del CSS normal del
 * módulo cuando el skin activo es "sky" (no una capa de
 * ajustes encima) -- se carga en su lugar, nunca junto a él.
 * Edítalo libremente para dar a este módulo un aspecto
 * específico de este skin (incluye layout/estructura, no solo
 * colores). Ver también: assets/css/base.css (tokens/variables
 * por skin+modo).
 * ============================================================ */

/* Usa los tokens de espaciado/tipografía/altura de base.css (--space-*,
   --font-size-*, --control-height-*, --tab-*) para que Laboral y Almacén
   compartan literalmente los mismos números de aire y tamaño, no solo un
   "parecido". Se aplican primero a los bloques más estructurales (layout,
   cabeceras, pestañas, tarjetas de campo) que son los que más se notan. */
.labor-layout {
    display: grid;
    /* Antes var(--space-6) (28px en Goat2, ampliado): Goat1 fija este mismo
       gap a 10px (ver theme.css), así que el hueco entre el hero y el panel
       de abajo se veía mucho más grande en Goat2 -- rompía justo la
       intención de este archivo (mismos números que Goat1 en lo
       estructural). */
    gap: 10px;
}

.labor-hero,
.labor-panel {
    overflow: hidden;
}

/* Pantalla de ajustes de "Empresa": todo horizontal, con texto siempre
   visible (nada de solo-iconos ni menú lateral). Fila 1 = Empresa /
   Fichajes, como pestañas subrayadas; al elegir una aparece una fila 2, más
   pequeña, con sus pantallas — mismo lenguaje visual que las pestañas que
   ya se usan en el resto de la app. */
.labor-admin-settings {
    padding: 20px;
}

/* Bloque de navegación de "Empresa": una barra de pestañas real (estilo
   Linear/Notion/VS Code), con una línea base fina y el indicador azul solo
   bajo la pestaña activa, en vez de botones rellenos. El submenú se
   despliega como un cajón que se desliza suavemente debajo, con fondo
   propio para diferenciarlo de la barra principal. */
[data-labor-admin-settings-nav] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Fila de pestañas Dashboard/Trabajadores/Calendario + selector de widgets
   (Visibles/Ocultos) a la derecha, en vez de tenerlo en una barra "Resumen"
   separada encima del grid -- pedido explícito del usuario para ahorrar una
   fila entera de aire vertical. */
.labor-admin-main-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.labor-admin-main-tabs-row .labor-settings-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.labor-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}

.labor-settings-tabs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tab-height);
    padding: 0 var(--tab-padding-x);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* El "gap" del flex ya separa el icono del texto: el margen propio del
   .app-icon (pensado para cuando no hay gap) sobraría aquí. */
.labor-settings-tabs__item .app-icon {
    margin-right: 0;
}

.labor-settings-tabs__item:hover {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.labor-settings-tabs__item.is-active {
    /* color: var(--primary-dark); */
    border-bottom-color: var(--primary);
    font-weight: 800;
}

.labor-settings-tabs__caret {
    font-size: 0.7rem;
    color: inherit;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.labor-settings-tabs__gear {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.75;
}

.labor-settings-tabs__item[aria-expanded="true"] .labor-settings-tabs__caret {
    transform: rotate(90deg);
    opacity: 1;
}

/* Cajón del submenú: fondo suave, con transición de despliegue en vez de
   aparecer/desaparecer en seco. */
.labor-settings-tabs--sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
    border-bottom: 1px solid var(--border);
    animation: labor-settings-tabs-sub-in 0.18s ease;
}

.labor-settings-tabs--sub:last-child {
    border-bottom: none;
}

@keyframes labor-settings-tabs-sub-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.labor-settings-tabs--sub .labor-settings-tabs__item {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-4);
    font-size: var(--font-size-xs);
    border-bottom: none;
    margin-bottom: 0;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.labor-settings-tabs--sub .labor-settings-tabs__item:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.labor-settings-tabs--sub .labor-settings-tabs__item.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--button-primary-ink, #fff);
}

.labor-admin-settings__content {
    min-width: 0;
}

/* La cabecera de administración (usuario + pestañas) necesita quedarse fija
   (sticky) mientras se hace scroll por el contenido de la pestaña; el
   overflow:hidden general del panel rompería ese sticky, así que aquí se
   revierte solo para el panel principal de administración. Además sirve de
   referencia (position:relative) para el dock flotante de Editar/Guardar:
   así queda anclado SIEMPRE al borde real de esta tarjeta, sin importar el
   ancho de la ventana, si la barra lateral está abierta o el zoom — con
   position:fixed (relativo a toda la ventana) se desacoplaba del borde de
   la tarjeta en cuanto cambiaba el tamaño de pantalla. */
.labor-panel--main {
    position: relative;
    overflow: visible;
}

.labor-hero__body,
.labor-panel__body {
    padding: var(--space-5);
}

/* .labor-hero--compact (estructura, color, responsive): consolidado en
   base.css, un solo sitio para los 3 skins -- ver el comentario de ese
   bloque. Aquí solo queda lo que es EXCLUSIVO de este módulo/skin. */

.labor-hero__title {
    margin: 0;
}

.labor-hero__editing-flag {
    /* De momento solo en escritorio; en móvil no hay espacio suficiente en
       la cabecera compacta para este aviso sin que se rompa el layout. */
    display: none;
}

@media (min-width: 901px) {
    .labor-hero__editing-flag {
        /* Flotante a la derecha de la cabecera (el flex del hero empuja este
           elemento al final). Antes texto verde sin fondo (pensado para
           cabecera blanca); ahora la cabecera tiene fondo de color de marca,
           así que necesita su propia pastilla clara para seguir siendo
           legible en vez de perderse en el degradado. */
        display: inline;
        margin-left: auto;
        padding: 2px 10px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: none;
        animation: labor-hero-editing-blink 1.1s ease-in-out infinite;
    }
}

@keyframes labor-hero-editing-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labor-hero__editing-flag {
        animation: none;
    }
}

.labor-hero--compact .status:empty {
    display: none;
}

.labor-hero__flex-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.labor-admin-config-menu {
    position: relative;
    display: grid;
    gap: 0;
    padding: 10px 10px 0;
    overflow: visible;
}

.labor-admin-config-menu__groups {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    /* El scroll horizontal (overflow-x: auto) hace que el navegador también
       recorte en vertical si no hay hueco: la bolita roja de pendientes
       sobresale -6px por arriba del botón y se tapaba. Con este padding le
       queda sitio de sobra sin tocar el punto por donde se hace scroll. */
    padding: 8px 2px 10px;
}

/* El acceso a Empresa es configuración, no un destino de trabajo como
   Trabajadores, así que se separa visualmente flotando a la derecha del
   todo de la fila. */
.labor-admin-config-group--float-right {
    margin-left: auto;
}

.labor-admin-config-group {
    position: relative;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    width: auto;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    white-space: nowrap;
}

.labor-admin-config-group:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.labor-admin-config-group:hover .labor-admin-config-group__icon {
    transform: scale(1.08);
}

.labor-admin-config-group.is-active {
    border-color: var(--primary-dark);
    background: var(--brand-fill-gradient);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Cualquier botón que lleve una insignia .labor-alert-r dentro necesita ser
   su contenedor posicionado, si no la insignia (position:absolute) escapa al
   ancestro posicionado más cercano y aparece flotando fuera de sitio.
   .app-sidebar__link faltaba aquí -- bug real reportado ("en trabajadores,
   el globo del submenú de Fichajes aparece a la izquierda en vez de a la
   derecha"): sin position:relative en el propio botón, right:6px del
   badge se calculaba respecto a un ancestro mucho más ancho (la barra
   lateral entera), no respecto al botón, desplazándolo visualmente. */
.button:has(> .labor-alert-r),
.app-sidebar__link,
[data-labor-dashboard-open] {
    position: relative;
}

.labor-alert-r {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: var(--danger, #c0392b);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.labor-admin-config-group__icon {
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    line-height: 1;
    transition: transform 0.15s ease, background 0.2s ease;
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
}

.labor-admin-config-group.is-active .labor-admin-config-group__icon {
    background: rgba(255, 255, 255, 0.2);
}

/* Fondo azul activo: el icono (p. ej. la furgoneta de Logística) tiene que
   pasar a blanco, si no queda negro sobre azul y se pierde el contraste. */
.labor-admin-config-group.is-active .labor-admin-config-group__icon .app-icon {
    filter: brightness(0) invert(1);
}

.labor-admin-config-group__label {
    font-size: 0.72rem;
    font-weight: 700;
}

.labor-admin-sticky-head {
    position: static;
    /* Mismo bug que .labor-section__header--admin-content más abajo: -24px
       fijo no coincide con var(--space-5) real (16/20px según skin). */
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 16px;
    padding: 16px var(--space-5) 0;
    background: var(--surface);
    border-radius: var(--radius) var(--radius) 0 0;
}

.labor-hero__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.labor-hero__copy {
    display: grid;
    gap: 10px;
}

.labor-hero__identity {
    display: none;
}

.labor-hero__heading {
    display: grid;
    gap: 10px;
}

.labor-hero__actions,
.labor-form__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Dock flotante de Editar/Guardar/Cancelar (y Borrar usuario) para las fichas
   Personal/Laboral del admin: pegado al borde derecho de la tarjeta,
   centrado en una zona intermedia, con botones en forma de pestaña (solo
   icono). Probando el mismo diseño también en móvil, en vez del antiguo
   fallback en fila; en pantallas estrechas se empuja menos hacia fuera
   (right menos negativo) para que no se salga del todo del viewport real. */
.labor-form__actions--floating-dock {
    /* De verdad fijo en la PANTALLA (nunca se mueve al hacer scroll, pase lo
       que pase). El "right" real se calcula por JS a partir del borde
       derecho de .labor-panel--main (variable --labor-dock-right) para que,
       aun siendo fixed, quede pegado al canto de la tarjeta y no suelto en
       mitad de la ventana. */
    position: fixed;
    top: 40vh;
    /* En móvil se empujaba tanto hacia fuera que casi no quedaba pestaña
       visible (solo ~17px de 38px de ancho); se reduce el desplazamiento
       para que se vea bastante más sin llegar a invadir el contenido. */
    right: calc(var(--labor-dock-panel-right, 0px) - 9px);
    transform: translateY(-50%);
    flex-direction: column;
    gap: 8px;
    z-index: 40;
}

/* Selector de tipo de ausencia del modal: chips compactos con icono, en fila
   que se ajusta; con scroll si hay muchos tipos. */
.labor-leave-type-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 6px;
    max-height: min(320px, 45vh);
    overflow-y: auto;
}

.labor-leave-type-picker__option {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.labor-leave-type-picker__option:hover {
    border-color: var(--primary);
}

.labor-leave-type-picker__option.is-active {
    border-color: var(--success, #1f8f5f);
    background: rgba(31, 143, 95, 0.1);
    color: var(--success, #1f8f5f);
}

.labor-leave-type-picker__icon {
    display: inline-flex;
}

.labor-leave-type-picker__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.labor-leave-type-picker__days {
    flex: none;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.labor-leave-type-picker__days.is-empty {
    background: rgba(192, 57, 43, 0.14);
    color: var(--danger, #c0392b);
}

.labor-leave-type-picker__option.is-active .labor-leave-type-picker__days {
    background: var(--success, #1f8f5f);
    color: #fff;
}

.labor-leave-type-picker__icon .app-icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* Bolita flotante fija en el borde derecho de la pantalla, centrada en
   vertical (igual que otros docks flotantes de la app), que cuenta los días
   que se van marcando en el calendario de vacaciones/ausencias. Se muestra
   solo mientras hay al menos un día seleccionado. */
.labor-leave-selection-bubble {
    position: fixed;
    top: calc(50% - 52px);
    right: 18px;
    transform: translateY(-50%);
    z-index: 45;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    background: var(--primary, #2563eb);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
    cursor: default;
    transition: transform 0.15s ease, background 0.15s ease;
}

/* Bola amarilla del borrador: entre la del contador y la de enviar, vacía la selección. */
.labor-leave-clear-bubble {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 45;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    background: #f5b301;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.labor-leave-clear-bubble[hidden] {
    display: none;
}

.labor-leave-clear-bubble:hover {
    filter: brightness(1.08);
}

.labor-leave-clear-bubble .app-icon {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Bola verde de enviar: justo debajo de la del contador, abre el modal de confirmación. */
.labor-leave-send-bubble {
    position: fixed;
    top: calc(50% + 52px);
    right: 18px;
    transform: translateY(-50%);
    z-index: 45;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    background: var(--success, #1f8f5f);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.labor-leave-send-bubble[hidden] {
    display: none;
}

/* attachHoldToConfirm le añade .hold-confirm-button (108x108, relative):
   se restaura el tamaño/posición de la bola y el relleno pasa a verde oscuro. */
.labor-leave-send-bubble.hold-confirm-button {
    position: fixed;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.labor-leave-send-bubble.hold-confirm-button::before {
    background: rgba(0, 0, 0, 0.35);
}

.labor-leave-send-bubble .app-icon {
    position: relative;
    z-index: 1;
}

.labor-leave-send-bubble:hover {
    filter: brightness(1.1);
}

.labor-leave-send-bubble .app-icon {
    width: 20px;
    height: 20px;
    margin: 0;
    filter: brightness(0) invert(1);
}

.labor-leave-selection-bubble.labor-leave-selection-bubble--max {
    background: var(--danger, #c0392b);
}

.labor-leave-selection-bubble__count {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .labor-leave-selection-bubble {
        right: 10px;
        width: 40px;
        height: 40px;
        top: calc(50% - 48px);
    }

    .labor-leave-clear-bubble {
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .labor-leave-send-bubble {
        right: 10px;
        width: 40px;
        height: 40px;
        top: calc(50% + 48px);
    }
}

/* En móvil, círculo completo con el icono centrado (más fácil de tocar y de
   ver entero). En pantallas grandes pasa a forma de "pestaña" (ver media
   query de abajo): el lado que toca el borde va recto y solo el lado
   exterior es redondeado. */
.labor-form__actions--floating-dock .button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: none;
    box-sizing: border-box;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    justify-items: center;
    /* Sombra centrada, no direccional: un box-shadow desplazado (-2px 2px)
       hace que un círculo perfecto se vea "achatado" hacia un lado. */
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
}

/* El botón de Cancelar (✕) del dock, en azul en vez del blanco/secundario
   por defecto, para que se distinga a simple vista del resto. */
.labor-form__actions--floating-dock [data-labor-admin-cancel-edit],
.labor-form__actions--floating-dock [data-labor-requests-edit-cancel],
.labor-form__actions--floating-dock [data-labor-leave-days-cancel] {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
}

.labor-form__actions--floating-dock [data-labor-admin-cancel-edit]:hover,
.labor-form__actions--floating-dock [data-labor-requests-edit-cancel]:hover,
.labor-form__actions--floating-dock [data-labor-leave-days-cancel]:hover {
    background: var(--primary-dark, #1d4ed8);
    border-color: var(--primary-dark, #1d4ed8);
}

/* En móvil separamos la papelera de borrar usuario del resto de botones del
   dock (Editar/Guardar/Cancelar) para que no parezca una acción más del
   mismo grupo: es destructiva y no debería quedar pegada a las demás. */
@media (max-width: 900px) {
    .labor-form__actions--floating-dock [data-labor-admin-delete-user] {
        margin-top: 14px;
    }
}

.labor-form__actions--floating-dock .labor-btn-icon {
    display: inline-block;
    font-size: 1.1rem;
}

/* El icono SVG es negro por defecto: se invierte a blanco solo cuando el
   botón tiene fondo de color sólido oscuro (verde/azul/rojo). Los
   "secondary" (fondo claro, como Volver/Cancelar) se quedan con el icono
   negro, que si no desaparecería sobre fondo claro. */
.labor-form__actions--floating-dock .labor-btn-icon .app-icon {
    margin-right: 0;
}

.labor-form__actions--floating-dock .button:not(.button--secondary) .labor-btn-icon .app-icon {
    filter: brightness(0) invert(1);
}

/* El botón Cancelar (✕) del dock es un .button--secondary pintado de azul
   a mano arriba, así que la regla genérica de contraste no lo alcanza:
   se fuerza aquí el icono a blanco igual que en los demás botones de color. */
.labor-form__actions--floating-dock [data-labor-admin-cancel-edit] .labor-btn-icon .app-icon,
.labor-form__actions--floating-dock [data-labor-requests-edit-cancel] .labor-btn-icon .app-icon,
.labor-form__actions--floating-dock [data-labor-leave-days-cancel] .labor-btn-icon .app-icon {
    filter: brightness(0) invert(1);
}

.labor-form__actions--floating-dock .labor-btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (min-width: 901px) {
    /* Pestaña "al revés": el lado plano queda pegado del todo al borde real
       de la VENTANA (right: 0, no al de la tarjeta) y el lado redondeado
       sobresale hacia dentro, sobre el contenido. */
    .labor-form__actions--floating-dock {
        right: 0;
        gap: 10px;
    }

    /* Forma de "banderín"/flecha en vez de la media pestaña plana: el lado
       pegado a la ventana sigue recto, pero el lado visible acaba en punta
       (pentágono), más vistoso que un simple semicírculo. */
    .labor-form__actions--floating-dock .button {
        width: 48px;
        height: 42px;
        min-width: 48px;
        min-height: 42px;
        border-radius: 0;
        clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
        justify-items: end;
        padding-right: 0;
        box-shadow: none;
        /* drop-shadow (a diferencia de box-shadow) sigue la forma recortada
           por clip-path en vez de proyectar la sombra del rectángulo original. */
        filter: drop-shadow(2px 2px 4px rgba(15, 23, 42, 0.25));
    }

    .labor-form__actions--floating-dock .labor-btn-icon {
        font-size: 1.25rem;
        transform: translateX(6px);
    }
}

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

.labor-grid.labor-grid--self {
    grid-template-columns: 1fr;
}

.labor-grid--admin {
    grid-template-columns: 1fr;
    align-items: start;
}

.labor-section__header,
.labor-section__header--admin {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.labor-section__kicker {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
}

.labor-section__header h3 {
    margin: 0;
    font-size: 1.2rem;
}

/* Título de pestaña dentro de Perfil (Ficha laboral, Datos personales,
   Turnos...): tamaño/peso consistente en las 6 sub-pestañas, un escalón
   por debajo del h3 genérico del resto del módulo para que conviva bien
   con la densidad más compacta de esta sección. */
[data-labor-tab-scope="perfil"] .labor-section__header h3,
[data-labor-tab-scope="perfil"] .labor-section__header h4 {
    font-size: 1.05rem;
    font-weight: 700;
}

.labor-panel--self-main .labor-panel__body,
.labor-admin-stack,
.labor-self-sections {
    display: grid;
    gap: 16px;
}

.labor-tabs,
.labor-tab-stack {
    display: grid;
    gap: 12px;
}

.labor-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    border: none;
    border-bottom: 3px solid var(--primary-dark);
    border-radius: 0;
    background: transparent;
}

.labor-tabs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tab-height);
    padding: 0 var(--tab-padding-x);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary-dark);
    font-size: var(--font-size-md);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.labor-tabs__button:last-child {
    border-right: none;
}

.labor-tab-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--danger, #c0392b);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-8px);
}

/* Contador informativo (no requiere acción): Revisado/Aceptado/Denegado no
   necesitan revisión, así que no tiene sentido pintarlos de alarma en rojo
   como el resto de avisos pendientes. */
.labor-tab-badge--positive {
    background: #16a34a;
}

.labor-tab-label--compact {
    display: none;
}

.labor-tab-icon {
    display: none;
}

.labor-btn-icon {
    display: none;
}

/* Fichajes es la pantalla que más se usa, así que su navegación por
   pestañas es una barra inferior fija con icono + etiqueta, al alcance
   del pulgar en móvil y también visible en PC, como en las apps de
   fichaje habituales (Homebase, Deputy, When I Work). El resto de
   pestañas de la app (admin, etc.) no se ven afectadas por quedar fuera
   de este selector. */
[data-labor-tabs="timeclock"] {
    /* --tc-nav-space la mide timeclock.js (alto real de la barra + pie); sin JS vale la estimación de siempre. */
    padding-bottom: var(--tc-nav-space, calc(90px + var(--footer-height, 0px)));
}

[data-labor-tabs="timeclock"] .labor-tabs__nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--footer-height, 0px);
    z-index: 500;
    border-bottom: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

[data-labor-tabs="timeclock"] .labor-tabs__button {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    background: transparent;
    color: var(--text-soft);
    border-right: none;
    font-size: 0.68rem;
}

/* Pestaña activa de la barra inferior: antes relleno sólido del color de marca
   (muy llamativo, sobre todo en modo oscuro donde la marca es un tono claro).
   Ahora un tinte suave de la marca sobre la superficie, texto normal y un
   filo de 3px de marca arriba como indicador. */
[data-labor-tabs="timeclock"] .labor-tabs__button:hover {
    background: var(--surface-hover);
}

[data-labor-tabs="timeclock"] .labor-tabs__button--active,
[data-labor-tabs="timeclock"] .labor-tabs__button--active:hover {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--text);
    box-shadow: inset 0 3px 0 var(--primary);
}

[data-labor-tabs="timeclock"] .labor-tabs__button--active .app-icon {
    filter: none;
}

[data-labor-tabs="timeclock"] .labor-tab-icon {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
}

[data-labor-tabs="timeclock"] .labor-tab-label--full {
    display: none;
}

[data-labor-tabs="timeclock"] .labor-tab-label--compact {
    display: inline;
}

[data-labor-tabs^="admin-"] {
    position: relative;
}

[data-labor-tabs^="admin-"] .labor-tabs__nav {
    position: absolute;
    top: -4px;
    z-index: 10;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    padding: 6px 6px 0;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

[data-labor-tabs^="admin-"] .labor-tabs__nav::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--ausencias-caret-left, 50%);
    width: 12px;
    height: 12px;
    background: var(--surface-elevated);
    border-left: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
}

[data-labor-tabs^="admin-"] .labor-tabs__button {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    flex: 0 0 auto;
    width: 60px;
    min-height: 0;
    padding: 4px 2px 3px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

[data-labor-tabs^="admin-"] .labor-tabs__button:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

[data-labor-tabs^="admin-"] .labor-tabs__button--active,
[data-labor-tabs^="admin-"] .labor-tabs__button--active:hover {
    border-color: transparent;
    border-bottom-color: var(--primary);
    background: transparent;
    color: var(--primary-dark);
    font-weight: 800;
}

[data-labor-tabs^="admin-"] .labor-tab-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.75;
    transition: background 0.2s ease;
}

[data-labor-tabs^="admin-"] .labor-tabs__button--active .labor-tab-icon {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    opacity: 1;
}

/* "Revisión" destaca en azul siempre (activa o no), para diferenciarla del
   resto de sub-pestañas de Fichaje ya que agrupa todo lo pendiente. */
[data-labor-tabs="admin-fichaje"] .labor-tabs__button[data-labor-tab-value="test"] {
    color: var(--primary);
}

[data-labor-tabs="admin-fichaje"] .labor-tabs__button[data-labor-tab-value="test"] .labor-tab-icon {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    opacity: 1;
}

[data-labor-tabs^="admin-"] .labor-tab-label {
    display: block;
    width: 100%;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
}

[data-labor-tabs^="admin-"] .labor-tab-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* El badge ya no vive dentro de .labor-tab-icon-row (antes quedaba pegado
   al icono, a la IZQUIERDA del texto de la pestaña -- bug real reportado:
   "el globo con la cantidad de cosas está a la izquierda en lugar de a la
   derecha"). Ahora vive suelto tras .labor-tab-label en el HTML y aquí se
   posiciona flotante en la esquina superior derecha del botón entero
   (que ya es position:relative, ver .labor-settings-tabs__item), como el
   resto de badges de notificación de la app.
   OJO: el selector real es [data-labor-tabs^="admin-"] cuando hay guion
   (admin-fichaje, ver JS), pero ESTE contenedor concreto tiene el valor
   exacto "admin" sin sufijo -- con solo el prefijo el badge nunca
   flotaba, seguía en flujo normal ocupando su propio hueco (bug real
   reportado: "no está flotante, está como en su propio espacio"). */
[data-labor-tabs^="admin-"] .labor-tab-badge,
[data-labor-tabs="admin"] .labor-tab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    flex: none;
    min-width: 17px;
    height: 15px;
    padding: 0 5px;
    margin-left: 0;
    font-size: 0.58rem;
    border-radius: 3px;
    transform: none;
}

.labor-tabs__button:hover {
    background: color-mix(in srgb, var(--primary) 24%, transparent);
}

.labor-tabs__button--active {
    background: var(--primary);
    color: var(--button-primary-ink, #fff);
}

.labor-tabs__button--active:hover {
    background: var(--primary);
}

/* Los iconos SVG (.app-icon) son negros por defecto: sobre el fondo azul
   sólido de la pestaña activa quedarían con muy poco contraste, así que se
   invierten a blanco solo en ese estado. */
.labor-tabs__button--active .app-icon {
    filter: brightness(0) invert(1);
}

.labor-tabs__panel[hidden] {
    display: none;
}

.labor-self-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.labor-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.labor-panel--self-main .labor-summary,
.labor-panel--self-main .labor-form,
.labor-panel--self-main .labor-requests,
.labor-panel--main .labor-form {
    margin-bottom: 0;
}

.labor-self-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

.labor-self__intro {
    display: grid;
    gap: 8px;
}

.labor-self__intro h3 {
    margin: 0;
    font-size: 1.2rem;
}

.labor-summary--header {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    margin-bottom: 0;
}

[data-labor-route="self"] .labor-hero__copy {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
}

[data-labor-route="self"] .labor-hero__identity {
    display: flex;
}

[data-labor-route="self"] .labor-hero__identity .labor-summary__avatar {
    width: 56px;
    height: 56px;
}

[data-labor-route="self"] .labor-hero__heading {
    gap: 2px;
}

[data-labor-route="self"] .labor-hero__heading .app-title:empty {
    display: none;
}

[data-labor-route="self"] .labor-hero__heading .app-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

[data-labor-route="self"] .labor-hero__body {
    padding: 14px 24px;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

[data-labor-route="self"] .labor-hero__copy {
    flex: 0 1 auto;
}

[data-labor-route="self"] .labor-summary--header {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    width: auto;
    flex: 1 1 320px;
    padding-left: 20px;
    border-left: 1px solid var(--border);
}

[data-labor-route="self"] .labor-summary--header .labor-summary__card {
    padding: 4px 12px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.labor-timesheet__title-range {
    display: none;
}

.labor-nav-label--compact {
    display: none;
}

.labor-summary__card,
.labor-admin__summary-card {
    display: grid;
    gap: 2px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.labor-summary__card strong {
    font-size: 0.95rem;
}

.labor-admin__summary-card strong {
    font-size: 0.82rem;
    line-height: 1.2;
}

.labor-admin__summary-card span {
    font-size: 0.72rem;
}

.labor-summary__card span,
.labor-admin__summary-card span,
.labor-muted {
    color: var(--text-soft);
}

/* Tips/ayuda dentro de las pestañas de Perfil (Personal, Laboral,
   Personalización, Turnos...): más pequeños y discretos que el body para
   no competir con los campos. Escopado a labor-tab-stack (no global a
   .labor-muted, que se reutiliza en otros módulos como timeclock/logistics
   con su propio tamaño). */
.labor-tab-stack .labor-muted {
    font-size: 0.8rem;
}

.labor-welcome-shortcuts-list {
    display: grid;
    gap: 8px;
}

.labor-welcome-shortcut-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-welcome-shortcut-row__reorder {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.labor-welcome-shortcut-row__reorder .button {
    min-height: 0;
    padding: 1px 6px;
    line-height: 1.2;
}

.labor-welcome-shortcut-row__icon {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.labor-welcome-shortcut-row__label {
    flex: 1 1 200px;
    min-width: 0;
}

.labor-welcome-shortcut-row__route {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-welcome-shortcut-row__enabled {
    flex: 0 0 auto;
    white-space: nowrap;
}

.labor-data__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.labor-data__row {
    display: grid;
    gap: var(--space-4);
}

.labor-data__item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

/* Mismo aviso amarillo que en modo edición, pero aquí en modo solo
   lectura (ficha del trabajador sin haber pulsado "Editar"). */
.labor-data__item--critical {
    background: var(--warning-soft, #fef9c3);
    border-color: var(--warning, #eab308);
}

/* Icono opcional junto al campo (solo en los campos más "reconocibles": email,
   teléfono, dirección, fecha de nacimiento, documento... no en todos, para no
   saturar los campos más administrativos/menos visuales). */
.labor-data__item--iconed,
.labor-field--iconed {
    display: flex;
    align-items: center;
    gap: 9px;
}
.labor-data__item--iconed .labor-data__item-icon,
.labor-field--iconed .labor-field-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .76rem;
    background: var(--surface-elevated);
    color: var(--text-soft);
    border: 1px solid var(--border);
}
.labor-data__item--iconed .labor-data__item-text,
.labor-field--iconed .labor-field-text {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.labor-admin-form__grid--compact .labor-card-section {
    gap: 8px;
    padding: 12px 14px;
}

.labor-admin-form__grid--compact .labor-card-section__header h4 {
    font-size: 0.88rem;
}

.labor-admin-form__grid--compact .labor-card-section__kicker {
    margin: 0 0 2px;
    font-size: 0.66rem;
}

.labor-admin-form__grid--compact .labor-card-section__body {
    gap: 8px;
}

.labor-admin-form__grid--compact .labor-data__row {
    gap: 8px;
}

.labor-admin-form__grid--compact .labor-data__item {
    padding: 8px 10px;
}

.labor-admin-form__grid--compact .labor-data__item-label {
    margin: 0 0 2px;
    font-size: 0.68rem;
}

.labor-admin-form__grid--compact .labor-data__item-value {
    font-size: 0.86rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labor-data__item-label {
    display: block;
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-soft);
    /* Etiquetas largas ("Fecha de nacimiento", "Punto de recogida"...) parten
       en 2 líneas en vez de recortar o forzar el ancho del valor de al lado:
       el label va siempre ENCIMA del valor (grid en columna, ver
       .labor-data__item), así una segunda línea no descuadra nada. */
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
}

.labor-data__item-value {
    display: block;
    line-height: 1.45;
    color: var(--text);
}

.labor-self-profile__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* flex (no grid con número de columnas fijo): cada .labor-card-section
   crece con flex:1 para repartirse el 100% del ancho entre las que haya
   -- 1, 2, 3 o más, sin dejar nunca hueco vacío ni tener que fijar un
   número de columnas por cada sub-bloque a mano (norma pedida
   explícitamente: "sean una, dos, tres o cuatro mil columnas"). */
.labor-admin-form__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: start;
}

.labor-admin-form__grid > .labor-card-section {
    flex: 1 1 320px;
    min-width: 0;
}

.labor-admin-form__grid > .labor-card-section--full {
    flex-basis: 100%;
}

/* "personal" y "labor" viven en sub-scopes "perfil-personal"/"perfil-labor"
   (no "perfil" a secas, ver HTML: data-labor-tab-scope="perfil-personal" /
   "perfil-config" / "perfil-labor") -- el selector con "perfil" exacto
   nunca coincidía con nada, dejando el grid de 3 columnas fijas por
   defecto en TODOS los sub-bloques, cualquiera que fuese su número real
   de secciones -- de ahí el hueco vacío a la derecha reportado ("si hay
   una o dos columnas deben ocupar el 100%, sean una, dos, tres o cuatro
   mil"). Ya no hace falta fijar un número de columnas por sub-bloque a
   mano: .labor-admin-form__grid ahora es flex (ver arriba), cada sección
   crece para llenar el 100% del ancho entre las que haya, sea 1, 2, 3 o
   más -- estos selectores quedan obsoletos y se han retirado. */

/* La ficha de Empresa (Información) con 3 columnas se veía muy apretada;
   con una base más ancha (420px) caben como mucho 2 por fila en el ancho
   habitual del panel, se lee más claro. */
[data-labor-admin-settings-screen="company"] .labor-admin-form__grid > .labor-card-section {
    flex-basis: 420px;
}

.labor-card-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-card-section--full {
    grid-column: 1 / -1;
}

.labor-card-section__header,
.labor-card-section__header--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.timeclock-admin-range-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.timeclock-admin-range-nav__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
}

.labor-card-section__header--schedule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.labor-schedule-editor {
    flex: 1 1 320px;
    min-width: 0;
    min-height: 30px;
}

.labor-card-section__header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.labor-card-section__kicker {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.labor-card-section__body {
    display: grid;
    gap: 10px;
}

.labor-form {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Sistema de espaciado de Perfil: escala fija 4/8/12/16px, sin valores
   sueltos. Objetivo: compacto pero con aire suficiente entre bloques que
   significan cosas distintas (secciones > filas de campos > campo/valor). */
[data-labor-tab-scope="perfil"] .labor-admin-form__grid,
[data-labor-tab-scope="perfil"] .labor-tab-stack {
    gap: 10px;
}

[data-labor-tab-scope="perfil"] .labor-card-section {
    gap: 6px;
    padding: 8px 12px;
}

[data-labor-tab-scope="perfil"] .labor-card-section__body {
    gap: 8px;
}

[data-labor-tab-scope="perfil"] .labor-form__row {
    gap: 8px;
}

/* Historial y Solicitudes: mismo criterio compacto que Perfil, para que la
   lista aproveche altura y quepa más sin scroll (pedido explícito). */
.labor-tabs__panel[data-labor-tab-value="historial"] .labor-tab-stack,
.labor-tabs__panel[data-labor-tab-value="solicitudes"] .labor-tab-stack {
    gap: 8px;
}

.labor-tabs__panel[data-labor-tab-value="historial"] .labor-card-section__body,
.labor-tabs__panel[data-labor-tab-value="solicitudes"] .labor-card-section__body {
    gap: 6px;
}

.labor-tabs__panel[data-labor-tab-value="historial"] .labor-card-section,
.labor-tabs__panel[data-labor-tab-value="solicitudes"] .labor-card-section {
    gap: 6px;
}

.labor-tabs__panel[data-labor-tab-value="historial"] .labor-empty,
.labor-tabs__panel[data-labor-tab-value="solicitudes"] .labor-empty {
    padding: 8px 10px;
    font-size: 0.85rem;
}

[data-labor-tab-scope="perfil"] .labor-field {
    gap: 2px;
}

/* NO forzar --triple/--quad a 2 columnas: con 3-4 campos reales en la fila, 2 columnas deja el
   último campo suelto en su propia fila con un hueco enorme vacío al lado (el bug real que
   causaba los huecos verticales gigantes en Personal/Laboral). Se dejan en su nº de columnas
   natural (3/4), que es justo el que encaja con el nº de campos que de verdad contienen. */

/* Personalización ("config"), Puesto/Jornada/Administración ("labor") y
   Datos/Prevención ("personal"): ya no necesitan un override de número de
   columnas por sub-bloque -- .labor-admin-form__grid es flex (ver arriba),
   cada sección crece para llenar el 100% del ancho entre las que haya. */

/* ===== Sub-pestañas de TERCER nivel (menú lateral fino) =====
   Dentro de Personal/Laboral/Personalización: en vez de apilar todas las
   secciones de la pestaña con scroll largo, un menú lateral fino a la
   izquierda deja ver un solo bloque temático a pantalla más completa. Layout
   de 2 columnas: nav estrecha (150-200px) + contenido a la derecha. Por
   debajo de 900px (mismo breakpoint que el resto del módulo) colapsa a una
   fila horizontal scrollable encima del contenido. */
.labor-subtabs {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 16px;
    align-items: start;
}

/* Botón "Editar" de la pestaña completa, ahora pegado a la barra de sub-bloques (no solo
   flotando arriba a la derecha, lejos del contenido) para que se sienta parte de esta misma
   zona -- edita toda la pestaña de golpe (todos los sub-bloques a la vez), pero visualmente
   ancla el control justo donde el usuario está mirando. */
.labor-subtabs__edit {
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}

.labor-subtabs__nav {
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Etiqueta de sub-pestaña: puede partirse en 2 líneas ("Requisitos y
   accesos", "Fichaje y jornada"...) sin problema porque el icono está fijo
   arriba (align-items: flex-start + .labor-subtabs__icon con line-height
   propio más abajo), no centrado respecto al bloque de texto completo. */
.labor-subtabs__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-soft);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Icono fijo arriba a la izquierda (no centrado respecto a las 2 líneas de texto de los títulos
   largos como "Requisitos y accesos"/"Fichaje y jornada", que quedaba descentrado y feo). */
.labor-subtabs__icon {
    flex-shrink: 0;
    line-height: 1.25;
}

.labor-subtabs__text {
    min-width: 0;
}

.labor-subtabs__item:hover {
    background: var(--surface-hover);
    color: var(--primary-dark);
}

.labor-subtabs__item.is-active {
    background: var(--brand-fill-gradient);
    color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateX(2px);
}

.labor-subtabs__content {
    min-width: 0;
}

@media (max-width: 900px) {
    .labor-subtabs {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .labor-subtabs__nav {
        position: static;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .labor-subtabs__item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .labor-subtabs__item.is-active {
        transform: none;
    }
}

.labor-form__row {
    display: grid;
    gap: var(--space-4);
}

.labor-form__row--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.labor-form__row--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.labor-form__row--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.labor-field {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

/* Campos "sin los cuales el trabajador no puede hacer prácticamente nada"
   (departamento, fichaje, teletrabajo, vestuario, cierre, centros,
   pausas...): fondo amarillo para tenerlos controlados de un vistazo. */
.labor-field--critical,
.labor-toggle--critical,
.labor-critical-box {
    background: var(--warning-soft, #fef9c3);
    border: 1px solid var(--warning, #eab308);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}

/* Etiqueta del campo: siempre en su propia línea encima del valor/control
   (grid en columna heredado de .labor-field), así una etiqueta larga
   ("Punto de recogida asignado", "Tipo de contrato"...) se parte en dos
   líneas sin desplazar ni desalinear el control de al lado. */
.labor-field > span,
.labor-admin__selector > span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-soft);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Valor del campo: el elemento con más peso visual de la fila (texto real
   en modo vista, o contenido del input en modo edición). Diferencia
   claramente "etiqueta" (arriba, pequeña) de "dato" (aquí, más grande). */
[data-labor-tab-scope="perfil"] .labor-field .input {
    font-size: var(--font-size-md);
    font-weight: 500;
}

.labor-textarea {
    min-height: 108px;
    resize: vertical;
}

.labor-textarea--compact {
    min-height: 88px;
}

/* Bloque de campos único para vista/edición (Personal, Laboral,
   Personalización): en modo vista (.is-viewing) los inputs/selects/
   textareas deshabilitados se ven como texto de ficha, no como caja de
   formulario gris; en modo edición (.is-editing) recuperan su aspecto
   normal de campo. El layout (grid, secciones, orden) no cambia entre
   ambos modos, solo el aspecto del campo. */
.labor-profile-block.is-viewing .input:disabled,
.labor-profile-block.is-viewing .input[readonly] {
    border-color: transparent;
    background: transparent;
    color: var(--text);
    /* .input trae min-height:46px y padding:12px 14px de base.css, pensado para una caja de
       formulario -- en modo vista eso dejaba una línea de texto flotando dentro de un hueco
       enorme casi vacío. Se colapsa, pero SIN llegar a 0: un campo vacío (sin dato guardado)
       necesita quedarse con la altura de una línea de texto normal, si no desaparece del todo
       y parece que el campo ni existe (bug real: "Contacto emergencia no sale nada"). */
    min-height: 1.3em;
    padding: 2px 0;
}

.labor-profile-block.is-viewing select.input:disabled {
    appearance: none;
    background-image: none;
    padding-right: 0;
}

.labor-profile-block.is-viewing textarea.input:disabled {
    resize: none;
    overflow: hidden;
}

/* Campo vacío en modo vista: con min-height:1.3em de arriba ya no desaparece del todo, pero
   sigue pareciendo un hueco sin sentido si no hay texto -- placeholder="" existe en algunos
   campos, en otros no; para que ambos casos se vean igual de claros, cualquier placeholder
   presente se muestra en gris legible en vez de ocultarse. */
.labor-profile-block.is-viewing .input:disabled::placeholder {
    color: var(--text-soft, #94a3b8);
    opacity: 1;
}

/* Antes se quitaba el amarillo en modo vista (transparente) -- pero estos campos son
   importantes de rellenar SIEMPRE, así que ahora se ven en amarillo también en visualización,
   igual que editando, para que no pase desapercibido que faltan por rellenar. */
.labor-profile-block.is-viewing .labor-field--critical,
.labor-profile-block.is-editing .labor-field--critical,
.labor-profile-block.is-viewing .labor-critical-box,
.labor-profile-block.is-editing .labor-critical-box {
    background: var(--warning-soft, #fef9c3);
    border: 1px solid var(--warning, #eab308);
    padding: 8px 10px;
}

.labor-schedule__hint {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.labor-schedule__summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.labor-schedule__summary-card {
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-schedule-mode.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--button-primary-ink, #fff);
}

.labor-schedule-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.labor-schedule-view__date {
    font-size: 0.88rem;
}

.labor-schedule-view__segments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.labor-schedule-view__segment {
    font-size: 0.82rem;
    color: var(--text);
}

.labor-schedule-view__total {
    margin-left: auto;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.labor-schedule-toolbar {
    display: flex;
    align-items: center;
}

.labor-schedule-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.labor-schedule-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.labor-schedule-toolbar .button {
    min-height: 28px;
    min-width: 28px;
    padding: 0 8px;
    font-size: 0.82rem;
    white-space: nowrap;
}

.labor-schedule-toolbar__segments .button,
.labor-schedule-toolbar__actions .button {
    padding: 0;
}

.labor-schedule-toolbar__add {
    min-height: 26px;
    min-width: 26px;
    font-size: 0.9rem;
    line-height: 1;
}

.labor-schedule-toolbar__sep {
    color: var(--text-soft);
}

.labor-schedule-calendar {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.labor-schedule-calendar__month-label {
    margin: 0 0 8px;
    font-size: 0.9rem;
    text-transform: capitalize;
}

.labor-schedule-calendar__body {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

[data-labor-schedule-calendar] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

.labor-schedule-year__header {
    position: absolute;
    top: -1px;
    right: 0;
    z-index: 2;
}

.labor-schedule-year__rest-button {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.labor-schedule-year__rest-button:hover:not(:disabled) {
    background: var(--surface-hover);
}

.labor-schedule-year__rest-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.labor-schedule-year__rest-button.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
}

.labor-schedule-calendar__weeks {
    display: flex;
    flex: 0 0 34px;
    flex-direction: column;
}

.labor-schedule-calendar__month-toggle {
    display: block;
    width: 100%;
    height: 28px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.labor-schedule-calendar__month-toggle:hover:not(:disabled) {
    background: var(--surface-hover);
}

.labor-schedule-calendar__month-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.labor-schedule-calendar__month-toggle.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
}

.labor-schedule-calendar .labor-leave-calendar__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}

.labor-schedule-calendar__week-select {
    flex: 1 1 auto;
    min-height: 76px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.labor-schedule-calendar__week-select:hover:not(:disabled) {
    background: var(--surface-hover);
}

.labor-schedule-calendar__week-select:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.labor-schedule-calendar__week-select.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
}

.labor-schedule-calendar__week-select--empty {
    visibility: hidden;
}

.labor-schedule-calendar__body .labor-leave-calendar__month-card {
    flex: 1 1 auto;
    min-width: 0;
}

.labor-schedule__segments {
    display: grid;
    gap: 8px;
}

.labor-schedule__segment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 4px;
    align-items: end;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.labor-schedule__segment .labor-field {
    min-width: 0;
}

.labor-schedule__segment .labor-field span {
    font-size: 0.66rem;
    white-space: nowrap;
}

.labor-schedule__segment .input {
    min-height: 30px;
    padding: 4px 5px;
    font-size: 0.74rem;
}

.labor-schedule__segment .button {
    white-space: nowrap;
    min-height: 30px;
    padding: 0 6px;
    font-size: 0.68rem;
}

.labor-schedule__segment--compact {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 1px;
}

.labor-schedule__segment-label {
    color: var(--text-soft);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.labor-schedule__segment-fields {
    display: flex;
    align-items: center;
    gap: 2px;
}

.labor-schedule__segment--compact .input {
    flex: 0 0 auto;
    width: 66px;
    min-height: 26px;
    padding: 2px 3px;
    font-size: 0.7rem;
}

.labor-schedule__segment--compact .button {
    flex: 0 0 auto;
    min-height: 26px;
    min-width: 22px;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1;
}

.labor-schedule__day-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.labor-schedule__day-note--error {
    color: var(--danger-dark);
}

.labor-schedule-preview {
    display: grid;
    gap: 8px;
}

.labor-schedule-preview__day,
.labor-schedule-preview__total {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-schedule-preview__day strong,
.labor-schedule-preview__total strong {
    font-size: 0.9rem;
}

.labor-timesheet__week-tools {
    display: grid;
    gap: 12px;
    justify-items: end;
}

.labor-timesheet__week-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.labor-card-section--centered {
    text-align: center;
}

.labor-timesheet__week-tools--standalone {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.labor-timesheet__week-tools--standalone .labor-timesheet__week-nav {
    justify-content: center;
}

.labor-tabs__panel[data-labor-tab-value="schedule"] .labor-timesheet__week-nav .button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
}

.labor-timesheet__summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.labor-timesheet__summary-card {
    display: grid;
    gap: 4px;
    min-width: 140px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-timesheet__summary-text {
    display: block;
}

.labor-timesheet__days {
    display: grid;
    gap: 14px;
}

.labor-timesheet__calendar {
    display: grid;
    gap: 10px;
}

.labor-timesheet__day-detail {
    min-width: 0;
    display: flex;
}

.labor-timesheet__day-detail > * {
    width: 100%;
}

@media (min-width: 900px) {
    .labor-timesheet__days:has(.labor-timesheet__calendar) {
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
        align-items: stretch;
    }
}

.labor-timesheet__day {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-timesheet__day--leave {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.labor-timesheet__day--empty-weekend {
    gap: 0;
    padding: 10px 16px;
    background: var(--surface-soft);
}

.labor-timesheet__day-free {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.labor-timesheet__day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.labor-timesheet__day-copy {
    display: grid;
    gap: 4px;
}

.labor-timesheet__day-copy--compact {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.labor-timesheet__day-total {
    margin-left: auto;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.labor-timesheet__day-copy p,
.labor-timesheet__signature-note,
.labor-signature-modal__summary p,
.labor-signature-pad__hint {
    margin: 0;
}

.labor-timesheet__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.labor-timesheet__source {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.labor-timesheet__source-pill,
.labor-timesheet__source-note {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
    font-weight: 700;
}

.labor-timesheet__source-pill {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

.labor-timesheet__source-note {
    color: var(--text-soft);
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.labor-timesheet__overlays,
.labor-timesheet-editor-modal__overlays {
    display: grid;
    gap: 10px;
}

.labor-timesheet__overlay {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.labor-timesheet__overlay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.labor-timesheet__overlay-status {
    font-size: 0.84rem;
    font-weight: 700;
}

.labor-timesheet__overlay-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.labor-timesheet__overlay-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-lg);
    border: 1px solid currentColor;
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.92;
}

.labor-timesheet__overlay-reason,
.labor-timesheet__overlay-impacts-title {
    margin: 0;
}

.labor-timesheet__overlay-impacts {
    display: grid;
    gap: 6px;
}

.labor-timesheet__overlay-impacts ul {
    margin: 0;
    padding-left: 18px;
}

.labor-timesheet__overlay--pending {
    border-color: var(--warning-border);
    background: var(--warning-soft);
    color: var(--warning);
}

.labor-timesheet__overlay--approved {
    border-color: var(--success-soft-strong);
    background: var(--success-soft);
    color: var(--success-dark);
}

.labor-timesheet__overlay--rejected {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger-dark);
}

.labor-timesheet__overlay--pending strong,
.labor-timesheet__overlay--pending .labor-timesheet__overlay-status,
.labor-timesheet__overlay--pending li {
    color: var(--warning);
}

.labor-timesheet__overlay--approved strong,
.labor-timesheet__overlay--approved .labor-timesheet__overlay-status,
.labor-timesheet__overlay--approved li {
    color: var(--success-dark);
}

.labor-timesheet__overlay--rejected strong,
.labor-timesheet__overlay--rejected .labor-timesheet__overlay-status,
.labor-timesheet__overlay--rejected li {
    color: var(--danger-dark);
}

.labor-timesheet__schedule {
    display: grid;
    gap: 10px;
}

.labor-timesheet__segments {
    display: grid;
    gap: 8px;
}

.labor-timesheet__segment {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 700;
}

.labor-timesheet__segment--empty {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text-soft);
}

.labor-timesheet__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 320px);
    gap: 16px;
    align-items: start;
}

.labor-timesheet__signature-box {
    display: grid;
    gap: 10px;
    justify-items: stretch;
}

.labor-timesheet__signature-card,
.labor-timesheet__signature-placeholder {
    display: grid;
    gap: 10px;
    min-height: 140px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-timesheet__signature-placeholder {
    align-content: center;
    color: var(--text-soft);
    text-align: center;
}

.labor-timesheet__signature-image {
    width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
}

.labor-timesheet__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.labor-timesheet-editor-modal,
.labor-timesheet-editor-modal__summary,
.labor-timesheet-editor-modal__overlays {
    display: grid;
    gap: 14px;
}

.labor-timesheet-editor-modal__summary {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.labor-timesheet-editor-modal__summary p {
    margin: 0;
}

.labor-timesheet-editor-modal__hint {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.labor-timesheet-editor-modal__day {
    background: var(--surface);
}

.labor-timesheet-editor-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.labor-signature-modal,
.labor-signature-modal__summary {
    display: grid;
    gap: 14px;
}

.labor-signature-modal__summary {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.labor-signature-pad {
    display: grid;
    gap: 10px;
}

.labor-signature-pad__canvas {
    width: 100%;
    height: 220px;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    touch-action: none;
    cursor: crosshair;
}

.labor-signature-pad__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.labor-signature-pad__hint {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.labor-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.labor-leave-quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.labor-leave-quota-header__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.labor-leave-quota-list {
    display: grid;
    gap: 2px;
}

/* Fijos y Opcionales van en dos cards independientes lado a lado, bien delimitadas (borde, fondo
   y título propios) -- antes iba todo apilado en una sola card larga y el total quedaba suelto
   en medio de la lista en vez de pegado al grupo al que pertenece. */
.labor-leave-quota-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.labor-leave-quota-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 12px 14px;
}

.labor-leave-quota-card__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    margin-bottom: 8px;
}

/* Lista de filas de cada card (Fijos/Opcionales). auto-fit en vez de un nº fijo de columnas: con
   las cards ya a media pantalla, la fila (switch + nombre + 3 columnas de 48px) necesita bastante
   ancho mínimo -- forzar 2 o 3 columnas fijas en un contenedor estrecho colapsaba el nombre a 0px
   y desaparecía. Con minmax(220px, 1fr) se reparte en varias columnas SOLO si de verdad cabe una
   columna completa de 220px, si no cae a 1 sola columna (lista simple) sin recortar nada. */
.labor-leave-quota-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 14px;
    align-items: start;
}

.labor-leave-quota-columns__col {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.labor-leave-quota-row {
    display: grid;
    grid-template-columns: auto 1fr 48px 48px 48px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 0.85rem;
}

.labor-leave-quota-row--header {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
}

.labor-leave-quota-row__col {
    box-sizing: border-box;
    width: 48px;
    text-align: center;
    color: var(--text-soft);
}

.labor-leave-quota-row__col--approved,
.labor-leave-quota-row__col--pending {
    border-radius: var(--radius-lg);
    font-weight: 700;
}

.labor-leave-quota-row__col--approved {
    color: var(--success-dark, #1f8f5f);
    background: var(--success-soft-strong);
}

.labor-leave-quota-row__col--pending {
    color: var(--warning);
    background: var(--warning-soft);
}

.labor-leave-quota-row--header .labor-leave-quota-row__col {
    color: var(--text-soft);
}

.labor-leave-quota-row__label {
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-leave-quota-row__days-input {
    box-sizing: border-box;
    width: 48px;
    height: 26px;
    margin: 0;
    flex: 0 0 auto;
    text-align: center;
    padding: 0 4px;
    line-height: normal;
}

/* Calendario Laboral y Festivos (Config > Fichajes). */
.labor-holidays-calendar__nav-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.labor-holidays-calendar__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.labor-holidays-calendar__label {
    min-width: 140px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.labor-holidays-calendar__legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.labor-holidays-calendar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.labor-field--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
}

.labor-holidays-calendar__location {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
}

.labor-holidays-calendar__location:empty {
    display: none;
}

.labor-holidays-calendar__location::before {
    content: '📍';
    font-size: 0.9em;
}

.labor-field--inline select {
    flex: 1;
}

.labor-holidays-calendar__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius);
}

.labor-holidays-calendar__dot--national {
    background: var(--primary, #2f6fed);
}

.labor-holidays-calendar__dot--local {
    background: #d97706;
}

.labor-holidays-calendar__year-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.labor-holidays-calendar__month {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    background: var(--surface);
}

.labor-holidays-calendar__month-title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.labor-holidays-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    text-align: center;
}

.labor-holidays-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.labor-holidays-calendar__day {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 1px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 2px 1px;
    font-size: 0.64rem;
}

.labor-holidays-calendar__day-number {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* El festivo se marca coloreando toda la celda del día (no solo un círculo
   alrededor del número), con el número y el nombre en blanco para que
   contrasten. Rojo para nacional/autonómico, naranja para local. */
.labor-holidays-calendar__day--national {
    background: #dc2626;
    border-color: #dc2626;
}

.labor-holidays-calendar__day--local {
    background: #f97316;
    border-color: #f97316;
}

.labor-holidays-calendar__day--national .labor-holidays-calendar__day-number,
.labor-holidays-calendar__day--local .labor-holidays-calendar__day-number {
    color: #fff;
    font-weight: 800;
}

.labor-holidays-calendar__day--national .labor-holidays-calendar__day-name,
.labor-holidays-calendar__day--local .labor-holidays-calendar__day-name {
    color: #fff;
}

.labor-holidays-calendar__day-name {
    font-size: 0.48rem;
    line-height: 1.05;
    text-align: center;
    color: #b91c1c;
    font-weight: 700;
    word-break: break-word;
}

.labor-holidays-calendar__list-title {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 800;
}

.labor-holidays-calendar__list {
    display: grid;
    gap: 4px;
}

.labor-holidays-calendar__list-row {
    display: grid;
    grid-template-columns: 10px 140px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.82rem;
}

.labor-holidays-calendar__day--empty {
    border: none;
    background: transparent;
}

.labor-holidays-calendar__day--today {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    font-weight: 700;
}


.labor-leave-quota-group-title {
    margin-top: 6px;
    padding-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    border-top: 1px dashed var(--border);
}

/* En modo visualización (campo deshabilitado) el "Total" debe verse como
   texto plano, igual que las columnas Solicitados/Disponibles, y solo
   mostrar el aspecto de campo editable cuando entramos en modo edición. */
.labor-leave-quota-row__days-input:disabled {
    border-color: transparent;
    background: transparent;
    color: var(--text-soft);
    opacity: 1;
}

.labor-leave-quota-switch .timeclock-switch__track {
    background: var(--danger, #c0392b);
}

.labor-leave-quota-switch input:checked + .timeclock-switch__track {
    background: var(--success, #1f9d55);
}

.labor-leave-quota-switch input:disabled + .timeclock-switch__track {
    opacity: 0.6;
}

.labor-leave-quota-row--total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.labor-leave-quota-row--total .labor-leave-quota-row__label {
    font-weight: 700;
}

.labor-leave-quota-row__total-value {
    width: 48px;
    text-align: center;
    font-weight: 700;
    color: var(--primary);
}

.labor-leave-type-manage-list {
    display: grid;
    gap: 2px;
}

.labor-leave-type-manage-row {
    display: grid;
    grid-template-columns: 1fr 70px 96px;
    align-items: center;
    gap: 64px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.labor-leave-type-manage-row:last-child {
    border-bottom: none;
}

.labor-leave-type-manage-row--header {
    padding: 0 0 6px;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

.labor-leave-type-manage-row--header .labor-leave-type-manage-row__value {
    text-align: center;
    color: var(--text-soft);
}

.labor-leave-type-manage-row__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-leave-type-manage-row__value {
    font-weight: 700;
    text-align: center;
    color: var(--text);
    white-space: nowrap;
}

.labor-leave-type-manage-row__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.labor-leave-type-manage-row .button--small {
    padding: 0 8px;
    min-height: 28px;
}

.labor-leave-type-group {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.labor-leave-type-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.labor-leave-type-group__title {
    font-weight: 700;
    font-size: 0.92rem;
}

.labor-leave-type-group__hint {
    font-size: 0.72rem;
    color: var(--text-soft);
}

.labor-leave-type-vacation-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.labor-leave-type-vacation-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.labor-leave-type-vacation-card__copy {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
}

.labor-leave-type-vacation-card__copy strong {
    font-size: 0.95rem;
}

.labor-leave-type-vacation-card__copy span {
    font-size: 0.76rem;
    color: var(--text-soft);
}

.labor-leave-type-vacation-card__value {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.labor-leave-type-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.labor-leave-type-create-form .labor-field {
    flex: 1 1 200px;
}

.labor-leave-type-create-form--modal {
    display: grid;
    gap: 12px;
    padding-top: 0;
    border-top: none;
}

.labor-requests {
    display: grid;
    gap: 14px;
}

.labor-requests--admin {
    gap: 6px;
}

.labor-leave-calendar {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-leave-calendar__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.labor-leave-calendar__header h5 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.labor-leave-calendar__header p:last-child {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
}

.labor-leave-calendar__composer {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.labor-leave-calendar__composer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.labor-leave-calendar__composer-head h6 {
    margin: 0;
    font-size: 0.92rem;
}

.labor-leave-calendar__composer-meta {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Versión compacta del composer: ya no lleva el formulario completo (tipo,
   modalidad, horas, motivo) — eso se eligió mover a un modal que se abre al
   mantener pulsado un día 2s, así que aquí solo queda el texto de la
   selección actual y un botón para limpiarla. */
.labor-leave-calendar__composer--compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.labor-leave-calendar__composer--compact .labor-leave-calendar__range {
    flex: 1 1 auto;
    margin: 0;
}

.labor-leave-calendar__composer--compact .status {
    flex-basis: 100%;
    margin: 0;
}

.labor-leave-calendar__range {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.labor-leave-calendar__range--pending {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text-soft);
}

.labor-leave-calendar__selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.labor-leave-calendar__selection-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 700;
}

.labor-leave-calendar__selection-chip--empty {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text-soft);
}

.labor-leave-calendar__form {
    display: grid;
    gap: 10px;
}

.labor-leave-calendar__composer .labor-textarea--compact {
    min-height: 60px;
}

.labor-leave-calendar__mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.labor-leave-calendar__mode input {
    margin: 0;
    accent-color: var(--primary);
}

.labor-leave-calendar__time-row {
    align-items: end;
}

.labor-leave-calendar__helper {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.labor-leave-calendar__year-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 150px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    text-align: right;
}

.labor-leave-calendar__year-summary strong {
    font-size: 1.2rem;
    line-height: 1;
}

.labor-leave-calendar__year-summary span {
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.labor-leave-calendar__year-balance {
    color: var(--primary-dark);
}

.labor-leave-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.labor-leave-calendar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.labor-leave-calendar__legend-marker,
.labor-leave-calendar__day-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
}

.labor-leave-calendar__legend-marker--approved,
.labor-leave-calendar__day-marker--approved {
    background: var(--success-soft);
    border-color: var(--success-soft-strong);
}

.labor-leave-calendar__legend-marker--approved-other,
.labor-leave-calendar__day-marker--approved-other {
    background: color-mix(in srgb, var(--schedule-request) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--schedule-request) 55%, var(--surface));
}

.labor-leave-calendar__day-marker--type-approved {
    background: var(--leave-color-bg, color-mix(in srgb, var(--schedule-request) 30%, var(--surface)));
    border-color: var(--leave-color-border, color-mix(in srgb, var(--schedule-request) 55%, var(--surface)));
}

.labor-leave-calendar__day-marker--type-pending {
    background: color-mix(in srgb, var(--warning) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 55%, var(--surface));
}

.labor-leave-calendar__legend-marker--pending,
.labor-leave-calendar__day-marker--pending {
    background: var(--warning-soft);
    border-color: var(--warning-border);
}

.labor-leave-calendar__legend-marker--blocked,
.labor-leave-calendar__day-marker--blocked {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.labor-leave-calendar__legend-marker--mixed,
.labor-leave-calendar__day-marker--mixed {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.labor-leave-calendar__legend-marker--partial {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #7c3aed;
    border-color: #7c3aed;
}

/* Un mes por línea (pedido explícito) -- con el ancho fijo tipo móvil que
   ahora tiene la pestaña Ausencias (ver base.css, 480px), 3 meses por
   fila quedaban demasiado estrechos para leerse bien. */
.labor-leave-calendar__months {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.labor-leave-calendar__month-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.labor-leave-calendar__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.labor-leave-calendar__month-head h6 {
    margin: 0;
    font-size: 0.92rem;
    text-transform: capitalize;
}

.labor-leave-calendar__month-meta {
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: right;
}

.labor-leave-calendar__weekdays,
.labor-leave-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.labor-leave-calendar__weekday {
    padding: 0;
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.labor-leave-calendar__day {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 4px;
    min-height: 46px;
    padding: 6px 5px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: visible;
    isolation: isolate;
}

.labor-leave-calendar__day > * {
    position: relative;
    z-index: 1;
}

.labor-schedule-calendar .labor-leave-calendar__day {
    min-height: 76px;
    align-content: start;
}

.labor-schedule-calendar__day-segments {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.labor-schedule-calendar__day-segments span {
    font-size: 0.6rem;
    line-height: 1.2;
    color: var(--text-soft);
    white-space: nowrap;
}

.labor-leave-calendar__day--approved .labor-schedule-calendar__day-segments span {
    color: var(--success-dark);
}

.labor-schedule-calendar__day-segments--leave {
    align-items: center;
}

.labor-schedule-calendar__day-segments--via-request span {
    color: var(--warning);
    font-weight: 700;
}

.labor-schedule-calendar__day-leave-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.labor-leave-calendar__day--interactive {
    position: relative;
    width: 100%;
    appearance: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

/* Feedback visual mientras se mantiene pulsado 2s un día para confirmar la
   solicitud: se reutiliza el mecanismo de relleno de .hold-confirm-button
   (base.css, el mismo que ya se ve bien en los botones de fichar/pausas)
   vía attachHoldToConfirm en timeclock.js, pero adaptado:
   - Se anula su tamaño fijo de 108px para que encaje en la celda.
   - Se anula su ::before y overflow:hidden, porque esa MISMA pseudo-clase y
     el recorte los usa ya la barra de selección de rango
     (--in-range/--selected-start/--selected-end, más abajo en este
     fichero) — si no, un efecto tapa al otro y el "puente" visual entre
     días seleccionados se recorta. El relleno del mantener-pulsado se
     repite aquí en ::after, que queda libre. */
.labor-leave-calendar__day--interactive.hold-confirm-button {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
    line-height: inherit;
    white-space: normal;
    border-width: 0;
    box-shadow: none;
    overflow: visible;
}

.labor-leave-calendar__day--interactive.hold-confirm-button::before {
    content: none;
}

.labor-leave-calendar__day--interactive.hold-confirm-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #1f8f5f;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0s linear;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.labor-leave-calendar__day--interactive.hold-confirm-button.is-holding::after {
    transform: scaleY(1);
    transition-duration: var(--hold-confirm-duration, 2000ms);
    transition-timing-function: linear;
}

.labor-leave-calendar__day--interactive.hold-confirm-button.is-holding .labor-leave-calendar__day-number {
    color: #fff;
}

.labor-leave-calendar__day--interactive.hold-confirm-button > * {
    position: relative;
    z-index: 2;
}

.labor-schedule-calendar__day-pending-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.7rem;
    line-height: 1;
    animation: labor-schedule-pending-blink 1.1s ease-in-out infinite;
}

@keyframes labor-schedule-pending-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labor-schedule-calendar__day-pending-badge {
        animation: none;
    }
}

.labor-schedule-calendar__day-approved-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.7rem;
    line-height: 1;
}

.labor-leave-calendar__day--interactive:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
    transform: translateY(-1px);
}

.labor-leave-calendar__day--interactive:disabled,
.labor-leave-calendar__day--interactive:disabled:hover {
    cursor: not-allowed;
    transform: none;
    opacity: 1;
    color: inherit;
    -webkit-text-fill-color: initial;
}

.labor-leave-calendar__day--interactive:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.labor-leave-calendar__day--has-entries {
    box-shadow: inset 0 0 0 1px rgba(30, 41, 59, 0.08);
}

.labor-leave-calendar__day--has-partial {
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.labor-leave-calendar__day--unavailable {
    cursor: not-allowed;
}

.labor-leave-calendar__day--in-range::before {
    content: '';
    position: absolute;
    top: 9px;
    right: -3px;
    bottom: 9px;
    left: -3px;
    background: color-mix(in srgb, var(--primary) 40%, transparent);
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    pointer-events: none;
    z-index: 0;
}

.labor-leave-calendar__day.labor-leave-calendar__day--in-range {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.labor-leave-calendar__day.labor-leave-calendar__day--in-range .labor-leave-calendar__day-number {
    position: relative;
    z-index: 1;
    color: var(--primary-dark);
    font-weight: 800;
}

.labor-leave-calendar__day--selected-start::before {
    left: 50%;
    border-radius: 0 3px 3px 0;
}

.labor-leave-calendar__day--selected-end::before {
    right: 50%;
    border-radius: var(--radius-lg) 0 0 3px;
}

.labor-leave-calendar__day--selected-single::before {
    right: 6px;
    left: 6px;
    border-radius: var(--radius-lg);
}

.labor-leave-calendar__day.labor-leave-calendar__day--selected-start,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-end,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-single {
    border-color: var(--primary-dark);
    background: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary-dark);
}

.labor-leave-calendar__day.labor-leave-calendar__day--selected-start .labor-leave-calendar__day-number,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-end .labor-leave-calendar__day-number,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-single .labor-leave-calendar__day-number {
    /* var(--button-primary-ink) en vez de blanco fijo: en modo oscuro
       var(--primary) es un color claro pensado para texto, no para llevar
       blanco fijo encima como fondo (poco contraste). */
    color: var(--button-primary-ink, #fff);
}

.labor-leave-calendar__day.labor-leave-calendar__day--selected-start .labor-leave-calendar__day-count,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-end .labor-leave-calendar__day-count,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-single .labor-leave-calendar__day-count {
    background: var(--surface);
    color: var(--primary-dark);
}

.labor-leave-calendar__day.labor-leave-calendar__day--selected-start .labor-leave-calendar__day-markers,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-end .labor-leave-calendar__day-markers,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-single .labor-leave-calendar__day-markers {
    opacity: 0.95;
}

.labor-leave-calendar__day.labor-leave-calendar__day--selected-start .labor-schedule-calendar__day-segments span,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-end .labor-schedule-calendar__day-segments span,
.labor-leave-calendar__day.labor-leave-calendar__day--selected-single .labor-schedule-calendar__day-segments span {
    color: var(--button-primary-ink, #fff);
}

.labor-leave-calendar__day-number {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.labor-leave-calendar__day-count {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
}

.labor-leave-calendar__day-markers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 8px;
    margin-top: auto;
}

.labor-leave-calendar__day-partial-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--fichaje-request);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fichaje-request) 16%, transparent);
}

.labor-leave-calendar__day--outside {
    visibility: hidden;
    pointer-events: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.labor-leave-calendar__day--today {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.labor-leave-calendar__day--approved {
    background: color-mix(in srgb, var(--success) 25%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 45%, var(--surface));
}

.labor-leave-calendar__day--approved .labor-leave-calendar__day-number {
    color: var(--success-dark);
}

.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past {
    background: color-mix(in srgb, var(--success) 45%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 65%, var(--surface));
}

.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past .labor-leave-calendar__day-number {
    color: var(--success-dark);
}

.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-start,
.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-end,
.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-single {
    background: var(--primary);
    border-color: var(--primary-dark);
}

.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-start .labor-leave-calendar__day-number,
.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-end .labor-leave-calendar__day-number,
.labor-leave-calendar__day--approved.labor-schedule-calendar__day--past.labor-leave-calendar__day--selected-single .labor-leave-calendar__day-number {
    color: var(--button-primary-ink, #fff);
}

.labor-leave-calendar__day--approved-other {
    background: color-mix(in srgb, var(--schedule-request) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--schedule-request) 55%, var(--surface));
}

.labor-leave-calendar__day--approved-other .labor-leave-calendar__day-number {
    color: var(--schedule-request-dark);
    font-weight: 800;
}

.labor-leave-calendar__day--approved-other.labor-schedule-calendar__day--past {
    background: color-mix(in srgb, var(--schedule-request) 50%, var(--surface));
    border-color: color-mix(in srgb, var(--schedule-request) 75%, var(--surface));
}

.labor-leave-calendar__day--approved-other.labor-schedule-calendar__day--past .labor-leave-calendar__day-number {
    color: var(--schedule-request-dark);
}

.labor-leave-calendar__day--pending {
    background: color-mix(in srgb, var(--warning) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 55%, var(--surface));
}

.labor-leave-calendar__day--pending .labor-leave-calendar__day-number {
    color: var(--warning);
}

.labor-leave-calendar__day--blocked {
    background: color-mix(in srgb, var(--danger) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 55%, var(--surface));
}

.labor-leave-calendar__day--blocked .labor-leave-calendar__day-number {
    color: var(--danger-dark);
}

.labor-leave-calendar__day--mixed {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

/* Color por tipo de ausencia (variables inline por día), coherente en todos
   los calendarios: aprobado = color sólido, pendiente = el mismo color pero
   con borde discontinuo y algo más suave, para diferenciar estado sin perder
   la identificación por tipo. */
.labor-leave-calendar__day--type-approved {
    background: var(--leave-color-bg, var(--surface-soft));
    border-color: var(--leave-color-border, var(--border-strong));
}

.labor-leave-calendar__day--type-approved .labor-leave-calendar__day-number {
    color: var(--leave-color-text, var(--primary-dark));
}

/* Pendiente es siempre amarillo (estado), sea cual sea el tipo de ausencia;
   el color por tipo solo se aplica cuando ya está aprobada. */
.labor-leave-calendar__day--type-pending {
    background: color-mix(in srgb, var(--warning) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 55%, var(--surface));
}

.labor-leave-calendar__day--type-pending .labor-leave-calendar__day-number {
    color: var(--warning);
}

.labor-leave-calendar__day--mixed .labor-leave-calendar__day-number {
    color: var(--text-soft);
}

.labor-leave-calendar__note {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.labor-request-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.labor-request-card--compact {
    padding: 10px 12px;
}

.labor-request-card--compact .labor-request-card__header {
    margin-bottom: 4px;
}

.labor-request-card--compact .labor-request-card__text {
    margin: 4px 0;
    font-size: 0.85rem;
}

.labor-request-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.labor-request-card__info {
    flex: 0 1 auto;
    min-width: 0;
}

.labor-request-card__header h4 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.labor-request-card__header p,
.labor-request-card__text {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
}

.labor-request-card__body {
    display: grid;
    gap: 10px;
}

.labor-request-card__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.labor-request-card__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.labor-teletrabajo-list {
    display: grid;
    gap: 12px;
    width: 100%;
}

.labor-teletrabajo-card {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.labor-teletrabajo-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.labor-teletrabajo-card--pending {
    border-left-color: #d97706;
}

.labor-teletrabajo-card--approved {
    border-left-color: #16a34a;
}

.labor-teletrabajo-card--rejected {
    border-left-color: #dc2626;
    opacity: 0.85;
}

.labor-teletrabajo-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.labor-teletrabajo-card__name {
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--text);
}

.labor-teletrabajo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

.labor-teletrabajo-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.labor-teletrabajo-card__actions-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.labor-teletrabajo-card__radius {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.labor-teletrabajo-card__radius input {
    width: 70px;
}

.labor-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.labor-badge--select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-height: 46px;
    padding-right: 24px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8L10 12.5L14.5 8' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}

.labor-badge--select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Badge de solo lectura (fuera de modo edición): mismo alto que el select
   de arriba para que el bloque no salte de tamaño al entrar/salir de editar. */
.labor-badge--status-display {
    min-height: 46px;
}

.labor-badge--requested {
    color: var(--fichaje-request-dark);
    background: color-mix(in srgb, var(--fichaje-request) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--fichaje-request) 35%, transparent);
}

/* El badge "Solicitud pendiente" del Historial es un <button> (clicable, abre el modal de
   aprobar/rechazar) en vez de un <span> de solo lectura -- se resetean los estilos nativos de
   botón para que se vea igual que el resto de badges de solo lectura. */
button.labor-badge--requested {
    font-family: inherit;
    cursor: pointer;
}

button.labor-badge--requested:hover {
    background: color-mix(in srgb, var(--fichaje-request) 22%, var(--surface));
}

.labor-badge--pending_review {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: var(--warning-border);
}

.labor-badge--approved {
    color: var(--success-dark);
    background: var(--success-soft);
    border-color: var(--success-soft-strong);
}

.labor-badge--signed {
    color: var(--success-dark);
    background: var(--success-soft);
    border-color: var(--success-soft-strong);
}

.labor-badge--pending {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: var(--warning-border);
}

.labor-badge--leave {
    color: var(--danger-dark);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.labor-badge--quota-exceeded {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: var(--warning-border);
}

.labor-badge--empty {
    color: var(--text-soft);
    background: var(--surface-soft);
    border-color: var(--border);
}

.labor-badge--rejected,
.labor-badge--cancelled {
    color: var(--danger-dark);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.labor-badge--incident {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: var(--warning-border);
}

.labor-badge--incident_reviewed {
    color: var(--success-dark);
    background: var(--success-soft);
    border-color: var(--success-soft-strong);
}

/* Desplegable de estado (badge-select): la flecha era un SVG gris fijo (#666)
   que además se perdía porque las variantes de estado (.labor-badge--approved,
   etc.) pisan el fondo con el shorthand "background". Ahora son dos
   degradados con currentColor (siempre del color del texto del badge, por
   tanto con su mismo contraste en claro y oscuro) y el selector es más
   específico que las variantes para que no se pierda. */
select.labor-badge--select {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

select.labor-badge--select:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 45%, transparent);
    outline-offset: 2px;
}

.labor-history-table select.labor-badge--select {
    background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    padding-right: 28px;
}

.labor-admin {
    display: grid;
    gap: 16px;
}

.labor-admin-header {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
}

.labor-admin-header__main {
    display: grid;
    gap: 10px;
    align-items: start;
}

.labor-admin__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.labor-admin__intro > div:first-child {
    display: grid;
    gap: 8px;
}

.labor-admin__intro h3 {
    margin: 0;
    font-size: 1.2rem;
}

.labor-admin-picker__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.labor-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
}

.labor-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.labor-toggle__track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--radius);
    background: var(--border);
    transition: background 0.15s ease;
    flex: 0 0 auto;
}

.labor-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
    transition: transform 0.15s ease;
}

.labor-toggle input:checked + .labor-toggle__track {
    background: var(--success, #16a34a);
}

.labor-toggle input:checked + .labor-toggle__track::after {
    transform: translateX(14px);
}

.labor-toggle input:focus-visible + .labor-toggle__track {
    outline: 2px solid var(--success, #16a34a);
    outline-offset: 2px;
}

.labor-toggle input:disabled + .labor-toggle__track {
    cursor: default;
    opacity: 0.7;
}

.labor-toggle:has(input:disabled) {
    cursor: default;
}

.labor-admin__selector {
    display: grid;
    gap: 8px;
    min-width: 240px;
    align-self: start;
}

.labor-admin__context {
    margin: 0;
}

/* Debajo de Perfil/Fichaje: ya no es una fila de varias cards (identidad + email + teléfono
   compitiendo por ancho) -- ahora es una única card de identidad con foto grande a la izquierda
   y nombre/rol/email/teléfono apilados a la derecha. */
.labor-admin__summary {
    display: grid;
    margin-bottom: 0;
}

.labor-admin__summary-card--identity {
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.labor-admin__summary-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.labor-admin__summary-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labor-admin__summary-role {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 4px;
}

.labor-admin__summary-line {
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labor-admin__summary-line-label {
    font-weight: 600;
    color: var(--text-soft);
    margin-right: 4px;
}

.labor-summary__card--identity {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.labor-admin__summary-avatar {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    color: var(--text);
    flex-shrink: 0;
}

.labor-summary__avatar {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    color: var(--text);
}

.labor-admin__summary-avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.labor-summary__avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.labor-admin__summary-avatar-fallback {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.labor-summary__avatar-fallback {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.labor-admin__summary-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.labor-summary__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.labor-section__header--admin-content {
    position: static;
    /* Antes -24px/24px fijos: el padding real del contenedor padre
       (.labor-panel__body) es var(--space-5) = 20px en Goat2 (16px en
       Goat1/Goat3) -- la sangría negativa restaba siempre más de lo que el
       padding aportaba, así que esta barra se salía por los lados más de la
       cuenta ("más ancha que las demás"). calc() la ajusta al valor real. */
    margin: 0 calc(var(--space-5) * -1);
    padding: 10px var(--space-5);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Caso especial: dentro de [data-labor-admin-dashboard] ("Resumen" del
   Dashboard) el padre inmediato ya tiene su PROPIO padding de 14px (no
   var(--space-5) del panel) -- reutilizar la sangría de arriba aquí sacaba
   la barra de su sitio por partida doble (contenido "se sale", visto en
   pantalla). Esta regla, más específica, corrige solo ese caso concreto sin
   afectar a los otros usos de esta misma clase (Datos personales, Ficha
   laboral, Turnos), que sí cuelgan directamente de .labor-panel__body.
   margin-top se queda en 0 (no -14px): un top negativo aquí monta esta barra
   sobre las pestañas Dashboard/Trabajadores/Calendario de justo encima
   (bug real visto en pantalla: "RESUMEN" solapado con "Dashboard"). Solo se
   mantiene la sangría LATERAL, para que siga ocupando todo el ancho. */
[data-labor-admin-dashboard] .labor-section__header--admin-content {
    margin: 0 -14px 16px;
    padding: 10px 14px;
}

@media (max-width: 900px) {
    .labor-section__header--admin-content {
        margin: 0 -18px;
        padding: 10px 18px;
    }
}

.labor-admin-picker {
    display: grid;
    gap: 18px;
}

/* Lista de trabajadores en formato tabla: una cabecera fija con los
   nombres de columna (para no repetir icono+etiqueta en cada fila) y filas
   con huecos de ancho fijo, así cada dato cae siempre en el mismo sitio y
   todas las filas alinean igual, aunque a alguien le falte un dato. */
.labor-admin-picker__header,
.labor-admin-picker__row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(100px, 0.8fr) minmax(90px, 0.8fr) minmax(100px, 0.8fr) 52px 52px 52px 104px;
    align-items: center;
    gap: 10px;
}

.labor-admin-picker__header {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(100px, 0.8fr) minmax(90px, 0.8fr) minmax(100px, 0.8fr) 52px 52px 52px 104px;
    align-items: center;
    gap: 10px;
    padding: 0 12px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
}

.labor-admin-picker__header span:nth-child(n+6):nth-child(-n+8) {
    text-align: center;
}

.labor-admin-picker__header span:last-child {
    text-align: right;
    cursor: help;
}

.labor-admin-picker__grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.labor-admin-picker__row {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.labor-admin-picker__row:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.labor-admin-picker__col {
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-admin-picker__col--identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.labor-admin-picker__col--flag {
    text-align: center;
}

.labor-admin-picker__avatar {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
}

.labor-admin-picker__avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.labor-admin-picker__avatar-fallback {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.labor-admin-picker__main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.labor-admin-picker__identity {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.labor-admin-picker__name {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-admin-picker__status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.labor-admin-picker__status-dot--active {
    background: var(--success, #1f8f5f);
}

.labor-admin-picker__status-dot--inactive {
    background: var(--danger, #c0392b);
}

.labor-admin-picker__role {
    font-size: 0.72rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-admin-picker__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius);
    font-size: 0.72rem;
    font-weight: 800;
}

.labor-admin-picker__flag--yes {
    background: rgba(31, 143, 95, 0.14);
    color: var(--success, #1f8f5f);
}

.labor-admin-picker__flag--no {
    color: var(--text-soft);
}

.labor-admin-picker__col--pending {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    overflow: visible;
}

.labor-admin-picker__col--pending[data-labor-admin-picker-pending] {
    cursor: pointer;
    padding: 6px 2px;
    margin: -6px -2px;
}

.labor-admin-picker__col--pending[data-labor-admin-picker-pending]:hover .labor-admin-picker__pending-dot:not(.labor-admin-picker__pending-dot--empty) {
    filter: brightness(1.15);
    transform: scale(1.08);
}

.labor-admin-picker__pending-dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--danger, #c0392b);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.1s ease, filter 0.1s ease;
}

.labor-admin-picker__pending-dot--calendar {
    background: #d98c1f;
}

.labor-admin-picker__pending-dot--parts {
    background: var(--primary, #2f6fed);
}

.labor-admin-picker__pending-dot--empty {
    display: none;
}

@media (max-width: 900px) {
    .labor-admin-picker__header {
        display: none;
    }

    .labor-admin-picker__header,
    .labor-admin-picker__row {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }

    .labor-admin-picker__row {
        grid-template-areas:
            "identity identity identity pending"
            "dept phone contract contractend";
        row-gap: 6px;
    }

    .labor-admin-picker__col--identity {
        grid-area: identity;
    }

    .labor-admin-picker__col--pending {
        grid-area: pending;
    }

    .labor-admin-picker__col:nth-child(2) {
        grid-area: dept;
    }

    .labor-admin-picker__col:nth-child(3) {
        grid-area: phone;
    }

    .labor-admin-picker__col:nth-child(4) {
        grid-area: contract;
    }

    .labor-admin-picker__col:nth-child(5) {
        grid-area: contractend;
    }

    .labor-admin-picker__col--flag {
        display: none;
    }
}

.labor-admin__back-to-list {
    margin-bottom: 8px;
}

.labor-admin__summary > .labor-empty {
    grid-column: 1 / -1;
}

.labor-review-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.labor-review-form--compact {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-top: none;
}

.labor-review-form--compact input[name="admin_notes"] {
    width: 100%;
}

.labor-empty {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-soft);
    background: var(--surface-soft);
}

@media (max-width: 1080px) {
    .labor-grid,
    .labor-summary,
    .labor-self-profile__grid,
    .labor-self-sections,
    .labor-data__grid,
    .labor-form__row--quad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .labor-grid--admin {
        grid-template-columns: 1fr;
    }

    .labor-leave-calendar__composer-head {
        flex-direction: column;
    }

    .labor-self-header,
    .labor-admin-header__main {
        grid-template-columns: 1fr;
    }

    .labor-timesheet__body {
        grid-template-columns: 1fr;
    }

    .labor-card-section--full {
        grid-column: auto;
        grid-row: auto;
    }

    .labor-form__row--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .labor-schedule__segment {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .labor-schedule__segment .button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .labor-hero__body,
    .labor-section__header,
    .labor-section__header--admin,
    .labor-request-card__header,
    .labor-leave-calendar__header {
        flex-direction: column;
    }

    .labor-grid,
    .labor-grid--admin,
    .labor-admin-header__main,
    .labor-admin-form__grid,
    .labor-self-profile__grid,
    .labor-summary,
    .labor-admin__summary,
    .labor-data__grid,
    .labor-form__row--double,
    .labor-form__row--triple,
    .labor-form__row--quad {
        grid-template-columns: 1fr;
    }

    .labor-hero__body,
    .labor-panel__body {
        padding: 18px;
    }

    .labor-admin-sticky-head {
        margin: -18px -18px 12px;
        padding: 34px 18px 0;
    }

    .labor-card-section__header,
    .labor-card-section__header--split {
        flex-direction: column;
    }

    .labor-timesheet__week-tools,
    .labor-timesheet__week-nav,
    .labor-timesheet__summary,
    .labor-signature-pad__actions,
    .labor-timesheet__actions {
        justify-items: stretch;
        justify-content: stretch;
    }

    .labor-timesheet__week-nav,
    .labor-signature-pad__actions,
    .labor-timesheet__actions {
        flex-direction: column;
    }

    .labor-timesheet__week-nav .button,
    .labor-signature-pad__actions .button,
    .labor-timesheet__actions .button {
        width: 100%;
    }

    /* Guardar/Cancelar (y Aplicar/Quitar turno) deben verse en la misma
       línea también en móvil, igual que en PC, en vez de apilarse uno
       encima del otro. */
    .labor-timesheet-editor-modal__actions {
        flex-wrap: nowrap;
    }

    .labor-timesheet-editor-modal__actions .button {
        flex: 1 1 0;
        width: auto;
    }

    .labor-admin__selector {
        width: 100%;
        min-width: 0;
    }

    .labor-tabs__button {
        min-height: 40px;
        padding: 0 8px;
        font-size: 0.86rem;
    }

    .labor-schedule__summary,
    .labor-schedule__day-head,
    .labor-schedule__segment {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .labor-schedule__summary {
        justify-content: stretch;
    }

    .labor-schedule__summary-card {
        width: 100%;
    }

    .labor-request-card__actions,
    .labor-form__actions,
    .labor-hero__actions {
        justify-content: stretch;
    }

    .labor-leave-calendar {
        padding: 14px;
    }

    .labor-leave-calendar__year-summary {
        width: 100%;
        text-align: left;
    }

    .labor-leave-calendar__selection,
    .labor-leave-calendar__composer-meta {
        white-space: normal;
    }

    .labor-leave-calendar__months {
        grid-template-columns: 1fr;
    }

    .labor-leave-calendar__month-card {
        padding: 10px;
    }

    .labor-leave-calendar__day {
        min-height: 42px;
        padding: 5px 4px 4px;
    }

    .labor-schedule-calendar .labor-leave-calendar__day {
        min-height: 58px;
    }

    .labor-schedule-calendar__week-select {
        min-height: 58px;
    }

    .labor-schedule-calendar__body {
        flex-direction: column;
    }

    [data-labor-schedule-calendar] {
        grid-template-columns: 1fr;
    }

    .labor-schedule-calendar__weeks {
        display: none;
    }

    .labor-schedule-calendar__day-segments span {
        font-size: 0.56rem;
    }

    .labor-leave-calendar__day-number {
        font-size: 0.72rem;
    }

    .labor-leave-calendar__weekday {
        font-size: 0.62rem;
    }

    .labor-request-card__actions .button,
    .labor-form__actions .button,
    .labor-hero__actions .button {
        width: 100%;
    }

    [data-labor-route="self"] .labor-hero__actions {
        display: none;
    }

    [data-labor-route="self"] .labor-hero__body {
        gap: 10px;
    }

    [data-labor-route="self"] .labor-hero .app-eyebrow,
    [data-labor-route="self"] .labor-self__intro {
        display: none;
    }

    [data-labor-route="self"] .labor-hero .app-title {
        font-size: 1.05rem;
    }

    [data-labor-route="self"] .labor-self-header {
        display: none;
    }

    [data-labor-route="self"] .labor-hero .app-subtitle {
        display: block;
        font-size: 0.92rem;
        line-height: 1.2;
    }

    [data-labor-route="self"] .labor-hero__copy {
        column-gap: 10px;
    }

    [data-labor-route="self"] .labor-hero__identity .labor-summary__avatar {
        width: 44px;
        height: 44px;
    }

    [data-labor-route="self"] .labor-summary--header {
        grid-template-columns: 1fr;
    }

    [data-labor-route="self"] .labor-summary--header > .labor-summary__card:not(.labor-summary__card--identity) {
        display: none;
    }

    [data-labor-route="self"] .labor-summary--header .labor-summary__card--identity {
        padding: 10px 12px;
        gap: 10px;
    }

    [data-labor-route="self"] .labor-summary--header .labor-summary__avatar {
        width: 48px;
        height: 48px;
    }

    [data-labor-route="self"] .labor-summary--header .labor-summary__copy span {
        display: none;
    }

    [data-labor-route="self"] .labor-tabs {
        gap: 12px;
    }

    [data-labor-route="self"] .labor-tabs__button {
        min-height: 36px;
        padding: 0 6px;
        font-size: 0.78rem;
    }

    [data-labor-route="self"] .labor-tab-label--full {
        display: none;
    }

    [data-labor-route="self"] .labor-tab-label--compact {
        display: inline;
    }

    [data-labor-route="self"] .labor-card-section__header--split {
        gap: 10px;
    }

    [data-labor-route="self"] .labor-timesheet__week-tools {
        gap: 8px;
        width: 100%;
        justify-items: stretch;
    }

    [data-labor-route="self"] .labor-timesheet__week-nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
    }

    [data-labor-route="self"] .labor-timesheet__week-nav .button {
        width: auto;
        min-width: 0;
    }

    [data-labor-route="self"] .labor-timesheet__week-nav .button:first-child,
    [data-labor-route="self"] .labor-timesheet__week-nav .button:last-child {
        flex: 0 0 44px;
        padding: 0;
    }

    [data-labor-route="self"] .labor-timesheet__week-nav .button:nth-child(2) {
        flex: 1 1 auto;
        padding: 0 10px;
    }

    [data-labor-route="self"] .labor-nav-label--full {
        display: none;
    }

    [data-labor-route="self"] .labor-nav-label--compact {
        display: inline;
        font-weight: 700;
    }

    [data-labor-route="self"] .labor-timesheet__title-default {
        display: none;
    }

    [data-labor-route="self"] .labor-timesheet__title-range {
        display: inline;
    }

    [data-labor-route="self"] .labor-timesheet__summary {
        display: none;
    }

    [data-labor-route="self"] .labor-card-section__header h4 {
        line-height: 1.2;
    }

    [data-labor-route="self"] .labor-timesheet__days {
        gap: 10px;
    }

    [data-labor-route="self"] .labor-timesheet__day {
        gap: 10px;
        padding: 12px;
    }

    [data-labor-route="self"] .labor-timesheet__day-head {
        align-items: center;
    }

    [data-labor-route="self"] .labor-timesheet__day-copy--compact {
        gap: 6px;
    }

    [data-labor-route="self"] .labor-timesheet__day-copy--compact p,
    [data-labor-route="self"] .labor-timesheet__day-total {
        font-size: 0.82rem;
    }

    [data-labor-route="self"] .labor-timesheet__meta {
        gap: 8px;
        font-size: 0.84rem;
    }

    [data-labor-route="self"] .labor-timesheet__body {
        gap: 10px;
    }

    [data-labor-route="self"] .labor-timesheet__segments {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    [data-labor-route="self"] .labor-timesheet__segment {
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    [data-labor-route="self"] .labor-timesheet__signature-card,
    [data-labor-route="self"] .labor-timesheet__signature-placeholder {
        min-height: 110px;
        padding: 10px;
    }

    .labor-admin-sticky-head {
        position: static;
        top: auto;
        z-index: auto;
        margin: -18px -18px 10px;
        padding: 10px 18px 0;
        box-shadow: none;
        border-bottom: 1px solid var(--border);
    }

    .labor-section__header--admin-content {
        position: static;
        top: auto;
        z-index: auto;
    }

    .labor-form__actions,
    .labor-form__actions--inline {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .labor-btn--compact {
        min-width: 0;
        min-height: 30px;
        padding: 0 8px;
        flex: 0 0 auto;
    }

    .labor-btn--compact .labor-btn-icon {
        display: inline-block;
        font-size: 0.92rem;
    }

    .labor-btn--compact .labor-btn-text {
        display: none;
    }

    .labor-alert-r {
        min-width: 15px;
        width: auto;
        height: 15px;
        padding: 0 4px;
        font-size: 0.54rem;
        top: -4px;
        right: -4px;
        border-width: 1px;
    }

    .labor-admin-detail .button:not(.labor-btn--compact) {
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .labor-admin__summary {
        min-width: 0;
    }

    .labor-admin-config-menu {
        padding: 10px 12px;
    }

    .labor-admin-config-menu__groups {
        gap: 8px;
    }

    .labor-admin-config-group {
        padding: 5px 10px 5px 5px;
    }

    .labor-admin-config-group__icon {
        width: 24px;
        height: 24px;
        font-size: 0.88rem;
    }

    .labor-admin-config-group__label {
        font-size: 0.68rem;
    }

    [data-labor-tabs^="admin-"] .labor-tabs__button {
        width: 52px;
        padding: 8px 4px;
    }

    [data-labor-tabs^="admin-"] .labor-tab-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    /* En vistas de admin (Logística, Almacén, Laboral admin...) el móvil
       solo muestra el icono: el nombre del menú ocupaba demasiado ancho en
       una fila de varias pestañas -- pedido explícito de dejar solo iconos
       aquí, igual que ya hace el área personal (self) con --compact. */
    [data-labor-tabs^="admin-"] .labor-tab-label {
        display: none;
    }

    [data-labor-tabs^="admin-"] .labor-tabs__nav {
        max-width: calc(100vw - 32px);
    }
}

/* ---- Fichajes: administración (relocated from timeclock.css) ---- */

.timeclock-user-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.timeclock-user-group__title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.timeclock-list__row--late {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.timeclock-admin__map {
    height: 520px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-soft);
}


.timeclock-centers-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 20px;
    align-items: start;
}

.timeclock-centers-column {
    display: grid;
    gap: 10px;
    align-content: start;
}

.timeclock-centers-column--map {
    position: sticky;
    top: 12px;
}

@media (max-width: 960px) {
    .timeclock-centers-layout {
        grid-template-columns: 1fr;
    }

    .timeclock-centers-column--map {
        position: static;
        order: -1;
    }

    .timeclock-admin__map {
        height: 320px;
    }
}

.timeclock-admin__centers {
    display: grid;
    gap: 10px;
    max-height: 392px;
    overflow-y: auto;
    padding-right: 4px;
}

.timeclock-center-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.timeclock-center-card__info p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.timeclock-center-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.timeclock-center-card--editing {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
}

.timeclock-center-card__edit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.timeclock-center-card__edit-row .input--compact {
    flex: 1 1 160px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.88rem;
}

.timeclock-center-card__radius-input {
    flex: 0 1 100px;
}

.timeclock-center-card__edit-row .button--small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.85rem;
}

.timeclock-center-card__hint {
    margin: 0;
    font-size: 0.8rem;
}


.timeclock-center-form {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.timeclock-settings-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.timeclock-settings-form--inline .labor-check {
    align-self: center;
}

.timeclock-settings-form--inline .labor-field {
    flex: 1 1 140px;
    min-width: 120px;
}

.timeclock-settings-form--inline button[type="submit"] {
    flex-shrink: 0;
}

.timeclock-settings-centers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
}

.timeclock-settings-centers__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-soft);
}

.timeclock-settings-centers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.timeclock-settings-form__pauses-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.timeclock-settings-form__pauses-row .labor-field {
    flex: 1 1 0;
    min-width: 90px;
}

.timeclock-settings-form--inline .status {
    flex-basis: 100%;
    margin-top: 4px;
}

.timeclock-request-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 10px;
}

.timeclock-request-card:last-child {
    margin-bottom: 0;
}

.timeclock-request-card__info p {
    margin: 2px 0 0;
}

.timeclock-request-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .timeclock-settings-form--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .timeclock-settings-form--inline .labor-field {
        flex-basis: auto;
    }

    .timeclock-center-card,
    .timeclock-request-card {
        flex-direction: column;
    }

    .timeclock-center-card__actions,
    .timeclock-request-card__actions {
        width: 100%;
    }

    .timeclock-center-card__actions .button,
    .timeclock-request-card__actions .button {
        flex: 1 1 auto;
    }
}

.labor-signature-print {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.08);
}

.labor-signature-print .status {
    margin: 0;
    font-size: 0.7rem;
}

.labor-signature-print__title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
}

.labor-signature-print__switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius);
    background: rgba(148, 163, 184, 0.18);
}

.labor-signature-print__switch-option {
    padding: 3px 8px;
    border-radius: var(--radius);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.labor-signature-print__switch-option.is-active {
    background: var(--success, #16a34a);
    color: #fff;
}

.labor-check--compact {
    font-size: 0.75rem;
    gap: 4px;
}

.labor-signature-print [data-labor-signature-print-submit] {
    padding: 4px 8px;
    font-size: 0.9rem;
    line-height: 1;
}

/* Gestor de departamentos: árbol simple, sin límite de niveles, con las
   acciones de cada nodo (añadir subdepartamento / renombrar / borrar)
   siempre visibles a la derecha. */
.labor-department-tree__list,
.labor-department-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.labor-department-tree__children {
    margin-left: 22px;
    padding-left: 14px;
    border-left: 1px dashed var(--border, #d7dee8);
}

.labor-department-tree__node {
    margin: 6px 0;
}

.labor-department-tree__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border, #d7dee8);
    border-radius: 3px;
    background: var(--surface);
}

.labor-department-tree__name {
    font-weight: 600;
}

.labor-department-tree__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ---- Dashboard de trabajadores ---- */

.labor-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
    align-items: start;
}

/* Fila de "cuadrados" de KPIs al estilo Sesame: icono + número grande +
   etiqueta, cada uno lleva al detalle correspondiente más abajo. */
.labor-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.labor-dashboard-stat {
    display: grid;
    justify-items: center;
    gap: 2px;
    aspect-ratio: 1 / 1;
    padding: 8px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.labor-dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.labor-dashboard-stat__icon {
    font-size: 1.05rem;
    line-height: 1;
}

.labor-dashboard-stat__value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.labor-dashboard-stat__label {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--text-soft);
    line-height: 1.1;
}

.labor-dashboard-stat--working { border-top: 3px solid var(--success, #16a34a); }
.labor-dashboard-stat--absent { border-top: 3px solid var(--danger, #c0392b); }
.labor-dashboard-stat--leave { border-top: 3px solid #d98c1f; }
.labor-dashboard-stat--timeclock { border-top: 3px solid var(--danger, #c0392b); }
.labor-dashboard-stat--teletrabajo { border-top: 3px solid var(--primary, #2f6fed); }

.labor-dashboard-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.labor-dashboard-subtitle {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
}

.labor-dashboard-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

@media (max-width: 720px) {
    /* minmax(100px, 1fr) con 7 días necesitaba ~700px mínimos -- en una
       pantalla de ~360-390px de ancho eso desbordaba TODA la página en
       horizontal (bug real reportado con captura: scroll horizontal en
       toda la vista, no solo en el calendario). 4 columnas de ancho
       flexible caben siempre sin desbordar. */
    .labor-dashboard-calendar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.labor-dashboard-day {
    position: relative;
    display: grid;
    gap: 0;
    padding: 2px 1px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    line-height: 1.15;
    font: inherit;
    cursor: pointer;
    width: 100%;
}

.labor-dashboard-day__detail {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 0;
    background: var(--surface-elevated);
    box-shadow: 0 0 0 1px var(--border);
    font-size: 0.48rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.labor-dashboard-day__detail .app-icon {
    margin-right: 0;
}

/* Fondo rojo fijo (sin parpadeo) para avisar de fichajes tardíos o faltas
   de asistencia ese día: el color ya es suficiente aviso. El icono pasa a
   blanco, si no queda negro sobre rojo y no se ve. */
.labor-dashboard-day__detail--alert {
    opacity: 1;
    background: #ef4444;
}

.labor-dashboard-day__detail--alert .app-icon {
    filter: brightness(0) invert(1);
}

.labor-dashboard-day__detail:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--primary);
}

.labor-dashboard-day:hover {
    border-color: var(--primary);
}

.labor-dashboard-day--selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.labor-dashboard-day--today {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}


.labor-dashboard-day__label {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted, #64748b);
}

.labor-dashboard-day__date {
    font-weight: 700;
    font-size: 0.68rem;
}

.labor-dashboard-day__count {
    font-size: 0.56rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.labor-dashboard-day__count--empty {
    color: var(--text-muted, #64748b);
    font-weight: 400;
}

.labor-dashboard-today-row {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.labor-dashboard-today-group {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.labor-dashboard-vacation-avatars {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
    cursor: grab;
    padding-bottom: 2px;
}

.labor-dashboard-vacation-avatars.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
}

.labor-dashboard-vacation-avatars .labor-dashboard-avatar {
    flex: 0 0 auto;
}

.labor-dashboard-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--primary);
    color: var(--button-primary-ink, #fff);
    font-weight: 700;
    font-size: 0.7rem;
}

.labor-dashboard-avatar--small {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.labor-dashboard-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.labor-dashboard-avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Dashboard estilo Sesame: tarjetas blancas con esquinas redondeadas más
   generosas que el resto de la app (aquí sí, por pedido explícito de
   replicar ese diseño concreto), icono + título en la cabecera, sin el
   kicker en mayúsculas que usa el resto de secciones de Labor. */
/* Rejilla de posiciones explícitas (4 columnas fijas), calculada a mano en
   JS como un "masonry": cada columna acumula su propia altura, así una
   tarjeta corta no se queda con espacio en blanco debajo solo porque otra de
   al lado sea más alta (la siguiente de su misma columna queda pegada justo
   debajo). El contenedor pasa a position:relative y cada tarjeta se coloca
   con left/top/width absolutos (ver layoutDashboardMasonry en labor.js). Por
   debajo de 900px se ignora todo eso y se apila en 1 columna normal. */
[data-labor-dashboard-empty-tab] {
    margin-top: 5px;
}

/* Fondo propio del dashboard (gris azulado sutil, no blanco liso): sin esto, las cards blancas
   con sombra se confundían con el panel de fondo, también blanco, y la sombra apenas se notaba.
   Con contraste real de fondo, la sombra y el borde de cada card cobran sentido visual. */
[data-labor-admin-dashboard] {
    /* Antes var(--surface-soft) plano: quedaba blanco/gris liso, sin el
       tinte de color de marca que sí se ve por detrás en Trabajadores/
       Calendario (que no tienen fondo propio, así que dejan ver el
       --body-bg-gradient del body). Usar la misma variable aquí iguala el
       aspecto entre las 3 pestañas -- pedido explícito ("en dashboard no
       hay un background clarito como en trabajadores y calendario"). */
    background: var(--body-bg-gradient);
    padding: 14px;
    /* Mismo bug de sangría fija (-24px) que las cabeceras de arriba: no
       coincidía con var(--space-5) real (16/20px según skin). */
    margin: calc(var(--space-5) * -1);
}

@media (max-width: 900px) {
    [data-labor-admin-dashboard] {
        margin: -18px;
    }
}

.labor-dashboard-grid--sesame {
    position: relative;
    margin-top: 5px;
}

/* "Semana actual" no es una tarjeta más del masonry: va en flujo normal
   (no absolute) siempre como primera fila y a todo el ancho del contenedor,
   fija -- no se puede arrastrar ni reordenar (ver DASHBOARD_MASONRY_CARD_SELECTOR
   en labor.js, que la excluye del cálculo de posiciones/arrastre). */
.labor-sesame-card--week {
    position: relative;
    width: 100%;
    margin-bottom: 6px;
}

@media (max-width: 899px) {
    .labor-sesame-card--week {
        margin-bottom: 0;
    }
}

@media (max-width: 899px) {
    .labor-dashboard-grid--sesame {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}

.labor-sesame-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    position: relative;
    overflow: hidden;
    /* Sombra con presencia real (antes era casi invisible): un contorno fino más una difusa
       amplia y más oscura por debajo, que se intensifica al pasar el ratón -- da sensación de
       tarjeta "flotando" de verdad, no solo una caja plana con borde. */
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 12px 28px -14px rgba(15, 23, 42, .22);
    transition: box-shadow .18s ease, transform .18s ease;
    min-width: 0;
    box-sizing: border-box;
}

.labor-sesame-card:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 20px 36px -16px rgba(15, 23, 42, .3);
    transform: translateY(-2px);
}

/* Línea de acento de color en el borde superior de cada card: da carácter/identidad por
   categoría sin volver a colorear el icono (que se dejó neutro a petición expresa). */
.labor-sesame-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
}

.labor-sesame-card--danger::before { background: var(--red, #dc2626); }
.labor-sesame-card--amber::before { background: var(--amber, #b45309); }
.labor-sesame-card--violet::before { background: var(--violet, #7c3aed); }
.labor-sesame-card--green::before { background: var(--green, #15803d); }

/* Fondo degradado muy suave teñido del color de su categoría (maqueta v7):
   solo cuando la tarjeta tiene algo pendiente DE VERDAD (se añade/quita esta
   clase modificadora por JS en renderDashboardView según el conteo real), no
   por defecto -- así una tarjeta vacía sigue en blanco normal. */
.labor-sesame-card--danger { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--danger) 10%, var(--surface)) 300%); }
.labor-sesame-card--amber { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--warning) 12%, var(--surface)) 300%); }
.labor-sesame-card--violet { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--violet, #7c3aed) 10%, var(--surface)) 300%); }
.labor-sesame-card--green { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--success) 10%, var(--surface)) 300%); }

.labor-sesame-card__body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 320px;
}

/* Reloj: sin título ni icono, fondo negro propio, contraste con el resto
   de tarjetas blancas del dashboard. Oculto por defecto (pestaña Ocultos),
   el usuario decide si lo quiere en Visibles. */
.labor-sesame-card--clock {
    background: var(--primary);
    border-color: var(--primary);
}

.labor-sesame-card--clock .labor-sesame-card__header--bare {
    justify-content: flex-end;
}

.labor-sesame-card--clock .labor-sesame-card__drag {
    color: rgba(255, 255, 255, 0.9);
    margin-right: auto;
}

.labor-sesame-card--clock .labor-sesame-card__visibility {
    width: 20px;
    height: 20px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.85);
    opacity: 1;
    padding-left: 1px;
}

.labor-sesame-card--clock .labor-sesame-card__visibility:hover {
    background: rgba(255, 255, 255, 0.95);
}

.labor-dashboard-clock {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding: 0;
}

.labor-dashboard-clock__time {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.labor-dashboard-clock__date {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.66rem;
    text-transform: capitalize;
}

.labor-sesame-card__body .labor-empty {
    padding: 8px 10px;
    font-size: 0.76rem;
}

/* Móvil: textos de las tarjetas de alerta ("Todo el mundo se ha
   presentado", etc.) más pequeños y en una sola línea, icono pegado al
   título, sin el fondo/borde punteado de .labor-empty -- pedido explícito
   para que quepan sin desbordar en pantallas estrechas. */
@media (max-width: 720px) {
    /* Arrastrar/reordenar widgets no funciona bien con gestos táctiles y
       consume espacio útil: se oculta el tirador en móvil, ganando ancho
       para el icono+título de cada tarjeta (pedido explícito). */
    .labor-sesame-card__drag {
        display: none;
    }
    .labor-sesame-card__header {
        gap: 4px;
    }
    .labor-sesame-card__header h4 {
        font-size: 0.68rem;
    }
    .labor-sesame-card__icon {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    .labor-sesame-card__body .labor-empty {
        padding: 4px 0;
        border: 0;
        background: transparent;
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Mismo criterio para las tarjetas "Alertas: ITV/Seguro" del dashboard
       de administración de Logística (comparten .labor-card-section, no
       .labor-sesame-card, pero el mismo problema de texto largo con fondo). */
    [data-logistics-admin-panel="dashboard"] .labor-card-section__header h4 {
        font-size: 0.8rem;
    }
    [data-logistics-admin-panel="dashboard"] .labor-empty {
        padding: 4px 0;
        border: 0;
        background: transparent;
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Cabecera de "Semana actual": título + botones ← Hoy → apilaban en 2
       filas por falta de sitio (icono+título largo+ojo+3 botones no cabían
       en una línea en ~375px de ancho), ocupando mucho alto vertical --
       pedido explícito de "compactadísimo". El título se recorta con
       ellipsis en vez de forzar el wrap, y los botones de navegación se
       reducen a lo mínimo (sin perder área táctil real por debajo de 30px). */
    .labor-sesame-card--week .labor-sesame-card__header {
        flex-wrap: nowrap;
    }
    .labor-sesame-card--week .labor-sesame-card__header h4 {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .labor-dashboard-week-nav {
        flex: 0 0 auto;
        gap: 4px;
    }
    /* Misma altura que los botones de icono de al lado (ojo=visibilidad,
       lupa=detalle, ambos 22px) -- pedido explícito de igualar. Ancho libre
       (el botón "Hoy" lleva texto, los de flecha no), solo se fija el alto. */
    .labor-dashboard-week-nav .labor-btn--compact {
        min-width: 22px;
        height: 22px;
        min-height: 22px;
        padding: 0 6px;
        border-radius: var(--radius);
    }
    .labor-dashboard-week-nav .labor-btn--compact[data-labor-dashboard-week-prev],
    .labor-dashboard-week-nav .labor-btn--compact[data-labor-dashboard-week-next] {
        width: 22px;
        padding: 0;
    }
    .labor-dashboard-week-nav .labor-btn--compact span {
        font-size: 0.7rem;
    }
}

.labor-sesame-card {
    transition: box-shadow 0.15s ease, left 0.15s ease, top 0.15s ease;
}

.labor-sesame-card.is-dragging {
    opacity: 0.35;
}

.labor-sesame-card.is-drag-over {
    box-shadow: 0 0 0 2px var(--primary, #2f6fed);
}

.labor-sesame-card--drag-ghost {
    position: fixed;
    z-index: 2000;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28);
    transform: scale(1.03) rotate(-1deg);
    opacity: 0.96;
}

body.is-dashboard-card-dragging {
    cursor: grabbing;
}

body.is-dashboard-card-dragging * {
    cursor: grabbing !important;
}

.labor-sesame-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.labor-sesame-card__drag {
    flex: 0 0 auto;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    padding: 2px 4px;
}

.labor-sesame-card__eye {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.labor-sesame-card__eye .app-icon {
    margin-right: 0;
}

.labor-sesame-card__eye:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.labor-sesame-card__drag:active {
    cursor: grabbing;
}

.labor-sesame-card__visibility {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    font-size: 0.76rem;
    line-height: 1;
    cursor: pointer;
    padding-left: 1px;
    opacity: 1;
}

.labor-sesame-card__visibility:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

.labor-dashboard-workers-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
}

.labor-dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.labor-dashboard-widget-tab-flag {
    font-size: 0.7em;
    font-weight: 700;
}

.labor-dashboard-widget-tab-flag--visible {
    color: var(--success, #16a34a);
}

.labor-dashboard-widget-tab-flag--hidden {
    color: var(--danger, #c0392b);
}

/* La "card" entera (etiqueta "Widget" + botones Visibles/Ocultos) debe medir
   exactamente lo mismo que el botón "Trabajadores" de al lado (38px, box-
   sizing:border-box incluido), así quedan alineados en la misma fila como
   una sola botonera coherente. */
.labor-dashboard-widget-tabs-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    height: 38px;
    box-sizing: border-box;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.labor-dashboard-widget-tabs-card__label {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--text-muted, #94a3b8);
}

.labor-dashboard-widget-tabs {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.labor-dashboard-widget-tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
}

.labor-dashboard-widget-tab:first-child {
    border-left: none;
}

.labor-dashboard-widget-tab.is-active {
    background: var(--success, #16a34a);
    color: #fff;
}

/* Badge circular rojo de conteo en la cabecera (maqueta aprobada), aparte
   del cuadradito individual que ya lleva cada avatar -- este resume el total
   de pendientes de la tarjeta entera de un vistazo, sin tener que contar
   avatares. Se oculta con [hidden] cuando no hay ninguno (ver JS). */
.labor-sesame-card__count {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 3px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Badge de conteo del color de su categoría (maqueta v7): por defecto rojo,
   y se afina por tarjeta contenedora para el resto -- mismo criterio de
   color que ya usan los avatares/badges individuales de cada una.
   "fichaje-incidents" es el widget unificado (antes 3 tarjetas sueltas:
   Sin fichajes/Fichajes tardíos/Incidencias de ubicación, pedido
   explícito de fusionarlas). */
[data-labor-dashboard-card="fichaje-incidents"] .labor-sesame-card__count {
    background: #c07a0a;
}

[data-labor-dashboard-card="training-pending"] .labor-sesame-card__count {
    background: #1a9e6b;
}

.labor-sesame-card__header h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aviso de que ese widget concreto solo mira los últimos 30 días (no todo
   el histórico), para que no parezca que faltan datos más antiguos. */
.labor-dashboard-card__range-hint {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.72rem;
}

/* Icono de cabecera NEUTRO (maqueta v7 aprobada): el usuario pidió
   explícitamente que el icono no lleve color -- el color/carácter de cada
   tarjeta ya lo dan el fondo teñido (.labor-sesame-card--danger/amber/
   violet/green) y el badge de conteo, no hace falta repetirlo aquí. */
.labor-sesame-card__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    background: var(--surface-elevated);
    font-size: 0.82rem;
    flex-shrink: 0;
}

.labor-sesame-card__body {
    display: grid;
    gap: 6px;
}

.labor-whosin-avatars {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    cursor: grab;
    padding-bottom: 2px;
}

.labor-whosin-avatars.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
}

.labor-whosin-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

/* Avatares más grandes y "limpios" (maqueta aprobada: 40px, redondos, con
   doble borde blanco + gris para que se despeguen del fondo de la card), en
   vez de los 34px cuadrados de antes. Sigue siendo el mismo elemento que
   rellena buildAvatarCluster en labor.js, solo cambia el aspecto. */
.labor-whosin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    transition: transform .1s ease, box-shadow .1s ease;
}

.labor-whosin-avatar-wrap:hover .labor-whosin-avatar {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--primary), 0 4px 10px -4px color-mix(in srgb, var(--primary) 40%, transparent);
}

.labor-whosin-avatar__badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-elevated);
    box-shadow: 0 0 0 1px var(--border);
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
}

/* Cada tipo de tarjeta tiene su propio color de aro + badge, coherente con
   el motivo de la alerta (antes todo salía en rojo/gris genérico):
   rojo = ausencia/sin fichar, ámbar = tardanza, morado = ubicación. */
.labor-whosin-avatar--absent {
    outline: 2px solid #dc2626;
    outline-offset: 1px;
}

.labor-whosin-avatar--absent + .labor-whosin-avatar__badge,
.labor-whosin-avatar--missed + .labor-whosin-avatar__badge {
    background: #dc2626;
}

.labor-whosin-avatar--late {
    outline: 2px solid #b45309;
    outline-offset: 1px;
}

.labor-whosin-avatar--late + .labor-whosin-avatar__badge {
    background: #b45309;
}

.labor-whosin-avatar--missed {
    outline: 2px solid #dc2626;
    outline-offset: 1px;
}

/* Cuadradito con el número de incidencias de fichaje (sin fichar +
   tardíos + ubicación, ya sumadas en un solo widget, pedido explícito de
   fusionarlos), en vez del icono redondo de estado (💼/🏠/☕) que llevan
   los demás avatares. Mantiene --radius (3px) aunque el resto de badges
   ahora sean circulares, porque este lleva una cifra y un cuadrado se lee
   mejor con 2+ dígitos. */
.labor-whosin-avatar__badge--square {
    border-radius: var(--radius);
    background: #dc2626;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--surface);
}

[data-labor-dashboard-card="training-pending"] .labor-whosin-avatar__badge--square {
    background: #7c3aed;
}

.labor-sesame-request-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: 0 -6px;
    border-radius: var(--radius);
    border-bottom: 1px solid var(--border);
}

/* Cambios de turno y fichajes solicitados: azul clarito. Llegadas tarde:
   rojo clarito. Solicitudes de ausencia (vacaciones y cualquier otro
   permiso): amarillo clarito, igual que el resto de "pendiente" en la app. */
.labor-sesame-request-row--schedule,
.labor-sesame-request-row--timeclock {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.labor-sesame-request-row--late-entry {
    background: rgba(192, 57, 43, 0.08);
}

.labor-sesame-request-row--leave {
    background: var(--warning-soft, rgba(251, 191, 36, 0.16));
}

.labor-sesame-request-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.labor-sesame-request-row__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.labor-sesame-request-row__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}

.labor-sesame-request-row__icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-elevated);
    box-shadow: 0 0 0 1px var(--border);
    font-size: 0.55rem;
    line-height: 1;
}

/* Compacto a propósito: puede haber muchos trabajadores en un mismo modal
   (turnos + vacaciones + permisos a la vez), así que cada fila ocupa lo
   mínimo posible en vez de dejar que la lista crezca sin control. */
.labor-dashboard-detail-list {
    display: grid;
    gap: 0;
}

/* Varias personas por línea mientras quepan (como una rejilla de ancho
   variable), en vez de una fila entera por persona — así se aprovecha el
   ancho del modal cuando hay muchos trabajadores. */
.labor-dashboard-detail-row-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    padding-bottom: 4px;
}

.labor-dashboard-detail-row {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    min-width: 150px;
    max-width: 260px;
}

.labor-dashboard-detail-row__avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    font-size: 0.6rem;
}

.labor-dashboard-detail-row__text {
    display: grid;
    gap: 0;
    font-size: 0.68rem;
    min-width: 0;
    line-height: 1.15;
}

.labor-dashboard-detail-row__text strong {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-dashboard-detail-row__text .labor-muted {
    font-size: 0.62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fila clicable de una incidencia individual (Sin fichajes/Fichajes tardíos/Incidencias de
   ubicación en el modal de detalle del dashboard): a diferencia de las filas normales (compactas,
   en línea), esta ocupa todo el ancho del modal y termina en un badge de estado, como un botón
   de lista completo -- da a entender que es accionable, no solo informativa. */
.labor-dashboard-detail-row--clickable {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 8px 6px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s ease;
}

.labor-dashboard-detail-row--clickable:hover {
    background: var(--surface-hover);
}

.labor-dashboard-detail-row--clickable .labor-dashboard-detail-row__text {
    flex: 1;
}

.labor-dashboard-detail-row--clickable .labor-dashboard-detail-row__text strong,
.labor-dashboard-detail-row--clickable .labor-dashboard-detail-row__text .labor-muted {
    white-space: normal;
}

/* Cabecera de openWorkerPendingModal: foto GRANDE y CUADRADA (no circular) a la izquierda,
   nombre y resumen a la derecha -- una sola vez arriba del modal, ya que es la misma persona
   para todas sus incidencias/solicitudes de debajo. */
.labor-worker-pending__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.labor-worker-pending__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-soft);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.labor-worker-pending__photo .labor-dashboard-avatar__fallback {
    font-size: 1.3rem;
}

.labor-worker-pending__header-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.labor-worker-pending__header-text strong {
    font-size: .96rem;
}

/* Widget unificado "Incidencias de fichaje" (pedido explícito, antes 3
   tarjetas sueltas): modal más ancho ("más ancho y un poco más
   compacto"), agrupado por tipo con su propio header en vez de una lista
   plana mezclada. */
.labor-dashboard-detail-list--grouped {
    gap: 0;
}

.labor-dashboard-incident-group + .labor-dashboard-incident-group {
    margin-top: 14px;
}

.labor-dashboard-incident-group__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    margin-bottom: 2px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted, #6b7488);
    border-bottom: 1px solid var(--border);
}

.labor-dashboard-incident-group__count {
    margin-left: auto;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--surface-soft);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text);
}

/* Ficha compacta y accionable de cada incidencia/solicitud (dentro de openWorkerPendingModal y
   del modal de detalle del dashboard): etiqueta + tipo, lista de datos con icono (fecha/hora/
   turno/retraso/distancia/centro/motivo) + Aceptar/Denegar en línea abajo, todo visible de un
   vistazo sin depender de ningún tooltip. */
.labor-dashboard-action-card {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

/* Variante compacta (dentro de un grupo con header propio, ver
   .labor-dashboard-incident-group): una sola línea por incidencia --
   avatar, nombre, datos clave en línea y botones Aceptar/Denegar
   reducidos a icono, sin el bloque de fondo de "facts" ni el tipo
   repetido (ya lo dice el header del grupo). Pedido explícito de
   compactar el modal. */
.labor-dashboard-action-card--compact {
    padding: 6px 4px;
}

.labor-dashboard-action-card--compact .labor-dashboard-action-card__head {
    margin-bottom: 0;
    gap: 8px;
    flex-wrap: wrap;
}

.labor-dashboard-action-card--compact .labor-dashboard-action-card__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 0.68rem;
}

.labor-dashboard-action-card--compact .labor-dashboard-action-card__title strong {
    font-size: 0.76rem;
}

.labor-dashboard-action-card__facts--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.labor-dashboard-action-card__facts--inline .labor-dashboard-action-card__fact {
    gap: 3px;
    font-size: 0.7rem;
    color: var(--muted, #6b7488);
    white-space: nowrap;
}

.labor-dashboard-action-card__facts--inline .labor-dashboard-action-card__fact-value {
    color: var(--text);
    font-weight: 700;
}

.labor-dashboard-action-card__actions--inline {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

.labor-dashboard-action-card__actions--inline .button {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
}

.labor-dashboard-action-card:last-child {
    border-bottom: none;
}

.labor-dashboard-action-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.labor-dashboard-action-card__avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 0.86rem;
}

.labor-dashboard-action-card__title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.labor-dashboard-action-card__title strong {
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-dashboard-action-card__title .labor-muted {
    font-size: 0.74rem;
}

.labor-dashboard-action-card__facts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* El botón "Revisado" de una incidencia (openWorkerPendingModal) vive
   DENTRO del recuadro de datos, arriba a la derecha -- pedido explícito,
   más lógico ahí que suelto debajo de toda la tarjeta. Hueco a la derecha
   de la primera fila para que no se solape con el primer dato. */
.labor-dashboard-action-card__facts--with-action {
    padding-right: 96px;
}

.labor-dashboard-action-card__facts-action {
    position: absolute;
    top: 6px;
    right: 6px;
}

.labor-dashboard-action-card__fact {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    font-size: 0.76rem;
}

.labor-dashboard-action-card__fact-icon {
    flex: 0 0 auto;
}

.labor-dashboard-action-card__fact-label {
    color: var(--muted, #6b7488);
    flex: 0 0 auto;
}

.labor-dashboard-action-card__fact-value {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-dashboard-action-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mapa en miniatura bajo la ficha de una incidencia de ubicación (mismo Leaflet que el modal
   grande de "Ver ubicación", en pequeño y sin controles, para no salir de este modal). */
.labor-dashboard-action-card__map {
    height: 160px;
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* "No fichó" tiene que llamar la atención: no basta con el texto pequeño,
   así que además de la palabra en sí se marca en rojo la franja de la fila. */
.labor-dashboard-detail-row--no-show {
    background: rgba(192, 57, 43, 0.08);
    border-radius: var(--radius);
    padding-left: 4px;
    padding-right: 4px;
}

.labor-dashboard-detail-row--no-show .labor-dashboard-detail-row__text .labor-muted {
    color: var(--danger, #c0392b);
    font-weight: 700;
}

/* Llegó tarde: aviso amarillo, distinto del rojo de "no fichó". */
.labor-dashboard-detail-row--late {
    background: var(--warning-soft, rgba(251, 191, 36, 0.16));
    border-radius: var(--radius);
    padding-left: 4px;
    padding-right: 4px;
}

.labor-dashboard-detail-row--late .labor-dashboard-detail-row__text .labor-muted {
    color: var(--warning, #b45309);
    font-weight: 700;
}

/* Selector Mini/Normal del modal de detalle de día: mismo modal (ancho y
   alto), solo cambia cómo se pinta el contenido — filas detalladas o solo
   fotos en rejilla, útil cuando hay mucha gente a la vez (turnos +
   vacaciones + permisos). */
.labor-dashboard-density-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}

.labor-dashboard-density-toggle__btn {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 12px;
    cursor: pointer;
}

.labor-dashboard-density-toggle__btn.is-active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary-dark, #1d4ed8);
}

.labor-dashboard-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 2px 0 8px;
}

.labor-dashboard-mini-grid__avatar {
    width: 34px;
    height: 34px;
    font-size: 0.76rem;
    box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--border);
}

.labor-dashboard-mini-grid__avatar--working_now {
    outline: 4px dashed var(--success, #16a34a);
    outline-offset: -4px;
}

.labor-dashboard-mini-grid__avatar--future {
    outline: 4px dashed var(--text-muted, #94a3b8);
    outline-offset: -4px;
}

.labor-dashboard-mini-grid__avatar--worked {
    outline: 4px dashed var(--primary, #2f6fed);
    outline-offset: -4px;
}

.labor-dashboard-mini-grid__avatar--no_show {
    outline: 4px dashed #ef4444;
    outline-offset: -4px;
}

.labor-dashboard-mini-grid__avatar--late {
    outline: 4px dashed #f59e0b;
    outline-offset: -4px;
}

.labor-sesame-request-row__text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0;
    font-size: 0.76rem;
}

.labor-sesame-request-row__text strong {
    font-size: 0.78rem;
}

.labor-sesame-request-row__type {
    font-size: 0.7rem;
    color: var(--text);
}

.labor-sesame-request-row__when {
    font-size: 0.64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-sesame-request-row__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.labor-sesame-action {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    transition: filter 0.1s ease, transform 0.1s ease;
}

.labor-sesame-action:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.labor-sesame-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.labor-sesame-action--approve {
    background: var(--success, #16a34a);
}

.labor-sesame-action--reject {
    background: var(--danger, #c0392b);
}

.labor-history-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.labor-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.labor-history-table th,
.labor-history-table td {
    padding: 7px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.labor-history-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
    background: var(--surface-soft);
}

.labor-history-table tbody tr:hover {
    background: var(--surface-hover);
}

.labor-history-table tbody tr:last-child td {
    border-bottom: none;
}

.labor-test-requests-actions {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    align-items: center;
    justify-content: end;
    gap: 6px;
}

.labor-test-requests-actions__slot {
    display: block;
    width: 34px;
    height: 34px;
}

.labor-test-requests-actions .button--small.labor-test-requests-actions__icon {
    width: 34px;
    min-width: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    line-height: 1;
}

/* El desplegable de estado vive ahora dentro de la propia columna "Estado"
   de la tabla, con el mismo tamaño compacto que el resto de badges de la
   tabla en vez del tamaño grande pensado para la pestaña de Ausencias. */
.labor-history-table .labor-badge--select {
    min-height: 30px;
    width: 170px;
    font-size: 0.78rem;
    padding: 0 22px 0 10px;
    background-position: right 8px center;
    background-size: 12px;
}

.labor-test-requests-actions .button--small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
}


/* ---- Calendario anual de empresa (Laboral > Calendario) ---- */
.labor-year-cal {
    display: grid;
    gap: 14px;
}

.labor-year-cal__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.labor-year-cal__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.labor-year-cal__year {
    min-width: 48px;
    text-align: center;
}

.labor-year-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.labor-year-cal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.labor-year-cal__dot {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.labor-year-cal__dot--leave {
    background: #dc2626;
}

.labor-year-cal__dot--working {
    background: #16a34a;
}

.labor-year-cal__dot--absence {
    background: #7c3aed;
}

.labor-year-cal__dot--pending {
    background: #f5b301;
}

.labor-year-cal__person--absence .labor-year-cal__person-avatar {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4);
}

.labor-year-cal__person--pending .labor-year-cal__person-avatar {
    border-color: #f5b301;
    box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.45);
}

.labor-year-cal__person-detail {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    color: var(--text-soft);
    text-align: center;
}

.labor-year-cal__person-tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 0.62rem;
    font-weight: 800;
}

.labor-year-cal__months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.labor-year-cal__month {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
}

.labor-year-cal__month-title {
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: capitalize;
}

.labor-year-cal__weekdays,
.labor-year-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.labor-year-cal__weekdays {
    margin-bottom: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-soft);
    text-align: center;
}

.labor-year-cal__day {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 3px 1px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    font: inherit;
    cursor: default;
}

.labor-year-cal__day--empty {
    border-color: transparent;
    background: transparent;
}

.labor-year-cal__day--has {
    cursor: pointer;
}

.labor-year-cal__day--has:hover {
    border-color: var(--primary);
}

.labor-year-cal__day--today {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.labor-year-cal__day-number {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.labor-year-cal__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    max-width: 100%;
}

.labor-year-cal__more {
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 7px;
    color: var(--text-soft);
}

.labor-year-cal__people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.labor-year-cal__person {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}

.labor-year-cal__person-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 3px;
    background: var(--surface-soft);
    color: var(--text);
}

.labor-year-cal__person-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.labor-year-cal__person-fallback {
    font-size: 1.1rem;
    font-weight: 700;
}

.labor-year-cal__person-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 1080px) {
    .labor-year-cal__months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .labor-year-cal__months {
        grid-template-columns: 1fr;
    }

    .labor-year-cal__legend {
        margin-left: 0;
    }
}

/* ---- Historial de contratos (ficha laboral) ---- */
.labor-contracts {
    display: grid;
    gap: 8px;
}

.labor-contracts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.labor-contracts__list {
    display: grid;
    gap: 4px;
}

.labor-contracts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    font-size: 0.84rem;
}

.labor-contracts__row--active {
    border-color: var(--success, #1f8f5f);
    background: rgba(31, 143, 95, 0.08);
}

.labor-contracts__tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-soft);
}

.labor-contracts__row--active .labor-contracts__tag {
    color: var(--success, #1f8f5f);
}

/* Turno por norma que se prolonga solo mientras dure el contrato (aún no
   confirmado a mano): mismo hueco que un turno, pero en tono azul suave con
   borde discontinuo para distinguirlo de los confirmados (verdes). */
.labor-leave-calendar__day.labor-leave-calendar__day--approved.labor-schedule-calendar__day--projected {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    border: 1px dashed var(--primary);
}

.labor-schedule-calendar__day--projected .labor-schedule-calendar__day-segments span,
.labor-schedule-calendar__day--projected .labor-leave-calendar__day-number {
    color: var(--primary-dark);
}

.labor-contracts__row .labor-contracts__delete {
    min-height: 26px;
    padding: 0 8px;
}

/* Turno por norma aún no guardado (sin confirmar): azul, como en el calendario del trabajador. */
.labor-year-cal__dot--projected {
    background: var(--primary);
}

.labor-year-cal__person--projected .labor-year-cal__person-avatar {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Etiquetas de tipo (Sin fichar/Tardío/Ubicación/Solicitud) usadas por
   openWorkerPendingModal (labor.js): modal único con todo lo pendiente de una
   persona, agregado de varias fuentes. */
.labor-summary-action-item__tag {
    font-size: .66rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.labor-summary-action-item__tag--missed { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.labor-summary-action-item__tag--late { background: var(--warning-soft); color: var(--warning); }
.labor-summary-action-item__tag--location { background: color-mix(in srgb, var(--violet, #7c3aed) 14%, var(--surface)); color: var(--violet, #7c3aed); }
.labor-summary-action-item__tag--leave { background: var(--success-soft); color: var(--success-dark); }

/* Foto del dashboard: al mantenerla pulsada se ve que va a abrir la ficha del trabajador. */
.is-holding-avatar { animation: labor-avatar-hold 2s linear forwards; }
@keyframes labor-avatar-hold { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); } to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 55%, transparent); } }

.labor-config-reset-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin-top: 10px;
}
.labor-config-reset-card {
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-radius: 3px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px; height: 100%;
}
.labor-config-reset-card__header {
    display: flex; align-items: center; gap: 8px;
}
.labor-config-reset-card__icon { font-size: 1.6rem; line-height: 1; }
.labor-config-reset-card h5 { margin: 0; color: var(--danger-dark); flex: 1 1 auto; min-width: 0; }
.labor-config-reset-card p { margin: 0; font-size: .85rem; color: var(--text-soft); }
.labor-config-reset-card__button { margin-left: auto; flex: 0 0 auto; align-self: flex-start; }

/* Config › Datos de ejemplo: bloques a todo el ancho, uno por tipo de empresa */
.labor-config-demo-title { margin: 0 0 8px; font-size: 1.05rem; }
.labor-config-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; width: 100%; }
.labor-config-demo-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 3px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.labor-config-demo-card--full { grid-column: 1 / -1; }
.labor-config-demo-card h5 { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--primary-dark); }
.labor-config-demo-card p { margin: 0; font-size: .85rem; color: var(--text-soft); }
.labor-config-demo-card .labor-config-reset-card__button { margin-left: auto; flex: 0 0 auto; }

.labor-config-demo-selector { max-width: 460px; margin-bottom: 12px; }
.labor-config-demo-pack[hidden] { display: none; }

.labor-config-demo-added { flex: none; padding: 1px 9px; border-radius: 3px; background: var(--success, #16a34a); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.labor-config-demo-added.is-zero { background: var(--surface-hover); color: var(--text-soft); }

/* Solicitudes del trabajador: ancho contenido, como el resto de pantallas pensadas para el trabajador. */
.labor-tabs__panel[data-labor-tab-value="solicitudes"] .labor-tab-stack { max-width: 640px; margin-inline: auto; }