/* ============================================================
   global.css — Arcow design system
   Palette: Deep Forest #0d3824 · Forest #16573a · Sage #f3f8f4
   Type: DM Sans (Google Fonts, falls back to system sans)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --color-primary:       #16573a;
    --color-primary-dark:  #0d3824;
    --color-primary-light: #eaf4ee;
    --color-danger:        #c0392b;
    --color-danger-light:  #fde8e6;
    --color-success:       #15803d;
    --color-success-light: #dcfce7;
    --color-warning:       #d97706;
    --color-warning-light: #fdf0dc;
    --color-info:          #1d6fa5;
    --color-info-light:    #e3eef7;
    --color-text:          #1a2820;
    --color-text-muted:    #4a6454;
    --color-border:        #c6d9cc;
    --color-bg:            #f3f8f4;
    --color-white:         #ffffff;
    --radius:              5px;
    --shadow-sm:           0 1px 3px rgba(13,56,36,.08), 0 1px 2px rgba(13,56,36,.05);
    --shadow-md:           0 4px 16px rgba(13,56,36,.11), 0 2px 6px rgba(13,56,36,.06);
    --font:                'DM Sans', 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: var(--font);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Las pantallas internas (con cabecera y menú) reservan el carril de la barra
   (scrollbar-gutter: stable) para que nunca se monte sobre el contenido ni el
   ancho cambie al aparecer o desaparecer. Las pantallas de pantalla completa
   sin barras (login, selección, tablet) no lo reservan: como su contenido cabe
   justo en el viewport, el carril vacío se veía como una barra permanente. */
.app-scroll {
    flex: 1;
    overflow-y: auto;
}

.app-scroll-reservado {
    scrollbar-gutter: stable;
}

input, textarea, select {
    font-family: var(--font);
    font-size: 14px;
}

/* ── Inputs ─────────────────────────────────────────────── */
.ui-inputtext,
.ui-password input {
    width: 100% !important;
    padding: 9px 13px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    font-size: 14px !important;
    font-family: var(--font) !important;
    background: var(--color-white) !important;
    transition: border-color .15s ease !important;
    outline: none !important;
}

.ui-inputtext:focus,
.ui-password input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(22,87,58,.13) !important;
}

/* ── Botones (base PrimeFaces override) ──────────────────── */
.ui-button {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    font-weight: 600 !important;
    transition: background .15s ease, border-color .15s ease !important;
}

.ui-button:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* ── Labels ─────────────────────────────────────────────── */
.ui-outputlabel {
    display: block !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

/* ── Mensajes (growl + inline) — fondo blanco sólido + borde grueso de color ──
   info = azul · warn = anaranjado · error/fatal = rojo
   Toda la app usa showSummary="false" showDetail="true": solo cuerpo, sin título. */

.ui-growl {
    top: 16px !important;
    right: 16px !important;
    /* Siempre por delante de todo. PrimeFaces reparte el z-index con un contador
       que empieza en 1000 y sube cada vez que se abre un diálogo, así que el growl
       (que solo lo pide al renderizarse) acababa tapado por cualquier modal, y por
       el siguiente aún más. Con un valor que el contador nunca alcanza, el aviso
       queda encima de los modales y de sus máscaras, se abran los que se abran. */
    z-index: 100000 !important;
}

.ui-growl-item-container {
    background: var(--color-white) !important;
    border-style: solid !important;
    border-width: 5px !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 4px 16px rgba(13,56,36,.16) !important;
    opacity: 1 !important;
    overflow: hidden;
}

.ui-growl-item {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
    padding: 10px 14px !important;
}

.ui-growl-message {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
}

.ui-growl-title {
    display: none !important;
}

.ui-growl-message p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: var(--color-text) !important;
}

.ui-growl-image {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    line-height: 1;
    background: none !important;
}

.ui-growl-image::before {
    font-family: 'primeicons';
    font-size: 20px;
    line-height: 1;
}

.ui-growl-icon-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--color-text-muted) !important;
    opacity: .75 !important;
}

.ui-growl-icon-close:hover {
    opacity: 1 !important;
}

.ui-growl-item-container.ui-growl-info     { border-color: var(--color-info)    !important; }
.ui-growl-item-container.ui-growl-warn     { border-color: var(--color-warning) !important; }
.ui-growl-item-container.ui-growl-error,
.ui-growl-item-container.ui-growl-fatal    { border-color: var(--color-danger)  !important; }

.ui-growl-info .ui-growl-image::before     { content: "\e90a"; color: var(--color-info); }    /* check-circle */
.ui-growl-warn .ui-growl-image::before     { content: "\e922"; color: var(--color-warning); } /* exclamation-triangle */
.ui-growl-error .ui-growl-image::before,
.ui-growl-fatal .ui-growl-image::before    { content: "\e90c"; color: var(--color-danger); }  /* times-circle */

/* p:messages (inline en diálogos y listados) — mismo tratamiento */
.ui-messages-info, .ui-messages-warn, .ui-messages-error, .ui-messages-fatal {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    background: var(--color-white) !important;
    border-style: solid !important;
    border-width: 5px !important;
    border-radius: var(--radius) !important;
    padding: 8px 12px !important;
    margin-bottom: 8px;
}

.ui-messages-info::before, .ui-messages-warn::before,
.ui-messages-error::before, .ui-messages-fatal::before {
    font-family: 'primeicons';
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}

.ui-messages-info .ui-icon, .ui-messages-warn .ui-icon,
.ui-messages-error .ui-icon, .ui-messages-fatal .ui-icon {
    display: none !important;
}

.ui-messages-info-summary, .ui-messages-warn-summary,
.ui-messages-error-summary, .ui-messages-fatal-summary {
    display: none !important;
}

.ui-messages-info-detail, .ui-messages-warn-detail,
.ui-messages-error-detail, .ui-messages-fatal-detail {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
}

.ui-messages-close, .ui-messages-close .ui-icon {
    color: var(--color-text-muted) !important;
    opacity: .75 !important;
}

.ui-messages-close:hover {
    opacity: 1 !important;
}

.ui-messages-info     { border-color: var(--color-info)    !important; }
.ui-messages-warn     { border-color: var(--color-warning) !important; }
.ui-messages-error,
.ui-messages-fatal    { border-color: var(--color-danger)  !important; }

.ui-messages-info::before     { content: "\e90a"; color: var(--color-info); }    /* check-circle */
.ui-messages-warn::before     { content: "\e922"; color: var(--color-warning); } /* exclamation-triangle */
.ui-messages-error::before,
.ui-messages-fatal::before    { content: "\e90c"; color: var(--color-danger); }  /* times-circle */

/* ── Login ───────────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #53A79F;
    padding: 24px;
}

.login-card {
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(13,56,36,.35), 0 4px 16px rgba(13,56,36,.2);
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 36px;
}

.login-logo h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.3px;
}

.login-logo p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-field {
    margin-bottom: 18px;
}

.login-btn .ui-button {
    width: 100% !important;
    padding: 11px !important;
    font-size: 14px !important;
    margin-top: 8px;
    letter-spacing: .02em;
}

.login-olvido {
    text-align: center;
    margin-top: 18px;
}

.login-olvido a {
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-olvido a:hover {
    color: var(--color-primary);
}

.login-field .ui-input-icon-right,
.login-field .ui-password,
.login-field span.ui-inputwrapper {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-field .ui-input-icon-right > input,
.login-field span.ui-inputwrapper > input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Login modo tablet ───────────────────────────────────── */
.tablet-user-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px 0 24px;
}

.tablet-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

.tablet-user-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

