/* ==========================================================================
   Tema «Default» de OpenHRCloud v11 (en código: «clásico»), en el panel /app
   --------------------------------------------------------------------------
   No es un cuarto modo: es una PIEL sobre el modo oscuro de Filament. Al
   elegirla (cuarto botón del selector de tema, override en
   resources/views/vendor/filament-panels) el panel pasa a oscuro (theme=dark) y
   <html> gana `gmp-tema-clasico`; la preferencia vive en el navegador
   (localStorage 'gmp-tema'), igual que el claro/oscuro/sistema.

   Todo cuelga de `html.gmp-tema-clasico.dark`: sin la clase no
   pinta nada, y ni plataforma ni portal cargan esta hoja.

   Fuente: public/assets2/css/main.css (body{…}, el tema Default legacy).
     Lienzo    degradado #051937 → #043546 → #4c7a7c → #7a9989 → #7c836d
     Barra     vidrio rgba(37,38,40,.21) + brillo radial + desenfoque
     Lateral   #201e2ca1 · texto #fff / #dbdbdb · hover #507D7D

   A diferencia de tema-gmp.css, aquí los contenedores de página SÍ llevan
   vidrio (bloque «Vidrio en contenedores»), como las tarjetas de la v11.
   Modales y dropdowns siguen sólidos. Borrar ese bloque regresa a
   superficies sólidas.
   Primario (#00ADEE) y colores de estado no cambian.
   ========================================================================== */

html.gmp-tema-clasico.dark .fi-panel-app {
    --gmp-texto: #ffffff;
    --gmp-texto-titulo: #ffffff;
    --gmp-texto-tenue: #dbdbdb;
    /* Alineados con la rampa gris de abajo (900/950): tarjetas de
       sub-navegación y celdas de tabla usan estos, no --gray-*. */
    --gmp-panel: #183b4b;
    --gmp-panel-alt: #1f4556;
    --gmp-superficie: #183b4b;
    --gmp-lienzo: #102e3d;
    --gmp-borde: rgba(219, 219, 219, 0.16);
    --gmp-clasico-hover: #507d7d;
    --gmp-clasico-lateral: #201e2ca1;
}

/* Componentes: en oscuro, tarjetas, tablas, inputs, modales y dropdowns
   toman su fondo y bordes de la rampa `--gray-*` que Filament pone en :root
   (hoy Slate, AppPanelProvider). Redefinirla aquí tiñe TODOS los componentes
   con el marino/teal del degradado v11 sin una regla por componente. Va en
   <html>, donde Filament la declara (:root); esta hoja solo se carga en /app. */
html.gmp-tema-clasico.dark {
    /* Un escalón más clara que Slate en 700–950: con la rampa más honda las
       superficies se leían casi negras sobre el degradado. 400/500 suben para
       que el texto secundario conserve contraste sobre ellas. */
    --gray-50: #f3f7f8;
    --gray-100: #e6eef0;
    --gray-200: #d1dfe2;
    --gray-300: #b3c8cc;
    --gray-400: #9db8bd;
    --gray-500: #7b9aa0;
    --gray-600: #557880;
    --gray-700: #3b5f6b;
    --gray-800: #274b59;
    --gray-900: #183b4b;
    --gray-950: #102e3d;
}

/* Lienzo: el degradado de la v11, fijo para que no «corra» con el scroll.
   Un velo marino al 30 % encima baja el extremo oliva, que es claro: sin él,
   el texto que va directo sobre el fondo (migas, subtítulos) se perdía. */
