/* ═══════════════════════════════════════════════════════════════════════════
   Identidad visual — Palau Projectes Via
   ═══════════════════════════════════════════════════════════════════════════

   La marca de la empresa es BLANCO Y NEGRO. Así que la regla de oro aquí es:

       El cromo (botones, enlaces, navegación, logo) va en MONOCROMO.
       El color se RESERVA para significado, nunca para decoración.

   Es decir: verde/ámbar/rojo solo aparecen cuando comunican algo real
   (semáforo del trabajador, estado de una máquina, alertas de caducidad,
   proyectos con retraso). Al quitar el morado decorativo del tema, el color
   pasa a leerse como información, que es justo lo que necesita esta app.

   ─── CUIDADO CON EL MODO OSCURO ────────────────────────────────────────────
   Este fichero se carga DESPUÉS de la paleta de Backpack (ver
   config/backpack/theme-tabler.php). `:root` y `[data-bs-theme=dark]` tienen
   la MISMA especificidad, así que un `:root` nuestro le gana al bloque oscuro
   de Backpack solo por ir después en el orden de carga — y deja el modo oscuro
   con texto negro sobre fondo negro.

   Por eso la estructura de abajo copia la del fichero de Backpack:
   TODA variable que se redefina en el bloque claro DEBE tener su contrapartida
   en el bloque oscuro. Si añades una variable arriba, añádela también abajo.
   ═════════════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme='light'],
[data-menu-theme='light'] {
    /* ── Color de marca: negro (antes: morado #7c69ef) ────────────────────
       No es negro puro (#000): un negro absoluto sobre blanco cansa la vista
       y en pantalla se ve "duro". #1c1c1e es el negro tipográfico habitual. */
    --tblr-primary: #1c1c1e;
    --tblr-primary-rgb: 28, 28, 30;
    --tblr-primary-text-emphasis: #000000;
    --tblr-primary-bg-subtle: #ececee;
    --tblr-primary-border-subtle: #c7c7cc;
    --tblr-tabler: #1c1c1e;
    --tblr-tabler-rgb: 28, 28, 30;

    /* ── Grises NEUTROS ──────────────────────────────────────────────────
       Los de Tabler llevan tinte morado (#4c496c, #211d3b…), lo que teñía
       toda la interfaz de violeta. Aquí van grises puros, sin matiz. */
    --tblr-gray: #6b6b70;
    --tblr-gray-dark: #2b2b2e;
    --tblr-gray-100: #f4f4f5;
    --tblr-gray-200: #e6e6e8;
    --tblr-gray-300: #d1d1d4;
    --tblr-gray-400: #a9a9ae;
    --tblr-gray-500: #85858b;
    --tblr-gray-600: #6b6b70;
    --tblr-gray-700: #4a4a4e;
    --tblr-gray-800: #2b2b2e;
    --tblr-gray-900: #1c1c1e;

    --tblr-secondary: #6b6b70;
    --tblr-secondary-rgb: 107, 107, 112;
    --tblr-secondary-text-emphasis: #4a4a4e;
    --tblr-secondary-bg-subtle: #eeeeef;
    --tblr-secondary-border-subtle: #dcdcde;

    --tblr-dark: #1c1c1e;
    --tblr-dark-rgb: 28, 28, 30;

    --tblr-body-color: #1c1c1e;
    --tblr-body-color-rgb: 28, 28, 30;
    --tblr-body-bg: #f4f4f5;
    --tblr-body-bg-rgb: 244, 244, 245;
    --tblr-muted: #6b6b70;
    --tblr-muted-rgb: 107, 107, 112;

    /* ── Enlaces ─────────────────────────────────────────────────────────
       Tabler los pinta morados con su propia variable (NO deriva de
       --tblr-primary), así que hay que cambiarla aparte o se quedan violeta
       los breadcrumbs, el logo y los nombres de proyecto de los listados. */
    --tblr-link-color: #1c1c1e;
    --tblr-link-color-rgb: 28, 28, 30;
    --tblr-link-hover-color: #000000;
    --tblr-link-hover-color-rgb: 0, 0, 0;

    --tblr-focus-ring-color: rgba(28, 28, 30, .2);

    /* ── "Tinta" de marca, para las vistas propias ────────────────────────
       Las plantillas nuestras (p. ej. los KPIs del dashboard) NO pueden usar
       un hex fijo: en oscuro sería un rectángulo negro invisible. Usan estas
       dos variables, que se invierten solas según el tema.
       --palau-ink          → fondo/acento de marca
       --palau-ink-contrast → lo que va ENCIMA de ese fondo (icono, texto) */
    --palau-ink: #1c1c1e;
    --palau-ink-contrast: #ffffff;

    /* Restos de morado que Backpack clava en :root (crud/common.css): el
       resaltado de select2 y el hover de las filas (#f2f1ff, un lila). No
       derivan de --tblr-primary, así que hay que pisarlos a mano. */
    --select2-selected-item-background: var(--palau-ink);
    --select2-selected-item-color: var(--palau-ink-contrast);
    --table-row-hover: var(--palau-surface-2);

    /* ── Superficies, para las pantallas propias ──────────────────────────
       El Gantt, el tablero de maquinaria y el manual pintan su propio lienzo
       (celdas, cabeceras, tarjetas). NO deben usar hex: se romperían en
       oscuro. Estas cuatro capas van de "lo más elevado" a "lo más hundido":
         surface   → el lienzo (lo que antes era #fff)
         surface-2 → cabeceras y zonas en reposo (antes #f6f8fa)
         surface-3 → chips y contadores (antes #e9ecef)
         tint-weak → sombreados sutiles: findes, filas vacías, hover
       Se definen con alfa a propósito: así funcionan sobre cualquier fondo. */
    --palau-surface: #ffffff;
    --palau-surface-2: #f6f7f8;
    --palau-surface-3: #e9eaec;
    --palau-tint-weak: rgba(0, 0, 0, .035);
    --palau-tint-hover: rgba(0, 0, 0, .05);
    /* Selección / arrastre: monocromo, no azul (el azul era decorativo). */
    --palau-tint-select: rgba(28, 28, 30, .07);
    /* "Hoy" en el calendario SÍ es información → mantiene su ámbar. */
    --palau-tint-today: rgba(245, 159, 0, .20);

    /* success / warning / danger / info NO se tocan: son los que llevan el
       significado (semáforo, alertas, estados). Ver comentario de cabecera. */
}

