/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MODO OSCURO — correcciones de lo que el proyecto escribió con color fijo
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Por qué existe esta hoja y no se corrigen las otras
   ───────────────────────────────────────────────────
   Decisión de Mario (2026-09-27): **el modo claro no se toca**. Todo lo que haga falta reescribir
   vive acá. Eso no es solo prudencia: **hace imposible romper el claro**, porque cada regla de
   este archivo cuelga de `html[data-bs-theme="dark"]` y en claro ninguna se aplica.

   Qué se está corrigiendo
   ───────────────────────
   El modo oscuro de Ubold funciona y siempre funcionó: `config.js` pone `data-bs-theme` en el
   `<html>` y el tema voltea sus variables. Lo que NO voltea es lo que nosotros escribimos con un
   hexadecimal fijo encima —`background:#fff`, `border:1px solid #eef2f7`—, y ahí estaba el daño:
   ninguna de las trece hojas del proyecto tenía una sola regla de modo oscuro.

   ⚠ La corrección NO inventa una paleta oscura. Casi todas nuestras reglas resultaron ser **los
     valores claros del tema escritos a mano** —`.card` en `#ffffff` es exactamente
     `var(--ins-secondary-bg)` en claro—, así que lo único que se hace acá es **devolverle la
     variable al tema**. Si mañana cambia la piel, esto la sigue.

   ⚠ NO todo color fijo es un error, y por eso esto no se hizo con un reemplazo masivo:
     · el **QR de fidelización** tiene que seguir sobre blanco o no se escanea;
     · el **lienzo de publicidad** es la obra que se exporta, no una superficie de la interfaz;
     · el **texto oscuro de cocina** va sobre chips de color propio que tampoco cambian;
     · el blanco de `.btn-purple` es el texto sobre el morado, correcto en los dos modos.
     Esos se dejaron como están, a propósito.

   ⚠ Especificidad: el prefijo es `html[data-bs-theme="dark"]` (0-2-1) y no solo el atributo,
     para ganarle también a las reglas de un módulo que llevan `!important` —entre dos
     `!important` decide la especificidad antes que el orden de carga, y las hojas de módulo se
     cargan DESPUÉS de esta—.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* ── El esqueleto: lo que se ve en todas las pantallas ────────────────────────────────────── */

/* El fondo de la página. Era `#f4f4f4`: con el tema en oscuro, todo el sistema seguía sobre un
   gris claro y solo cambiaban los componentes del tema. Es el error que más se nota. */
html[data-bs-theme="dark"] body {
    background: var(--ins-body-bg);
}

/* La tarjeta, que es el contenedor de casi todo. `#ffffff` y `#eef2f7` son exactamente los
   valores CLAROS de estas dos variables: acá solo se devuelven. */
html[data-bs-theme="dark"] .card {
    background-color: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
}

/* El velo de carga. En blanco puro daba un fogonazo en cada navegación. */
html[data-bs-theme="dark"] #global-preloader {
    background: var(--ins-body-bg);
}


/* ── Tablas ──────────────────────────────────────────────────────────────────────────────────
   Las usa cada listado del sistema (DataTables + el marcado del tema). */

html[data-bs-theme="dark"] .table {
    --ins-table-border-color: var(--ins-border-color);
}

html[data-bs-theme="dark"] .table > tbody > tr {
    border-bottom: 1px solid var(--ins-border-color);
}

html[data-bs-theme="dark"] .table > thead > tr > th {
    border-bottom: 2px solid var(--ins-border-color);
}

/* ⚠ Con `!important` porque el original lo lleva: la cabecera va pegajosa al hacer scroll y
   necesita fondo opaco propio. Sin esto quedaba una banda blanca flotando sobre la tabla. */
html[data-bs-theme="dark"] .table-container thead th,
html[data-bs-theme="dark"] .table-container thead tr.fila-filtros th {
    background: var(--ins-secondary-bg) !important;
}

html[data-bs-theme="dark"] .table-container thead tr.fila-filtros .form-control,
html[data-bs-theme="dark"] .table-container thead tr.fila-filtros .form-select {
    background: var(--ins-secondary-bg);
}

/* Era `rgba(255,255,255,0.1)`: un velo blanco sobre cada fila. Aclaraba toda la tabla. */
html[data-bs-theme="dark"] .table tbody tr {
    background: transparent !important;
}


