/* =====================================================================
   ejornada · SISTEMA DE EXPERIENCIA MÓVIL  (v2 — rediseño nativo móvil)
   =====================================================================
   Objetivo: una interfaz pensada para móvil (no un escritorio comprimido),
   manteniendo el ESCRITORIO (>1024px) intacto.

   Arquitectura:
     - Toda regla que altera layout vive dentro de @media (max-width:1024px)
       o (max-width:600px). El escritorio no recibe ningún cambio.
     - Los únicos elementos auxiliares nuevos (hamburguesa/overlay/cierre)
       se ocultan por defecto en todas las resoluciones.
     - Comportamiento (drawer, tablas→cards) en app/mobile.js.

   Sistema de diseño móvil (tokens en `body` dentro de la media query):
     Espaciado:  --sp-1..6  (4/8/12/16/24/32)
     Radios:     --r-sm/md/lg (8/12/16)
     Color:      acentos y grises reutilizados del tema existente.

   Breakpoints de trabajo: 320 / 360 / 375 / 390 / 414 / 768 / 1024.
   ===================================================================== */


/* ---- Helpers móviles: ocultos en escritorio (no afectan al diseño) ---- */
.mobile-nav-burger,
.mobile-nav-overlay,
.mobile-nav-close { display: none; }
/* El submenú de Mis datos es un .nav-menu-item; la base #header-top .nav-menu-item
   (1,1,0) pisaría un display:none simple, así que lo ocultamos con misma
   especificidad (gana por orden, va después de styles.css). Solo se muestra en
   el drawer (regla con !important dentro de la media query). */
#header-top .nav-menu-submenu-mobile { display: none; }
/* El backdrop del popover de avisos solo actúa en móvil (regla en la media query) */
.notification-popover-backdrop { display: none; }
/* El total de horas en la fila de pestañas solo se muestra en móvil (oculto en
   la web general). Se muestra solo dentro de la media query (más abajo). */
.tabs-container .schedule-total-mobile { display: none !important; }
/* La vista en tarjetas del horario solo se muestra en móvil (web general usa timeline) */
.schedule-day-cards { display: none; }
/* Los iconos de los tabs SEMANA/MES/AÑO/PERSONALIZAR solo se ven en móvil
   (en la web general los filtros van como antes, sin iconos). */
.schedule-range-tabs md-icon { display: none; }


/* =====================================================================
   1) TABLET + MÓVIL  (<= 1024px)
   ===================================================================== */
