/* ============================================================
   modo-noche.css — Colores de texto que se pierden sobre fondo oscuro.
   ------------------------------------------------------------
   POR QUÉ EXISTE

   El sistema pinta muchos valores con el color escrito a mano en el HTML:

        <div class="val" style="color:#16a34a">$ 12,480</div>
        <div class="val" style="color:#dc2626">$ 3,100</div>

   Esa paleta está pensada para leerse sobre fondo BLANCO. Sobre el panel
   oscuro del modo noche, un verde #16a34a o un ámbar #b45309 quedan casi
   del mismo tono que el fondo: se ven, pero cuesta leerlos, y son
   justamente las cifras que uno va a buscar (cobrado, pendiente, por
   caducar, bajo mínimo).

   Un estilo escrito en línea le gana a la hoja de estilos, así que la
   única forma de corregirlo sin tocar cada etiqueta del sistema es
   emparejar por el atributo `style` y usar !important. Es el mismo truco
   que ya había en configuracion.html para los grises #333 / #555 / #666.

   CADA COLOR CONSERVA SU SIGNIFICADO: el verde sigue siendo verde, el rojo
   sigue siendo rojo. Solo se sube el tono para que se lean.

   CÓMO SE USA
        <link rel="stylesheet" href="/css/modo-noche.css">
   en cualquier página de la aplicación. No se pone en las que son
   DOCUMENTOS —ticket, informe, consentimiento, etiqueta—: esas se
   imprimen sobre papel blanco y su paleta oscura es la correcta.

   Si mañana se usa un color nuevo en línea, `verificar_modo_noche.mjs` lo
   reporta y se agrega aquí.
============================================================ */

/* ── Verdes: cobrado, correcto, dentro de rango ─────────────────────── */
[data-theme="dark"] [style*="color:#16a34a"],
[data-theme="dark"] [style*="color: #16a34a"] { color: #4ade80 !important; }
[data-theme="dark"] [style*="color:#059669"],
[data-theme="dark"] [style*="color: #059669"] { color: #34d399 !important; }
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color: #166534"] { color: #86efac !important; }

/* ── Rojos: pendiente, fuera de rango, eliminar ─────────────────────── */
[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color: #dc2626"] { color: #f87171 !important; }
[data-theme="dark"] [style*="color:#b91c1c"],
[data-theme="dark"] [style*="color: #b91c1c"] { color: #fca5a5 !important; }
[data-theme="dark"] [style*="color:#be123c"],
[data-theme="dark"] [style*="color: #be123c"] { color: #fda4af !important; }

/* ── Ámbares: advertencia, por caducar, por capturar ────────────────── */
[data-theme="dark"] [style*="color:#b45309"],
[data-theme="dark"] [style*="color: #b45309"] { color: #fbbf24 !important; }

/* ── Azules y celestes: informativo, por validar ────────────────────── */
[data-theme="dark"] [style*="color:#0369a1"],
[data-theme="dark"] [style*="color: #0369a1"] { color: #60a5fa !important; }
[data-theme="dark"] [style*="color:#0891b2"],
[data-theme="dark"] [style*="color: #0891b2"] { color: #22d3ee !important; }
[data-theme="dark"] [style*="color:#3a5a80"],
[data-theme="dark"] [style*="color: #3a5a80"] { color: #93b4d8 !important; }

/* ── Morados: configuración, agrupadores ────────────────────────────── */
[data-theme="dark"] [style*="color:#7c3aed"],
[data-theme="dark"] [style*="color: #7c3aed"] { color: #c4b5fd !important; }
[data-theme="dark"] [style*="color:#9333ea"],
[data-theme="dark"] [style*="color: #9333ea"] { color: #d8b4fe !important; }
[data-theme="dark"] [style*="color:#6d28d9"],
[data-theme="dark"] [style*="color: #6d28d9"] { color: #c4b5fd !important; }
[data-theme="dark"] [style*="color:#4338ca"],
[data-theme="dark"] [style*="color: #4338ca"] { color: #a5b4fc !important; }
[data-theme="dark"] [style*="color:#4f46e5"],
[data-theme="dark"] [style*="color: #4f46e5"] { color: #a5b4fc !important; }

/* ── Grises de apoyo: notas, unidades, texto secundario ─────────────── */
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"] { color: #aeb8c7 !important; }
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"] { color: #aeb8c7 !important; }

/* ⚠️ EXCEPCIÓN NECESARIA.
   Lo de arriba empareja por el atributo `style`, sin mirar dónde está el
   elemento. Dentro de la hoja del PDF y del simulacro de WhatsApp el fondo
   se queda BLANCO a propósito —es papel, o son los colores de WhatsApp—,
   así que ahí el texto oscuro es el correcto y aclararlo lo borraría.
   Estas reglas van al final para ganarles a las anteriores. */
[data-theme="dark"] #pdfSheet [style*="color"],
[data-theme="dark"] #pdftpl-preview [style*="color"],
[data-theme="dark"] .ps-colrow [style*="color"],
[data-theme="dark"] [id^="wa-bubble"] [style*="color"],
[data-theme="dark"] [id^="wa-bubble"] { color: inherit !important; }