/* ── Campos de formulario ────────────────────────────────────────────────────────────────────

   ⚠ Acá NO se le puede devolver el valor al tema, y el intento de hacerlo fue un error mío que
     Mario vio enseguida: «esos campos de texto casi no se distinguen» (2026-09-27).

     El tema pinta `.form-control` con `--ins-secondary-bg` … y `--ins-modal-bg` es **la misma
     variable**. Dentro de una modal o de una tarjeta el campo queda del color exacto de su
     contenedor: medido, **1.00:1 — invisible**. Lo único que lo delataba era el borde por omisión
     (`--ins-border-color`, 1.23:1), que tampoco alcanza. Antes no se notaba porque nuestro
     `rgba(255,255,255,0.7)` lo pintaba casi blanco: chillón, pero visible.

   ⚠ Y ninguna superficie del tema lo arregla sola: `tertiary-bg` solo llega a 1.12:1 contra la
     tarjeta. **El límite tiene que venir del BORDE**, no del relleno.

   Dos colisiones que obligaron a descartar lo obvio:
     · `--ins-tertiary-bg` NO sirve de relleno: es el color de `.form-control:disabled`. Un campo
       normal quedaría idéntico a uno bloqueado.
     · `--ins-light-border-subtle` (#6c757d) NO sirve de borde en reposo a secas: es el color que
       el tema usa para `:focus`. Con los dos iguales, enfocar deja de verse.

   La solución, medida:
     · relleno `--ins-body-bg` — un pozo HUNDIDO respecto de la tarjeta, y distinto del
       deshabilitado. Texto encima: 8.75:1 (WCAG pide 4.5).
     · borde en reposo #6c757d → **3.78:1** contra el relleno y 3.50:1 contra la modal
       (WCAG pide 3:1 para el límite de un control).
     · borde en foco, un escalón más: #8391a2 → **5.51:1**. Hay que subirlo porque el reposo se
       quedó con el color que antes era el del foco. */

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--ins-body-bg);
    border-color: var(--ins-light-border-subtle);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ins-body-bg);
    border-color: var(--ins-secondary-color);
}

/* ⚠ El `:hover` del proyecto pinta el campo `#f1f3f9` —casi blanco—, así que en oscuro hay que
   anularlo o pasar el dedo por encima lo enciende. El realce pasa al BORDE, que es donde vive el
   límite del control. */
html[data-bs-theme="dark"] .form-control:hover {
    background-color: var(--ins-body-bg);
    border-color: var(--ins-secondary-color);
}

/* El deshabilitado conserva el suyo: es lo que lo distingue de uno que sí se puede escribir. */
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--ins-tertiary-bg);
}

/* ⚠ La flecha del desplegable es un SVG incrustado con `stroke='%23343a40'` —gris casi negro— y
   **el tema NO la corrige en modo oscuro**: sobre el relleno oscuro desaparece y el select se lee
   como una caja de texto. Es la misma imagen, con el trazo en el gris claro del tema. */