html.gmp-tema-clasico.dark .fi-panel-app.fi-body {
    background:
        linear-gradient(rgba(3, 14, 26, 0.3), rgba(3, 14, 26, 0.3)) fixed,
        linear-gradient(to right top, #051937, #043546, #4c7a7c, #7a9989, #7c836d) fixed;
    color: var(--gmp-texto);
}

/* Texto que se pinta SIN superficie propia, directo sobre el degradado:
   casi blanco y una sombra corta que lo despega de los tramos claros. */
html.gmp-tema-clasico.dark .fi-panel-app :is(.fi-header-heading, .fi-header-subheading, .fi-page-descripcion, .fi-breadcrumbs-item, .fi-breadcrumbs-item-label, .fi-breadcrumbs-item .fi-icon) {
    color: #eef4f5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-header-heading {
    color: #ffffff;
}

/* Botones del encabezado de página: también van sobre el lienzo. El gris
   delineado de Filament se volvía invisible; aquí llevan su propio fondo. */
html.gmp-tema-clasico.dark .fi-panel-app .fi-header .fi-btn.fi-outlined,
html.gmp-tema-clasico.dark .fi-panel-app .fi-header .fi-btn.fi-color-gray {
    background-color: rgba(6, 24, 38, 0.55);
    color: #ffffff;
    --tw-ring-color: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.28);
}

/* Barra superior de vidrio. Un punto más oscura que la v11 (.21): el
   extremo oliva del degradado deja el texto blanco sin contraste. */
html.gmp-tema-clasico.dark .fi-panel-app nav.fi-topbar,
html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-ctn {
    background:
        radial-gradient(circle at 25%, hsla(0, 0%, 100%, 0.12), rgba(50, 50, 50, 0.2) 80%),
        rgba(20, 24, 30, 0.42);
    border-bottom-color: rgba(219, 219, 219, 0.18);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
}

