/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MODO OSCURO — bandeja de WhatsApp
   ═══════════════════════════════════════════════════════════════════════════════════════════

   `whatsapp.css` NO se toca (condición de Mario, 2026-09-27). Todo vive acá y todo cuelga de
   `html[data-bs-theme="dark"]`, así que en modo claro no se aplica ni una regla: es imposible
   romper lo que ya funciona.

   Por qué esta hoja es aparte de `modo-oscuro.css`
   ───────────────────────────────────────────────
   Porque `whatsapp.css` también lo es: se carga SOLO en la bandeja. Meter sus reglas en la hoja
   global se las haría bajar a las cuarenta pantallas que nunca las usan. Misma lógica que
   `personalizados.css` frente al CSS de un módulo.

   Qué paleta se usa y por qué
   ───────────────────────────
   `whatsapp.css` no inventó colores: copia la paleta CLARA de WhatsApp Web (#efeae2 el fondo del
   chat, #d9fdd3 la burbuja propia, #f0f2f5 las barras, #667781 el texto secundario). La
   traducción fiel es entonces **la paleta OSCURA real de WhatsApp Web**, no los grises de Ubold:
   la pantalla imita a WhatsApp a propósito, y en oscuro tiene que seguir haciéndolo.

     #0b141a  fondo del chat      #202c33  paneles y burbuja ajena
     #005c4b  burbuja propia      #2a3942  campos de texto
     #e9edef  texto principal     #8696a0  texto secundario
     #00a884  verde de acento     #2f3b43  separadores

   ⚠ La palanca principal son las SIETE variables que `whatsapp.css` ya declara en `:root`. Se
     redefinen acá y con eso cambia la mitad de la pantalla sola. `html[data-bs-theme="dark"]`
     pesa 0-1-1 contra el 0-1-0 de `:root`, así que gana sin `!important`.

   Contrastes: medidos, no elegidos a ojo
   ──────────────────────────────────────
   Todos los pares texto/fondo se calcularon —mezclando antes los tintes translúcidos sobre su
   superficie real, que es lo que el ojo ve— contra los umbrales de WCAG (4.5:1 texto, 3:1 el
   límite de un control). Los doce tintes quedaron entre 4.53:1 y 8.76:1.

   Dos pares NO pasaban con la paleta literal de WhatsApp y hubo que apartarse de ella:
     · el texto secundario dentro de la burbuja propia daba **2.61:1** (#8696a0 sobre #005c4b).
       La hora y el «2 MB» de tus propios mensajes eran ilegibles. Sube a #c2cbcf → 4.84:1.
     · el borde de la caja de buscar daba **1.24:1**, y ahí sí importa porque es el límite de un
       control. Sube a #667781 → 3.08:1.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Las siete variables que ya existen, más las dos que hacen falta ──────────────────── */

html[data-bs-theme="dark"] {
    --wa-verde:  #00a884;     /* el de oscuro; #008069 es el de claro y sobre #202c33 apaga */
    --wa-fondo:  #0b141a;
    --wa-propia: #005c4b;
    --wa-barra:  #202c33;
    --wa-sec:    #8696a0;     /* 4.68:1 sobre panel · 5.72:1 sobre la lista */
    --wa-borde:  #2f3b43;
    --wa-tick:   #53bdeb;     /* igual en los dos modos: es el azul de «leído» */

    /* Velo del papel tapiz. Va del MISMO color que `--wa-fondo` para que el fondo no cambie: lo
       único que hace es bajarle intensidad a los garabatos. Los dos valores van juntos a
       propósito — si uno cambia sin el otro, el velo tiñe el chat. */
    --wa-velo:   rgba(11, 20, 26, .88);

    /* Propias de esta hoja: `whatsapp.css` escribió estas dos superficies a mano, 30 y 6 veces. */
    --wa-panel:   #202c33;    /* lo que en claro era #fff */
    --wa-entrada: #2a3942;    /* el fondo de los campos */
    --wa-texto:   #e9edef;    /* lo que en claro era #111b21 */
    --wa-lista:   #111b21;    /* la columna de conversaciones, un paso más oscura que el panel */
}


/* ── 2. Superficies: los 30 `background:#fff` ───────────────────────────────────────────────
   Un solo bloque porque todos significan lo mismo —«esto es un panel»— y separarlos solo haría
   más largo el archivo. */

html[data-bs-theme="dark"] .wa-app,
html[data-bs-theme="dark"] .wa-lista-head,
html[data-bs-theme="dark"] .wa-seccion,
html[data-bs-theme="dark"] .wa-buscador,
html[data-bs-theme="dark"] .wa-buscador-caja,
html[data-bs-theme="dark"] .wa-bajar,
html[data-bs-theme="dark"] .wa-chat-head,
html[data-bs-theme="dark"] .wa-fila:not(.propia) .wa-burbuja,
html[data-bs-theme="dark"] .wa-doc .vista,
html[data-bs-theme="dark"] .wa-dia span,
html[data-bs-theme="dark"] .wa-flotante,
html[data-bs-theme="dark"] .wa-emojis .grupo,
html[data-bs-theme="dark"] .wa-barra-menu,
html[data-bs-theme="dark"] .wa-autor,
html[data-bs-theme="dark"] .wa-mas-btn,
html[data-bs-theme="dark"] .wa-menu-msj,
html[data-bs-theme="dark"] .wa-menu-conv,
html[data-bs-theme="dark"] .wa-clasif-chip,
html[data-bs-theme="dark"] .wa-plt .plt-previa-boton,
html[data-bs-theme="dark"] .wa-sel-panel {
    background: var(--wa-panel);
}

/* La columna de conversaciones va un paso MÁS oscura que los paneles, como en WhatsApp: así se
   separa del chat sin necesidad de una línea. */
html[data-bs-theme="dark"] .wa-lista {
    background: var(--wa-lista);
}

/* Campos de texto: fondo propio, ni el del panel (desaparecerían) ni el de la página. */
html[data-bs-theme="dark"] .wa-buscar input,
html[data-bs-theme="dark"] .wa-buscar input:focus,
html[data-bs-theme="dark"] .wa-pie input[type="text"],
html[data-bs-theme="dark"] .wa-emojis .buscar input,
html[data-bs-theme="dark"] .wa-emojis .buscar input:focus,
html[data-bs-theme="dark"] .wa-previa .pie input {
    background: var(--wa-entrada);
    color: var(--wa-texto);
}

/* ⚠ 3.08:1 y no el `--wa-borde` de 1.24:1: esto es el LÍMITE DE UN CONTROL, no un separador
   decorativo, y ahí WCAG pide 3:1. */
html[data-bs-theme="dark"] .wa-buscador-caja {
    border-color: #667781;
}


/* ── 3. Texto ───────────────────────────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .wa-buscar input,
html[data-bs-theme="dark"] .wa-conv-nombre,
html[data-bs-theme="dark"] .wa-chat-nombre,
html[data-bs-theme="dark"] .wa-burbuja,
html[data-bs-theme="dark"] .wa-audio .vel,
html[data-bs-theme="dark"] #modalWaAbrir .modal-title,
html[data-bs-theme="dark"] .wa-grabando .reloj,
html[data-bs-theme="dark"] .wa-resp-item .tit,
html[data-bs-theme="dark"] .wa-sel-n,
html[data-bs-theme="dark"] .wa-resp-item .acciones button:hover,
html[data-bs-theme="dark"] .wa-etiq-item .acciones button:hover {
    color: var(--wa-texto);
}

/* Iconos de las cabeceras: en claro #54656f, que sobre oscuro se hunde. */
html[data-bs-theme="dark"] .wa-icono,
html[data-bs-theme="dark"] .wa-chat-iconos,
html[data-bs-theme="dark"] .wa-mas-btn,
html[data-bs-theme="dark"] .wa-adj,
html[data-bs-theme="dark"] .wa-burbuja.con-media .wa-acciones {
    color: var(--wa-sec);
}

/* ⚠ La hora, los ticks y el «2 MB» DENTRO de tu propio mensaje. El secundario normal (#8696a0)
   sobre la burbuja verde da 2.61:1 — ilegible. Este da 4.84:1. Es el único punto donde la paleta
   literal de WhatsApp no alcanzaba. */
html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja .wa-meta,
html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja .peso,
html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja .wa-doc .vista,
html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja .wa-doc .peso {
    color: #c2cbcf;
}

/* El enlace dentro de la burbuja propia: el verde oscuro de claro sobre #005c4b no se lee. */
html[data-bs-theme="dark"] .wa-fila.propia .wa-enlace {
    color: #7ae3c3;
}

html[data-bs-theme="dark"] .wa-enlace {
    color: #53bdeb;
}


/* ── 4. Realces: oscurecer lo oscuro no se ve ───────────────────────────────────────────────
   ⚠ Veintitantos `rgba(0,0,0,.05)` reparten el «se puede tocar» de toda la bandeja. Sobre una
     superficie clara aclaran un peldaño; sobre #202c33 no pasa nada y la pantalla queda sin una
     sola respuesta al puntero. Se invierten: sobre oscuro, realzar es ACLARAR. */

html[data-bs-theme="dark"] .wa-icono:hover,
html[data-bs-theme="dark"] .wa-adj:hover,
html[data-bs-theme="dark"] .wa-opcion:hover,
html[data-bs-theme="dark"] .wa-barra-item:hover,
html[data-bs-theme="dark"] .wa-barra-item.activa,
html[data-bs-theme="dark"] .wa-contacto .dato:hover,
html[data-bs-theme="dark"] .wa-contacto .acc:hover,
html[data-bs-theme="dark"] .wa-destino:hover:not(:disabled),
html[data-bs-theme="dark"] .wa-menu-msj button:hover,
html[data-bs-theme="dark"] .wa-menu-conv button:hover,
html[data-bs-theme="dark"] .wa-sel-ops button:not([disabled]):hover,
html[data-bs-theme="dark"] .wa-etiq-item .acciones button:hover,
html[data-bs-theme="dark"] .wa-acciones:hover {
    background: rgba(255, 255, 255, .08);
}

html[data-bs-theme="dark"] .wa-adjunto,
html[data-bs-theme="dark"] .wa-doc,
html[data-bs-theme="dark"] .wa-mapa,
html[data-bs-theme="dark"] .wa-contacto,
html[data-bs-theme="dark"] .wa-previa-enlace,
html[data-bs-theme="dark"] .wa-cita,
html[data-bs-theme="dark"] .wa-burbuja code,
html[data-bs-theme="dark"] .wa-audio .vel,
html[data-bs-theme="dark"] .wa-ventana.gris {
    background: rgba(255, 255, 255, .06);
}

html[data-bs-theme="dark"] a.wa-adjunto:hover,
html[data-bs-theme="dark"] .wa-doc:hover,
html[data-bs-theme="dark"] .wa-mapa:hover,
html[data-bs-theme="dark"] .wa-previa-enlace:hover,
html[data-bs-theme="dark"] .wa-cita:hover,
html[data-bs-theme="dark"] .wa-audio .vel:hover,
html[data-bs-theme="dark"] #modalWaAbrir .wa-opcion:active {
    background: rgba(255, 255, 255, .11);
}


/* ── 5. Lista de conversaciones ─────────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .wa-conv:hover {
    background: var(--wa-panel);
}

html[data-bs-theme="dark"] .wa-conv.activa {
    background: #2a3942;
}

html[data-bs-theme="dark"] .wa-conv.marcada {
    background: rgba(0, 168, 132, .14);
}

html[data-bs-theme="dark"] .wa-conv.marcada:hover {
    background: rgba(0, 168, 132, .20);
}

html[data-bs-theme="dark"] .wa-conv-prev mark,
html[data-bs-theme="dark"] .wa-marca {
    background: rgba(255, 183, 3, .30);
    color: #ffd166;                       /* 5.04:1 sobre la mezcla real */
}

