/* ==========================================================================
   Tema GMP Sistemas — OpenHRCloud v12
   --------------------------------------------------------------------------
   Identidad de marca aplicada sobre Filament 5, SIN compilar Tailwind: se
   carga como hoja de estilo suelta desde el <head> del panel (ver el
   render hook en AppPanelProvider). Esa decisión es deliberada — el
   proyecto no tiene Tailwind instalado y montarlo obligaría a meter
   dependencias nuevas de npm y a tocar el build de Vite que hoy comparte
   con el frontend legacy (Bootstrap + laravel-mix). Aquí no se agrega ni
   una dependencia, y desactivar el tema es borrar una línea.

   Todo cuelga de `.fi-panel-app` (y de `.fi-panel-gmp`, el panel de plataforma), así que nada de esto puede filtrarse a
   las pantallas legacy.

   Fuente: design system de GMP Sistemas.
     Cian eléctrico #00ADEE — acción primaria, "sagrado" para CTAs
     Azul marino    #054973 — ancla secundaria, cabeceras y navegación
     Carbón         #212529 — neutro dominante para texto
     Gris claro     #DEE2E6 / #E8ECF0 — bordes y divisores
   ========================================================================== */

:is(.fi-panel-app, .fi-panel-gmp) {
    /* Marca */
    /* Rampa de la marca, tomada del sitio gmpsistemas.com (2026-09-03):
       blue-900 #003652 · 800 #054973 · 700 #006d9e · 600 #0092c7 ·
       500 #00adee · 400 #33c0f3 · 300 #66d2f7 · 200 #99e3fa · 100 #ccf1fd ·
       50 #e6f8fe. Acento #00ade0, teal #00b4d8, verde #2ea44f. */
    --gmp-cian: #00adee;
    --gmp-cian-claro: #33c0f3;
    --gmp-cian-oscuro: #0092c7;
    --gmp-cian-profundo: #006d9e;
    --gmp-cian-tenue: #e6f8fe;
    --gmp-marino: #054973;
    --gmp-marino-profundo: #003652;
    --gmp-azul: #0070f3;
    --gmp-teal: #00b4d8;

    /* Neutros */
    --gmp-carbon: #212529;

    /* --- Tokens SEMÁNTICOS ---------------------------------------------
       Estos cambian con el modo (ver bloque 9). Toda regla que pinte algo
       sobre una superficie —texto, títulos, bordes, fondos de tarjeta—
       debe usar ESTOS y no un color literal: es lo que evita que el modo
       oscuro se quede con etiquetas negras sobre fondo negro. */
    --gmp-texto: #212529;          /* cuerpo y etiquetas de formulario */
    --gmp-texto-titulo: #054973;   /* encabezados de sección y de página */
    --gmp-texto-tenue: #6b8299;    /* ayudas, descripciones, iconos */
    --gmp-panel: #ffffff;          /* tarjetas y paneles */
    --gmp-panel-alt: #f3f6f9;      /* cabeceras de tabla, franjas */
    --gmp-borde: #e8ecf0;
    --gmp-negro-suave: #2c2b2b;
    --gmp-acero: #6b8299;
    --gmp-gris-borde: #dee2e6;
    --gmp-gris-tenue: #e8ecf0;
    --gmp-superficie: #ffffff;
    --gmp-lienzo: #f6f8fa;

    /* Semánticos */
    --gmp-exito: #2ea44f;
    --gmp-alerta: #ffc107;
    --gmp-error: #dc3545;

    /* Escala de 4px del design system */
    --gmp-r-tarjeta: 14px;
    --gmp-r-tarjeta-lg: 20px;
    --gmp-r-control: 10px;
    --gmp-r-pastilla: 999px;

    /* Elevación: sombras suaves y cálidas, nunca negro duro */
    --gmp-sombra-tarjeta: 0 1px 2px rgba(33, 37, 41, 0.04), 0 6px 19px -8px rgba(179, 179, 179, 0.75);
    --gmp-sombra-cta: 0 2px 8px rgba(0, 173, 224, 0.28);
    --gmp-sombra-menu: 1px 4px 16px 2px rgba(33, 37, 41, 0.1);
}

/* --------------------------------------------------------------------------
   1. Tipografía
   Roboto es la fuente del sistema; el peso —no el color— marca la jerarquía.
   La carga la hace Filament con ->font('Roboto') (el CSP ya permite Google
   Fonts). Aquí solo se afinan pesos y ritmo vertical.
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-header-heading {
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--gmp-texto-titulo);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-section-header-heading,
:is(.fi-panel-app, .fi-panel-gmp) .fi-fieldset-label {
    font-weight: 500;
    color: var(--gmp-texto-titulo);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-fo-field-label-content {
    font-weight: 400;
    color: var(--gmp-texto);
}

/* --------------------------------------------------------------------------
   2. Lienzo y superficies
   Blanco para las tarjetas, un gris muy leve para el fondo: así las tarjetas
   se despegan sin necesidad de sombras fuertes.
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-body {
    background-color: var(--gmp-lienzo);
    color: var(--gmp-texto);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-section,
:is(.fi-panel-app, .fi-panel-gmp) .fi-wi-stats-overview-stat,
:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-ctn {
    border-radius: var(--gmp-r-tarjeta);
    border: 1px solid var(--gmp-borde);
    box-shadow: var(--gmp-sombra-tarjeta);
}

/* Una sombra por sección: las tarjetas anidadas se quedan planas para no
   generar ruido visual (regla explícita del design system). */