@media (max-width: 1024px) {

    /* ---------- 1.0 Tokens del sistema móvil ---------- */
    body {
        --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
        --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
        --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
        --accent: #00A7E0;
        --ink: #2b3a4b;
        --ink-soft: #556a84;
        --line: #e6e9ee;
        --drawer-w: min(86vw, 320px);
    }

    /* ---------- 1.1 Base global: sin scroll horizontal, sin min-width ---------- */
    html, body {
        min-width: 0 !important;
        max-width: 100%;
        overflow-x: hidden;
    }
    * { -webkit-tap-highlight-color: rgba(0, 167, 224, 0.15); }

    img, video, iframe, canvas, embed, object {
        max-width: 100%;
        height: auto;
    }

    #content {
        padding: var(--sp-4);
        overflow-x: hidden;
    }

    /* Mejora de legibilidad de textos auxiliares en móvil */
    #content .md-caption { color: #5a6b7d; }

    /* ===================================================================
       1.2 APP SHELL — barra superior móvil
       =================================================================== */
    #header-top {
        position: relative;
        height: 56px;
        min-height: 56px;
        padding: 0 var(--sp-2);
        align-items: center;
        background: #fff;
        box-shadow: 0 1px 0 var(--line);
        box-sizing: border-box;
    }

    /* Botón hamburguesa (44x44, accesible) */
    .mobile-nav-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 11px;
        margin: 0;
        border: 0;
        background: transparent;
        border-radius: var(--r-sm);
        cursor: pointer;
        flex: none;
    }
    .mobile-nav-burger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--ink-soft);
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }
    body.mobile-nav-open .mobile-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.mobile-nav-open .mobile-nav-burger span:nth-child(2) { opacity: 0; }
    body.mobile-nav-open .mobile-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Libera el contenedor flex="20" (20% del ancho) para que el logo no se recorte */
    #header-top [flex="20"] {
        flex: 1 1 auto !important;
        max-width: none !important;
    }
    #header-top .logo {
        width: auto;
        padding: var(--sp-2) var(--sp-2);
        height: auto;
        overflow: visible;       /* base lleva overflow:hidden -> cortaba el logo */
        display: flex;
        align-items: center;
    }
    #header-top .logo img {
        width: 150px !important;
        max-width: 48vw;
    }

    /* ===================================================================
       1.3 DRAWER de navegación (el .nav-menu se vuelve off-canvas)
       =================================================================== */
    #header-top .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--drawer-w);
        height: 100vh;
        height: 100dvh;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
        padding: 56px var(--sp-4) var(--sp-5);
        z-index: 999999999;   /* por encima de cualquier z-index del proyecto (gridstack, sidenav, etc.) */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
    }
    body.mobile-nav-open #header-top .nav-menu {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s;
    }
    /* CLAVE: #header-top no creaba contexto de apilamiento, así que el drawer
       (aun con z-index altísimo) quedaba por debajo de la md-sidenav del
       contenido. Al promover #header-top a contexto propio con z-index alto,
       el drawer + overlay + cierre se pintan por encima de TODO el contenido. */
    body.mobile-nav-open #header-top {
        z-index: 999999999 !important;
        position: relative !important;
    }
    /* ...y rebaja toda la fila de contenido (incluida la md-sidenav del
       clockIn/filtros) a un contexto de apilamiento z-index:0, por debajo del
       header. Así el drawer/overlay quedan por encima pase lo que pase. */
    body.mobile-nav-open div[layout="row"]:has(> #content),
    body.mobile-nav-open #content,
    body.mobile-nav-open md-sidenav#sidenav,
    body.mobile-nav-open #sidenav {
        position: relative !important;
        z-index: 0 !important;
    }

    /* Overlay oscuro tras el drawer */
    .mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 30, 40, 0.45);
        opacity: 0;
        pointer-events: none;
        z-index: 999999998;   /* justo bajo el drawer, por encima del resto */
        transition: opacity .28s ease;
    }
    body.mobile-nav-open .mobile-nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Botón de cierre (X) anclado arriba del drawer */
    .mobile-nav-close {
        display: none;
        position: fixed;
        top: 8px;
        left: calc(var(--drawer-w) - 20px);
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--ink-soft);
        border-radius: var(--r-sm);
        cursor: pointer;
        z-index: 1000000000;   /* por encima del drawer */
    }
    body.mobile-nav-open .mobile-nav-close { display: inline-flex; }
    .mobile-nav-close md-icon { color: var(--ink-soft); }

    /* Contenido del drawer: lista vertical táctil, con jerarquía */
    #header-top .nav-menu-item {
        padding: 0;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-bottom: 1px solid var(--line);
    }
    #header-top .nav-menu-link,
    #header-top .nav-menu-toggler {
        height: auto;
        min-height: 48px;
        line-height: 1.3;
        padding: var(--sp-3) var(--sp-2);
        width: 100%;
        font-size: 16px;
        color: var(--ink);
        border-radius: var(--r-sm);
    }
    #header-top .nav-menu-link.active { color: var(--accent); }
    #header-top .nav-menu-link.active::after,
    #header-top .nav-menu-link:hover::after { display: none; } /* sin triángulo */

    /* Desplegable "Gestión": estático y expandido dentro del drawer */
    #header-top .nav-menu-dropdown {
        position: static;
        opacity: 1;
        pointer-events: all;
        box-shadow: none;
        border: 0;
        background: transparent;
        min-width: 0;
        padding: 0 0 var(--sp-2) var(--sp-3);
        transition: none;
    }
    #header-top .nav-menu-dropdown-link {
        min-height: 44px;
        padding: var(--sp-2) var(--sp-2);
        font-size: 15px;
        color: var(--ink-soft);
        border-radius: var(--r-sm);
    }
    /* Submenú de "Mis datos" dentro del drawer: lista vertical indentada */
    #header-top .nav-menu-submenu-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-left: var(--sp-3);
    }
    /* El menú de perfil NO entra en el drawer */
    body.mobile-nav-open #header-top .profile-menu { z-index: auto; }

    /* ---------- 1.4 Menú de perfil (cabe en viewport) ---------- */
    #header-top .profile-menu {
        padding: 0 var(--sp-2);
        margin-left: auto;
        flex: none;
    }
    /* Avatar de perfil del header (iniciales o imagen) más pequeño en móvil */
    #header-top .profile-menu .avatar-initials,
    #header-top .profile-menu-toggler .avatar-initials {
        min-width: 34px !important;
        min-height: 34px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
        margin: 0 !important;
        border-width: 1px;
    }
    #header-top .profile-menu img.avatar,
    #header-top .profile-menu-toggler img.avatar {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }
    /* Menú de perfil por CLIC (no hover) en móvil. Se posiciona FIJO bajo la
       cabecera (en móvil #header-top es relative y cambiaba su anclaje/recorte);
       oculto por defecto, visible solo con .open (ng-class app.profileMenuOpen). */
    #header-top .profile-menu-dropdown,
    #header-top .profile-menu-dropdown.navbar {
        position: fixed !important;
        top: 60px !important;
        right: var(--sp-2) !important;
        left: auto !important;
        width: auto !important;
        max-width: 92vw !important;
        box-sizing: border-box;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #header-top .profile-menu.open .profile-menu-dropdown {
        opacity: 1 !important;
        pointer-events: all !important;
        z-index: 999999999 !important;   /* por encima de todo (gridstack, etc.) */
    }
    /* Mismo "sándwich" que el drawer: al abrir el menú de perfil, promueve el
       header a contexto de apilamiento alto y rebaja el contenido, para que el
       desplegable (position:fixed) no quede atrapado por debajo del dashboard. */
    #header-top:has(.profile-menu.open) {
        z-index: 999999999 !important;
        position: relative !important;
    }
    body:has(.profile-menu.open) div[layout="row"]:has(> #content),
    body:has(.profile-menu.open) #content,
    body:has(.profile-menu.open) md-sidenav#sidenav,
    body:has(.profile-menu.open) #sidenav {
        position: relative !important;
        z-index: 0 !important;
    }

    /* ---------- 1.5 Cabecera inferior (búsqueda / avisos) ---------- */
    /* La banda azul colapsa si no hay contenido (búsqueda/avisos); crece solo cuando lo hay */
    #header-bottom {
        height: auto;
        min-height: 0;
        flex-wrap: wrap;
        padding: 0 var(--sp-3);
        box-sizing: border-box;
    }
    #header-bottom .buscador,
    #header-bottom .resumen_incidencias { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
    #header-bottom [style*="width:350px"],
    #header-bottom [style*="width: 350px"] {
        display: none !important;
        width: 0 !important;
    }
    #header-bottom .buscador {
        width: auto !important;
        max-width: 62vw;
        margin-right: var(--sp-2);
    }

    /* ===================================================================
       1.6 SIDEBAR de configuración (md-sidenav) -> bloque apilado
       =================================================================== */
    div[layout="row"]:has(> #content) { flex-direction: column; }

    #sidenav,
    md-sidenav.sticky,
    #sidenav.sticky,
    md-sidenav#sidenav {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        /* Neutraliza el estado "drawer cerrado" de Material en páginas con
           md-is-locked-open="$mdMedia('gt-md')" (si no, queda fuera de pantalla) */
        transform: none !important;
        visibility: visible !important;
        box-shadow: none;
        background: #fff;
        border-bottom: 1px solid var(--line);
    }
    #sidenav {
        padding: var(--sp-3);
        box-sizing: border-box;
    }
    #sidenav a { padding: 4px; }

    /* Panel de fichaje del Trabajador (clockIn): sin recuadro gris ni alto fijo
       (la base lleva background:#f6f6f6 + height:100vh -> dejaba un hueco enorme
       bajo el botón de fichar). Se ajusta a su contenido. */
    #sidenav .inicio-bienvenida {
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 var(--sp-3) var(--sp-2) !important;
    }
    #sidenav .inicio-bienvenida #mensaje_ultimo_fichaje { padding-bottom: var(--sp-2); }
    /* El reloj es width:100% de su contenedor flex y podía inflar el ancho:
       lo limitamos y centramos para que no genere scroll horizontal. */
    #sidenav .widget-clock {
        width: 200px !important;
        max-width: 60% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Centra reloj, su texto y los botones de fichaje. Los botones van dentro
       de contenedores flex anidados ([layout=column][flex]) que quedaban a
       ancho de contenido y descuadraban el eje: los forzamos a ancho completo
       y centrados, así reloj y botón comparten el mismo centro. */
    .inicio-bienvenida { text-align: center; }
    .inicio-bienvenida [layout="column"] {
        width: 100% !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    /* Los contenedores flex de los botones ([layout=column][flex]) a bloque con
       texto centrado, y el botón como inline-block: centrado fiable (el flex
       anidado descuadraba el botón respecto al reloj). */
    .inicio-bienvenida [layout="column"][flex] {
        display: block !important;
        text-align: center !important;
    }
    .inicio-bienvenida .fichar,
    .inicio-bienvenida .btn {
        display: inline-flex !important;   /* inline-level (se centra en el padre)
                                              y flex para centrar el texto */
        align-items: center !important;    /* texto centrado VERTICALMENTE */
        justify-content: center !important;/* texto centrado horizontalmente */
        text-align: center !important;
        float: none !important;
        margin-left: 0 !important;         /* centrado por text-align (dashboard) */
        margin-right: 0 !important;
    }
    /* En la vista de Fichajes (worker-balance) el botón necesita un nudge para
       alinearse con el reloj; en el dashboard NO (text-align ya lo centra). */
    .worker-balance-view .inicio-bienvenida .fichar,
    .worker-balance-view .inicio-bienvenida .btn {
        margin-left: -30px !important;
    }
    /* Sin scroll horizontal en la vista (md-sidenav lleva overflow:auto).
       OJO: NO incluir main/[ui-view] aquí; si la animación de ruta les añade
       un transform, con overflow:hidden recortarían el drawer (position:fixed). */
    #content, .dashboard, #grid,
    #sidenav, md-sidenav#sidenav {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ===================================================================
       VISTA DE FICHAJE (fichar.html): mismo formato que el panel del
       Trabajador -> reloj arriba (sin recuadro gris) y formulario debajo,
       todo a una columna y a ancho completo.
       =================================================================== */
    .signing-page,
    .signing-view,
    .signing-main { max-width: 100% !important; overflow-x: hidden !important; }

    .signing-view {
        flex-direction: column !important;   /* reloj arriba, formulario debajo */
        align-items: stretch !important;
        min-height: 0 !important;            /* base fuerza min-height:600px */
    }
    .signing-clock {
        width: 100% !important;
        align-self: auto !important;
        background: transparent !important;  /* quita el recuadro gris */
        box-shadow: none !important;
        border-bottom: 1px solid var(--line);
        padding: var(--sp-3) var(--sp-4) !important;
        box-sizing: border-box !important;
    }
    .signing-clock .widget-clock {
        max-width: 220px;
        margin: 0 auto;
    }
    .signing-main {
        flex-direction: column !important;   /* apila caja de opciones + comentario */
        flex-wrap: nowrap !important;        /* sin esto, en columna envuelve a una 2ª col (comentario al lado) */
        width: 100% !important;
        padding: var(--sp-4) !important;
        box-sizing: border-box !important;
    }
    .signature-toolbar {
        width: 100% !important;              /* base 250px fijo */
        margin-right: 0 !important;
        margin-bottom: var(--sp-3) !important;
        box-sizing: border-box !important;
    }
    .signature-other-data {
        width: 100% !important;              /* base 500px fijo */
    }
    .signature-sign-button { min-height: 44px; }
    .signature-comments textarea { width: auto; min-height: 90px; }

    /* ===================================================================
       VISTA DE FICHAJES (saldos_horas.html) — rol Trabajador.
       Mismo formato: panel de fichaje arriba (sin recuadro gris) + contenido
       debajo, a una columna y a ancho completo; tabla con scroll horizontal.
       =================================================================== */
    .worker-balance-page,
    .worker-balance-view,
    .worker-balance-main { max-width: 100% !important; overflow-x: hidden !important; }

    .worker-balance-view {
        flex-direction: column !important;   /* panel fichaje arriba, fichajes debajo */
    }
    /* Panel de fichaje (igual que clockIn): sin recuadro gris, ancho completo */
    .worker-balance-view > .inicio-bienvenida {
        width: 100% !important;
        align-self: auto !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--line);
        height: auto !important;
        min-height: 0 !important;
        padding: var(--sp-3) var(--sp-4) !important;
        box-sizing: border-box !important;
    }
    .worker-balance-view .inicio-bienvenida .widget-clock {
        max-width: 220px;
        margin: 0 auto;
    }
    #content.worker-balance-main { padding: var(--sp-4) !important; box-sizing: border-box; }

    /* Selector de fecha: base es position:absolute right:0 -> a flujo, ancho completo */
    .worker-balance-datepicker {
        position: static !important;
        width: 100% !important;
        padding: var(--sp-2) 0 var(--sp-3) !important;
    }
    /* El datepicker va en un .worker-selector con space-between y un div vacío
       (selector de trabajador, oculto para Trabajador) a la izquierda que lo
       empujaba a la derecha: centramos y damos ancho completo al datepicker. */
    .worker-selector { justify-content: center !important; }
    .worker-balance-datepicker { margin: 0 auto !important; }
    /* Indicador de fecha (semana/mes/año) entre flechas: prev/next redondeados
       y título centrado, igual que en Horarios. */
    .worker-balance-datepicker-headline > [layout="row"] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        width: 100%;
    }
    .worker-balance-datepicker-prev,
    .worker-balance-datepicker-next {
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: none;
    }
    .worker-balance-datepicker-prev md-icon,
    .worker-balance-datepicker-next md-icon { color: var(--accent); }
    .balance-datepicker-title {
        font-weight: 700;
        color: var(--ink);
        font-size: 15px;
        text-transform: uppercase;
        text-align: center;
    }
    /* SEMANA / MES / AÑO / PERSONALIZAR: bloque 2x2, botones pequeños.
       max-width para que no se estiren a lo ancho en tablet. */
    .worker-balance-datepicker .button-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--sp-2) !important;
        width: 100%;
        max-width: 380px;
        margin: var(--sp-2) auto !important;   /* centrado */
        overflow: visible !important;   /* base: overflow:hidden (segmented) */
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .worker-balance-datepicker .button-group > a {
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 4px !important;
        font-size: 12px !important;
        line-height: 1.1;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 4px !important;
        border-right: 0 !important;     /* base: separador de segmented control */
    }
    .worker-balance-company-picker { position: static !important; }

    /* Total de horas del horario: en móvil ocultamos el original (en el
       datepicker) y mostramos una copia a la derecha de la fila de pestañas. */
    .worker-balance-datepicker-headline > div:has(> span[style*="margin-left"]) {
        display: none !important;
    }
    .tabs-container .schedule-total-mobile {
        display: inline-block !important;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--ink-soft);
        white-space: nowrap;
    }

    /* Pestañas de detalle: que no desborden */
    .tab-content { max-width: 100%; }
    /* En móvil (Trabajador) se ocultan las pestañas "DETALLE HORAS" y
       "FICHAJES ANULADOS" y sus contenidos; solo queda "DETALLE FICHAJES". */
    .tab-button[ng-click*="desglose"],
    .tab-button[ng-click*="anulados"],
    .tab-content[ng-show*="desglose"],
    .tab-content[ng-show*="anulados"] {
        display: none !important;
    }

    /* Tabla de fichajes (validation-signings, cabeceras agrupadas).
       Estrategia móvil: NO se pierde info. Se compactan las celdas y la
       primera columna (Fecha) queda fija al hacer scroll horizontal, así
       siempre se ve a qué día corresponde cada dato. */
    table.validation-signings {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 11px;
    }
    table.validation-signings th,
    table.validation-signings td {
        padding: 3px 5px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    table.validation-signings .supertitle,
    table.validation-signings .supertitle-wrapper { font-size: 11px !important; }
    /* Iconos más pequeños dentro de la tabla compacta */
    table.validation-signings md-icon {
        font-size: 15px !important;
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
    }
    /* 1ª columna (Fecha) fija: no se pierde la referencia del día al scrollear */
    table.validation-signings thead th:first-child,
    table.validation-signings tbody td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 2;
        box-shadow: 1px 0 0 #ccc;
    }
    table.validation-signings thead th:first-child { z-index: 3; }
    /* La celda Fecha base lleva width:72px inline; la dejamos respirar pero compacta */
    table.validation-signings tbody td:first-child { min-width: 64px; }

    /* Barra de acciones (sticky en escritorio): que envuelva en móvil */
    .worker-balance-main .button-group.main {
        position: static !important;
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    /* Botones HABILITAR SELECCIÓN / VALIDAR / ANULAR... compactos y en fila */
    .worker-balance-main .button-group.main div[layout="row"]:has(> .btn) {
        flex-wrap: wrap;
        gap: var(--sp-2);
        width: 100%;
    }
    .worker-balance-main .button-group.main .btn,
    .worker-balance-main .button-group.main .btn.big {
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-height: 40px;
        margin-right: 0 !important;
    }

    /* ===================================================================
       VISTA DE AUSENCIAS (ausencias_calendario.html) — rol Trabajador.
       El layout (filtros + contenido) ya lo apila la regla genérica de
       #content. Aquí: calendario anual legible y filtros que no desbordan.
       =================================================================== */
    .absence-calendar-filters { flex-wrap: wrap !important; gap: var(--sp-2); }
    /* El calendario va en un layout-align="space-between" junto al panel
       (ahora oculto): lo centramos y le damos ancho completo. */
    div[layout="row"]:has(> .worker-schedule-content) { justify-content: center !important; }
    .worker-schedule-content,
    .worker-schedule-calendar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .worker-schedule { width: 100%; gap: var(--sp-3); }
    /* Oculta el FAB flotante "+" (Solicitar Ausencia); ya están los botones.
       Material convierte <md-button> en <button>, así que el selector es
       agnóstico al elemento (clase + ng-click/title/aria-label). */
    .md-fab[ng-click="vm.new()"],
    .md-fab[title="Solicitar Ausencia"],
    .md-fab[aria-label="Solicitar Ausencia"] { display: none !important; }

    /* ===================================================================
       VISTA HORARIOS (horarios.calendario.html) — rol Trabajador.
       Contenido a ancho completo; el calendario anual reutiliza .worker-schedule
       (igual que Ausencias). Selector de fecha compacto, sin panel lateral de
       leyendas/ausencias, y vista timeline (semana/mes) con scroll horizontal.
       =================================================================== */
    .worker-schedule-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 var(--sp-4) !important;   /* margen a los lados de la vista */
        box-sizing: border-box;
    }
    .worker-schedule-headline { width: 100%; }
    /* Datepicker y su cadena a ancho completo para poder centrar fecha y filtros */
    .worker-schedule-datepicker,
    .worker-schedule-datepicker > [layout="row"],
    .worker-schedule-datepicker > [layout="row"] > [layout="row"],
    .worker-schedule-datepicker .absences-calendar-datepicker {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    .worker-schedule-datepicker [layout="row"] { flex-wrap: wrap; justify-content: center; }
    /* Botones SEMANA / MES / AÑO: fila horizontal compacta (la genérica
       .button-group{flex-direction:column} de ≤600 los apilaba). */
    .worker-schedule-datepicker .button-group,
    .absences-calendar-datepicker .button-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: var(--sp-2);
        width: 100% !important;      /* rellena el ancho -> botones grandes y repartidos */
        max-width: 420px;
        margin: var(--sp-3) 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    .worker-schedule-datepicker .button-group > a,
    .absences-calendar-datepicker .button-group > a {
        flex: 1 1 0 !important;
        min-width: 0;
        width: auto !important;
        min-height: 42px;
        font-size: 13px !important;
        padding: 10px 6px !important;
        text-align: center;
        border-radius: 6px !important;
        border-right: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Oculta el panel lateral de leyendas (Festivos/Horarios) + lista de ausencias */
    .worker-schedule-legends-wrapper { display: none !important; }
    /* Vista timeline (semana/mes): en móvil se sustituye por TARJETAS con los
       rangos de horas del día -> ocultamos la línea de tiempo y mostramos las cards. */
    .worker-schedule-calendar .vista_actividad,
    .worker-schedule-calendar .timeline { display: none !important; }
    /* Tarjetas amplias y centradas */
    .schedule-day-cards,
    .schedule-day-cards > div,
    .schedule-day-cards > div > div { width: 100% !important; }
    .schedule-day-cards {
        display: block;
        max-width: 560px;
        margin: 0 auto;
    }
    .schedule-day-card {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
        margin-bottom: var(--sp-4);
        padding: var(--sp-4) var(--sp-5);
    }
    .schedule-day-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        border-bottom: 1px solid var(--line);
        padding-bottom: var(--sp-3);
        margin-bottom: var(--sp-3);
    }
    .schedule-day-card-date {
        font-weight: 700;
        color: var(--ink);
        font-size: 15px;
        text-transform: capitalize;
    }
    .schedule-day-card-type-wrap { display: inline-flex; align-items: center; gap: 2px; flex: none; }
    .schedule-day-card-type {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-soft);   /* gris, como antes */
        text-transform: uppercase;
        white-space: nowrap;
    }
    .schedule-day-card-chevron { display: none !important; }   /* sin flecha */
    .schedule-day-card-festivo { font-size: 12px; color: #c0392b; margin-bottom: var(--sp-2); }
    .schedule-day-card-shifts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
    .schedule-day-card-shifts .schedule-shift {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #e8f6fc;
        color: #0a6e93;
        font-weight: 700;
        font-size: 14px;
        padding: 7px 14px;
        border-radius: 999px;
    }
    .schedule-day-card-shifts .schedule-shift md-icon {
        color: #0a6e93 !important;
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }
    .schedule-day-card-shifts .schedule-rest { color: var(--ink-soft); font-size: 13px; }

    /* --- Segmented control SEMANA / MES / AÑO (icono + etiqueta) --- */
    .button-group.schedule-range-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 460px;
        margin: var(--sp-3) auto !important;
        background: #fff !important;
        border: 1px solid var(--line) !important;
        border-radius: var(--r-md) !important;
        padding: 4px !important;
        box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06) !important;
        overflow: hidden !important;
    }
    .button-group.schedule-range-tabs > a {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-height: 58px !important;
        padding: 8px 4px !important;
        border: 0 !important;
        border-radius: var(--r-sm) !important;
        background: transparent !important;
        color: #556a84 !important;   /* texto; el seleccionado va en blanco */
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    .button-group.schedule-range-tabs > a md-icon {
        display: inline-flex !important;   /* visible en móvil (oculto por defecto) */
        color: #556a84 !important;   /* icono; el seleccionado va en blanco */
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
    .button-group.schedule-range-tabs > a.selected { background: var(--accent) !important; color: #fff !important; }
    .button-group.schedule-range-tabs > a.selected md-icon { color: #fff !important; }

    /* --- Navegación de fecha (prev / título / next) estilo maqueta --- */
    .worker-schedule-datepicker .absences-calendar-datepicker-headline {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
    }
    .worker-schedule-datepicker .absences-calendar-datepicker-prev,
    .worker-schedule-datepicker .absences-calendar-datepicker-next {
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: none;
    }
    .worker-schedule-datepicker .absences-calendar-datepicker-prev md-icon,
    .worker-schedule-datepicker .absences-calendar-datepicker-next md-icon { color: var(--accent); }
    .worker-schedule-datepicker .calendar-datepicker-title {
        font-weight: 700;
        color: var(--ink);
        font-size: 15px;
        text-transform: uppercase;
        text-align: center;
    }

    /* ===================================================================
       VISTA MIS DATOS (mis_datos.html) — rol Trabajador.
       La fila contiene [menú sidenav] [.form] [columna foto flex=30].
       El contenido es .form (no #content), así que la apilamos aparte.
       =================================================================== */
    div[layout="row"]:has(> .form) { flex-direction: column !important; }
    /* Vista Horarios (mis_datos.calendario): la fila contiene [sidenav envuelto]
       + [calendario incluido], sin .form ni #content -> la apilamos por el
       sidenav. El calendario reutiliza las reglas de .worker-schedule. */
    div[layout="row"]:has(> div > md-sidenav#sidenav) { flex-direction: column !important; }
    .form {
        width: 100% !important;
        max-width: 600px !important;
        /* base lleva margin:50px 35px -> desplazaba a la izquierda; lo centramos */
        margin: var(--sp-3) auto !important;
        padding: var(--sp-4) !important;
        box-sizing: border-box;
    }
    .form .form-body { flex-direction: column !important; }
    .form .form-body > [flex="95"] { flex: 1 1 auto !important; max-width: 100% !important; }
    /* Contratos y otros formularios: apilar las filas internas de campos
       (varios md-input-container en un layout="row") y campos a ancho completo. */
    .form .form-body [layout="row"] { flex-direction: column !important; }
    .form [flex] { flex: 1 1 auto !important; max-width: 100% !important; }

    /* HISTÓRICO DE CONTRATOS: cada registro (.form-body-contratos) se mantiene
       COMPACTO (campos en fila que envuelven) y se separa como TARJETA, para
       distinguir un contrato de otro. */
    .form .form-body-contratos {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--sp-3) var(--sp-4);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--sp-4) var(--sp-5);
        margin: 0 0 var(--sp-3) 0;
        background: #fff;
        box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
        box-sizing: border-box;
    }
    .form .form-body-contratos md-input-container {
        flex: 1 1 40% !important;   /* ~2 campos por fila dentro de la tarjeta */
        min-width: 120px;
        max-width: none !important;
        margin: 0 !important;
    }
    /* Fuentes algo más pequeñas en el histórico y en la sección de jornada /
       reducción, para que quede todo alineado, legible y compacto. */
    .form .form-body-contratos label,
    .form .form-body-contratos input,
    .form .secondary-title,
    .form .secondary-title label,
    .form .secondary-title input,
    .form .options,
    .form .options label,
    .form .options input,
    .form .checkbox label,
    .form .checkbox .no-bold,
    .form .percent {
        font-size: 12px !important;
    }
    /* Columna de la foto de perfil: ancho completo, centrada e imagen reducida */
    div[layout="row"]:has(> .form) > [flex="30"] {
        width: 100% !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding: var(--sp-4) 0 0 !important;
    }
    .image-container img,
    .image-container .avatar-initials {
        width: 160px !important;
        height: 160px !important;
        font-size: 40px !important;
    }
    /* Menú lateral (Mis datos/Contratos/Horarios/Cláusulas): enlaces táctiles */
    #sidenav .sidenav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px var(--sp-2);
    }
    .worker-schedule-month { margin: 0 0 var(--sp-3) 0 !important; max-width: 100%; }
    /* Celdas de día flexibles: la base las fija a 49px y desbordaban en móvil */
    .worker-schedule-week-day {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 0 !important;
    }
    .worker-schedule-week-picker {
        min-width: 0 !important;
        width: 22px !important;
        max-width: 22px !important;
        flex: 0 0 22px !important;
    }
    /* Selector de año compacto */
    .absences-calendar-datepicker { width: 100%; }
    .absences-calendar-datepicker .button-group { flex-wrap: wrap; }

    /* Oculta el panel de la derecha (leyenda de Festivos + lista de Ausencias) */
    .tabla_ausencias { display: none !important; }

    /* Botones SOLICITAR PERMISOS / VACACIONES: compactos y en fila */
    .button-group:has(> a[ng-click*="newPeticiones"]),
    .button-group:has(> a[ng-click*="newVacaciones"]) {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }
    a.btn[ng-click*="newPeticiones"],
    a.btn[ng-click*="newVacaciones"] {
        width: auto !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
        min-height: 40px;
        margin: 0 !important;
    }

    #sidenav select { width: 100%; min-height: 44px; margin-top: 2px; }

    /* --- Filtros compactos en móvil (solo dentro de #sidenav) --- */
    #sidenav h2,
    #sidenav .md-subhead {
        margin-top: 12px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
    }
    #sidenav .md-subhead:first-child,
    #sidenav h2:first-child { margin-top: 0 !important; }
    #sidenav .mb-3 { margin-bottom: 8px !important; }
    #sidenav .mb-2 { margin-bottom: 4px !important; }
    #sidenav .mb-1 { margin-bottom: 2px !important; }
    #sidenav .pt-1 { padding-top: 0 !important; }
    #sidenav .separator { height: 8px !important; }
    #sidenav .filtros-lateral { margin-bottom: 4px !important; }
    /* Filas de filtro (checkbox + etiqueta): bien juntas */
    #sidenav .sidebar-docs a,
    #sidenav .filtros-lateral a { padding: 2px 4px !important; min-height: 0 !important; }
    #sidenav .sidebar-docs li { padding: 0 !important; margin: 0 !important; }
    #sidenav .checkMostrar { margin: 2px 0 !important; }

    /* ===================================================================
       1.7 TABLAS -> TARJETAS (legibilidad sobre fidelidad)
       Las etiquetas (data-label) las inyecta app/mobile.js desde <thead>.
       =================================================================== */
    table.main-table { display: block; width: 100%; }
    table.main-table thead {
        /* Oculta cabecera visual, accesible para lectores via data-label */
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    table.main-table tbody { display: block; width: 100%; }
    table.main-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-4);
    }
    table.main-table tbody td,
    table.main-table tbody th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        width: auto !important;
        max-width: none !important;
        min-height: 40px;
        padding: var(--sp-2) 0 !important;
        border: 0;
        border-bottom: 1px solid #f2f4f7;
        text-align: right;
        white-space: normal;
    }
    table.main-table tbody tr > td:last-child,
    table.main-table tbody tr > th:last-child { border-bottom: 0; }
    table.main-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-soft);
        text-align: left;
        flex: 0 0 42%;
        white-space: normal;
    }
    /* Celdas centradas/icono: alineadas a la derecha como valor */
    table.main-table tbody td.center,
    table.main-table tbody td.small { justify-content: space-between; }
    /* Fila vacía (sin data-label) no muestra hueco de etiqueta */
    table.main-table tbody td:not([data-label])::before { content: ''; flex: 0; }

    /* Otras tablas de datos: scroll horizontal contenido (no rompe página) */
    #content table:not(.main-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===================================================================
       1.8 FORMULARIOS e INPUTS
       =================================================================== */
    input, select, textarea,
    md-input-container input,
    md-input-container textarea,
    .md-select-value {
        font-size: 16px !important;   /* evita el zoom automático de iOS */
        max-width: 100%;
        box-sizing: border-box;
    }
    #content input:not([type="checkbox"]):not([type="radio"]),
    #content select,
    #content textarea,
    md-dialog input:not([type="checkbox"]):not([type="radio"]),
    md-dialog select,
    md-dialog textarea {
        width: 100%;
        min-height: 44px;
    }
    md-input-container { width: 100%; }
    label, .md-caption { line-height: 1.4; }

    /* ===================================================================
       1.9 BOTONES y objetivos táctiles (>=44px)
       =================================================================== */
    /* Solo botones de acción de contenido. NO tocar md-checkbox/md-radio/botones
       internos de Material (rompía los checkboxes dentro de .checkbox-cont). */
    .btn, .button, .md-button {
        min-height: 44px;
    }
    .btn, .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: var(--sp-3);
    }
    .button-group {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    /* ===================================================================
       1.10 MODALES -> diálogo a (casi) pantalla completa
       =================================================================== */
    .md-dialog-container { align-items: center; }   /* base tablet: centrado */
    md-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        min-width: 0 !important;
        max-height: 92vh !important;
        border-radius: var(--r-lg) !important;
    }
    #contenedor_nueva_ausencia,
    #contenedor_nueva_ausencia_editar,
    #contenedor_nueva_ausencia2,
    md-dialog form,
    md-dialog .nueva_ausencia {
        width: auto !important;
        max-width: 100% !important;
    }
    md-dialog md-dialog-content { max-height: none; }
    md-dialog md-dialog-content[layout="row"] { flex-direction: column; }
    md-dialog md-toolbar,
    md-dialog .md-toolbar-tools { height: auto; min-height: 56px; }

    /* ===================================================================
       1.11 CARDS / GRIDS / DASHBOARD -> columna única
       =================================================================== */
    .dashboard { overflow-x: hidden; }
    .chart-wrapper {
        max-height: none !important;
        margin-right: 0;
        width: 100%;
    }

    /* ===================================================================
       1.12 ACCESIBILIDAD — focus visible para teclado/lectores
       =================================================================== */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .btn:focus-visible,
    .button:focus-visible,
    md-checkbox:focus-visible {
        outline: 3px solid rgba(0, 167, 224, 0.6);
        outline-offset: 2px;
        border-radius: 4px;
    }
}