html[data-bs-theme="dark"] .wa-marca.actual {
    background: rgba(255, 183, 3, .55);
    color: #1a1400;
}

html[data-bs-theme="dark"] .wa-avatar,
html[data-bs-theme="dark"] #modalWaAbrir .wa-asidero {
    background: #3b4a54;
}


/* ── 6. Tintes de estado ─────────────────────────────────────────────────────────────────────
   Cada uno conserva su matiz —ámbar es aviso, rojo es problema— pero invertido: el tinte se
   oscurece y el texto se aclara. Los doce pares se midieron mezclando el rgba sobre su superficie
   real; el más bajo quedó en 4.53:1. */

html[data-bs-theme="dark"] .wa-aviso {
    background: rgba(230, 167, 0, .16);
    border-bottom-color: rgba(230, 167, 0, .35);
    color: #f0c674;                       /* 6.56:1 */
}

html[data-bs-theme="dark"] .wa-aviso-borrada {
    background: rgba(214, 45, 32, .16);
    color: #f08a8a;                       /* 5.44:1 */
}

html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja.wa-nota-privada,
html[data-bs-theme="dark"] .wa-nota-privada,
html[data-bs-theme="dark"] .wa-salir-nota,
html[data-bs-theme="dark"] #waTexto.en-nota {
    background: rgba(255, 213, 79, .12);
    border-color: rgba(255, 213, 79, .32);
    color: #e6d08f;                       /* 6.99:1 */
}