/* Usuario de acceso, bajo el nombre real */
.tablet-user-login {
    margin-top: -4px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.no-soy-yo {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Máscara visual de contraseña sin type=password (evita guardar credenciales) */
.tablet-pwd-field {
    -webkit-text-security: disc !important; /* Chrome, Edge, Safari */
}

.no-soy-yo:hover {
    color: var(--color-primary);
}

/* ── Cabecera de la app ──────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #53A79F;
    padding: 0 72px;
    height: 52px;
    box-shadow: 0 2px 8px rgba(13,56,36,.25);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.header-home-link {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.75);
    font-size: 44px;
    text-decoration: none;
    transition: color .15s;
}

.header-home-link:hover {
    color: #ffffff;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-empresa-nombre {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.header-perfil {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 4px;
    padding: 2px 8px;
}

.header-version {
    font-size: 11px;
    color: rgba(255,255,255,.45);
}

.header-gestion-link {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.80) !important;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: var(--radius);
    border: 1.5px solid rgba(255,255,255,.30);
    transition: all .15s;
}

.header-gestion-link:hover {
    background: rgba(255,255,255,.12);
    color: #fff !important;
    border-color: rgba(255,255,255,.50);
}

/* ── Menú desplegable de usuario ─────────────────────────── */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    transition: background .15s;
    white-space: nowrap;
}

.user-menu-trigger:hover {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}

.user-menu-trigger .pi-chevron-down {
    font-size: 10px;
    opacity: .65;
}

.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    z-index: 1100;
    overflow: hidden;
}

.user-menu.open .user-menu-dropdown {
    display: block;
}

.user-menu-header-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 11px;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-border);
    pointer-events: none;
}

.user-menu-header-item .pi {
    font-size: 16px;
    color: var(--color-primary);
}

.user-menu-form {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.user-menu-item.ui-button {
    display: flex !important;
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--color-text) !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    box-shadow: none !important;
    transition: background .12s !important;
}

.user-menu-item.ui-button:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

.user-menu-separator {
    height: 1px;
    background: var(--color-border);
    margin: 2px 0;
}

.user-menu-item-danger.ui-button {
    color: var(--color-danger) !important;
}

.user-menu-item-danger.ui-button:hover {
    background: var(--color-danger-light) !important;
    color: var(--color-danger) !important;
}

/* ── Selección de empresa / perfil ───────────────────────── */
.seleccion-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #53A79F;
    padding: 24px;
}

.seleccion-card {
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(13,56,36,.35), 0 4px 16px rgba(13,56,36,.2);
    padding: 48px 40px;
    width: 100%;
    max-width: 520px;
}

.seleccion-header {
    text-align: center;
    margin-bottom: 32px;
}

.seleccion-titulo {
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.seleccion-subtitulo {
    font-size: 13px;
    color: var(--color-text-muted);
}

.seleccion-empresa-badge {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
}

.opciones-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opciones-grid .ui-button,
.opcion-btn {
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    background: var(--color-white) !important;
    border: 1.5px solid var(--color-border) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius) !important;
    transition: all .15s ease !important;
    justify-content: flex-start !important;
}

.opciones-grid .ui-button:hover,
.opcion-btn:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ── Barra de menú de navegación ─────────────────────────── */
.app-nav {
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    border-bottom: 1px solid var(--color-border);
    padding: 0 72px;
    display: flex;
    align-items: center;
}

/* Botón "Menú" (hamburguesa): solo visible en móvil/tablet */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}
.nav-toggle .pi-bars {
    font-size: 18px;
}
.app-nav-collapse {
    width: 100%;
}
/* Cabecera del overlay móvil: no existe en escritorio */
.nav-overlay-header {
    display: none;
}

.app-menubar.ui-menubar,
.app-nav .app-menubar.ui-menubar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    display: block !important;
}

.app-menubar .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link {
    padding: 11px 16px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s, background .15s !important;
    white-space: nowrap !important;
}

.app-menubar .ui-menubar-root-list > .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
.app-menubar .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link:hover {
    background: var(--color-primary-light) !important;
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary-dark) !important;
}

/* Solo el ul raíz (hijo directo): sin fondo ni borde */
.app-menubar > .ui-menu-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Dropdowns: ui-menu-child es la clase real que usa PrimeFaces para anidados */
.app-menubar .ui-submenu-list,
.app-menubar .ui-menu-child {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-md) !important;
    min-width: max-content !important;
    padding: 4px 0 !important;
}

.app-menubar .ui-menu-list .ui-menuitem-link,
.app-menubar .ui-submenu-list .ui-menuitem-link,
.app-menubar .ui-menu-child .ui-menuitem-link {
    padding: 8px 24px 8px 12px !important;
    font-size: 13px !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.app-menubar .ui-menu-list .ui-menuitem-link:hover,
.app-menubar .ui-submenu-list .ui-menuitem-link:hover,
.app-menubar .ui-menu-child .ui-menuitem-link:hover,
.app-menubar .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
.app-menubar .ui-submenu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link,
.app-menubar .ui-menu-child .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

/* ── Módulo de gestión ───────────────────────────────────── */
.gestion-content {
    padding: 28px 48px 48px;
    box-sizing: border-box;
}

.gestion-subnav {
    display: flex;
    gap: 2px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.subnav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1.5px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color .15s;
}

.subnav-link:hover {
    color: var(--color-primary);
}

.subnav-activo {
    color: var(--color-primary) !important;
    background: var(--color-white);
    border-color: var(--color-border);
    border-bottom-color: var(--color-white);
    font-weight: 600;
}

.gestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.gestion-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -.2px;
}

.btn-nuevo {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
}

.pro-tabla-wrap {
    position: relative;
}

/* Diálogo búsqueda de operario: flex column para que solo scrolle la tabla
   y el footer (Cerrar) siempre quede visible, igual que en los demás modales. */