:is(.fi-panel-app, .fi-panel-gmp) .fi-section .fi-section {
    box-shadow: none;
    border-color: var(--gmp-gris-borde);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-dropdown-panel {
    border-radius: var(--gmp-r-tarjeta);
    box-shadow: var(--gmp-sombra-menu);
    border: 1px solid var(--gmp-borde);
}

/* --------------------------------------------------------------------------
   3. Navegación lateral — el gesto de marca más visible
   Azul marino profundo con degradado sutil y un acento cian en el elemento
   activo. Es lo que convierte un panel genérico en "el panel de GMP".
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar {
    background: linear-gradient(180deg, var(--gmp-marino) 0%, var(--gmp-marino-profundo) 100%);
    border-right: 0;
    /* El degradado debe cubrir toda la altura aunque el menú sea corto: sin
       esto la barra termina donde acaba el último ítem y deja una franja
       blanca hasta el pie. */
    min-height: 100vh;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-header {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-logo {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Los títulos de grupo se estilizan igual en los dos menús —el marino y la
   tarjeta blanca de la sub-navegación—, pero el COLOR se decide por separado
   más abajo: aquí solo va la forma. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-group-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-item-btn,
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-group-btn {
    border-radius: var(--gmp-r-control);
    transition: background-color 0.15s ease;
}

/* El color va en la ETIQUETA y en el ICONO, no en el <a> contenedor:
   Filament los pinta con reglas propias más específicas, así que un `color`
   en el botón se pierde y los ítems quedan en texto oscuro sobre el marino
   —ilegibles—.

   Y va acotado a `.fi-sidebar`: la sub-navegación de cluster reutiliza estas
   mismas clases pero vive sobre una tarjeta BLANCA, así que en blanco no se
   leería nada. Su color se define en el bloque 3b. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.82);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.55);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-item-icon,
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-group-collapse-btn {
    color: rgba(255, 255, 255, 0.6);
}

/* El hover también va acotado a `.fi-sidebar`, por lo mismo que el color:
   estas clases se repiten en la sub-navegación del cluster, que está sobre
   blanco, y allí un texto blanco al pasar el ratón desaparece. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-item-btn:hover,
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-group-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #ffffff;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--gmp-cian);
}

/* Activo: fondo cian translúcido + filo cian. El cian se reserva para
   señalar, nunca como decoración. */
/* El !important es necesario aquí y está acotado a un solo selector: Filament
   pinta el ítem activo con un fondo claro propio que gana por especificidad,
   y sobre ese fondo el texto blanco se vuelve invisible. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(0, 173, 238, 0.18) !important;
    box-shadow: inset 3px 0 0 0 var(--gmp-cian);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #ffffff;
    font-weight: 500;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--gmp-cian);
}

/* --------------------------------------------------------------------------
   3b. Sub-navegación de cluster
   Es la lista larga que aparece a la izquierda del contenido dentro de un
   cluster (Catálogos tiene ~45 pantallas). Sin tratamiento se ve como un
   listado suelto sobre el lienzo y estira la página; aquí se encapsula en una
   tarjeta con su propio desplazamiento.
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn {
    background-color: var(--gmp-panel);
    border: 1px solid var(--gmp-borde);
    border-radius: var(--gmp-r-tarjeta);
    box-shadow: var(--gmp-sombra-tarjeta);
    padding: 8px;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    position: sticky;
    top: 5.5rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-label {
    color: var(--gmp-texto);
}

/* Los títulos que agrupan las pantallas del cluster ("Seguridad Social",
   "Nómina"…). Van en marino sobre la tarjeta blanca, con un filete que
   separa cada grupo del anterior. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-group-label {
    color: var(--gmp-texto-titulo);
    opacity: 0.75;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-group + .fi-sidebar-group {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--gmp-borde);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-icon,
:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-group-collapse-btn {
    color: var(--gmp-texto-tenue);
}

/* Hover sobre fondo claro: el texto se OSCURECE a marino y el fondo sube un
   punto. Al revés —aclarando el texto— quedaba ilegible sobre un cian tan
   tenue. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-btn:hover {
    background-color: rgba(0, 173, 238, 0.12);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: var(--gmp-texto-titulo);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--gmp-cian-oscuro);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(0, 173, 238, 0.12);
    box-shadow: inset 3px 0 0 0 var(--gmp-cian);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--gmp-texto-titulo);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. Barra superior
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-topbar > nav,
:is(.fi-panel-app, .fi-panel-gmp) .fi-topbar-ctn {
    background-color: var(--gmp-panel);
    border-bottom: 1px solid var(--gmp-borde);
    box-shadow: none;
}
/* Glass SOLO en la barra sticky (2026-09-03): al hacer scroll, el contenido
   se adivina detrás de la barra y la franja. Nunca en tarjetas ni tablas:
   la densidad de una nómina necesita fondo sólido. Con fallback sólido si
   el navegador no soporta backdrop-filter o el usuario pide menos
   transparencia. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    :is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar { background-color: rgb(255 255 255 / .78); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
    .dark :is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar { background-color: rgb(27 30 35 / .78); }
    :is(.fi-panel-app, .fi-panel-gmp) .gmp-franja { background: rgb(246 248 250 / .6); }
    .dark :is(.fi-panel-app, .fi-panel-gmp) .gmp-franja { background: rgb(255 255 255 / .03); }
    @media (prefers-reduced-transparency: reduce) {
        :is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar { background-color: var(--gmp-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
        :is(.fi-panel-app, .fi-panel-gmp) .gmp-franja { background: var(--gmp-lienzo); }
    }
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-global-search-field .fi-input-wrp {
    border-radius: var(--gmp-r-pastilla);
    background-color: var(--gmp-panel-alt);
}

/* --------------------------------------------------------------------------
   5. Botones — pastilla para acciones, con la sombra cian de la marca
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-btn {
    border-radius: var(--gmp-r-pastilla);
    font-weight: 500;
    letter-spacing: 0.005em;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-btn.fi-color-primary {
    box-shadow: var(--gmp-sombra-cta);
}

/* Retroalimentación por opacidad, no por cambio brusco de color. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-btn:hover {
    opacity: 0.9;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-btn:active {
    opacity: 0.75;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-btn:disabled,
:is(.fi-panel-app, .fi-panel-gmp) .fi-btn.fi-disabled {
    opacity: 0.55; /* nunca por debajo de 0.50: dejaría de verse */
    box-shadow: none;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-icon-btn {
    border-radius: var(--gmp-r-pastilla);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-link {
    color: var(--gmp-azul);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-link:hover {
    color: var(--gmp-marino);
}

/* --------------------------------------------------------------------------
   6. Formularios
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-input-wrp {
    border-radius: var(--gmp-r-control);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 173, 238, 0.25);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-input::placeholder {
    opacity: 0.55;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-checkbox-input:checked,
:is(.fi-panel-app, .fi-panel-gmp) .fi-radio-input:checked {
    background-color: var(--gmp-cian);
    border-color: var(--gmp-cian);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-toggle[aria-checked='true'] {
    background-color: var(--gmp-cian);
}

/* --------------------------------------------------------------------------
   7. Tablas
   Cabecera en marino tenue: ancla la vista sin robar protagonismo al dato.
   -------------------------------------------------------------------------- */

/* QA folio 12: con overflow hidden, el menú de columnas/filtros se CORTA
   cuando la tabla es chica («Aplicar columnas» quedaba invisible). El clip
   sale y el redondeo se conserva heredándolo a la primera/última sección. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-ctn {
    overflow: visible;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-ctn > :first-child {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-ctn > :last-child {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-header-ctn {
    background-color: var(--gmp-panel);
    border-bottom: 1px solid var(--gmp-borde);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-header-cell {
    background-color: var(--gmp-panel-alt);
    color: var(--gmp-texto-titulo);
    font-weight: 500;
    letter-spacing: 0.02em;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-row:hover {
    background-color: rgba(0, 173, 238, 0.05);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-ta-search-field .fi-input-wrp {
    border-radius: var(--gmp-r-pastilla);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-pagination-item-btn {
    border-radius: var(--gmp-r-control);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-badge {
    border-radius: var(--gmp-r-pastilla);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Pantalla de acceso
   Es la primera impresión: fondo marino con un halo cian, tarjeta blanca
   flotando encima.
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .fi-simple-layout {
    background:
        radial-gradient(1100px 520px at 50% -10%, rgba(0, 173, 238, 0.28) 0%, transparent 60%),
        linear-gradient(160deg, var(--gmp-marino) 0%, var(--gmp-marino-profundo) 100%);
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-simple-main {
    border-radius: var(--gmp-r-tarjeta-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px -20px rgba(3, 47, 74, 0.55);
}

/* El logotipo del acceso va sobre la TARJETA BLANCA, no sobre el fondo
   marino: dejarlo en blanco lo hacía desaparecer. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-simple-layout .fi-logo {
    color: var(--gmp-marino);
}

/* --------------------------------------------------------------------------
   9. Modo oscuro
   No se repinta regla por regla: se REDEFINEN LOS TOKENS. Todo lo que arriba
   usa `--gmp-texto`, `--gmp-panel`, `--gmp-borde`… se adapta solo.
   Esa es la lección de la primera versión de este tema: había colores
   literales pensados para fondo claro, y de noche las etiquetas de los
   formularios y la sub-navegación de los clusters quedaban ilegibles.
   -------------------------------------------------------------------------- */

.dark :is(.fi-panel-app, .fi-panel-gmp) {
    --gmp-texto: #e5e9ee;
    --gmp-texto-titulo: #7fc7ea;
    --gmp-texto-tenue: #9aa8b8;
    --gmp-panel: #1b1e23;
    --gmp-panel-alt: #232830;
    --gmp-borde: rgba(255, 255, 255, 0.1);
    --gmp-lienzo: #16181c;
    --gmp-superficie: #1b1e23;

    /* En oscuro las sombras no separan: lo hace el borde. */
    --gmp-sombra-tarjeta: none;
    --gmp-sombra-menu: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dark :is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar,
.dark :is(.fi-panel-app, .fi-panel-gmp) .fi-sidebar-header {
    background: linear-gradient(180deg, #062c44 0%, #04202f 100%);
}

/* El logotipo del acceso va sobre la tarjeta, que de noche es oscura. */
.dark :is(.fi-panel-app, .fi-panel-gmp) .fi-simple-layout .fi-logo {
    color: #ffffff;
}

/* El cian de marca sobre fondo oscuro necesita subir un punto para no
   apagarse; el mismo tono que funciona sobre blanco se ve turbio aquí. */
.dark :is(.fi-panel-app, .fi-panel-gmp) .gmp-parametro-nombre,
.dark :is(.fi-panel-app, .fi-panel-gmp) .fi-link {
    color: #4fc3f7;
}

.dark :is(.fi-panel-app, .fi-panel-gmp) .fi-link:hover {
    color: #7fc7ea;
}

/* --------------------------------------------------------------------------
   10. Accesibilidad y responsive
   -------------------------------------------------------------------------- */

/* Objetivo táctil mínimo de 44px en móvil (design system: 48px cómodo). */
@media (max-width: 640px) {
    :is(.fi-panel-app, .fi-panel-gmp) .fi-btn,
    :is(.fi-panel-app, .fi-panel-gmp) .fi-icon-btn {
        min-height: 44px;
    }

    :is(.fi-panel-app, .fi-panel-gmp) .fi-section {
        border-radius: var(--gmp-r-control);
    }
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
    :is(.fi-panel-app, .fi-panel-gmp) * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Foco visible y consistente para navegación por teclado. */
:is(.fi-panel-app, .fi-panel-gmp) :focus-visible {
    outline: 2px solid var(--gmp-cian);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   11. Editor de fórmulas de conceptos de nómina
   El proyecto no compila Tailwind (ADR-021), así que las utilidades de rejilla
   de la vista no existen: la maquetación va aquí, en la hoja de marca.
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-editor-dip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1180px) {
    :is(.fi-panel-app, .fi-panel-gmp) .gmp-editor-dip {
        /* El editor manda; el panel de parámetros acompaña. */
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    }

    :is(.fi-panel-app, .fi-panel-gmp) .gmp-editor-dip-lateral {
        position: sticky;
        top: 5.5rem;
    }
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-editor-dip-principal {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* El área de código necesita aire: es donde se pasa el tiempo. */
:is(.fi-panel-app, .fi-panel-gmp) .fi-fo-code-editor .cm-editor {
    min-height: 22rem;
    border-radius: var(--gmp-r-control);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametros {
    max-height: 34rem;
    overflow-y: auto;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametros-grupo {
    margin: 16px 0 6px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gmp-texto-titulo);
    opacity: 0.75;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametros > div:first-child .gmp-parametros-grupo {
    margin-top: 0;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametros-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametro {
    display: block;
    width: 100%;
    padding: 5px 8px;
    text-align: left;
    border-radius: var(--gmp-r-control);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametro:hover {
    background-color: rgba(0, 173, 238, 0.1);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametro-nombre {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gmp-cian-oscuro);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-parametro-detalle {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--gmp-texto-tenue);
}

/* --------------------------------------------------------------------------
   12. Detector de inconsistencias
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-ref {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gmp-texto-tenue);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-parrafo {
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 10px;
    color: var(--gmp-texto);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-tabla-ctn {
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid var(--gmp-borde);
    border-radius: var(--gmp-r-control);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-tabla {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-tabla th {
    text-align: left;
    padding: 8px 12px;
    background-color: var(--gmp-panel-alt);
    color: var(--gmp-texto-titulo);
    font-weight: 500;
    white-space: nowrap;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-tabla td {
    padding: 7px 12px;
    border-top: 1px solid var(--gmp-borde);
    white-space: nowrap;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-nota,
:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-limpias {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--gmp-texto-tenue);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-diagnostico-limpias {
    list-style: disc;
    padding-left: 20px;
}

/* --------------------------------------------------------------------------
   13. Alta masiva de empleados
   -------------------------------------------------------------------------- */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-resumen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-cifra {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--gmp-r-pastilla);
    font-size: 0.82rem;
    font-weight: 500;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-ok {
    background-color: rgba(46, 164, 79, 0.14);
    color: #1e7a37;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-mal {
    background-color: rgba(220, 53, 69, 0.14);
    color: #b02a37;
}

.dark :is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-ok {
    color: #6fcf87;
}

.dark :is(.fi-panel-app, .fi-panel-gmp) .gmp-carga-mal {
    color: #f2848d;
}

/* ------------------------------------------------------------------
   14. Escritorio — cumpleaños del mes
   Lista corta y legible; el día va en una pastilla para que el ojo
   ancle en la fecha, que es lo que se busca al mirar este widget.
   ------------------------------------------------------------------ */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumples {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumple {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--gmp-borde);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumple:last-child {
    border-bottom: 0;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumple-dia {
    flex: none;
    min-width: 2rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--gmp-panel-alt);
    color: var(--gmp-texto-titulo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumple-nombre {
    flex: 1 1 auto;
    color: var(--gmp-texto);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumple-num {
    flex: none;
    color: var(--gmp-texto-tenue);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-cumples-vacio {
    margin: 0;
    color: var(--gmp-texto-tenue);
}

/* ------------------------------------------------------------------
   15. Totalizador de registros siempre visible

   Filament esconde el «Se muestran de 1 a 25 de 15,470 resultados»
   detrás de `@container (min-width: 56rem)`. No es un ancho de
   pantalla sino del CONTENEDOR de la tabla: con la barra lateral y la
   sub-navegación del cluster, en una laptop no se llega a esos 896px y
   el total desaparece sin que nadie sepa por qué.

   En un sistema de nómina el total es dato, no adorno: «cuántos
   empleados tengo» se contesta ahí. Se deja siempre visible y se le
   permite bajar de renglón cuando no quepa al lado de los botones.
   ------------------------------------------------------------------ */

:is(.fi-panel-app, .fi-panel-gmp) .fi-pagination .fi-pagination-overview {
    display: inline;
}

:is(.fi-panel-app, .fi-panel-gmp) .fi-pagination {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* ------------------------------------------------------------------
   16. Aviso de periodo cerrado en la hoja de captura
   ------------------------------------------------------------------ */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-aviso-periodo {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 193, 7, 0.4);
    background-color: rgba(255, 193, 7, 0.12);
    color: var(--gmp-texto);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------
   17. Captura rápida — la rejilla del capturista

   Densa a propósito: entre más renglones quepan, menos scroll. El
   encabezado se queda fijo porque con 200 empleados se pierde de vista
   qué columna es cuál.
   ------------------------------------------------------------------ */

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura {
    margin-top: 1rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-vacia {
    padding: 2rem;
    text-align: center;
    color: var(--gmp-texto-tenue);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-cifra {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--gmp-panel-alt);
    color: var(--gmp-texto);
    font-size: 0.8125rem;
    font-weight: 500;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-pendiente {
    background-color: rgba(255, 193, 7, 0.18);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-mal {
    background-color: rgba(220, 53, 69, 0.14);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-ayuda {
    margin-left: auto;
    color: var(--gmp-texto-tenue);
    font-size: 0.75rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-boton {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--gmp-primario, #00ADEE);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-errores {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(220, 53, 69, 0.35);
    background-color: rgba(220, 53, 69, 0.08);
    max-height: 9rem;
    overflow-y: auto;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-error-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.8125rem;
    cursor: pointer;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-error-item:hover {
    text-decoration: underline;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-tabla-ctn {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--gmp-borde);
    border-radius: 0.5rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.625rem;
    background-color: var(--gmp-panel-alt);
    color: var(--gmp-texto-titulo);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-tabla td {
    padding: 0.125rem 0.375rem;
    border-top: 1px solid var(--gmp-borde);
    white-space: nowrap;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-nombre {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-fila-mal {
    background-color: rgba(220, 53, 69, 0.06);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-celda {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--gmp-texto);
    font-variant-numeric: tabular-nums;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-celda:hover:not(:disabled) {
    border-color: var(--gmp-borde);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-celda:focus {
    outline: none;
    border-color: var(--gmp-primario, #00ADEE);
    box-shadow: 0 0 0 2px rgba(0, 173, 238, 0.25);
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-celda:disabled {
    color: var(--gmp-texto-tenue);
    cursor: not-allowed;
}

:is(.fi-panel-app, .fi-panel-gmp) .gmp-captura-estado {
    width: 2rem;
    text-align: center;
    color: var(--gmp-texto-tenue);
}

/* ------------------------------------------------------------------ */
/* Procesos en marcha (barra superior)                                 */
/* ------------------------------------------------------------------ */

.gmp-procesos-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e3a5f;
    background: #e2e8f0;
}

.gmp-procesos-punto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #2563eb;
    /* Late mientras algo corre: es la señal de que está vivo. */
    animation: gmp-procesos-latido 1.6s ease-in-out infinite;
}

@keyframes gmp-procesos-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* Quien pidió menos movimiento no debería tener un punto parpadeando. */
@media (prefers-reduced-motion: reduce) {
    .gmp-procesos-punto { animation: none; }
}

.gmp-procesos-boton-mal {
    color: #7f1d1d;
    background: #fee2e2;
}

.gmp-procesos-renglon-mal .gmp-procesos-titulo {
    color: #991b1b;
}

.gmp-procesos-motivo {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #7f1d1d;
    background: #fef2f2;
    border-radius: 0.25rem;
    padding: 0.3rem 0.4rem;
    /* El motivo va entero: es lo unico accionable que tiene el usuario. */
    white-space: normal;
}

.gmp-procesos-lista {
    min-width: 20rem;
    max-width: 26rem;
    padding: 0.5rem;
}

.gmp-procesos-renglon {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.gmp-procesos-renglon:last-child { border-bottom: 0; }

.gmp-procesos-titulo {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.gmp-procesos-estado {
    font-size: 0.75rem;
    color: #475569;
    margin-top: 0.15rem;
}

.gmp-procesos-barra {
    margin-top: 0.4rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #e2e8f0;
    overflow: hidden;
}

.gmp-procesos-barra-relleno {
    height: 100%;
    background: #2563eb;
    transition: width 0.4s ease;
}

/* ------------------------------------------------------------------ */
/* Recibo calculado (modal de resultados)                              */
/* ------------------------------------------------------------------ */

.gmp-recibo-grupo {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    margin: 0.9rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Paginador de la captura rápida (bloque N/M) */
.gmp-captura-paginador { display: inline-flex; align-items: center; gap: .4rem; }
.gmp-captura-paginador button:disabled { opacity: .4; cursor: not-allowed; }

/* Mis pantallas (consolidado 2026-08-22): un dropdown Filament con la
   estrella como trigger; favoritas + recientes + alcance adentro. El aviso
   de perfil se queda aparte: es la única señal cuando el menú sale vacío. */
.gmp-pantallas { display: flex; align-items: center; gap: .5rem; }
.gmp-pantallas-aviso { font-size: .8rem; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 9999px; padding: .25rem .75rem; white-space: nowrap; }
.gmp-pantallas-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 0; background: none; cursor: pointer; color: var(--gmp-texto-tenue, #64748b); }
.gmp-pantallas-trigger:hover { background: rgba(0, 173, 238, 0.1); }
.gmp-pantallas-icono { width: 1.25rem; height: 1.25rem; }
.gmp-pantallas-icono-activa { color: #f59e0b; }
.gmp-pantallas-panel { min-width: 16rem; max-width: 20rem; padding: .4rem 0; }
.gmp-pantallas-marcar { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem 1rem; font-size: .82rem; font-weight: 500; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; }
.gmp-pantallas-marcar:hover { background: rgb(0 0 0 / .05); }
.dark .gmp-pantallas-marcar:hover { background: rgb(255 255 255 / .07); }
.gmp-pantallas-marcar .gmp-pantallas-icono { color: #f59e0b; flex-shrink: 0; }
.gmp-pantallas-enlace { display: block; padding: .35rem 1rem; font-size: .82rem; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmp-pantallas-enlace:hover { background: rgb(0 0 0 / .05); }
.dark .gmp-pantallas-enlace:hover { background: rgb(255 255 255 / .07); }
.gmp-pantallas-grupo { padding: .45rem 1rem .1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin: 0; }
.gmp-pantallas-alcance { padding: .5rem 1rem .2rem; margin: .3rem 0 0; font-size: .72rem; color: #9ca3af; border-top: 1px solid rgb(0 0 0 / .06); }
.dark .gmp-pantallas-alcance { border-top-color: rgb(255 255 255 / .08); }
[x-cloak] { display: none !important; }

/* Franja de contexto (2026-09-03): segunda fila del topbar, dentro del
   nav sticky. «Compañía: X · Nómina: 40 — SEMANAL · periodo 10». Texto en
   cuentas simples; selectores en corporativos. */
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar { flex-wrap: wrap; row-gap: 0; }
/* La primera fila nunca envuelve: todo lo que no es la franja conserva su
   ancho y el menú de grupos se comprime (con scroll si hace falta). */
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar > *:not(.gmp-franja) { flex-shrink: 0; }
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar > .fi-topbar-nav-groups-ctn,
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar ul.fi-topbar-nav-groups { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar ul.fi-topbar-nav-groups::-webkit-scrollbar { display: none; }
.gmp-franja { flex: 0 0 100%; order: 99; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.75rem; min-height: 2.25rem; margin: 0 -1rem -.4rem; padding: .3rem 1.25rem; border-top: 1px solid var(--gmp-borde); background: var(--gmp-lienzo); font-size: .8rem; }
.dark .gmp-franja { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .1); }
.gmp-franja-item { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.gmp-franja-item + .gmp-franja-item::before { content: ''; width: 1px; height: 1rem; margin-inline-end: 1.25rem; background: var(--gmp-borde); }
.gmp-franja-etiqueta { color: var(--gmp-texto-tenue); }
.gmp-franja-valor { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; color: var(--gmp-texto-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28rem; }
.gmp-franja-selector { padding: .15rem .55rem; margin: -.15rem -.55rem; border: 0; border-radius: var(--gmp-r-control); background: transparent; cursor: pointer; font: inherit; font-weight: 500; }
.gmp-franja-selector:hover { background: rgb(0 173 238 / .1); }
.gmp-franja-flecha { width: .8rem; height: .8rem; opacity: .6; }
.gmp-franja-vacio { color: var(--gmp-texto-tenue); font-weight: 400; }
.gmp-franja-filtro { position: sticky; top: 0; z-index: 1; padding: .4rem .5rem; background: var(--gmp-panel); border-bottom: 1px solid var(--gmp-borde); }
.gmp-franja-filtro input { width: 100%; padding: .35rem .6rem; font-size: .85rem; border: 1px solid var(--gmp-borde); border-radius: var(--gmp-r-control); background: var(--gmp-lienzo); color: var(--gmp-texto); }
.gmp-franja-filtro input:focus { outline: 2px solid var(--gmp-cian); outline-offset: 1px; }
.dark .gmp-franja-filtro { background: var(--gmp-panel); }
@media (max-width: 640px) { .gmp-franja-valor { max-width: 14rem; } }

/* Topbar compacto (2026-08-22): una sola línea de navegación agrupada.
   NOTA: las reglas .fi-sidebar de la sección 3 NO están muertas — visten
   el drawer móvil que Filament abre bajo topNavigation. No podar. */
/* Estructura real: nav.fi-topbar > ul.fi-topbar-nav-groups > li.fi-topbar-item */
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar { padding-top: .4rem; padding-bottom: .4rem; }
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar .fi-logo { margin-inline-end: .25rem; }
/* La lista de navegación NO envuelve: 7 items agrupados caben en una línea
   compactando el gap; en móvil Filament la esconde y abre el drawer. */
:is(.fi-panel-app, .fi-panel-gmp) ul.fi-topbar-nav-groups { flex-wrap: nowrap; gap: .125rem; }
:is(.fi-panel-app, .fi-panel-gmp) ul.fi-topbar-nav-groups .fi-topbar-item-btn { white-space: nowrap; padding-inline: .6rem; }
:is(.fi-panel-app, .fi-panel-gmp) ul.fi-topbar-nav-groups .fi-topbar-item-label { font-size: .9rem; }
/* La búsqueda no se aplasta por el nowrap del nav. */
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar .fi-global-search-field { min-width: 8rem; }
/* Con ocho ítems de primer nivel, en pantallas medianas sobran los iconos
   del menú: el texto es lo que se lee. Así nada queda oculto por scroll. */
@media (max-width: 1500px) { :is(.fi-panel-app, .fi-panel-gmp) ul.fi-topbar-nav-groups .fi-topbar-item-icon { display: none; } }
:is(.fi-panel-app, .fi-panel-gmp) nav.fi-topbar .fi-global-search { margin-inline-start: .5rem; }

/* Experimento dev.feedback: burbuja del PO */
.gmp-fb-burbuja { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: 3rem; height: 3rem; border-radius: 9999px; border: 0; background: #7c3aed; color: #fff; font-size: 1.3rem; cursor: pointer; box-shadow: 0 8px 22px rgb(124 58 237 / .45); }
.gmp-fb-panel { position: fixed; right: 1.25rem; bottom: 4.75rem; z-index: 50; width: 24rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; box-shadow: 0 18px 45px rgb(0 0 0 / .18); padding: 1rem; }
.dark .gmp-fb-panel { background: #18181b; border-color: #3f3f46; }
.gmp-fb-titulo { font-size: .85rem; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.gmp-fb-beta { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; background: #ede9fe; color: #6d28d9; border-radius: 9999px; padding: .1rem .5rem; }
.gmp-fb-hilo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.gmp-fb-msg { border-radius: .7rem; padding: .5rem .65rem; font-size: .8rem; }
.gmp-fb-msg-po { background: #ede9fe; margin-left: 1.5rem; }
.gmp-fb-msg-claude { background: #f3f4f6; margin-right: 1.5rem; }
.dark .gmp-fb-msg-po { background: rgb(124 58 237 / .25); }
.dark .gmp-fb-msg-claude { background: rgb(255 255 255 / .07); }
.gmp-fb-autor { display: block; font-size: .65rem; color: #6b7280; margin-bottom: .15rem; }
.gmp-fb-texto { white-space: pre-wrap; word-break: break-word; }
.gmp-fb-play { border: 0; background: none; color: #7c3aed; font-size: .7rem; font-weight: 600; cursor: pointer; padding: .15rem 0 0; }
.gmp-fb-espera { font-size: .72rem; color: #6b7280; font-style: italic; margin: .2rem 0 0; }
.gmp-fb-tipo, .gmp-fb-caja { width: 100%; border: 1px solid #d1d5db; border-radius: .6rem; font-size: .8rem; padding: .45rem .6rem; background: #fff; }
.dark .gmp-fb-tipo, .dark .gmp-fb-caja { background: #27272a; border-color: #3f3f46; color: #e4e4e7; }
.gmp-fb-caja { margin-top: .1rem; resize: vertical; }
.gmp-fb-error { color: #dc2626; font-size: .7rem; margin: .2rem 0 0; }
.gmp-fb-acciones { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.gmp-fb-mic { border: 1px solid #d1d5db; background: none; border-radius: .6rem; font-size: .75rem; padding: .35rem .7rem; cursor: pointer; color: inherit; }
.gmp-fb-enviar { border: 0; background: #7c3aed; color: #fff; border-radius: .6rem; font-size: .78rem; font-weight: 600; padding: .4rem 1rem; cursor: pointer; }

/* ── Mi nómina hoy: tablero del ciclo (2026-09-03) ──────────────────────
   Fila = nómina; segmento = paso con veredicto. Color + icono + tooltip:
   el color nunca va solo. El segmento que detiene lleva anillo. */
.gmp-tablero-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.gmp-tablero-resumen-item { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .75rem; border: 1px solid var(--gmp-borde); border-radius: var(--gmp-r-control); background: var(--gmp-panel-alt); }
.gmp-tablero-resumen-item.es-cero { opacity: .55; }
.gmp-tablero-resumen-total { font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--gmp-texto-titulo); font-variant-numeric: tabular-nums; }
.gmp-tablero-resumen-titulo { font-size: .75rem; color: var(--gmp-texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gmp-tablero { display: flex; flex-direction: column; }
.gmp-tablero-fila { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr auto; gap: 1rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--gmp-borde); }
.gmp-tablero-fila:first-child { border-top: 0; }
.gmp-tablero-nomina { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: baseline; color: inherit; text-decoration: none; min-width: 0; }
.gmp-tablero-tipo { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gmp-texto-titulo); }
.gmp-tablero-nombre { font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmp-tablero-periodo { grid-column: 1 / -1; font-size: .75rem; color: var(--gmp-texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmp-tablero-nomina:hover .gmp-tablero-nombre { color: var(--gmp-cian-oscuro); }

.gmp-tablero-ciclo { min-width: 0; }
.gmp-tablero-segmentos { display: flex; gap: 3px; }
.gmp-seg { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; min-width: 1.5rem; border-radius: 5px; text-decoration: none; transition: transform .12s ease; }
a.gmp-seg:hover { transform: translateY(-1px); filter: saturate(1.2); }
.gmp-seg-icono { width: .85rem; height: .85rem; }
.gmp-seg-ok { background: rgb(46 164 79 / .18); color: #1a7f37; }
.gmp-seg-atencion { background: rgb(255 193 7 / .28); color: #7a5c00; }
.gmp-seg-bloquea { background: rgb(220 53 69 / .18); color: #b02a37; }
.gmp-seg-sin_datos { background: repeating-linear-gradient(135deg, rgb(107 130 153 / .16) 0 4px, transparent 4px 8px); color: var(--gmp-texto-tenue); }
.gmp-seg-detiene { box-shadow: 0 0 0 2px currentColor inset; }
.dark .gmp-seg-ok { background: rgb(46 164 79 / .28); color: #6fdc8c; }
.dark .gmp-seg-atencion { background: rgb(255 193 7 / .25); color: #ffd76a; }
.dark .gmp-seg-bloquea { background: rgb(220 53 69 / .3); color: #ff8a97; }
.dark .gmp-seg-sin_datos { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .1) 0 4px, transparent 4px 8px); }

.gmp-tablero-detiene { margin: .3rem 0 0; font-size: .78rem; color: var(--gmp-texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmp-tablero-detiene.es-bloquea { color: #b02a37; }
.gmp-tablero-detiene.es-atencion { color: #7a5c00; }
.dark .gmp-tablero-detiene.es-bloquea { color: #ff8a97; }
.dark .gmp-tablero-detiene.es-atencion { color: #ffd76a; }

.gmp-tablero-accion { font-size: .8rem; font-weight: 500; color: var(--gmp-cian-oscuro); text-decoration: none; white-space: nowrap; }
.gmp-tablero-accion:hover { text-decoration: underline; }

.gmp-tablero-fuera { margin-top: .9rem; font-size: .8rem; color: var(--gmp-texto-tenue); }
.gmp-tablero-fuera summary { cursor: pointer; }
.gmp-tablero-fuera ul { margin: .4rem 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; }
.gmp-tablero-fuera a { color: inherit; }
.gmp-tablero-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .9rem 0 0; font-size: .75rem; color: var(--gmp-texto-tenue); }
.gmp-tablero-leyenda .gmp-seg { flex: none; width: 1.25rem; height: 1.1rem; }
.gmp-tablero-vacio { font-size: .875rem; color: var(--gmp-texto-tenue); }

@media (max-width: 900px) {
    .gmp-tablero-fila { grid-template-columns: 1fr; gap: .4rem; }
    .gmp-tablero-accion { justify-self: end; }
}

/* ── Sub-navegación de cluster plegable (2026-09-03) ────────────────────
   Botón antes de la lista; con .gmp-subnav-colapsada la columna baja de
   288 px a 3.5 rem: solo iconos; el nombre va en el title de cada ítem
   (tooltip nativo: el contenedor tiene overflow-y auto y recortaría uno
   propio). Los grupos se muestran siempre para no dejar iconos escondidos. */
.fi-page-sub-navigation-sidebar-ctn { position: relative; transition: width .18s ease; }
.gmp-subnav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: 0 0 .25rem auto; border: 1px solid var(--gmp-borde); border-radius: 999px; background: var(--gmp-panel); color: var(--gmp-texto-tenue); cursor: pointer; }
.gmp-subnav-toggle:hover { color: var(--gmp-cian-oscuro); border-color: var(--gmp-cian); }
.gmp-subnav-toggle-icono { width: 1rem; height: 1rem; transition: transform .18s ease; }
.gmp-subnav-colapsada { width: 3.5rem !important; }
.gmp-subnav-colapsada .gmp-subnav-toggle { margin-inline: auto; }
.gmp-subnav-colapsada .fi-sidebar-item-label,
.gmp-subnav-colapsada .fi-sidebar-item-badge-ctn,
.gmp-subnav-colapsada .fi-sidebar-group-label,
.gmp-subnav-colapsada .fi-sidebar-group-collapse-btn,
.gmp-subnav-colapsada .fi-sidebar-item-grouped-border { display: none; }
.gmp-subnav-colapsada .fi-sidebar-group-items { display: flex !important; }
.gmp-subnav-colapsada .fi-sidebar-group-btn { justify-content: center; }
.gmp-subnav-colapsada .fi-sidebar-group + .fi-sidebar-group { border-top: 1px solid var(--gmp-borde); padding-top: .35rem; margin-top: .35rem; }
.gmp-subnav-colapsada .fi-sidebar-item-btn { position: relative; justify-content: center; padding-inline: 0; }
@media (max-width: 1024px) { .gmp-subnav-toggle { display: none; } }


/* ── Parametrización por tipo de nómina (ADR-024) ───────────────────────
   Tarjetas de solo lectura: qué gobierna a la nómina y a dónde ir. El
   borde superior dice el estado sin depender solo del color (hay etiqueta). */
.gmp-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.gmp-hub-tarjeta { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; background: var(--gmp-panel); border: 1px solid var(--gmp-borde); border-top: 3px solid var(--gmp-cian); border-radius: var(--gmp-r-tarjeta); box-shadow: var(--gmp-sombra-tarjeta); }
.gmp-hub-tarjeta.es-falta { border-top-color: var(--gmp-alerta); }
.gmp-hub-tarjeta.es-ok { border-top-color: var(--gmp-exito); }
.gmp-hub-tarjeta header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gmp-hub-tarjeta h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gmp-texto-titulo); }
.gmp-hub-estado { font-size: .72rem; font-weight: 600; color: var(--gmp-texto-tenue); border: 1px solid var(--gmp-borde); border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.gmp-hub-tarjeta dl { margin: 0; display: grid; gap: .3rem; font-size: .875rem; }
.gmp-hub-tarjeta dl div { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .5rem; }
.gmp-hub-tarjeta dt { color: var(--gmp-texto-tenue); }
.gmp-hub-tarjeta dd { margin: 0; color: var(--gmp-texto); overflow-wrap: anywhere; }
.gmp-hub-accion { margin-top: auto; font-size: .875rem; font-weight: 500; color: var(--gmp-cian-oscuro); text-decoration: none; }
.gmp-hub-accion:hover { text-decoration: underline; }
.gmp-hub-vacio { color: var(--gmp-texto-tenue); }

/* ── Paquetes de parametrización: revisión antes de aplicar ─────────── */
.gmp-revision { display: grid; gap: 1rem; margin-top: 1.25rem; }
.gmp-revision h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--gmp-texto-titulo); }
.gmp-revision h4 { margin: .5rem 0 0; font-size: .95rem; font-weight: 600; color: var(--gmp-texto-titulo); }
.gmp-revision-avisos { margin: 0; padding-left: 1.2rem; color: #7a5c00; font-size: .875rem; }
.gmp-tabla-ancha { overflow-x: auto; }
.gmp-revision-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--gmp-panel); border: 1px solid var(--gmp-borde); border-radius: var(--gmp-r-control); }
.gmp-revision-tabla th, .gmp-revision-tabla td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--gmp-borde); }
.gmp-revision-tabla th { color: var(--gmp-texto-tenue); font-weight: 600; font-size: .78rem; }
.gmp-pill { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--gmp-panel-alt); color: var(--gmp-texto-tenue); }
.gmp-pill.es-ok { background: rgb(46 164 79 / .15); color: #1a7f37; }
.gmp-pill.es-alerta { background: rgb(255 193 7 / .25); color: #7a5c00; }
.gmp-hub-tarjeta.es-info { border-top-color: var(--gmp-cian); }
.gmp-revision-nota { margin: 0; font-size: .85rem; color: var(--gmp-texto-tenue); }