html[data-bs-theme="dark"] .wa-salir-nota:hover {
    background: rgba(255, 213, 79, .20);
    color: #f2e0a8;
}

html[data-bs-theme="dark"] .wa-consulta span,
html[data-bs-theme="dark"] .wa-consulta button {
    background: rgba(83, 189, 235, .14);
    border-color: rgba(83, 189, 235, .32);
    color: #7cc4ea;                       /* 5.68:1 */
}

html[data-bs-theme="dark"] .wa-consulta button:hover {
    background: rgba(83, 189, 235, .24);
}

html[data-bs-theme="dark"] .wa-consulta-fin span {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: #9aa4ad;                       /* 4.53:1 */
}

html[data-bs-theme="dark"] .wa-ventana.ambar,
html[data-bs-theme="dark"] .wa-agente.ajena {
    color: #f0c674;
}

html[data-bs-theme="dark"] .wa-ventana.roja {
    color: #f08a8a;
}

html[data-bs-theme="dark"] .wa-ventana.verde,
html[data-bs-theme="dark"] .wa-agente.mia,
html[data-bs-theme="dark"] .wa-tomar {
    color: #5fd6b4;
}

html[data-bs-theme="dark"] .wa-conexion {
    background: var(--wa-entrada);
    color: var(--wa-sec);
}