html.gmp-tema-clasico.dark .fi-panel-app .gmp-franja {
    background: rgba(255, 255, 255, 0.04);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item-label {
    color: #ffffff;
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item-btn:hover,
html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item-btn:focus-visible {
    background-color: var(--gmp-clasico-hover);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(255, 255, 255, 0.18);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item.fi-active .fi-topbar-item-label,
html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: #ffffff;
}

/* Drawer móvil (bajo topNavigation la barra lateral solo vive ahí). */
html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar,
html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar-header {
    background: var(--gmp-clasico-lateral);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.5);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar .fi-sidebar-item-btn:hover,
html.gmp-tema-clasico.dark .fi-panel-app .fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-btn:hover {
    background-color: var(--gmp-clasico-hover);
}

/* Tarjetas teñidas por estado (`dark:bg-{color}-500/10`: pendientes del
   Escritorio, cierre y sala de nómina). Un 10 % de rojo o ámbar sobre el
   marino se ve lodoso, casi morado: se levanta la base con un velo claro, se
   sube el tinte y un filo izquierdo de color dice el estado de un vistazo. */
html.gmp-tema-clasico.dark .fi-panel-app :is(.dark\:bg-danger-500\/10, .dark\:bg-warning-500\/10, .dark\:bg-success-500\/10, .dark\:bg-primary-500\/10) {
    --gmp-clasico-estado: var(--primary-400);
    background:
        linear-gradient(color-mix(in oklab, var(--gmp-clasico-estado) 16%, transparent), color-mix(in oklab, var(--gmp-clasico-estado) 16%, transparent)),
        rgba(255, 255, 255, 0.06);
    border-color: color-mix(in oklab, var(--gmp-clasico-estado) 45%, transparent);
    border-inline-start: 3px solid var(--gmp-clasico-estado);
}

html.gmp-tema-clasico.dark .fi-panel-app .dark\:bg-danger-500\/10 { --gmp-clasico-estado: var(--danger-400); }
html.gmp-tema-clasico.dark .fi-panel-app .dark\:bg-warning-500\/10 { --gmp-clasico-estado: var(--warning-400); }
html.gmp-tema-clasico.dark .fi-panel-app .dark\:bg-success-500\/10 { --gmp-clasico-estado: var(--success-400); }

html.gmp-tema-clasico.dark .fi-panel-app a:is(.dark\:bg-danger-500\/10, .dark\:bg-warning-500\/10, .dark\:bg-success-500\/10, .dark\:bg-primary-500\/10):hover {
    background:
        linear-gradient(color-mix(in oklab, var(--gmp-clasico-estado) 24%, transparent), color-mix(in oklab, var(--gmp-clasico-estado) 24%, transparent)),
        rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Vidrio en contenedores — como las tarjetas translúcidas de la v11
   (#f5f5f526 + desenfoque). El degradado se adivina detrás; las capas
   internas de la tabla quedan transparentes para no tapar el efecto, y lo
   anidado no repite el desenfoque (doble blur = lodo y costo de GPU).
   -------------------------------------------------------------------------- */
html.gmp-tema-clasico.dark .fi-panel-app {
    --gmp-clasico-vidrio: rgba(16, 46, 61, 0.5);
    --gmp-clasico-vidrio-borde: rgba(255, 255, 255, 0.14);
}

html.gmp-tema-clasico.dark .fi-panel-app :is(.fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-page-sub-navigation-sidebar-ctn, .fi-tabs.fi-contained, .fi-empty-state, .fi-callout) {
    background-color: var(--gmp-clasico-vidrio);
    border-color: var(--gmp-clasico-vidrio-borde);
    --tw-ring-color: var(--gmp-clasico-vidrio-borde);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* El backdrop-filter hace de cada contenedor de vidrio su propia capa: la
   lista de un select abierto (z-20 de Filament) no sale de ella y la sección
   siguiente la tapa. Mientras tenga algo abierto o enfocado, el contenedor
   sube sobre sus hermanos. */
html.gmp-tema-clasico.dark .fi-panel-app :is(.fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-page-sub-navigation-sidebar-ctn, .fi-tabs.fi-contained, .fi-empty-state, .fi-callout):is(:focus-within, :has([aria-expanded="true"])) {
    position: relative;
    z-index: 30;
}

/* Lo anidado (una tabla o sección dentro de otra) no apila otro vidrio. */
html.gmp-tema-clasico.dark .fi-panel-app :is(.fi-section, .fi-ta-ctn) :is(.fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-empty-state, .fi-callout) {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Capas internas de la tabla: tema-gmp las pinta con --gmp-panel (sólido). */
html.gmp-tema-clasico.dark .fi-panel-app .fi-ta-header-ctn {
    background-color: transparent;
    border-bottom-color: var(--gmp-clasico-vidrio-borde);
}

html.gmp-tema-clasico.dark .fi-panel-app .fi-ta-header-cell {
    background-color: rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-transparency: reduce) {
    html.gmp-tema-clasico.dark .fi-panel-app :is(.fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-page-sub-navigation-sidebar-ctn, .fi-tabs.fi-contained, .fi-empty-state, .fi-callout) {
        background-color: var(--gmp-panel);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Quien pide menos transparencia recibe superficies sólidas. */
@media (prefers-reduced-transparency: reduce) {
    html.gmp-tema-clasico.dark .fi-panel-app nav.fi-topbar,
    html.gmp-tema-clasico.dark .fi-panel-app .fi-topbar-ctn {
        background: #1a2330;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar,
    html.gmp-tema-clasico.dark .fi-panel-app .fi-sidebar-header {
        background: #201e2c;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Con backdrop-filter, la barra (y cada vidrio) se vuelve el marco del
   position: fixed de lo que lleva dentro: un modal abierto desde ahí (p. ej.
   «Perfil con el que operas» en el menú de usuario) quedaba encajonado en la
   barra. Mientras haya un modal abierto, sin desenfoque; el velo del modal
   lo tapa. */
html.gmp-tema-clasico.dark .fi-panel-app :is(nav.fi-topbar, .fi-topbar-ctn, .fi-sidebar, .fi-sidebar-header, .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-page-sub-navigation-sidebar-ctn, .fi-tabs.fi-contained, .fi-empty-state, .fi-callout):has(.fi-modal.fi-modal-open) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}