/* Tema claro / oscuro: las VARIABLES de color de toda la aplicación (guía: docs/Dev/modulos/M40-MODO-OSCURO.md).

   Cómo funciona:
   · El usuario elige el tema en el engranaje → Apariencia ("light" o "dark").
   · js/tema.js lo resuelve y deja en <html> `data-tema="claro"` o `data-tema="oscuro"`.
   · Aquí cada variable tiene su valor claro (en :root) y su valor oscuro (bajo [data-tema="oscuro"]).

   ESTA HOJA NO PINTA NADA POR SÍ SOLA, a propósito: solo define variables. Una pantalla cambia de tema
   cuando su CSS deja de escribir colores fijos (#ffffff, #1f2937…) y usa estas variables. Así se adapta
   pantalla a pantalla sin romper las que aún no lo están, que siguen igual en claro y en oscuro.

   Los valores CLAROS son los que ya usaba la aplicación: pasar una pantalla a variables no cambia nada en
   claro (como mucho, un gris casi idéntico pasa a ser el de la variable más cercana). Si una pantalla necesita un tono que no está, se añade aquí (en los dos bloques),
   nunca un color fijo en la pantalla. */

:root {
    /* Fondos */
    --erp-fondo: #f3f4f6;                 /* el lienzo detrás de las tarjetas */
    --erp-superficie: #ffffff;            /* tarjetas, paneles, botones neutros */
    --erp-superficie-suave: #f8fafc;      /* hover de una fila, zona destacada dentro de una tarjeta */
    --erp-hover: #f4f6f9;                 /* hover de una opción de menú */
    --erp-flotante: #ffffff;              /* desplegables y menús flotantes */
    --erp-sombra-flotante: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    --erp-scroll: #cbd5e1;                /* barra de desplazamiento */
    --erp-scroll-hover: #94a3b8;

    /* Bordes y separadores */
    --erp-borde: #e5e7eb;
    --erp-borde-suave: #eef2f7;           /* líneas entre filas de una lista o tabla */
    --erp-borde-fuerte: #d1d5db;          /* borde de un botón o control */

    /* Texto, de más a menos contraste */
    --erp-texto-fuerte: #111827;          /* cifras grandes */
    --erp-texto: #1f2937;                 /* títulos y texto principal */
    --erp-texto-medio: #374151;
    --erp-texto-secundario: #4b5563;
    --erp-texto-suave: #6b7280;           /* etiquetas, ayudas, fechas */
    --erp-texto-tenue: #9ca3af;           /* iconos de «ir», etiquetas muy secundarias */

    /* Color principal: el COLOR DE ACENTO que elige el usuario en Apariencia (azul de serie). El servidor y
       js/tema.js escriben `--erp-acento` en el style de <html>, que manda sobre este valor. Los demás tonos
       se sacan de él: no se escriben a mano, para que sigan a cualquier acento. Una pantalla usa
       `--erp-primario…`, nunca `--erp-acento` directamente: en oscuro el primario es el acento aclarado. */
    --erp-acento: #2563eb;
    --erp-primario: var(--erp-acento);
    --erp-primario-hover: color-mix(in srgb, var(--erp-acento) 85%, #000000);
    --erp-primario-texto: color-mix(in srgb, var(--erp-acento) 70%, #000000);   /* texto de la opción activa de un menú */
    --erp-primario-suave: color-mix(in srgb, var(--erp-acento) 7%, #ffffff);    /* fondo de una pastilla o hover */
    --erp-primario-borde: color-mix(in srgb, var(--erp-acento) 28%, #ffffff);
    --erp-sobre-primario: #ffffff;        /* texto encima del color principal */

    /* Color de marca (morado de sugerencias y del inicio vacío) */
    --erp-marca: #6d5ef1;
    --erp-marca-hover: #5b4ce0;
    --erp-marca-suave: #f4f2ff;
    --erp-marca-borde: #c7c2f2;

    /* Significados */
    --erp-exito: #16a34a;
    --erp-peligro: #dc2626;
    --erp-peligro-suave: #fef2f2;

    /* Acentos de tarjetas y gráficos (los mismos en los dos temas) y su tinte de fondo */
    --erp-acento-azul: #2563eb;
    --erp-acento-verde: #16a34a;
    --erp-acento-morado: #7c3aed;
    --erp-acento-naranja: #ea580c;
    --erp-tinte-neutro: #f8fafc;
    --erp-tinte-azul: #f5f8ff;
    --erp-tinte-verde: #f4fbf6;
    --erp-tinte-morado: #f8f5ff;
    --erp-tinte-naranja: #fff8f3;

    /* Tarjeta de sugerencia del inicio (escaparate en tonos de la marca) */
    --erp-sugerencia-fondo: linear-gradient(120deg, #f6f5ff 0%, #fdfcff 55%, #f2f9ff 100%);
    --erp-sugerencia-borde: #e3e0f7;

    /* Sombras y cargando */
    --erp-sombra-tarjeta: 0 6px 18px rgba(15, 23, 42, 0.04);
    --erp-esqueleto: linear-gradient(180deg, #eef0f3, #e5e7eb);
    --erp-esqueleto-hueso: #eceef1;       /* bloque de un esqueleto animado */
    --erp-esqueleto-brillo: #f7f8fa;      /* el brillo que lo recorre */

    /* Orbe del asistente del inicio: su color sale del ACENTO; esto solo dice cuánto se aclara u oscurece
       en cada tema. En claro se lee por su sombra y sus reflejos blancos; en oscuro, por su propia luz. */
    --erp-orbe-cima: 82%;                 /* blanco en la cima iluminada */
    --erp-orbe-hondo: 58%;                /* acento en la base (el resto, azul noche) */
    --erp-orbe-reflejo: 0.9;              /* opacidad de los reflejos blancos */
    --erp-orbe-resplandor: 22%;           /* fuerza del halo y de la sombra de color */
    --erp-orbe-aura: 0%;                  /* luz propia: aura, borde de color y reflejo en el suelo */
}

:root[data-tema="oscuro"] {
    --erp-fondo: #0f1218;
    --erp-superficie: #181c24;
    --erp-superficie-suave: #20252f;
    --erp-hover: #232833;
    --erp-flotante: #1d222b;
    --erp-sombra-flotante: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --erp-scroll: #3a4150;
    --erp-scroll-hover: #4b5466;

    --erp-borde: #2b313d;
    --erp-borde-suave: #232833;
    --erp-borde-fuerte: #3a4150;

    --erp-texto-fuerte: #f9fafb;
    --erp-texto: #e5e7eb;
    --erp-texto-medio: #d1d5db;
    --erp-texto-secundario: #b6bcc7;
    --erp-texto-suave: #9ca3af;
    --erp-texto-tenue: #6b7280;

    /* El acento aclarado para que se lea sobre fondo oscuro (abajo, con @supports, el ajuste fino). */
    --erp-primario: color-mix(in srgb, var(--erp-acento) 80%, #ffffff);
    --erp-primario-hover: color-mix(in srgb, var(--erp-acento) 62%, #ffffff);
    --erp-primario-texto: color-mix(in srgb, var(--erp-acento) 45%, #ffffff);
    --erp-primario-suave: color-mix(in srgb, var(--erp-primario) 16%, transparent);
    --erp-primario-borde: color-mix(in srgb, var(--erp-primario) 45%, transparent);
    --erp-sobre-primario: #ffffff;

    --erp-marca: #8b7ff5;
    --erp-marca-hover: #a196f8;
    --erp-marca-suave: rgba(139, 127, 245, 0.14);
    --erp-marca-borde: rgba(139, 127, 245, 0.45);

    --erp-exito: #22c55e;
    --erp-peligro: #f87171;
    --erp-peligro-suave: rgba(248, 113, 113, 0.14);

    --erp-acento-azul: #3b82f6;
    --erp-acento-verde: #22c55e;
    --erp-acento-morado: #8b5cf6;
    --erp-acento-naranja: #f97316;
    --erp-tinte-neutro: #1b1f28;
    --erp-tinte-azul: rgba(59, 130, 246, 0.12);
    --erp-tinte-verde: rgba(34, 197, 94, 0.10);
    --erp-tinte-morado: rgba(139, 92, 246, 0.12);
    --erp-tinte-naranja: rgba(249, 115, 22, 0.10);

    --erp-sugerencia-fondo: linear-gradient(120deg, #1f1d33 0%, #1a1d27 55%, #172231 100%);
    --erp-sugerencia-borde: #33305a;

    --erp-sombra-tarjeta: 0 6px 18px rgba(0, 0, 0, 0.35);
    --erp-esqueleto: linear-gradient(180deg, #1d222b, #252b36);
    --erp-esqueleto-hueso: #222833;
    --erp-esqueleto-brillo: #2c3340;

    --erp-orbe-cima: 52%;
    --erp-orbe-hondo: 42%;
    --erp-orbe-reflejo: 0.55;
    --erp-orbe-resplandor: 40%;
    --erp-orbe-aura: 100%;
}

/* En oscuro, un acento muy oscuro (el azul marino) mezclado con blanco seguiría perdiéndose en el fondo. Donde
   el navegador sabe tocar solo la luminosidad de un color, se sube la del acento hasta un mínimo legible y se
   conserva su tono; los acentos que ya son claros no cambian. */
@supports (color: oklch(from red l c h)) {
    :root[data-tema="oscuro"] {
        --erp-primario: oklch(from var(--erp-acento) max(l, 0.66) c h);
        --erp-primario-hover: oklch(from var(--erp-acento) max(l, 0.74) c h);
        --erp-primario-texto: oklch(from var(--erp-acento) max(l, 0.82) c h);
    }
}

/* La pantalla ADAPTADA lo dice con la clase `tema-adaptado` en su elemento raíz. Solo entonces el lienzo
   de alrededor (la zona de contenido del layout) y los controles nativos del navegador (barras de
   desplazamiento, casillas, campos sin estilo) pasan a oscuro. Sin la clase, una pantalla todavía con
   colores fijos se queda entera en claro, en vez de salir con texto oscuro sobre fondo oscuro. */
:root[data-tema="oscuro"] .main-body:has(.tema-adaptado) {
    background-color: var(--erp-fondo);
    color-scheme: dark;
}

:root[data-tema="oscuro"] .tema-adaptado {
    color-scheme: dark;
    color: var(--erp-texto);
}

/* ===== Controles dentro de lo adaptado =====
   Lo que pintan hojas de toda la aplicación (botones.css, el tema de Syncfusion) no se pasa a variables allí:
   oscurecería también las pantallas sin adaptar. Se le da aquí su versión oscura SOLO dentro de `tema-adaptado`,
   y así cualquier pantalla que se adapte la tiene sin escribir nada. */

/* Botones (botones.css y quien use sus variables --cb-*): heredan estas. */
:root[data-tema="oscuro"] .tema-adaptado {
    --cb-neutro-fondo: var(--erp-superficie);
    --cb-neutro-borde: var(--erp-borde-fuerte);
    --cb-neutro-texto: var(--erp-texto-medio);
    --cb-neutro-hover-fondo: var(--erp-hover);
    --cb-neutro-hover-borde: var(--erp-scroll-hover);
    --cb-neutro-hover-texto: var(--erp-texto-fuerte);
    --cb-sombra: none;
    --cb-principal-icono: var(--erp-primario);
    --cb-crear-icono: #4ade80;
    --cb-informes-icono: #a78bfa;
    --cb-borrar-icono: #f87171;
    --cb-borrar-hover-fondo: var(--erp-peligro-suave);
    --cb-borrar-hover-borde: rgba(248, 113, 113, 0.4);
    --cb-borrar-hover-texto: #fca5a5;
}

/* Campos de Syncfusion (texto, número, desplegable, fecha): caja, texto e iconos. */
:root[data-tema="oscuro"] .tema-adaptado .e-input-group,
:root[data-tema="oscuro"] .tema-adaptado .e-input-group.e-control-wrapper,
:root[data-tema="oscuro"] .tema-adaptado .e-float-input,
:root[data-tema="oscuro"] .tema-adaptado .e-float-input.e-control-wrapper {
    background: var(--erp-superficie) !important;
    border-color: var(--erp-borde-fuerte) !important;
    color: var(--erp-texto) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-input-group input.e-input,
:root[data-tema="oscuro"] .tema-adaptado .e-input-group .e-input,
:root[data-tema="oscuro"] .tema-adaptado input.e-input,
:root[data-tema="oscuro"] .tema-adaptado .e-float-input input {
    background: transparent !important;
    color: var(--erp-texto) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-input-group .e-input-group-icon,
:root[data-tema="oscuro"] .tema-adaptado .e-input-group.e-control-wrapper .e-input-group-icon {
    background: transparent !important;
    color: var(--erp-texto-suave) !important;
    border-color: var(--erp-borde-fuerte) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-input-group.e-disabled,
:root[data-tema="oscuro"] .tema-adaptado .e-input-group.e-control-wrapper.e-disabled {
    background: var(--erp-superficie-suave) !important;
    color: var(--erp-texto-tenue) !important;
}

/* Interruptores y casillas de Syncfusion: apagados, grises del tema; encendidos, el color principal (en los dos
   temas: así siguen al color de acento). */
.tema-adaptado .e-switch-wrapper .e-switch-inner.e-switch-active,
.tema-adaptado .e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    background-color: var(--erp-primario) !important;
    border-color: var(--erp-primario) !important;
}

.tema-adaptado .e-checkbox-wrapper .e-frame.e-check,
.tema-adaptado .e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--erp-primario) !important;
    border-color: var(--erp-primario) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-switch-wrapper .e-switch-inner:not(.e-switch-active) {
    background-color: var(--erp-superficie-suave) !important;
    border-color: var(--erp-borde-fuerte) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-switch-wrapper .e-switch-handle:not(.e-switch-active) {
    background-color: var(--erp-texto-tenue) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-checkbox-wrapper .e-frame:not(.e-check) {
    background-color: var(--erp-superficie) !important;
    border-color: var(--erp-borde-fuerte) !important;
}

:root[data-tema="oscuro"] .tema-adaptado .e-checkbox-wrapper .e-label,
:root[data-tema="oscuro"] .tema-adaptado .e-radio-wrapper .e-label {
    color: var(--erp-texto) !important;
}

/* La LISTA de un desplegable de Syncfusion no vive dentro de la pantalla: Syncfusion la cuelga del <body>. Se
   oscurece cuando en la página hay algo adaptado (una pantalla o una ventana como Ajustes); en una pantalla sin
   adaptar sigue en claro, como el control del que sale. */
:root[data-tema="oscuro"]:has(.tema-adaptado) .e-popup.e-ddl,
:root[data-tema="oscuro"]:has(.tema-adaptado) .e-popup.e-multi-select-list-wrapper,
:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase {
    background: var(--erp-flotante) !important;
    border-color: var(--erp-borde) !important;
    box-shadow: var(--erp-sombra-flotante) !important;
}

:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase .e-list-item,
:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase .e-list-group-item {
    background: transparent !important;
    color: var(--erp-texto) !important;
}

:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase .e-list-item.e-hover,
:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase .e-list-item.e-item-focus {
    background: var(--erp-hover) !important;
    color: var(--erp-texto-fuerte) !important;
}

:root[data-tema="oscuro"]:has(.tema-adaptado) .e-dropdownbase .e-list-item.e-active {
    background: var(--erp-primario-suave) !important;
    color: var(--erp-primario-texto) !important;
}

/* Animaciones y transiciones (Apariencia → Interfaz). Desactivadas, `data-animaciones="no"` en <html> las deja
   en casi cero en TODA la aplicación, adaptada o no: esto no es un color, no hay nada que pasar pantalla a
   pantalla. Casi cero y no `none`, a propósito: lo que espera a que acabe una animación (el cierre de las
   ventanas, modalSalida.js) sigue recibiendo su `animationend` y no se queda colgado. Con `!important` y
   selector universal porque tiene que ganar a las reglas de cada pantalla. */
:root[data-animaciones="no"] *,
:root[data-animaciones="no"] *::before,
:root[data-animaciones="no"] *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}