html[data-bs-theme="dark"] .wa-plt .plt-var {
    background: rgba(253, 126, 20, .16);
    color: #f2955b;                       /* 4.95:1 */
}

html[data-bs-theme="dark"] .wa-plt .plt-var-ok {
    background: rgba(0, 168, 132, .16);
    color: #5fd6b4;
}

html[data-bs-theme="dark"] .wa-res.actual,
html[data-bs-theme="dark"] .wa-resp-cat-chip.activo {
    background: rgba(0, 168, 132, .16);
}

html[data-bs-theme="dark"] .wa-nosoportado {
    background: rgba(230, 167, 0, .12);
    color: #f0c674;
}


/* ── 7. Esperas y barras de desplazamiento ──────────────────────────────────────────────── */

/* El esqueleto: en claro es un gris que recorre una banda más clara. Invertido, o no se ve. */
html[data-bs-theme="dark"] .wa-cargando {
    background: #2a3942;
}

html[data-bs-theme="dark"] .wa-cargando::after {
    background: linear-gradient(90deg, #2a3942 25%, #36454f 37%, #2a3942 63%);
}

html[data-bs-theme="dark"] .wa-convs::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-mensajes::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-buscador-cuerpo::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-emojis .cuerpo::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-resp-lista::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-filtro-etiq::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-sel-etiqs::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .wa-resp-cats::-webkit-scrollbar-thumb {
    background: #3b4a54;
}

html[data-bs-theme="dark"] .wa-convs::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-mensajes::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-buscador-cuerpo::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-emojis .cuerpo::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-resp-lista::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-filtro-etiq::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] .wa-sel-etiqs::-webkit-scrollbar-thumb:hover {
    background: #4a5a63;
}