[data-bs-theme='dark'],
[data-menu-theme='dark'] {
    /* En oscuro el negro no puede ser el color de acción (no se vería): la
       marca se invierte y el blanco pasa a ser el primario. */
    --tblr-primary: #f4f4f5;
    --tblr-primary-rgb: 244, 244, 245;
    --tblr-primary-text-emphasis: #d1d1d4;
    --tblr-primary-bg-subtle: #2b2b2e;
    --tblr-primary-border-subtle: #4a4a4e;
    --tblr-tabler: #f4f4f5;
    --tblr-tabler-rgb: 244, 244, 245;

    --tblr-secondary: #a9a9ae;
    --tblr-secondary-rgb: 169, 169, 174;
    --tblr-secondary-text-emphasis: #d1d1d4;
    --tblr-secondary-bg-subtle: #2b2b2e;
    --tblr-secondary-border-subtle: #4a4a4e;

    /* Sin esto, el bloque claro de arriba pintaría texto negro sobre el fondo
       oscuro del tema: la pantalla entera ilegible. */
    --tblr-body-color: #c9c9ce;
    --tblr-body-color-rgb: 201, 201, 206;
    --tblr-body-bg: #181818;
    --tblr-body-bg-rgb: 24, 24, 24;
    --tblr-muted: #a9a9ae;
    --tblr-muted-rgb: 169, 169, 174;

    --tblr-link-color: #e6e6e8;
    --tblr-link-color-rgb: 230, 230, 232;
    --tblr-link-hover-color: #ffffff;
    --tblr-link-hover-color-rgb: 255, 255, 255;

    --tblr-focus-ring-color: rgba(244, 244, 245, .25);

    --palau-ink: #e6e6e8;
    --palau-ink-contrast: #1c1c1e;

    --table-row-hover: var(--palau-surface-2);

    --palau-surface: #1e1e21;
    --palau-surface-2: #26262a;
    --palau-surface-3: #33333a;
    --palau-tint-weak: rgba(255, 255, 255, .04);
    --palau-tint-hover: rgba(255, 255, 255, .07);
    --palau-tint-select: rgba(255, 255, 255, .10);
    --palau-tint-today: rgba(245, 159, 0, .28);
}