html[data-bs-theme="dark"] .form-select {
    --ins-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238391a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* ── Tableros kanban (tickets, tareas, WhatsApp) ─────────────────────────────────────────── */

html[data-bs-theme="dark"] .kanban-app .kanban-content .kanban-board > .kanban-item {
    background: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .kanban-app .kanban-content::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .kanban-app .kanban-content .kanban-board-group::-webkit-scrollbar-thumb {
    background: var(--ins-border-color);
}


/* ── Lienzos: el flujo del bot y el plano del salón ──────────────────────────────────────────
   Comparten la barra de controles y el minimapa (ver `personalizados.css`). */

html[data-bs-theme="dark"] .lf-control {
    background: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .lf-control-item:hover {
    background: var(--ins-tertiary-bg);
}

/* ⚠ El lienzo de LogicFlow trae `background: #fff` en su propia hoja, y ese blanco puro es lo
   que se ve en modo oscuro: no era la cuadrícula —que fue lo primero que miré—, era el lienzo
   entero. Se corrige donde el proyecto ya corrige las demás piezas de LogicFlow, que es acá.

   ⚠ Primero lo intenté pasándole a LogicFlow su opción `grid.config.color`. La opción existe y
   funciona, pero la pantalla termina con DOS rejillas superpuestas —la de fábrica y la mía— así
   que la clara seguía viéndose. Desde CSS se alcanzan las dos de una vez, porque una regla CSS
   gana al atributo `stroke` que LogicFlow escribe en el `<pattern>`. */
html[data-bs-theme="dark"] .flujo-lienzo .lf-graph {
    background: var(--ins-tertiary-bg);
}

/* Gris al 20 %: 1,29:1 contra el lienzo, el mismo peso que la malla clara tiene sobre el suyo
   (1,26:1). El preajuste oscuro de LogicFlow, `#83838377`, da 1,91:1 — casi el doble. */
html[data-bs-theme="dark"] .flujo-lienzo pattern path {
    stroke: #83838333;
}

html[data-bs-theme="dark"] .flujo-lienzo .lf-mini-map,
html[data-bs-theme="dark"] .pl-zona .lf-mini-map {
    background: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .pl-zona .lf-mini-map-header {
    background: var(--ins-tertiary-bg);
}

html[data-bs-theme="dark"] .pl-zona .lf-minimap-viewport {
    background-color: rgba(255, 255, 255, .12);
}

/* Las dos opciones del flujo iban con tintes claros (`#f5f3ff` y `#eff6ff`). Los equivalentes del
   tema ya son translúcidos, así que funcionan sobre cualquier fondo. */
html[data-bs-theme="dark"] .flujo-opcion.es-ia {
    background: var(--ins-primary-bg-subtle);
}

html[data-bs-theme="dark"] .flujo-opcion.es-persona {
    background: var(--ins-info-bg-subtle);
}


/* ── Editor de texto enriquecido (Quill) ─────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .ql-container {
    background: var(--ins-secondary-bg) !important;
}

html[data-bs-theme="dark"] .ql-toolbar {
    background: var(--ins-tertiary-bg) !important;
}


/* ── Esperas, vistas previas y miniaturas ────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .loader-bar,
html[data-bs-theme="dark"] .preview-md,
html[data-bs-theme="dark"] #preview,
html[data-bs-theme="dark"] .mod-img__item {
    background: var(--ins-tertiary-bg);
}

html[data-bs-theme="dark"] .mod-img__icono,
html[data-bs-theme="dark"] .badge-tipo-producto {
    background-color: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .dropzone .dz-preview.dz-image-preview {
    background: var(--ins-secondary-bg);
}

/* ⚠ El brillo del esqueleto de carga va al revés: en claro es una banda BLANCA que recorre un
   gris; en oscuro tiene que ser una banda CLARA recorriendo un oscuro, o no se ve moverse. */
html[data-bs-theme="dark"] .skeleton-box {
    background: linear-gradient(
        90deg,
        var(--ins-tertiary-bg) 40%,
        rgba(255, 255, 255, .08) 50%,
        var(--ins-tertiary-bg) 60%
    );
}


/* ── Marcos y fondos decorativos ─────────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .bggradient {
    background: linear-gradient(135deg, var(--ins-secondary-bg), var(--ins-tertiary-bg));
}

html[data-bs-theme="dark"] .contentPrincipal {
    background: linear-gradient(180deg, var(--ins-secondary-bg) 0%, var(--ins-body-bg) 100%);
}

/* El marco blanco de 5 px que enmarca las fotos, estilo polaroid. En oscuro el marco es la
   superficie, no el blanco. */
html[data-bs-theme="dark"] .contentPrincipal > img,
html[data-bs-theme="dark"] .imagen-item > a > img {
    border: 5px solid var(--ins-secondary-bg) !important;
}

html[data-bs-theme="dark"] .marca-esquina {
    border: 1px solid var(--ins-border-color);
}

html[data-bs-theme="dark"] .btn-crop-image-product,
html[data-bs-theme="dark"] .btn-del-image-product {
    background: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .pb-motivo {
    background: rgba(0, 0, 0, .55);
}


/* ── Módulos ─────────────────────────────────────────────────────────────────────────────── */

/* Tickets: la tarjeta del tablero. */
html[data-bs-theme="dark"] .tk-tarjeta {
    background: var(--ins-secondary-bg);
}

/* POS: la calculadora flotante era un panel blanco entero. */
html[data-bs-theme="dark"] .pos-calc,
html[data-bs-theme="dark"] .pos-calc-teclas button {
    background: var(--ins-secondary-bg);
}

html[data-bs-theme="dark"] .pos-calc-teclas button:hover {
    background: var(--ins-tertiary-bg);
}

html[data-bs-theme="dark"] .pos-calc-teclas button:active,
html[data-bs-theme="dark"] .pos-calc-op:hover {
    background: var(--ins-border-color) !important;
}

html[data-bs-theme="dark"] .pos-calc-op {
    background: var(--ins-tertiary-bg) !important;
}

html[data-bs-theme="dark"] .pos-calc-agarre {
    background: rgba(255, 255, 255, .15);
}

/* Tareas: la prioridad BAJA era un gris claro; las otras tres son tintes de estado y se dejan,
   que significan algo. Y la fila fantasma del arrastre iba en blanco puro. */
html[data-bs-theme="dark"] .tarea-prio.baja {
    background: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
}

html[data-bs-theme="dark"] body > tr.sortable-fallback {
    background: var(--ins-secondary-bg);
}


/* ── El papel tapiz de garabatos, al mismo peso que en claro ────────────────────────────────
   Mismo problema que el del chat de WhatsApp (ver `modo-oscuro-whatsapp.css`) y peor de grado:
   `patron-tablero.svg` dibuja con trazo BLANCO a opacidad **.85 y 1.0** —el del chat usa .62 y
   .48—. Está calculado contra `--ins-tertiary-bg` de CLARO, que es `#f6f7fb`: ahí queda en
   1,07:1 y 1,06:1, una textura que se adivina y nada más. En oscuro esa misma variable vale
   `#272832`, y el trazo salta a **14,63:1 y 10,98:1**. Por eso los garabatos se leen más que
   las tarjetas que están encima.

   ⚠ Se le pone encima una capa del propio color del fondo, así la superficie no cambia de tono
   y lo único que baja es el trazo. Al 95 % el dibujo queda en 1,17:1 y 1,13:1 — el mismo peso
   que tiene en claro. Ni el SVG ni `personalizados.css` se tocan.

   ⚠ `--patron-velo` y el valor oscuro de `--ins-tertiary-bg` van JUNTOS: si el tema cambia ese
   gris y el velo se queda, el velo tiñe las cuatro superficies.

   ⚠ Van los CUATRO selectores que usan este archivo, no solo el tablero. El de las miniaturas y
   los dos de la galería comparten el mismo fondo y el mismo dibujo: arreglar uno y dejar los
   otros es cómo se vuelve a reportar esto mismo dentro de una semana. */
html[data-bs-theme="dark"] {
    --patron-velo: rgba(39, 40, 50, .95);
}

html[data-bs-theme="dark"] .kanban-app .kanban-content .kanban-board,
html[data-bs-theme="dark"] .content-miniaturas,
html[data-bs-theme="dark"] .mod-img .mod-img__soltar,
html[data-bs-theme="dark"] .mod-img__mas {
    background-image: linear-gradient(var(--patron-velo), var(--patron-velo)),
                      url("../images/patron-tablero.svg");
    background-size:  auto, 300px 300px;
}


/* ── La rejilla del plano de mesas ──────────────────────────────────────────────────────────
   `mesas.css` la dibuja con `rgba(0,0,0,.05)` —negro al 5 %— sobre `--ins-tertiary-bg`. Contra
   el `#f6f7fb` de claro eso da 1,11:1, una guía que se adivina. En oscuro esa variable vale
   `#272832` y **negro sobre oscuro es negro**: 1,03:1, o sea que la rejilla desaparece y el
   plano queda sin referencia para acomodar las mesas.

   ⚠ Es el mismo error que el papel tapiz (E122) pero al revés: allá un trazo claro pensado para
   fondo claro se volvía un grito; acá uno oscuro pensado para fondo claro se vuelve invisible.
   La causa es la misma —un color calculado contra una superficie que después se invierte— y por
   eso los dos se arreglan igual: dando el color que corresponde a la superficie nueva.

   Blanco al 5 % deja la rejilla en 1,17:1, el mismo peso que tiene en claro. */
html[data-bs-theme="dark"] .pl-marco {
    background-image:
        linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* Con foto de piso no hay rejilla, ni acá ni en claro. */
html[data-bs-theme="dark"] .pl-marco.pl-con-foto { background-image: none; }


/* ── El velo de las modales y los paneles ────────────────────────────────────────────────────
   El tema pinta los tres velos con `--ins-emphasis-color`: `.modal-backdrop` lo toma por
   `--ins-backdrop-bg`, `.offcanvas-backdrop` lo escribe directo, y nuestro `.panel-velo`
   (personalizados.css) lo copió de ahí. En claro esa variable es **oscura** —el color del texto
   enfatizado— y el velo sale como corresponde; en oscuro vale **`#b0bbc5`**, un gris claro, así
   que al 0,7 de opacidad la pantalla se cubre de BLANCO en vez de oscurecerse. Es el mismo error
   que la rejilla del plano, otra vez al revés: un color calculado contra una superficie que
   después se invierte.

   No se corrige la variable del tema —la usan decenas de textos— sino los tres velos, con un
   near-negro del mismo matiz frío que el fondo del modo oscuro (`#17181e`). La opacidad se deja
   como está: lo que se arregla es el color, no cuánto tapa. */
html[data-bs-theme="dark"] {
    --gr-velo: #0a0b10;
}

html[data-bs-theme="dark"] .modal-backdrop {
    --ins-backdrop-bg: var(--gr-velo);
}

html[data-bs-theme="dark"] .offcanvas-backdrop,
html[data-bs-theme="dark"] .panel-velo {
    background-color: var(--gr-velo);
}