html[data-bs-theme="dark"] .wa-emojis button[data-emoji]:hover {
    background: rgba(255, 255, 255, .08);
}


/* ── 8. Lo que NO se toca, a propósito ───────────────────────────────────────────────────────
   · `.wa-visor` y `.wa-previa` ya son `rgba(11,20,26,.96)`: el visor de medios SIEMPRE fue
     oscuro, en los dos modos, porque una foto se mira sobre negro.
   · `.wa-video-envoltura` (#0b141a) y `.wa-visor video` (#000), por lo mismo.
   · Los `color:#fff` sobre fondos de color —badges, el verde #25d366, la barra #005e54 de la
     previsualización de plantilla—: son texto sobre marca, correctos en los dos modos.
   · `--wa-tick` (#53bdeb): el azul de «leído» es el mismo en claro y en oscuro en WhatsApp.
   · Los íconos de colores de los adjuntos (#ff8c00 audio, #e542a3 foto…): son identidad del
     tipo de archivo, no superficie. */


/* ── 9. Segunda pasada (Mario, 2026-09-27) ───────────────────────────────────────────────────
   «Esas líneas horizontales un poco más discretas. Y el menú más resaltado.» Las dos tenían el
   mismo origen: reglas de `whatsapp.css` que la primera pasada no cubrió. El repaso que faltaba
   no era «¿lo que escribí existe?» —eso sí lo comprobé— sino «¿qué NO escribí?». */

/* ⚠ El separador de la lista era `1px solid #f5f6f6`: **16,13:1** contra el fondo. No era una
   línea, era un rayado blanco. Un separador se quiere apenas perceptible: esto da 1,18:1. */
html[data-bs-theme="dark"] .wa-conv {
    border-bottom-color: rgba(255, 255, 255, .06);
}

html[data-bs-theme="dark"] .wa-lista-head,
html[data-bs-theme="dark"] .wa-chat-head,
html[data-bs-theme="dark"] .wa-seccion,
html[data-bs-theme="dark"] .wa-res,
html[data-bs-theme="dark"] .wa-buscador {
    border-color: rgba(255, 255, 255, .08);
}

/* ⚠ El menú flotante tenía TRES problemas a la vez, y el peor no era el fondo:
     · el texto de los botones seguía en `#3b4a54` — **1,30:1 sobre el menú: ilegible**. Es lo que
       lo hacía verse fantasma, no la falta de contraste del panel;
     · la superficie que le puse en la primera pasada despegaba 1,22:1 de la lista, o sea nada;
     · la sombra es `rgba(11,20,26,.22)`, negra sobre negro: no existe.
   Se sube la superficie, se le pone borde —que es lo que de verdad recorta un panel flotante
   sobre oscuro— y la sombra se hace mucho más profunda. */
html[data-bs-theme="dark"] .wa-menu-msj,
html[data-bs-theme="dark"] .wa-menu-conv,
html[data-bs-theme="dark"] .wa-sel-panel,
html[data-bs-theme="dark"] .wa-barra-menu {
    background: #2a3942;                          /* 1,47:1 contra la lista */
    border: 1px solid rgba(255, 255, 255, .14);   /* el recorte real: 2,27:1 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .60), 0 2px 8px rgba(0, 0, 0, .45);
}

html[data-bs-theme="dark"] .wa-menu-msj button,
html[data-bs-theme="dark"] .wa-menu-conv button,
html[data-bs-theme="dark"] .wa-sel-ops button {
    color: var(--wa-texto);                       /* 10,11:1 — antes 1,30:1 */
}

html[data-bs-theme="dark"] .wa-menu-msj button:hover,
html[data-bs-theme="dark"] .wa-menu-conv button:hover,
html[data-bs-theme="dark"] .wa-sel-ops button:not([disabled]):hover {
    background: rgba(255, 255, 255, .10);
}


/* ── 10. Lo que la primera pasada dejó por fuera ─────────────────────────────────────────── */

/* El hueco que queda detrás de una imagen mientras carga. En claro es un gris; en oscuro, blanco. */
html[data-bs-theme="dark"] .wa-imagen img,
html[data-bs-theme="dark"] .wa-galeria img,
html[data-bs-theme="dark"] .wa-previa-enlace img,
html[data-bs-theme="dark"] .wa-mapa img {
    background: #2a3942;
}

