/* ═══════════════════════════════════════════════════════════════════════════════════════════ 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 `` 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 ``. */ 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; }