/* =====================================================================
   2) TELÉFONO  (<= 600px)
   ===================================================================== */
@media (max-width: 600px) {

    /* Oculta nombre/licencias del perfil; se mantiene el acceso al menú */
    #header-top .profile-client-name { display: none; }
    #header-top .logo img { width: 120px !important; }

    #content { padding: var(--sp-3); }
    #content .md-headline,
    #content h1.md-headline { font-size: 22px; line-height: 1.25; }

    /* Acciones a lo ancho y bien separadas */
    .button-group { flex-direction: column; align-items: stretch; }
    .button-group .btn,
    .button-group .button { width: 100%; margin-right: 0; }

    /* MODAL -> bottom sheet */
    .md-dialog-container { align-items: flex-end !important; }
    md-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 0 !important;
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    }
    md-dialog .md-toolbar-tools .button-group { flex-direction: row; }

    /* Footer centrado en una columna */
    #footer { text-align: center; }

    /* ===================================================================
       DASHBOARD (gridstack) -> 1 columna en móvil (un panel debajo de otro).
       Gridstack posiciona los paneles en absoluto dentro de una rejilla de
       6 columnas. Aquí neutralizamos ese posicionamiento SOLO de forma visual
       y los apilamos a ancho completo. No se toca la inicialización del grid
       ni su modelo de datos: el escritorio y el guardado de layout quedan
       intactos.
       =================================================================== */
    .dashboard { height: auto !important; }
    #grid.grid-stack {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
    #grid.grid-stack > .grid-stack-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        transform: none !important;
        display: block !important;          /* un panel por fila, a ancho completo */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #grid.grid-stack > .grid-stack-item > .grid-stack-item-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;   /* base lleva overflow:hidden -> cortaría el contenido */
        box-sizing: border-box !important;
    }

    /* AUSENCIAS: calendario anual a 1 columna (cada mes a ancho completo) */
    .worker-schedule { grid-template-columns: 1fr !important; }

    /* ===================================================================
       TABLA DE FICHAJES -> UNA TARJETA POR DÍA (teléfono).
       Las etiquetas (data-label) y el marcado de celdas vacías (data-empty)
       los pone la directiva validationSignings. Aquí solo la presentación.
       Cada fila (día) es una tarjeta: Fecha como título y debajo cada dato
       como "etiqueta · valor". Se ocultan los huecos vacíos. Sin scroll
       horizontal y sin perder información.
       =================================================================== */
    table.validation-signings {
        display: block;
        width: 100% !important;
        overflow: visible !important;
        font-size: 13px;
    }
    table.validation-signings thead {     /* cabecera oculta (accesible vía data-label) */
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    table.validation-signings tbody { display: block; width: 100%; }
    table.validation-signings tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
    }
    table.validation-signings tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 5px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #f2f4f7 !important;
        text-align: right;
        white-space: normal;
        font-size: 13px !important;
    }
    table.validation-signings tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-soft);
        text-align: left;
        flex: 0 0 45%;
        white-space: normal;
    }
    table.validation-signings tbody tr > td:last-child { border-bottom: 0 !important; }
    /* Primera celda (Fecha) = título de la tarjeta */
    table.validation-signings tbody td:first-child {
        position: static !important;
        box-shadow: none !important;
        display: block;
        font-weight: 700;
        font-size: 15px !important;
        color: var(--ink);
        text-align: left;
        background: transparent !important;
        border-bottom: 1px solid var(--line) !important;
        padding: 0 0 var(--sp-2) !important;
        margin-bottom: var(--sp-2);
    }
    table.validation-signings tbody td:first-child::before { content: none; }
    /* Oculta huecos vacíos (entrada/salida sin fichaje, valores 0) */
    table.validation-signings tbody td[data-empty] { display: none !important; }
    /* Botón "+" -> acción "Añadir fichaje" dentro de la tarjeta (clic en la celda
       lanza vm.clickOnCell). Solo aparece cuando el icono + está presente, es
       decir, cuando el trabajador puede crear fichajes. */
    table.validation-signings tbody td.add-cell {
        display: flex !important;
        /* la base fija width:35px!important + overflow:hidden -> recortaba el texto */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--sp-2);
        cursor: pointer;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f2f4f7 !important;
    }
    table.validation-signings tbody td.add-cell::before {
        content: "+ Añadir fichaje";
        color: var(--accent);
        font-weight: 600;
        text-align: left;
        flex: 0 0 auto;
    }
    /* Oculta el md-icon (renderiza el texto "add"); el "+" va en el ::before */
    table.validation-signings tbody td.add-cell md-icon { display: none !important; }
    /* Si la celda "+" está vacía (el trabajador no puede crear fichaje ese día),
       se mantiene oculta. */
    table.validation-signings tbody td.add-cell[data-empty] { display: none !important; }

    /* "Horario" SIEMPRE visible en las tarjetas (aunque ese día no tenga horas) */
    table.validation-signings tbody td[data-label="Horario"] { display: flex !important; }
    table.validation-signings tbody td[data-label="Horario"][data-empty]::after {
        content: "—";
        color: var(--ink-soft);
    }
    /* La campana de avisos es position:absolute (se solapaba con las horas):
       la ponemos EN LÍNEA junto a las horas, más grande y tocable. */
    table.validation-signings tbody td .horario-cell {
        justify-content: flex-end !important;
        gap: var(--sp-2);
        width: auto;
    }
    table.validation-signings tbody td .horario-cell .notification-icon {
        position: static !important;
        left: auto !important;
        font-size: 20px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        cursor: pointer;
    }
    table.validation-signings tbody td .horario-cell .horas { width: auto !important; }
    /* Todas las horas (Diario, Total, Trabajadas, Descanso, T.Extra...) a la
       derecha, en la misma línea que las del Horario. .center-right usa un hack
       (padding-left:50% + translateX(-50%)) que las descuadraba: lo anulamos. */
    table.validation-signings tbody td .center-right {
        width: auto !important;
        padding-left: 0 !important;
        transform: none !important;
        text-align: right !important;
        margin-left: auto !important;
    }

    /* Popover de avisos: en móvil salía a la derecha (clientX+5) y se cortaba.
       Lo anclamos al borde derecho extendiéndose a la izquierda, dentro de
       pantalla, y un backdrop transparente lo cierra al tocar fuera. */
    .notification-popover {
        left: auto !important;
        right: var(--sp-2) !important;
        max-width: 85vw !important;
        width: auto !important;
        z-index: 100000 !important;
    }
    .notification-popover-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 99999;
    }

    /* Selección múltiple de fichajes (HABILITAR SELECCIÓN): el checkbox
       (.signing-checker) es position:absolute en la base y en la tarjeta se
       solapaba con la hora. Aquí lo ponemos EN LÍNEA junto a la hora y táctil. */
    table.validation-signings tbody td .validation-signing-info {
        position: static;
        width: auto;
        height: auto;
        justify-content: flex-end;
        gap: var(--sp-2);
    }
    table.validation-signings tbody td .signing-checker {
        position: static !important;
        left: auto !important;
        display: inline-flex;
        align-items: center;
        padding: 2px;
        cursor: pointer;
    }
    table.validation-signings tbody td .signing-checker md-icon {
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        color: var(--accent) !important;
    }
    /* Iconos a tamaño legible dentro de las tarjetas */
    table.validation-signings md-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}