html[data-bs-theme="dark"] .wa-mas-btn:hover,
html[data-bs-theme="dark"] .wa-clasif-chip:hover {
    background: rgba(255, 255, 255, .10);
}

/* El mensaje que no se pudo enviar: rosado claro con texto rojo oscuro. */
html[data-bs-theme="dark"] .wa-fila.propia .wa-burbuja.wa-fallida {
    background: rgba(214, 45, 32, .18);
}

html[data-bs-theme="dark"] .wa-fallo,
html[data-bs-theme="dark"] .wa-reintentar {
    color: #f08a8a;
}

html[data-bs-theme="dark"] .wa-estados::-webkit-scrollbar-thumb {
    background: #3b4a54;
}

html[data-bs-theme="dark"] .wa-estado-chip.activo,
html[data-bs-theme="dark"] .wa-etiq-item.marcada {
    background: rgba(0, 168, 132, .16);
}

/* Los dos esqueletos de carga que faltaban: el del avatar y el de la burbuja propia —que en claro
   es verde pálido porque imita la burbuja—. El brillo va al revés en oscuro, o no se ve moverse. */
html[data-bs-theme="dark"] .wa-esqueleto-avatar {
    background: linear-gradient(90deg, #2a3942 25%, #36454f 37%, #2a3942 63%);
}

html[data-bs-theme="dark"] .wa-fila.propia .wa-cargando {
    background: #01463a;
}

html[data-bs-theme="dark"] .wa-fila.propia .wa-cargando::after {
    background: linear-gradient(90deg, #01463a 25%, #066b58 37%, #01463a 63%);
}

/* El sticker no tiene fondo propio, así que sus acciones flotan sobre el papel tapiz del chat. */
html[data-bs-theme="dark"] .wa-burbuja.sticker .wa-acciones {
    background: rgba(11, 20, 26, .85);
}

/* ⚠ El aro del puntito de estado sobre el avatar NO es decorativo: es un recorte, y por eso va del
   color del FONDO que tiene detrás. En blanco sobre oscuro se veía como un anillo luminoso. */
html[data-bs-theme="dark"] .wa-avatar-estado,
html[data-bs-theme="dark"] .wa-avatar-agente {
    border-color: var(--wa-lista);
}

html[data-bs-theme="dark"] .wa-conv.activa .wa-avatar-estado,
html[data-bs-theme="dark"] .wa-conv.activa .wa-avatar-agente {
    border-color: #2a3942;
}


/* ── El papel tapiz, al mismo peso que en claro ─────────────────────────────────────────────
   El SVG de garabatos es UNO solo para los dos modos y dibuja con trazo BLANCO al 62 % y 48 %
   de opacidad. Sobre el beige de claro eso queda en 1,12:1 y 1,09:1 —una textura que se
   adivina—, pero sobre #0b141a el mismo trazo salta a **7,58:1 y 4,98:1**: contraste de TEXTO
   para algo que es fondo. Por eso en oscuro los íconos se leían más que los mensajes.

   ⚠ No se toca el SVG ni la hoja de claro. Se le pone encima una capa del propio color del
   fondo: como el velo es exactamente `--wa-fondo`, la superficie no cambia de color y lo único
   que baja es el trazo. Medido, el 88 % deja los garabatos en 1,21:1 y 1,15:1 — el mismo peso
   visual que tienen en claro.

   ⚠ `background-image` acepta varias capas y la PRIMERA va arriba: el velo tiene que ir antes
   que la url, no después. Y `background-size` necesita un valor por capa, o el mosaico de 300 px
   se le aplica al velo y no al dibujo. */
html[data-bs-theme="dark"] .wa-mensajes,
html[data-bs-theme="dark"] .wa-plt .plt-telefono-chat,
html[data-bs-theme="dark"] .pb-hilo {
    background-image: linear-gradient(var(--wa-velo), var(--wa-velo)),
                      url("../images/whatsapp-fondo.svg");
    background-size:  auto, 300px 300px;
}