/* En oscuro el primario es CLARO, así que todo lo que se rellene con él necesita
   texto oscuro encima. Bootstrap fija el texto activo en blanco, y el botón
   "Acciones" (btn-outline-primary) se quedaba blanco sobre blanco al abrirlo. */
[data-bs-theme='dark'] .btn-primary {
    color: #1c1c1e;
}

[data-bs-theme='dark'] .btn-outline-primary {
    --tblr-btn-hover-color: #1c1c1e;
    --tblr-btn-active-color: #1c1c1e;
}

/* Mismo caso en la inicial del usuario (arriba a la derecha): Backpack la rellena
   con el primario y le pone la letra en blanco fijo. En oscuro eso era una letra
   blanca sobre fondo claro → se veía un disco blanco sin inicial. */
[data-bs-theme='dark'] .backpack-avatar-menu-container {
    color: var(--palau-ink-contrast);
}

/* ── Menús desplegables en oscuro ────────────────────────────────────────
   El menú "Acciones" de los listados salía en BLANCO con el texto claro:
   ilegible. El fondo no viene de ninguna variable de :root, sino que está
   fijado en la propia regla del componente (--tblr-dropdown-bg se declara
   dentro de .dropdown-menu), así que hay que redefinirlo AHÍ. */
[data-bs-theme='dark'] .dropdown-menu {
    --tblr-dropdown-bg: var(--palau-surface);
    --tblr-dropdown-color: var(--tblr-body-color);
    --tblr-dropdown-border-color: var(--tblr-border-color);
    --tblr-dropdown-divider-bg: var(--tblr-border-color);
    --tblr-dropdown-header-color: var(--tblr-muted);
    --tblr-dropdown-link-color: var(--tblr-body-color);
    --tblr-dropdown-link-hover-color: #ffffff;
    --tblr-dropdown-link-hover-bg: var(--palau-tint-hover);
    --tblr-dropdown-link-active-color: #ffffff;
    --tblr-dropdown-link-active-bg: var(--palau-tint-select);
    background-color: var(--palau-surface);
    border-color: var(--tblr-border-color);
}

[data-bs-theme='dark'] .dropdown-menu .dropdown-item {
    color: var(--tblr-body-color);
}

[data-bs-theme='dark'] .dropdown-menu .dropdown-item:hover,
[data-bs-theme='dark'] .dropdown-menu .dropdown-item:focus {
    background-color: var(--palau-tint-hover);
    color: #ffffff;
}

[data-bs-theme='dark'] .dropdown-menu .dropdown-divider {
    border-color: var(--tblr-border-color);
}

/* BUG DE BACKPACK, no nuestro: el JS de los listados (datatable_logic.blade.php,
   al reposicionar el menú "Acciones" con position:fixed) le escribe
   `background: white` y `border: 1px solid #dee2e6` EN LÍNEA. Un estilo en línea
   gana a cualquier hoja, así que en oscuro el menú salía blanco con el texto
   claro: ilegible. `!important` es la única forma de ganarle sin forkear las
   1.400 líneas de esa vista de vendor (que habría que mantener en cada upgrade).
   Solo pisamos color y borde: la posición que calcula el JS se respeta. */