.dlg-operario-buscar .ui-dialog-content {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}
.dlg-operario-buscar .ui-dialog-content > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dlg-operario-buscar .ui-dialog-content > form > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dlg-operario-buscar .pro-tabla-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.dlg-operario-buscar .gestion-table {
    min-width: unset;
}
.dlg-operario-buscar .dlg-footer {
    position: static !important;
    bottom: auto !important;
    flex-shrink: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.dlg-tabla-seleccionable .ui-datatable-data tr {
    cursor: pointer;
}
.dlg-tabla-seleccionable .ui-datatable-data tr:hover td {
    background-color: var(--color-hover) !important;
}

.pro-filas-bar {
    position: absolute;
    right: 4px;
    top: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-filas-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.pro-filas-select.ui-selectonemenu {
    width: 90px !important;
}

.gestion-table {
    width: 100%;
    min-width: 1280px;
    table-layout: fixed;
}

/* ── Paginador (procesos.xhtml y similares) ─────────────── */
.ui-paginator {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    padding: 0 110px 0 0 !important;
    background: var(--color-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.ui-paginator .ui-paginator-current {
    font-size: 12px !important;
    color: var(--color-text-muted) !important;
    margin: 0 10px !important;
    border: none !important;
    background: transparent !important;
}

.ui-paginator a.ui-paginator-first,
.ui-paginator a.ui-paginator-prev,
.ui-paginator a.ui-paginator-next,
.ui-paginator a.ui-paginator-last,
.ui-paginator .ui-paginator-pages a,
.ui-paginator .ui-paginator-pages span.ui-paginator-page {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-white) !important;
    color: var(--color-text) !important;
    font-size: 12px !important;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.ui-paginator a:hover {
    border-color: #53A79F !important;
    color: #53A79F !important;
    background: var(--color-info-light) !important;
}

.ui-paginator .ui-state-active {
    background: #53A79F !important;
    border-color: #53A79F !important;
    color: #fff !important;
}

.ui-paginator .ui-state-disabled {
    opacity: .35 !important;
    cursor: default !important;
    pointer-events: none;
}

/* Exportación compacta: Excel y PDF viven en el extremo izquierdo del
   paginador de cualquier listado exportable. */
.exportable-table .ui-paginator {
    position: relative;
    padding-left: 0 !important;
}
.exportable-table .ui-paginator-top-left-content {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.paginator-export-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.paginator-export-button.ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
}
.paginator-export-button .ui-button-icon-left {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.paginator-export-button .ui-button-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.paginator-export-button:not(.paginator-export-pdf).ui-button {
    color: #217346 !important;
    border-color: #217346 !important;
    background: var(--color-white) !important;
}
.paginator-export-button:not(.paginator-export-pdf).ui-button:hover {
    color: #185c37 !important;
    border-color: #185c37 !important;
    background: var(--color-white) !important;
}
.paginator-export-pdf.ui-button {
    color: #c0392b !important;
    border-color: #c0392b !important;
    background: var(--color-white) !important;
}
.paginator-export-pdf.ui-button:hover {
    color: #962d22 !important;
    border-color: #962d22 !important;
    background: var(--color-white) !important;
}
.paginator-export-pdf.ui-button.ui-state-disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}
@media (max-width: 1024px) {
    .exportable-table .ui-paginator.ui-paginator-top {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 6px 82px 6px 82px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }
    .exportable-table .ui-paginator.ui-paginator-top::-webkit-scrollbar {
        display: none;
    }
    .exportable-table .ui-paginator .ui-paginator-current {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin: 0 6px !important;
    }
}

.col-acciones {
    width: 8.5%;
    text-align: left !important;
    white-space: nowrap;
}

.col-estado {
    width: 5.5%;
    text-align: center !important;
}

.col-fecha {
    width: 6.5%;
}

.col-empresas {
    width: 19.5%;
}

.col-perfiles {
    width: 10.5%;
}

.col-login {
    width: 10%;
}

.col-nombre {
    width: 12.5%;
}

.col-email {
    width: 12.5%;
}

.btn-accion {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-info) !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
    font-size: 12px !important;
}

.btn-accion:hover {
    background: var(--color-info-light) !important;
    border-color: var(--color-info) !important;
    color: var(--color-info) !important;
}

.btn-accion.btn-danger {
    color: var(--color-danger) !important;
}

.btn-accion.btn-danger:hover {
    background: var(--color-danger-light) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

.btn-accion.btn-success:hover {
    background: var(--color-success-light) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success) !important;
}

.badge-activo {
    display: inline-block;
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-inactivo {
    display: inline-block;
    background: var(--color-danger-light);
    color: var(--color-danger);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Diálogos de gestión ─────────────────────────────────── */
.ui-dialog {
    max-height: 90vh !important;
}

.ui-dialog .ui-dialog-content {
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    max-height: calc(90vh - 55px) !important;
    padding-bottom: 0 !important;
}

.confirm-dialog .ui-dialog-content {
    padding-bottom: 1em !important;
}

/* Sin las rayas que el tema pinta encima y debajo del mensaje de confirmación.
   Se cubren las tres piezas (título, contenido y pie de botones) y las dos
   clases posibles del diálogo, porque el borde lo puede poner cualquiera. */
.confirm-dialog .ui-dialog-titlebar,
.ui-confirm-dialog .ui-dialog-titlebar {
    border-bottom: 0 none !important;
}
.confirm-dialog .ui-dialog-content,
.ui-confirm-dialog .ui-dialog-content {
    border: 0 none !important;
}
.confirm-dialog .ui-dialog-footer,
.confirm-dialog .ui-dialog-buttonpane,
.ui-confirm-dialog .ui-dialog-footer,
.ui-confirm-dialog .ui-dialog-buttonpane {
    border-top: 0 none !important;
    border-width: 0 !important;
}

/* El tema de PrimeFaces trae su propia tipografía para el confirmDialog global
   (no pasa por .ui-inputtext/.ui-button, que son los que ya fuerzan --font):
   se iguala aquí a la del resto de la app. */
.confirm-dialog,
.ui-confirm-dialog {
    font-family: var(--font) !important;
}
.confirm-dialog .ui-dialog-title,
.ui-confirm-dialog .ui-dialog-title {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.pro-icon-upload-wrap {
    position: relative;
    flex: 1;
    height: 38px;
}

/* skinSimple="true" envuelve el input real en su propio span.ui-button (botón "Choose"
   nativo, sin estilo). Ese span es un contexto de posicionamiento propio: hay que
   neutralizarlo para que el input absolute se estire contra .pro-icon-upload-wrap entero
   y no solo contra el tamaño pequeño del botón. */
.pro-icon-upload-wrap .ui-fileupload-simple,
.pro-icon-upload-wrap .ui-button {
    position: static !important;
    display: contents;
}

/* Input real encima, invisible, capta el clic; el botón visible es nuestro. */
.pro-icon-upload-wrap input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.pro-icon-upload-fake {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    z-index: 1;
}

.pro-icon-upload-wrap:hover .pro-icon-upload-fake {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.dlg-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--color-white) !important;
    z-index: 1 !important;
    border-top: 1px solid var(--color-border) !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
    margin-top: 8px !important;
}

.dlg-mensajes {
    margin-bottom: 12px !important;
}

.dlg-mensajes:empty {
    display: none !important;
}

.pro-perfiles-check .ui-chkbox-label {
    font-size: 13px !important;
}
.pro-perfiles-check .ui-selectmanycheckbox td {
    padding: 4px 8px 4px 0 !important;
}

.pro-filtro-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pro-filtro-input {
    padding-left: 2rem !important;
    width: 240px !important;
}

.dlg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 8px 0 16px;
}

/* Errores de validación solo en p:messages, sin borde rojo en los campos */
.dlg-grid .ui-inputfield.ui-state-error,
.dlg-grid .ui-selectonemenu.ui-state-error,
.dlg-grid .ui-selectonemenu.ui-state-error .ui-selectonemenu-label,
.dlg-grid .ui-toggleswitch.ui-state-error {
    border-color: var(--color-border) !important;
    box-shadow: none !important;
    background-image: none !important;
}

.dlg-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dlg-field-full {
    grid-column: 1 / -1;
}

.w-full {
    width: 100% !important;
}

.dlg-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.btn-guardar {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-size: 13px !important;
}

.btn-cancelar {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    font-size: 13px !important;
}

.btn-cancelar:hover {
    background: var(--color-bg) !important;
    border-color: var(--color-text-muted) !important;
}

/* Confirm dialogs: Sí = rojo, No = transparente */
.ui-confirmdialog-yes.ui-button,
.ui-confirmdialog-yes {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
    font-size: 13px !important;
}
.ui-confirmdialog-yes.ui-button:hover,
.ui-confirmdialog-yes:hover {
    background: #9c2d20 !important;
    border-color: #9c2d20 !important;
}
.ui-confirmdialog-no.ui-button,
.ui-confirmdialog-no {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    font-size: 13px !important;
}
.ui-confirmdialog-no.ui-button:hover,
.ui-confirmdialog-no:hover {
    background: var(--color-bg) !important;
    border-color: var(--color-text-muted) !important;
}

/* ── Páginas de contenido ────────────────────────────────── */
.page-content {
    padding: 32px;
}

.table-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.ui-datatable .ui-datatable-header {
    background: var(--color-primary) !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    color: white !important;
}

.ui-datatable thead th {
    background: #53A79F !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-right: 1px solid rgba(255,255,255,.2) !important;
    border-bottom: 1.5px solid #3d8a82 !important;
}

.ui-datatable thead th:last-child {
    border-right: none !important;
}

.fav-table.ui-datatable thead th {
    border-right: none !important;
}
.fav-table {
    min-width: unset;
}

.ui-datatable tbody td {
    font-size: 13px !important;
    border-color: var(--color-border) !important;
    border-bottom: 1px solid rgba(13,56,36,.16) !important;
    padding: 10px 16px !important;
}

.ui-datatable tbody tr:hover td {
    background: var(--color-info-light) !important;
}

.ui-datatable tbody tr.ui-state-highlight td {
    background: #cfe3f0 !important;
    color: var(--color-text) !important;
}

/* ── Página Menú/Perfil ─────────────────────────────────── */

.menu-header-bar {
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--color-border);
    border-radius: 0;
    padding: 2px 0 18px;
    margin-bottom: 28px;
    text-align: left;
}

.menu-header-text {
    border-left: 3px solid var(--color-primary);
    padding-left: 14px;
}

.menu-header-titulo {
    font-size: 21px;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0;
    letter-spacing: -.3px;
    line-height: 1.25;
}

.menu-header-subtitulo {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 4px 0 0;
    letter-spacing: .1px;
}

.menu-header-bar form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* En el listado de vacaciones la tabla visible no es PrimeFaces: sus dos
   exportadores permanecen en la cabecera y, en móvil, comparten fila con el
   título para no dejar un hueco vertical innecesario. */
.vac-listado-header .menu-header-text {
    min-width: 0;
}
@media (max-width: 1024px) {
    .vac-listado-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .vac-listado-header .menu-header-text {
        flex: 1 1 auto;
    }
    .vac-listado-header form {
        position: static;
        transform: none;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        justify-content: flex-end;
    }
    .vac-listado-header .menu-header-titulo,
    .vac-listado-header .menu-header-subtitulo {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

button.btn-guardar-config,
button.btn-guardar-config.ui-button {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

button.btn-guardar-config:hover,
button.btn-guardar-config.ui-button:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* ── Sección fake-fieldset ─────────────────────────────── */
.menu-section {
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    padding-top: 0;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}

.menu-section-legend {
    display: block;
    margin: 0 -20px 14px -20px;
    padding: 9px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    border-bottom: 1.5px solid var(--color-border);
    white-space: nowrap;
}

.menu-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.menu-col-perfil {
    flex: 0 0 200px;
    min-width: 0;
}

.menu-col-config {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mn-procesos-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

button.mn-btn-flecha,
button.mn-btn-flecha.ui-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    padding: 0 !important;
    box-shadow: var(--shadow-sm) !important;
}

button.mn-btn-flecha:hover,
button.mn-btn-flecha.ui-button:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.mn-nodo {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 1px 0;
}

.mn-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

/* p:selectOneMenu filter input — icono lupa ocupa ~1.8rem, dar padding */
.ui-selectonemenu-filter-container .ui-selectonemenu-filter {
    padding-left: 1.8rem !important;
}

.ui-selectonelistbox {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    font-size: 12px !important;
    display: flex !important;
    flex-direction: column !important;
}

.ui-selectonelistbox .ui-selectlistbox-filter-container {
    flex-shrink: 0 !important;
}

.ui-selectonelistbox .ui-selectlistbox-listcontainer {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

.ui-selectonelistbox .ui-selectlistbox-item {
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: var(--color-text-muted) !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--color-bg) !important;
}

.ui-selectonelistbox .ui-selectlistbox-item:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

.ui-selectonelistbox .ui-state-highlight {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-color: transparent !important;
}

.mn-contexto {
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-info-light);
    border-left: 3px solid var(--color-info);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 5px 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mn-contexto strong {
    color: var(--color-info);
}

/* ── Árbol — override PrimeFaces ─────────────────────────── */
.ui-tree {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.ui-treenode-label {
    width: 100% !important;
}

.ui-treenode-content {
    border-radius: 4px !important;
    padding: 3px 6px !important;
}

.ui-treenode-content:hover {
    background: var(--color-primary-light) !important;
}

.ui-treenode-content .ui-treenode-label {
    cursor: grab !important;
}

.ui-tree .ui-treenode.ui-treenode-dragover > .ui-treenode-content {
    background: var(--color-primary-light) !important;
    outline: 2px dashed var(--color-primary) !important;
    border-radius: 4px !important;
}

.ui-treenode-content.ui-state-highlight {
    background: var(--color-primary-light) !important;
    color: var(--color-text) !important;
    border-color: transparent !important;
}

/* ── Diferenciación contenedor / proceso ─────────────── */

/* Contenedor: verde oscuro + bold */
.mn-tipo-contenedor {
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* Toggle de árbol en color primario */
#arbolMenu .ui-tree-toggler {
    color: var(--color-primary) !important;
    opacity: 0.8;
}

/* ── Página de inicio ─────────────────────────────────── */
.welcome-msg {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text);
    margin: 12px 48px 28px;
}

/* ── Panel de favoritos (index.xhtml) ────────────────── */
.fav-panel {
    margin: 0 48px;
}

.fav-panel-legend {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.fav-panel .fav-bar {
    min-height: 160px;
}

.fav-btn-gestionar.ui-button {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-info) !important;
    font-size: 13px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: var(--radius) !important;
}

.fav-btn-gestionar.ui-button:enabled:hover {
    background: var(--color-info-light) !important;
    border-color: var(--color-info) !important;
    color: var(--color-info) !important;
}

/* Cabecera de columna del diálogo de favoritos: etiqueta + buscador en la misma fila */
.fav-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 36px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.fav-busqueda-wrap {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.fav-busqueda-wrap .pro-filtro-input {
    width: 140px !important;
    height: 28px !important;
    font-size: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fav-quitar-btn.ui-button {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-muted) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

.fav-quitar-btn.ui-button:enabled:hover {
    background: var(--color-danger-light, #fee2e2) !important;
    color: var(--color-danger, #dc2626) !important;
}

.fav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 96px;
    width: 100%;
}

.fav-empty {
    font-size: 13px;
    color: var(--color-text-muted);
}

.fav-item,
.fav-item:hover,
.fav-item:focus,
.fav-item:active,
.fav-item:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 150px;
    text-decoration: none !important;
}

.fav-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.fav-avatar-img {
    object-fit: cover;
}

.fav-avatar-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.fav-label {
    font-size: 11px;
    text-align: center;
    color: var(--color-text);
    line-height: 1.25;
}


/* ── Gestión Fichajes: acordeón por usuario ─────────────── */

/* La tabla dentro del acordeón no necesita min-width fijo */
.ui-panel .gestion-table {
    min-width: unset;
}

/* Panel con sesión rota: borde izquierdo rojo */
.panel-alerta-rota > .ui-panel-titlebar {
    border-left: 4px solid var(--color-danger) !important;
    background: var(--color-danger-light) !important;
}

/* Panel sin fichar hoy: borde izquierdo naranja */
.panel-alerta-warn > .ui-panel-titlebar {
    border-left: 4px solid var(--color-warning) !important;
    background: var(--color-warning-light) !important;
}

/* ── Sección de incidencias de fichajes ─────────────────── */
.fich-incidencias {
    border: 1px solid var(--color-danger);
    border-radius: 6px;
    margin-bottom: 16px;
    background: var(--color-danger-light);
    overflow: hidden;
}
.fich-incidencias-titulo {
    background: var(--color-danger);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fich-incidencias-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fich-inc-seccion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fich-inc-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fich-inc-label-danger { color: var(--color-danger); }
.fich-inc-label-warn   { color: var(--color-warning); }
.fich-inc-table,
.fich-modal-table {
    min-width: unset !important;
}
/* Alerta ya justificada: fondo verde claro para distinguirla de las pendientes */
.fich-modal-table tr.fila-justificada > td {
    background: var(--color-success-light) !important;
}
/* Fuerza inputs dentro de tablas de incidencias a no desbordar la celda */
.fich-modal-table td {
    overflow: hidden;
}
.fich-modal-table td .ui-inputtext,
.fich-modal-table td .ui-inputfield,
.fich-modal-table td .ui-datepicker,
.fich-modal-table td .ui-inputwrapper,
.fich-modal-table td .ui-selectonemenu,
.fich-modal-table td input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* La celda de acciones no debe recortarse por el overflow:hidden de arriba
   (pensado para inputs); el botón de quitar quedaba cortado. */
.fich-modal-table td.col-acciones {
    overflow: visible;
    white-space: nowrap;
}

/* Tablas del calendario del convenio: las dos van lado a lado, así que sus
   columnas tienen que medir lo mismo tenga filas o no (con table-layout auto
   el ancho lo decide el contenido y una queda descuadrada respecto a la otra). */
.vac-cal-table table {
    table-layout: fixed;
    width: 100%;
}

/* ── Agrupación visual por fecha en dtOverview (sin headerRow) ───── */
/* Fila inicio de grupo: borde superior marcado para separar grupos */
.inci-grupo-inicio td { border-top: 2px solid var(--color-border) !important; }
/* La columna de fecha se ve como el lomo del grupo: fondo propio y sin líneas internas */
.inci-fecha-col { background: #f7f8f9 !important; }
/* La fecha actúa sobre el día entero: sin línea entre filas del mismo día
   (efecto rowspan). El corte entre días lo marca el borde de .inci-grupo-inicio.
   Las acciones sí son de cada fila, así que conservan su separador. */
.inci-fecha-col { border-bottom: none !important; }
/* Fila continuación de grupo: sin borde superior en la celda de fecha (efecto rowspan) */
.inci-grupo-cont .inci-fecha-col { border-top: none !important; }
/* .fich-modal-table td recorta con overflow:hidden (pensado para inputs); en la
   celda de acciones eso escondía el tercer botón. */
.inci-acc-col { overflow: visible !important; white-space: nowrap; }

/* ── Modal detalle fichajes: barra de filtros rápidos ───── */
/* flex-wrap: en móvil los tres botones de la derecha (Horario, Vacaciones,
   Nuevo fichaje) no caben en la fila y se salían del diálogo, que los recorta;
   envolviendo bajan a una segunda línea y siguen visibles. */
.fich-modal-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}
.fich-modal-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.fich-modal-acciones {
    display: flex;
    gap: 6px;
}
.btn-filtro-modal.ui-button {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
}
.btn-filtro-modal.ui-button:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.btn-filtro-activo.ui-button,
.btn-filtro-activo.ui-button:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Ocultar el badge numérico de prioridad de orden (multi-sort) en las cabeceras */
.gestion-table .ui-sortable-column-badge {
    display: none !important;
}

/* ── Chips del resumen del día (clicables, filtran la tabla por tipo de alerta) ── */
.chip-resumen.ui-button {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
}
/* Mismos colores que p:tag del tema (ui-tag-danger/warning/success) para homogeneidad */
.chip-resumen.chip-danger.ui-button   { background: #d32f2f !important; color: #fff !important; }
.chip-resumen.chip-warning.ui-button  { background: #fbc02d !important; color: #212529 !important; }
.chip-resumen.chip-success.ui-button  { background: #689f38 !important; color: #fff !important; }
.chip-resumen.ui-button:hover         { filter: brightness(0.92); }
/* Chip activo (filtro aplicado): anillo alrededor del chip */
.chip-resumen.chip-activo.chip-danger.ui-button  { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d32f2f !important; }
.chip-resumen.chip-activo.chip-warning.ui-button { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b48b00 !important; }
.chip-resumen.chip-activo.chip-success.ui-button { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #689f38 !important; }

/* Aviso de filtro por chip activo + botón de quitar */
.chip-filtro-aviso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    padding-left: 4px;
}
.chip-resumen.chip-limpiar.ui-button {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}
.chip-resumen.chip-limpiar.ui-button:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ── Banner de estado del día dentro del modal de detalle ── */
.fich-banner {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 0 2px 10px;
    border: 1px solid transparent;
}
/* Colores alineados con los p:tag del tema (danger #d32f2f, warning #fbc02d, success #689f38) */
.fich-banner-danger  { background: #fde8e8; color: #d32f2f; border-color: #f5c2c2; }
.fich-banner-warning { background: #fef3c7; color: #8a6d00; border-color: #fde68a; }
.fich-banner-success { background: #ebf3e3; color: #4e7a29; border-color: #cde3b8; }

/* ── DatePicker del toolbar de filtros: icono pegado al input ── */
.btn-filtro-fecha.ui-calendar.ui-inputwrapper {
    display: inline-flex !important;
    align-items: stretch;
    vertical-align: middle;
}
.btn-filtro-fecha .ui-inputfield {
    width: 120px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.btn-filtro-fecha .ui-datepicker-trigger.ui-button {
    flex-shrink: 0;
    align-self: stretch;
    height: auto !important;
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ── Modal detalle fichajes: layout flex altura fija ─────── */
.dlg-fichajes-detalle .ui-dialog-content {
    height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.fich-detalle-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.fich-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* La barra de scroll se lleva su propio carril en vez de montarse sobre
       la tabla, que si no tapa la última columna (acciones). */
    scrollbar-gutter: stable;
}
.fich-detalle-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

/* ── Mensajes de validación dentro de diálogos ──────────── */
.dlg-msgs {
    margin: 8px 0 0 !important;
}
.dlg-msgs .ui-messages-error,
.dlg-msgs .ui-messages-warn {
    margin: 0 !important;
}

/* ── p:message inline (debajo de campo) ─────────────────── */
.ui-message {
    display: block;
    margin-top: 4px;
}
.ui-message-error-detail { font-size: 12px; font-weight: 500; color: var(--color-danger); }
.ui-message-warn-detail  { font-size: 12px; font-weight: 500; color: var(--color-warning); }
.ui-message-info-detail  { font-size: 12px; font-weight: 500; color: var(--color-info); }
.ui-message-error-icon,
.ui-message-warn-icon,
.ui-message-info-icon {
    display: none;
}
/* Borde rojo en el input cuando tiene error */
.ui-state-error.ui-inputfield,
.ui-inputfield.ui-state-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 1px var(--color-danger) !important;
}

.dlg-field-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Un p:message sin mensaje no debe reservar espacio (deja huecos en los diálogos) */
.gestion-dialog .ui-message:empty {
    display: none;
}

/* ── DatePicker: icono pegado al input (input-group) ─────── */
.gestion-dialog .dlg-field .ui-calendar.ui-inputwrapper {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.gestion-dialog .dlg-field .ui-calendar .ui-inputfield {
    flex: 1;
    min-width: 0;
    width: auto !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.gestion-dialog .dlg-field .ui-datepicker-trigger.ui-button {
    flex-shrink: 0;
    align-self: stretch;
    height: auto !important;
    margin: 0 !important;
    top: -1px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ── DatePicker: panel compacto ──────────────────────────── */
.ui-datepicker-panel {
    min-width: 230px !important;
}
.ui-datepicker-panel .ui-datepicker-header {
    padding: 4px 8px !important;
    font-size: 13px !important;
}
.ui-datepicker-panel .ui-datepicker-calendar {
    margin: 0 6px 4px !important;
    font-size: 12px !important;
}
.ui-datepicker-panel .ui-datepicker-calendar th,
.ui-datepicker-panel .ui-datepicker-calendar td {
    padding: 1px !important;
}
.ui-datepicker-panel .ui-datepicker-calendar td > a,
.ui-datepicker-panel .ui-datepicker-calendar td > span {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 !important;
    text-align: center !important;
}
.ui-datepicker-panel .ui-timepicker {
    padding: 4px 0 8px !important;
    font-size: 13px !important;
}
.ui-datepicker-panel .ui-timepicker .ui-separator {
    padding: 0 2px !important;
}

/* ── DatePicker compacto forzado (panelStyleClass="dp-compacto") ── */
.dp-compacto {
    width: auto !important;
    min-width: 240px !important;
    max-width: 260px !important;
}
.dp-compacto .ui-datepicker-calendar {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 12px !important;
    margin: 0 !important;
}
.dp-compacto .ui-datepicker-calendar th,
.dp-compacto .ui-datepicker-calendar td {
    padding: 1px !important;
    text-align: center !important;
}
.dp-compacto .ui-datepicker-calendar td > a,
.dp-compacto .ui-datepicker-calendar td > span {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
}
.dp-compacto .ui-datepicker-header {
    padding: 4px 6px !important;
    font-size: 13px !important;
}

/* ============================================================
   RESPONSIVE — el escritorio se mantiene idéntico; por debajo
   de cada breakpoint los elementos se reajustan de forma
   razonable sin cambiar de sitio en pantallas grandes.
   ============================================================ */

/* ── Tablas anchas: scroll horizontal local en lugar de
   desbordar la página (que tiene overflow:hidden en body) ── */
.ui-datatable-tablewrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Tablet / pantallas medianas (≤ 1024px) ──────────────── */
@media (max-width: 1024px) {
    /* El icono de la casa va en absoluto: el padding izquierdo debe
       reservarle sitio o el nombre de la empresa se le monta encima. */
    .app-header {
        padding-left: 56px;
        padding-right: 32px;
    }
    .header-home-link {
        left: 14px;
        font-size: 36px;
    }

    /* ── Menú de navegación: acordeón vertical (táctil) ──────
       En escritorio es una barra horizontal con desplegables
       flotantes. En tablet/móvil esos desplegables se recortaban
       o quedaban ocultos, así que aquí el menú se apila en vertical
       y cada opción se expande en línea (acordeón), sin recortes. */
    .app-nav {
        padding: 0;
        overflow: visible;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    /* Se muestra el botón "Menú"; el menú queda oculto hasta pulsarlo */
    .nav-toggle {
        display: flex;
    }
    /* Overlay a pantalla completa (patrón off-canvas) */
    .app-nav-collapse {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: var(--color-white);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .app-nav.open .app-nav-collapse {
        display: block;
    }
    /* Bloquea el scroll del fondo mientras el overlay está abierto */
    body.nav-abierto {
        overflow: hidden;
    }

    .nav-overlay-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
        position: sticky;
        top: 0;
        background: var(--color-white);
        z-index: 1;
    }
    .nav-overlay-titulo {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
    }
    .nav-overlay-cerrar {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: transparent;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        font-family: var(--font);
        font-size: 14px;
        color: var(--color-text);
        cursor: pointer;
    }

    /* Todas las listas del menú (raíz y submenús de cualquier nivel) en
       bloque y a ancho completo: nada flota ni se posiciona a la derecha. */
    .app-nav .app-menubar,
    .app-nav .app-menubar ul {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
        overflow: visible !important;
    }
    .app-nav .app-menubar li {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }
    /* Acordeón: los submenús sólo se ven si su opción padre está activa.
       PrimeFaces los abre con display inline; el !important manda. */
    .app-nav .app-menubar ul.ui-menu-child,
    .app-nav .app-menubar ul.ui-submenu-list {
        display: none !important;
        background: var(--color-bg) !important;
    }
    .app-nav .app-menubar li.ui-menuitem-active > ul.ui-menu-child,
    .app-nav .app-menubar li.ui-menuitem-active > ul.ui-submenu-list {
        display: block !important;
    }
    /* Cada opción: fila completa, texto a la izq. y flecha a la der. */
    .app-nav .app-menubar .ui-menuitem > .ui-menuitem-link,
    .app-nav .app-menubar .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
        white-space: normal !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    /* Sangría por nivel */
    .app-nav .app-menubar .ui-menu-child > .ui-menuitem > .ui-menuitem-link {
        padding-left: 32px !important;
    }
    .app-nav .app-menubar .ui-menu-child .ui-menu-child > .ui-menuitem > .ui-menuitem-link {
        padding-left: 48px !important;
    }
    /* Contenedores (opciones con submenú) en negrita: solo en vertical */
    .app-nav .app-menubar li.ui-menu-parent > .ui-menuitem-link {
        font-weight: 700 !important;
    }
    .app-nav .app-menubar li.ui-menuitem:has(> ul) > .ui-menuitem-link {
        font-weight: 700 !important;
    }
    /* La flecha del desplegable, siempre pegada al borde derecho */
    .app-nav .app-menubar .ui-submenu-icon {
        margin-left: auto !important;
        position: static !important;
    }

    /* ── Tablas: cada fila pasa a ficha vertical ──────────────
       Con reflow="true" PrimeFaces ya pinta el nombre de la columna
       delante de cada valor, pero solo apila por debajo de 640px;
       aquí se adelanta a 1024 para que en tablet la tabla tampoco
       se salga de su contenedor ni haga scroll horizontal. */
    .ui-datatable-reflow thead th,
    .ui-datatable-reflow tfoot td {
        display: none !important;
    }
    .gestion-table {
        min-width: 0 !important;
        table-layout: auto !important;
    }
    /* Las listas de favoritos no se apilan: mantienen el reparto fijo de
       columnas (iconos estrechos, descripción con todo el ancho sobrante). */
    .gestion-table.fav-table {
        table-layout: fixed !important;
    }
    /* Cabecera como una única franja: sin separaciones entre celdas y con el
       título sacado del flujo y estirado sobre toda la fila, de modo que queda
       centrado respecto a la tabla entera y no respecto a su columna. */
    .fav-table thead tr {
        position: relative;
    }
    /* Sin separación entre celdas: las rayas blancas eran el hueco que deja
       border-collapse: separate, no un borde. */
    .fav-table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }
    .fav-table thead th {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        height: 40px;
    }
    .fav-table thead th .ui-column-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        white-space: nowrap;
    }
    .ui-datatable-reflow .ui-datatable-data > tr {
        display: block;
        background: var(--color-white);
        border: 1px solid var(--color-border) !important;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        display: flex !important;
        gap: 10px;
        align-items: baseline;
        float: none;
        clear: both;
        /* !important: hay columnas con anchos en línea (style="width:80px")
           que apiladas dejarían la celda estrecha y el valor encima de la etiqueta */
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
        /* !important: gana a las columnas centradas (col-estado, col-acciones...),
           que apiladas deben leerse alineadas a la izquierda como el resto */
        text-align: left !important;
        padding: 8px 12px !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    .ui-datatable-reflow .ui-datatable-data > tr > td:last-child {
        border-bottom: none !important;
    }
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
        display: inline-block !important;
        flex: 0 0 34%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--color-text-muted);
    }
    /* Desplegable de ordenación que PrimeFaces muestra al apilar */
    .ui-datatable-reflow .ui-reflow-label,
    .ui-datatable-reflow .ui-reflow-dropdown {
        display: inline-block;
    }

    /* Paginador + "filas por página" comparten fila, igual que en escritorio:
       el desplegable queda anclado arriba a la derecha (sin la etiqueta, que
       no cabe) y el paginador usa el espacio restante, envolviendo si hace falta. */
    .pro-filas-bar {
        right: 0;
        height: 44px;
    }
    .pro-filas-label {
        display: none;
    }
    .pro-filas-select.ui-selectonemenu {
        width: 74px !important;
    }
    .ui-paginator {
        padding: 6px 82px 6px 0 !important;
        height: auto !important;
        min-height: 44px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    /* El resumen "x a y de z" ocupa su propia línea */
    .ui-paginator .ui-paginator-current {
        flex: 0 0 100%;
        margin: 0 0 4px !important;
    }

    /* Barra de filtros de gestión: el botón de acción (p.ej. "Todas las
       alertas") lleva margin-left:auto para ir a la derecha en escritorio.
       Al envolver a su propia línea en tablet/móvil ese auto lo dejaba
       colgando a la derecha; aquí se alinea a la izquierda como el resto. */
    .pro-filtro-bar .btn-nuevo {
        margin-left: 0 !important;
    }

    /* PRUEBA (tabla de horario sin reflow): mantiene la rejilla de escritorio
       en móvil/tablet. Reparto fijo de columnas y texto compacto para que las
       5 columnas quepan sin scroll horizontal. */
    #dlgHorario .gestion-table {
        table-layout: fixed !important;
        font-size: 11px;
    }
    #dlgHorario .gestion-table th,
    #dlgHorario .gestion-table td {
        padding: 6px 3px !important;
        word-break: break-word;
    }
    #dlgHorario .gestion-table .ui-column-title {
        font-size: 10px;
        white-space: normal;
    }

    /* Modal detalle fichajes: los tres botones de acción pasan a su propia
       fila a ancho completo y se reparten el espacio a partes iguales, en vez
       de envolver de forma desigual detrás de los filtros. */
    .fich-modal-acciones {
        flex: 1 0 100%;
    }
    .fich-modal-acciones .ui-button {
        flex: 1;
        justify-content: center;
    }

    /* Diálogos: los anchos en % del componente (width="30%") se quedan
       diminutos en tablet. Se fija un ancho relativo a la ventana con tope,
       centrado a mano porque PrimeFaces calcula el 'left' con el ancho previo. */
    .ui-dialog {
        width: 80vw !important;
        max-width: 620px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .gestion-content {
        padding: 24px 28px 40px;
    }

    .welcome-msg {
        margin: 12px 28px 24px;
    }

    .fav-panel {
        margin: 0 28px;
    }

    .fav-bar {
        gap: 56px;
    }
}

/* ── Móvil / pantallas estrechas (≤ 640px) ───────────────── */
@media (max-width: 640px) {

    /* Cabecera compacta — el icono home sigue anclado a la izquierda */
    .app-header {
        padding: 0 12px 0 46px;
    }
    .header-home-link {
        left: 10px;
        font-size: 30px;
    }
    .header-left {
        gap: 6px;
        min-width: 0;
    }
    .header-empresa-nombre {
        font-size: 13px;
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-perfil {
        font-size: 11px;
        padding: 2px 6px;
    }
    .header-version {
        display: none;
    }
    .header-right {
        gap: 8px;
    }
    /* Usuario: solo el icono, sin nombre (no cabe en móvil) */
    .user-menu-trigger > span {
        display: none;
    }
    .user-menu-trigger {
        gap: 6px;
        padding: 6px 8px;
    }

    /* El menú de navegación se gestiona como acordeón vertical
       en el breakpoint ≤1024px (ver arriba); aquí no se toca. */

    /* Contenido de gestión y páginas: menos padding lateral */
    .gestion-content {
        padding: 16px 14px 32px;
    }
    .page-content {
        padding: 16px 0;
    }
    .welcome-msg {
        font-size: 22px;
        margin: 12px 14px 20px;
    }
    .fav-panel {
        margin: 0 14px;
    }
    .fav-bar {
        gap: 28px;
    }

    /* Subnav de gestión: fila con scroll horizontal en vez de romperse */
    .gestion-subnav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cabecera de sección (título + botón) puede envolver */
    .gestion-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Barra de filtro: input a ancho completo, botón debajo */
    .pro-filtro-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pro-filtro-input {
        width: 100% !important;
        max-width: 100%;
    }

    /* Etiquetas de columna algo más estrechas en pantallas pequeñas */
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
        flex-basis: 42%;
    }

    /* Gestión de favoritos: las dos listas se apilan (favoritos arriba,
       procesos disponibles abajo) y la flecha queda en medio apuntando
       hacia arriba. Los estilos del diálogo van en línea, de ahí los !important. */
    .fav-split {
        flex-direction: column !important;
        height: auto !important;
    }
    .fav-split-col {
        overflow: visible !important;
    }
    /* Contenedor con scroll de cada lista */
    .fav-split-col > div:last-child {
        max-height: 190px;
    }
    .fav-split-col-der {
        border-left: none !important;
        border-top: 1.5px solid #e2e8f0 !important;
        padding-left: 0 !important;
        padding-top: 12px !important;
    }
    .fav-split-flecha {
        justify-content: center;
        padding: 10px 0 !important;
    }
    .fav-split-flecha .pi-arrow-left {
        transform: rotate(90deg);
    }
    .fav-col-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Menú/perfil: las dos columnas se apilan */
    .menu-layout {
        flex-direction: column;
    }
    .menu-col-perfil {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Botones de guardar de la cabecera menú: bajan bajo el título */
    .menu-header-bar {
        padding-bottom: 14px;
    }
    .menu-header-bar form {
        position: static;
        transform: none;
        margin-top: 12px;
        justify-content: flex-end;
    }

    /* Formularios de diálogo: una sola columna */
    .dlg-grid {
        grid-template-columns: 1fr;
    }

    /* Diálogos: ancho utilizable y centrado, sin desbordar */
    .ui-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
        /* mismo centrado que en tablet (left 50% + translate), no 'left: 3vw' */
        left: 50% !important;
    }

    /* Tarjetas de login / selección: menos padding */
    .login-card,
    .seleccion-card {
        padding: 32px 22px;
    }

    /* Los avisos (growl) van fijos a 20px del borde con ancho fijo: en pantallas
       estrechas se salían y provocaban scroll horizontal en toda la página. */
    .ui-growl {
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: auto !important;
    }

    /* Los tres botones de acción del modal de fichajes siguen en una sola
       fila: se compactan (menos padding, texto más pequeño y sin icono) para
       que quepan también en pantallas de móvil. */
    .fich-modal-acciones {
        gap: 4px;
    }
    .fich-modal-acciones .ui-button {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }
    .fich-modal-acciones .ui-button .ui-button-text {
        white-space: normal;
    }
    .fich-modal-acciones .ui-button .ui-icon {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════
   Calendario anual de vacaciones (usuario y gestión)
   ══════════════════════════════════════════════════════════ */
.cal-anio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 14px;
}
.cal-mes {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
}
.cal-mes-titulo { text-align: center; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow  { font-size: 10px; color: #888; text-align: center; padding-bottom: 2px; }
.cal-dia {
    font-size: 11px;
    text-align: center;
    padding: 4px 0;
    border-radius: 6px;
    background: #f8f9fa;
    color: #333;
    min-height: 22px;
}
.cal-dia .ui-commandlink,
.cal-dia a { display: block; text-decoration: none; color: inherit; font: inherit; }

/* Estados de día (mismos conceptos que el calendario PB) */
.cal-nolab     { background: #e5e7eb; color: #9ca3af; }              /* no laborable / festivo horario */
.cal-vac-sol   { background: #fde68a; }                              /* vacaciones solicitadas */
.cal-vac-aprob { background: #86efac; }                              /* vacaciones aprobadas pte disfrutar */
.cal-vac-disf  { background: #22c55e; color: #fff; }                 /* vacaciones disfrutadas */
.cal-fest-pte  { background: #c4b5fd; }                              /* festivo pte disfrutar */
.cal-fest-disf { background: #7c3aed; color: #fff; }                 /* festivo disfrutado */
.cal-perm-pte  { background: #fdba74; }                              /* permiso pte disfrutar */
.cal-perm-disf { background: #ea580c; color: #fff; }                 /* permiso disfrutado */
.cal-sel       { outline: 2px solid #0ea5e9; background: #bae6fd; }  /* seleccionado para pedir */
.cal-hoy       { font-weight: 700; text-decoration: underline; }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 8px 0 14px; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Chips de resumen (te corresponden / disfrutados / disponibles...) */
.vac-resumen { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.vac-chip {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
}
.vac-chip b { font-size: 16px; margin-left: 6px; }
.vac-chip-destacado { border-color: #53A79F; background: #f0faf9; }

/* Barra de selección de días (página de usuario) */
.vac-sel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 10px;
    margin: 10px 0 16px;
}
.vac-sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #bae6fd;
    border-radius: 10px;
    padding: 3px 10px;
    font-size: 12px;
}
.vac-sel-chip .ui-commandlink { color: #075985; font-weight: 700; text-decoration: none; }

/* ---- Diálogos de altura fija (no cambian de tamaño al filtrar) ----
   Mismo tamaño que el modal de fichajes (.dlg-fichajes-detalle). */
.dlg-altura-fija .ui-dialog-content {
    height: 80vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}
.dlg-altura-fija .ui-dialog-content > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.dlg-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-gutter: stable;
}
.dlg-altura-fija .dlg-footer {
    position: static !important;
    bottom: auto !important;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    padding-top: 12px;
}

.vac-badge-aprob { background: #DCFCE7; color: #166534; padding: .1rem .5rem; border-radius: 4px; }
.vac-badge-curso { background: #FEF9C3; color: #854D0E; padding: .1rem .5rem; border-radius: 4px; }

/* Historial de peticiones (Mis Vacaciones): la tabla se adapta al ancho del
   modal en vez de forzar los 1280px de .gestion-table, así el contenido del
   diálogo no scrollea en horizontal y el botón Cerrar no se desplaza. */
.dlg-historial .ui-dialog-content {
    overflow-x: hidden !important;
}
.dlg-historial .gestion-table {
    min-width: unset;
}

/* ══════════════════════════════════════════════════════
   Listado de Vacaciones Operario (port de w_vacas_oper): operarios x días
   de tres meses, con los contadores D/S/P/A y una marca por día.
   ══════════════════════════════════════════════════════ */
.vac-listado-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 11px;
    font-weight: 700;
    margin: 10px 0;
}
.vac-listado-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.vac-listado {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}
.vac-listado th,
.vac-listado td {
    border-right: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
    width: 18px;
    min-width: 18px;
    height: 20px;
    padding: 0;
    text-align: center;
    font-weight: 700;
}
.vac-listado thead th {
    background: #f2f4f5;
    font-size: 10px;
}
.vac-listado .vac-listado-mes {
    width: auto;
    min-width: 0;
    background: #e6ebed;
    font-size: 12px;
}

/* Separador entre meses: barra vertical oscura en el primer día de cada mes */
.vac-listado .vac-mes-ini {
    border-left: 2px solid #4b5563;
}

/* Columnas de operario fijas al hacer scroll horizontal. Código y nombre van
   separados para que todos los nombres arranquen a la misma altura. */
.vac-listado .vac-listado-cod {
    width: 52px;
    min-width: 52px;
    text-align: right;
    padding: 2px 6px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.vac-listado .vac-listado-oper {
    width: auto;
    min-width: 220px;
    text-align: left;
    padding: 2px 8px;
    white-space: nowrap;
    position: sticky;
    left: 52px;
    z-index: 1;
    background: #fff;
}
.vac-listado thead .vac-listado-cod,
.vac-listado thead .vac-listado-oper { background: #f2f4f5; }
.vac-listado .vac-cnt   { width: 30px; min-width: 30px; }
.vac-listado .vac-cnt-d { color: #ff0000; }
.vac-listado .vac-cnt-s { color: #008000; }
.vac-listado .vac-cnt-p { color: #800080; }
.vac-listado tfoot td {
    background: #f2f4f5;
    border-top: 2px solid #9aa5a8;
}

/* ── Imágenes de documentos por empresa ─────────────────── */
/* Cae como bloque bajo el texto de la cabecera: necesita aire y la misma
   sangría que el título (3px del borde izquierdo + 14px de padding). */
.img-contador {
    margin-top: 12px;
    padding-left: 17px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.img-grupo { margin-bottom: 26px; }

.img-grupo-titulo {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.img-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px;
}

.img-card-head { margin-bottom: 10px; }

.img-card-nombre {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
}

.img-card-desc {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Fondo a cuadros: deja ver si el PNG tiene transparencia */
.img-card-preview {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: #fafcfa;
    background-image:
        linear-gradient(45deg, #eef3ef 25%, transparent 25%, transparent 75%, #eef3ef 75%),
        linear-gradient(45deg, #eef3ef 25%, transparent 25%, transparent 75%, #eef3ef 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    overflow: hidden;
}

.img-card-img {
    max-width: 100%;
    max-height: 108px;
    object-fit: contain;
}

.img-card-vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.img-card-vacia .pi { font-size: 24px; opacity: .5; }

.img-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-height: 18px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.img-card-fichero {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-card-dim { white-space: nowrap; flex-shrink: 0; }

.img-card-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.img-card-acciones .img-btn { flex: 1; }

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

/* Recuadro de subida: un solo bloque, botón arriba y debajo la imagen
   que quedaría guardada. Sin separaciones internas. */
.img-upload-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
    transition: background .15s ease, border-color .15s ease;
}

/* Hay una imagen recién subida sin confirmar: se tiñe el recuadro entero */
.img-upload-box.es-nueva {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

/* La barra del botón no pinta fondo ni línea: el bloque debe verse continuo.
   Y sin padding inferior: el hueco sobre la imagen lo pone .img-upload-actual,
   así queda el mismo espacio antes y después de la vista previa. */
.img-upload-box .ui-fileupload-buttonbar {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 12px 0;
}

/* El área de arrastrar-soltar de PrimeFaces va siempre vacía con auto="true".
   Se quita del todo: era la franja blanca con la línea horizontal en medio. */
.img-upload-box .ui-fileupload-content {
    display: none;
}

.img-upload-actual {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
}

.img-upload-preview {
    flex-shrink: 0;
    width: 120px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-white);
    background-image:
        linear-gradient(45deg, #eef3ef 25%, transparent 25%, transparent 75%, #eef3ef 75%),
        linear-gradient(45deg, #eef3ef 25%, transparent 25%, transparent 75%, #eef3ef 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    overflow: hidden;
}

.img-upload-preview img {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
}

.img-upload-datos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.img-upload-estado {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.es-nueva .img-upload-estado { color: var(--color-success); }

.img-upload-fichero {
    font-size: 12px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-upload-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

.img-upload-vacio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
}