[data-bs-theme='dark'] .dropdown-menu[style] {
    background: var(--palau-surface) !important;
    border-color: var(--tblr-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Paginación
   ═══════════════════════════════════════════════════════════════════════════
   La página activa se rellena con el primario. En oscuro el primario es CLARO,
   y Bootstrap deja el número en blanco → blanco sobre blanco. Lo atamos a la
   pareja ink / ink-contrast, que se invierte sola y vale para los dos temas. */
.page-item.active .page-link,
.page-link.active {
    background-color: var(--palau-ink);
    border-color: var(--palau-ink);
    color: var(--palau-ink-contrast);
}

.page-link {
    color: var(--tblr-body-color);
}

.page-link:hover {
    background-color: var(--palau-tint-hover);
    color: var(--tblr-body-color);
}

.page-item.disabled .page-link {
    color: var(--tblr-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   select2 (filtros de los listados)
   ═══════════════════════════════════════════════════════════════════════════
   select2 se carga desde CDN con su CSS propio, que es SIEMPRE claro y no sabe
   nada del tema: en oscuro el desplegable salía blanco y la opción bajo el ratón
   quedaba en claro sobre claro. Lo repintamos entero con las superficies del
   tema. Va bajo [data-bs-theme=dark] para no tocar el modo claro. */
/* Backpack ya tiene un juego de variables propio para select2 en oscuro
   (`--bp-select2-*`, en theme-tabler/.../color-adjustments.css). Ese es el punto
   de extensión bueno: redefinirlas evita pelearse a golpe de !important.
   OJO al selector: Backpack las declara en `html[data-bs-theme=dark]`, que tiene
   MÁS especificidad que un `[data-bs-theme=dark]` a secas — hay que igualarlo o
   no se pisan. (Por eso los grises seguían saliendo por defecto.) */
html[data-bs-theme='dark'] {
    --bp-select2-dropdown-bg: var(--palau-surface);
    --bp-select2-dropdown-border-color: var(--tblr-border-color);
    --bp-select2-option-color: var(--tblr-body-color);
    --bp-select2-option-selected-bg: var(--palau-surface-3);
    --bp-select2-option-selected-color: var(--tblr-body-color);
    --bp-select2-option-disabled-color: var(--tblr-muted);
    --bp-select2-search-bg: var(--palau-surface-2);
    --bp-select2-search-color: var(--tblr-body-color);
    --bp-select2-rendered-color: var(--tblr-body-color);
    --bp-select2-placeholder-color: var(--tblr-muted);
    --bp-select2-choice-color: var(--palau-surface-3);
    --bp-select2-choice-border-color: var(--tblr-border-color);
    --bp-select2-container-border-color: var(--tblr-border-color);
    --bp-select2-selection-border-color: var(--tblr-border-color);
    --bp-select2-focus-color: var(--tblr-body-color);
    --bp-select2-focus-border-color: var(--tblr-gray-400);

    /* La opción bajo el ratón: Backpack la rellena con el primario y le pone el
       texto en blanco. En oscuro el primario es CLARO → blanco sobre blanco, que
       es justo lo que se veía. Mantenemos el relleno y le damos el contraste. */
    --select2-selected-item-background: var(--palau-ink);
    --select2-selected-item-color: var(--palau-ink-contrast);
}

/* OJO: el tema de select2 que carga Backpack es `select2-container--bootstrap`,
   NO `--default`. Los selectores no deben atarse al nombre del tema (probado:
   con `--default` no casa ni una regla). */
[data-bs-theme='dark'] .select2-dropdown,
[data-bs-theme='dark'] .select2-selection--single,
[data-bs-theme='dark'] .select2-selection--multiple {
    background-color: var(--palau-surface) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

[data-bs-theme='dark'] .select2-selection__rendered,
[data-bs-theme='dark'] .select2-results__option {
    color: var(--tblr-body-color) !important;
}

[data-bs-theme='dark'] .select2-selection__placeholder {
    color: var(--tblr-muted) !important;
}

/* La opción bajo el ratón: Backpack la rellena con el PRIMARIO y le pone el texto
   en blanco. En oscuro el primario es claro → blanco sobre blanco, que es justo
   lo que se veía. Mantenemos el relleno (es el resaltado de marca) y le damos el
   texto de contraste, igual que en los botones. */
[data-bs-theme='dark'] .select2-results__option--highlighted {
    background-color: var(--palau-ink) !important;
    color: var(--palau-ink-contrast) !important;
}

[data-bs-theme='dark'] .select2-results__option[aria-selected='true'] {
    background-color: var(--palau-surface-3) !important;
    color: var(--tblr-body-color) !important;
}

/* Chips de los filtros multi-valor + su aspa de quitar. */
[data-bs-theme='dark'] .select2-selection__choice {
    background-color: var(--palau-surface-3) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

[data-bs-theme='dark'] .select2-selection__choice__remove {
    color: var(--tblr-muted) !important;
}

/* Caja de búsqueda dentro del desplegable (salía gris claro, casi ilegible). */
[data-bs-theme='dark'] .select2-search__field {
    background-color: var(--palau-surface-2) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

/* Y en los FILTROS de los listados, Backpack pisa esa misma caja con una regla
   más específica y con !important (theme-tabler/style.css:348), pintándola de
   `--tblr-gray`: un gris medio ilegible. Hay que igualarle el selector, porque
   un !important no basta contra otro !important más específico. */
[data-bs-theme='dark'] .navbar-filters .select2-container .select2-search input {
    background-color: var(--palau-surface-2) !important;
    color: var(--tblr-body-color) !important;
    caret-color: var(--tblr-body-color);
}

/* Los avisos emergentes "primary" (noty) también llevaban el morado escrito a
   fuego en el CSS de Backpack, no como variable. */
.noty_theme__backstrap.noty_type__primary {
    background-color: var(--palau-ink);
    border-color: var(--palau-ink);
    color: var(--palau-ink-contrast);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Logo de la empresa
   ═══════════════════════════════════════════════════════════════════════════
   El mismo logo se pinta en la barra superior y en las pantallas de acceso
   (config/backpack/ui.php → project_logo), pero a distinto tamaño. El PNG es
   muy apaisado (~4:1), así que se dimensiona SIEMPRE por altura y el ancho va
   solo: fijar el ancho lo deformaría o lo dejaría minúsculo.
   Se cargan las dos versiones (negra y blanca) y aquí se decide cuál se ve. */
.palau-logo {
    display: inline-block;
    height: 30px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
}

/* En el login el logo es el protagonista: más grande y centrado. */
.auth-logo-container .palau-logo {
    height: 64px;
}

.palau-logo-dark { display: none; }
[data-bs-theme='dark'] .palau-logo-light { display: none; }
[data-bs-theme='dark'] .palau-logo-dark { display: inline-block; }

/* En móvil la barra es estrecha: encogemos el logo para que no empuje al menú. */
@media (max-width: 575.98px) {
    .palau-logo { height: 24px; }
}

.navbar-brand,
.navbar-brand-autodark {
    color: var(--tblr-body-color);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Al quedarse sin color, un enlace pierde su única señal de "esto se puede
   pulsar" y en los listados los nombres parecen texto plano. Se la devolvemos
   con el subrayado al pasar por encima. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Volver al listado" — feedback del cliente: «pasa desapercibido»
   ═══════════════════════════════════════════════════════════════════════════
   Backpack lo pinta como un <a> gris diminuto dentro de un <small>, pegado al
   subtítulo. Lo convertimos en un botón de verdad SIN tocar ninguna vista:
   nos enganchamos al atributo bp-section que Backpack ya pinta, así vale para
   TODAS las pantallas (show, editar, crear) de todos los CRUD.
   ═════════════════════════════════════════════════════════════════════════ */
[bp-section='page-subheading-back-button'] {
    margin-left: 1rem !important;
}

[bp-section='page-subheading-back-button'] small {
    font-size: 100%;
}

[bp-section='page-subheading-back-button'] a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease;
}

[bp-section='page-subheading-back-button'] a:hover {
    border-color: var(--tblr-gray-400);
    color: var(--tblr-primary-text-emphasis) !important;
    text-decoration: none;
}