/* ============================================================================
   CAPACIDADES O1 — APARIENCIA: CLARO · OSCURO · AUTOMÁTICO
   ============================================================================

   QUÉ ES ESTE FICHERO
   -------------------
   La ÚNICA hoja de estilos del tema. Contiene:

     1. Los tokens `--w-*` del modo CLARO (valores LITERALES de la casa: no se
        inventa ninguno).
     2. Un bloque `:root[data-tema="oscuro"]` que REASIGNA esos tokens. Es la
        única regla de modo oscuro del producto: no hay clases `dark:` ni
        duplicados por componente.
     3. Las reglas de componentes que consumen esos tokens. **Sólo se aplican
        con `[data-tema="oscuro"]`**, así que el modo claro queda EXACTAMENTE
        como estaba antes de O1 (requisito duro de la tarjeta).

   POR QUÉ `[data-tema="oscuro"]` Y NO `prefers-color-scheme`
   ---------------------------------------------------------
   El tema es una preferencia POR USUARIO y la decide el servidor (columna
   `chat_tenantuser.tema`). Con `@media (prefers-color-scheme: dark)` un usuario
   que eligió CLARO en un sistema oscuro recibiría el modo oscuro, que es justo
   lo que la preferencia existe para evitar. La opción «sistema» no es una
   media query: es una preferencia que el script de arranque resuelve con
   `matchMedia` ANTES del primer paint y publica en el mismo atributo.

   REGLAS DE COLOR (no negociables)
   --------------------------------
   - No se inventa NINGÚN color. El oscuro reutiliza la marca
     (`--wasabi-primary #788A25`, `--wasabi-dark #5C6B1C`, `--wasabi-light
     #A4D65E`) y deriva sus superficies del MISMO tono oliva.
   - Los tokens y sus contrastes viven en `backend/apps/tenants/apariencia.py`
     y los mide `tests/test_apariencia_o1.py` (AA en textos y botones). Este
     fichero NO es la fuente de los valores: los LEE de las variables que el
     servidor inyecta en `:root`. Aquí sólo hay respaldos (`var(..., #xxx)`)
     para que una página sin el context processor no quede sin color.
   - Lo que se oscurece son SUPERFICIES y TEXTO. Los acentos de estado
     (rojo/ámbar/verde de avisos, contadores) mantienen su significado: se
     aclaran lo justo para pasar AA sobre fondo oscuro, no se cambian.

   ORDEN DE CARGA: este fichero se sirve al final (después de output.css y de
   los estilos por plantilla) porque sus reglas son de tema y deben ganar a las
   utilidades de Tailwind que fijan `background-color`/`color` en línea.
   ========================================================================= */

/* ── 1. TOKENS DEL MODO CLARO (los de siempre, literales) ────────────────── */
:root {
  --w-fondo: #f0f2f5;
  --w-superficie: #ffffff;
  --w-elevada: #ffffff;
  --w-borde: #e3e6ea;
  --w-campo: #cfd4da;
  --w-texto: #3b4a54;
  /* AA MEDIDO en las cuatro superficies (tarjeta, fondo, campo, barra):
     #8696a0 fallaba (3.05); #5f6b74 fallaba sobre el campo (3.67);
     #4F5B68 pasa en todas (6.93 / 6.18 / 4.65 / 5.92). */
  --w-texto-suave: #4F5B68;
  --w-primario: #788A25;
  /* Marca como TEXTO (enlaces, precios): el oliva #788A25 de fondo no sirve
     como texto (3.43:1 sobre el fondo). En claro, el `dark` de la marca. */
  --w-enlace: #5C6B1C;
  /* AA MEDIDO: ACLARA. Con texto oscuro encima, oscurecer el fondo del botón
     lo saca de AA por aritmética (cualquier fondo que pase AA tiene
     luminancia >= 0.209 y la marca ya está en 0.223). */
  --w-primario-hover: #8A9F2A;
  /* AA MEDIDO: blanco sobre #788A25 = 3.85:1 (falla). Oscuro = 4.74:1. */
  --w-sobre-primario: #14160f;
  --w-burbuja-entrante: #ffffff;
  --w-burbuja-saliente: #d9fdd3;
  --w-chat-fondo: #efeae2;
  --w-barra-superior: #ededed;

  /* Marca (idéntica en ambos temas; el JS/tailwind la usa por nombre) */
  --wasabi-primary: #788A25;
  --wasabi-dark: #5C6B1C;
  --wasabi-light: #A4D65E;

  color-scheme: light;
}

/* ── 2. TOKENS DEL MODO OSCURO ──────────────────────────────────────────────
   Sólo se reasignan los neutros. Los de marca se dejan igual; el hover del botón
   primario aclara en LOS DOS temas (#8A9F2A) porque con el texto oscuro encima
   oscurecer lo sacaría de AA (ver `apariencia.py`, medido). */
:root[data-tema="oscuro"] {
  --w-fondo: #14160f;
  --w-superficie: #1d2016;
  --w-elevada: #262a1c;
  --w-borde: #3a4029;
  --w-campo: #23271a;
  --w-texto: #e8ece1;
  --w-texto-suave: #a9b39b;
  --w-primario: #788A25;
  --w-enlace: #849829;
  --w-primario-hover: #8A9F2A;
  --w-sobre-primario: #14160f;
  --w-burbuja-entrante: #1d2016;
  --w-burbuja-saliente: #2f3a1d;
  --w-chat-fondo: #101208;
  --w-barra-superior: #1d2016;

  --wasabi-primary: #788A25;
  --wasabi-dark: #5C6B1C;
  --wasabi-light: #A4D65E;

  color-scheme: dark;
}

/* ============================================================================
   3. COMPONENTES
   Cada regla va prefijada con `:root[data-tema="oscuro"]` (o con
   `[data-tema="oscuro"]` en un contenedor) a propósito: en claro NINGUNA se
   aplica, ni siquiera las que usan `!important`. Eso es lo que garantiza que
   «el modo claro queda idéntico al actual» sin depender de que el orden de
   carga sea el correcto.
   ========================================================================= */

/* ── 3.1 Base: fondo y texto de la página ───────────────────────────────── */
html[data-tema="oscuro"] {
  background-color: var(--w-fondo, #14160f) !important;
}
html[data-tema="oscuro"] body {
  background-color: var(--w-fondo, #14160f) !important;
  color: var(--w-texto, #e8ece1);
}

/* El <html> lleva `style="background-color:#788A25"` inline (color de marca
   bajo la barra de estado en Android edge-to-edge). En oscuro ese oliva
   saturado ocupa los bordes de la pantalla: se cambia por el fondo oscuro.
   Sólo en oscuro; en claro el oliva de marca se queda como está. */
html[data-tema="oscuro"] body {
  --splash-fondo: var(--w-fondo, #14160f);
}

/* ── 3.2 Clases de color de la casa (tuwasabi_styles.html) ──────────────── */
[data-tema="oscuro"] .tuwasabi-bg { background-color: var(--w-fondo, #14160f); }
[data-tema="oscuro"] .tuwasabi-sidebar { background-color: var(--w-superficie, #1d2016); }
[data-tema="oscuro"] .tuwasabi-header { background-color: var(--w-barra-superior, #1d2016); }
[data-tema="oscuro"] .tuwasabi-chat-bg { background-color: var(--w-chat-fondo, #101208); }
[data-tema="oscuro"] .tuwasabi-border { border-color: var(--w-borde, #3a4029); }
[data-tema="oscuro"] .tuwasabi-text { color: var(--w-texto, #e8ece1); }
[data-tema="oscuro"] .tuwasabi-text-light { color: var(--w-texto-suave, #a9b39b); }
[data-tema="oscuro"] .tuwasabi-standard-text { color: var(--w-texto, #e8ece1); }
[data-tema="oscuro"] .tuwasabi-incoming-msg { background-color: var(--w-burbuja-entrante, #1d2016); }
[data-tema="oscuro"] .wasabi-primary { color: var(--w-enlace, #849829); }
[data-tema="oscuro"] .wasabi-primary-bg { background-color: var(--w-primario, #788A25); }[data-tema="oscuro"] /* ── TEXTO SOBRE SUPERFICIE DE MARCA (AA MEDIDO) ────────────────────────── El blanco sobre el oliva #788A25 da 3.85:1 y NO alcanza el 4.5:1 de AA (y ningún blanco/crema llega: el techo es 3.85). El texto sobre la marca es por tanto el OSCURO del tema (4.74:1 en claro, 10.73:1 en el oliva claro oscuro),
[data-tema="oscuro"] en LOS DOS TEMAS. Se aplica con la misma especificidad en claro y en oscuro para que no dependa de qué hoja cargue después,
[data-tema="oscuro"] y con `!important` porque la app usa `text-white` de Tailwind en esos botones. */ html .wasabi-primary-bg,
[data-tema="oscuro"] .bg-tuwasabi-bg,
[data-tema="oscuro"] .hover\:wasabi-primary-hover-bg,
[data-tema="oscuro"] .send-button,
[data-tema="oscuro"] .btn-marca,
[data-tema="oscuro"] .tuwasabi-bg-marca {
  color: var(--w-sobre-primario, #14160f) !important;
}[data-tema="oscuro"] .wasabi-primary-bg:hover,
[data-tema="oscuro"] .bg-tuwasabi-bg:hover,
[data-tema="oscuro"] .hover\:wasabi-primary-hover-bg:hover,
[data-tema="oscuro"] .send-button:hover {
  color: var(--w-sobre-primario, #14160f) !important;
}[data-tema="oscuro"] /* ── MARCA COMO TEXTO (AA MEDIDO, LOS DOS TEMAS) ────────────────────────── `--w-primario` (#788A25) es una SUPERFICIE: como texto da 3.43:1 sobre el fondo y 3.85:1 sobre blanco,
[data-tema="oscuro"] o sea que no pasa AA. Los enlaces y precios que usan la clase de marca leen `--w-enlace`,
[data-tema="oscuro"] que sí pasa (6.01:1 en claro, 5.12:1 en oscuro). En claro esto es el ÚNICO cambio de color visible del tema,
[data-tema="oscuro"] y es precisamente el que la tarjeta exige (AA en textos). */ html .wasabi-primary,
[data-tema="oscuro"] .text-wasabi-primary {
  color: var(--w-enlace, #5C6B1C);
}

/* ── 3.3 Utilidades de Tailwind que fijan superficie/texto ────────────────
   No se recompila Tailwind con un modo oscuro paralelo (duplicaría cada clase
   y haría imposible garantizar que el claro no cambia). Se reasignan las pocas
   utilidades que la app usa de verdad como superficie o texto de contenido. */
[data-tema="oscuro"] .bg-white { background-color: var(--w-superficie, #1d2016) !important; }
[data-tema="oscuro"] .bg-gray-50 { background-color: var(--w-superficie, #1d2016) !important; }
[data-tema="oscuro"] .bg-gray-100 { background-color: var(--w-elevada, #262a1c) !important; }
[data-tema="oscuro"] .bg-gray-200 { background-color: var(--w-campo, #23271a) !important; }
[data-tema="oscuro"] .bg-gray-300 { background-color: var(--w-borde, #3a4029) !important; }
[data-tema="oscuro"] .bg-gray-800,
[data-tema="oscuro"] .bg-gray-900 { background-color: var(--w-fondo, #14160f) !important; }
[data-tema="oscuro"] .bg-tuwasabi-bg { background-color: var(--w-fondo, #14160f) !important; }

[data-tema="oscuro"] .text-gray-900,
[data-tema="oscuro"] .text-gray-800,
[data-tema="oscuro"] .text-gray-700,
[data-tema="oscuro"] .text-black { color: var(--w-texto, #e8ece1) !important; }
[data-tema="oscuro"] .text-gray-600,
[data-tema="oscuro"] .text-gray-500 { color: var(--w-texto-suave, #a9b39b) !important; }
[data-tema="oscuro"] .text-gray-400 { color: var(--w-texto-suave, #a9b39b) !important; }
[data-tema="oscuro"] .text-gray-300,
[data-tema="oscuro"] .text-gray-200,
[data-tema="oscuro"] .text-gray-100 { color: var(--w-texto, #e8ece1) !important; }

[data-tema="oscuro"] .border-gray-100,
[data-tema="oscuro"] .border-gray-200,
[data-tema="oscuro"] .border-gray-300 { border-color: var(--w-borde, #3a4029) !important; }
[data-tema="oscuro"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-tema="oscuro"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--w-borde, #3a4029) !important;
}

/* Marca como SUPERFICIE con `text-white` encima: `#A4D65E` (el `light` de
   marca) con blanco da **1.70:1** — medido en el navegador, era el tercer
   fallo de AA. En OSCURO no se cambia el verde (es marca): se cambia el texto
   al oscuro del tema, que da 10.73:1.

   SÓLO OSCURO, a propósito: este mismo `bg-tuwasabi-green` con `text-white` es
   el contador de badges que existe hoy en el tema claro, y el encargo manda que
   el claro quede IDÉNTICO al actual. Repintarlo ahí sería «mejorar» el diseño
   por mi cuenta y cambiar lo que el usuario ya conoce; si se quiere arreglar en
   claro, es otra tarjeta y otra decisión. */
[data-tema="oscuro"] .bg-tuwasabi-green.text-white,
[data-tema="oscuro"] .bg-tuwasabi-green .text-white,
[data-tema="oscuro"] .bg-tuwasabi-green.text-white:hover,
[data-tema="oscuro"] .bg-tuwasabi-green .text-white:hover,
[data-tema="oscuro"] .text-white.bg-tuwasabi-green {
  color: var(--w-sobre-primario, #14160f) !important;
}

/* Hover de superficies: en oscuro un `hover:bg-gray-100` blanco deslumbra. */
[data-tema="oscuro"] .hover\:bg-gray-50:hover,
[data-tema="oscuro"] .hover\:bg-gray-100:hover,
[data-tema="oscuro"] .hover\:bg-white:hover {
  background-color: var(--w-elevada, #262a1c) !important;
}

/* ── 3.4 Formularios ────────────────────────────────────────────────────── */
[data-tema="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-tema="oscuro"] select,
[data-tema="oscuro"] textarea {
  background-color: var(--w-campo, #23271a);
  color: var(--w-texto, #e8ece1);
  border-color: var(--w-borde, #3a4029);
}
[data-tema="oscuro"] input::placeholder,
[data-tema="oscuro"] textarea::placeholder {
  /* AA MEDIDO: #8696a0 sobre el campo oscuro #23271a = 4.62:1 (pasa). Se
     mantiene como valor del placeholder en oscuro; en claro el token
     `--w-texto-suave` es el que manda (ver apariencia.py). */
  color: #8696a0;
}
[data-tema="oscuro"] input:focus,
[data-tema="oscuro"] select:focus,
[data-tema="oscuro"] textarea:focus {
  border-color: var(--wasabi-light, #A4D65E);
  outline-color: var(--wasabi-light, #A4D65E);
}
/* El selector nativo de `select` es una flecha oscura sobre fondo oscuro. */
[data-tema="oscuro"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23a9b39b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* Los file:bg-* de los input[type=file] son azules de Tailwind: se apagan. */
[data-tema="oscuro"] input[type="file"] {
  color: var(--w-texto, #e8ece1);
  background-color: var(--w-campo, #23271a);
}
[data-tema="oscuro"] input[type="file"]::file-selector-button {
  background-color: var(--w-elevada, #262a1c);
  color: var(--w-texto, #e8ece1);
}

/* ── 3.5 Botones de marca ─────────────────────────────────────────────────
   El botón primario NO cambia de color entre temas (es la marca): lo único que
   cambia es el hover, que en oscuro sube de luminosidad. */
[data-tema="oscuro"] .send-button {
  background-color: var(--w-primario, #788A25);
  color: var(--w-sobre-primario, #14160f);
}
[data-tema="oscuro"] .send-button:hover {
  background-color: var(--w-primario-hover, #8a9e2c);
}
[data-tema="oscuro"] .wasabi-primary-bg:hover,
[data-tema="oscuro"] .hover\:wasabi-primary-hover-bg:hover {
  background-color: var(--w-primario-hover, #8a9e2c) !important;
}

/* ── 3.6 Barra de navegación lateral y encabezado del sidebar ──────────── */
[data-tema="oscuro"] #sidebar,
[data-tema="oscuro"] .sidebar,
[data-tema="oscuro"] #sidebar-main {
  background-color: var(--w-superficie, #1d2016);
  border-color: var(--w-borde, #3a4029);
}
[data-tema="oscuro"] #sidebar-nav {
  background-color: var(--w-superficie, #1d2016) !important;
  border-color: var(--w-borde, #3a4029) !important;
}
[data-tema="oscuro"] .nav-icon,
[data-tema="oscuro"] .nav-label {
  color: var(--w-texto-suave, #a9b39b);
}
[data-tema="oscuro"] .nav-link:hover .nav-icon,
[data-tema="oscuro"] .nav-link:hover .nav-label,
[data-tema="oscuro"] .nav-link.active .nav-icon,
[data-tema="oscuro"] .nav-link.active .nav-label,
[data-tema="oscuro"] .nav-link:focus .nav-icon,
[data-tema="oscuro"] .nav-link:focus .nav-label {
  /* El oliva puro sobre #1d2016 da 3.4:1 (no pasa AA para texto pequeño): en
     oscuro el acento de estado activo usa el claro de marca, que sí pasa. */
  color: var(--wasabi-light, #A4D65E);
}
/* El fondo resaltado del estado activo/hover del nav es un `rgba()` oliva que
   NO venía del tema: sin esta regla quedaba el `rgba(120,138,37,.15)` del modo
   claro sobre la superficie oscura, y el acento `#A4D65E` caía a 2.26:1
   (medido en el navegador, era el segundo fallo de AA del modo oscuro). Aquí el
   fondo se declara de forma explícita para que el par acento/fondo sea el
   medido: #A4D65E sobre #2b3018 = 8.03:1. */
[data-tema="oscuro"] .nav-link.active,
[data-tema="oscuro"] .nav-link:hover,
[data-tema="oscuro"] .nav-link:focus {
  background-color: rgba(120, 138, 37, 0.28) !important;
}
/* El header del sidebar es un degradado de MARCA (#5C6B1C -> #788A25). Sobre
   ESE degradado, medido con la fórmula WCAG:
     #14160f: 3.10:1 en el extremo oscuro -> NO pasa AA
     #ffffff: 5.87:1 en el extremo oscuro pero 3.85:1 en el claro -> NO sirve un
              color plano, porque el degradado cruza los dos lados
   Arreglo real: en oscuro el degradado se sustituye por una superficie neutra
   del tema y el texto pasa a `--w-texto` (13.79:1). La marca se mantiene en el
   resto del header (logo, bordes) y el modo claro conserva su degradado tal
   cual: esta regla sólo existe bajo `[data-tema="oscuro"]`. */
[data-tema="oscuro"] .bg-gradient-to-r.from-wasabi-dark.to-tuwasabi {
  background-image: none !important;
  background-color: var(--w-elevada, #262a1c) !important;
  border-bottom-color: var(--w-borde, #3a4029) !important;
}
[data-tema="oscuro"] .tuwasabi-text-super-light {
  color: var(--w-texto-suave, #a9b39b);
}

/* ── 3.6-bis ACENTOS QUE EL BLOQUE 3.9 NO CUBRE ───────────────────────────
   El bloque 3.9 (avisos de estado) ya tematiza azul/rojo/verde/ámbar. Aquí sólo
   va lo que le falta y que el auditor encontró en pantallas reales: morado
   (`text-purple-800/900` daba 1.36:1 en /gestionar_sectores/), índigo, y dos
   pares de marca que quedaban ilegibles en oscuro.

   SÓLO OSCURO: en claro estos colores son los de siempre y no se tocan. */
[data-tema="oscuro"] .text-purple-900,
[data-tema="oscuro"] .text-purple-800,
[data-tema="oscuro"] .text-purple-700,
[data-tema="oscuro"] .text-purple-600,
[data-tema="oscuro"] .text-purple-500 { color: #d2b3ff !important; }
[data-tema="oscuro"] .text-indigo-600,
[data-tema="oscuro"] .text-indigo-500 { color: #b3bcff !important; }
[data-tema="oscuro"] .bg-purple-50,
[data-tema="oscuro"] .bg-purple-100,
[data-tema="oscuro"] .bg-indigo-50 { background-color: rgba(168, 130, 255, 0.16) !important; }
[data-tema="oscuro"] .border-purple-200,
[data-tema="oscuro"] .border-indigo-200 { border-color: rgba(168, 130, 255, 0.4) !important; }

/* `bg-wasabi-light` (#A4D65E) con `text-white`: 1.70:1 medido en el botón
   "Crear Usuario". Es marca como SUPERFICIE, así que el texto va al oscuro del
   tema (10.73:1). Y `text-wasabi-dark` (#5C6B1C) como TEXTO sobre superficie
   oscura da 2.81:1: sube al acento `--wasabi-light`, igual que el resto de
   acentos de marca en oscuro. */
[data-tema="oscuro"] .bg-wasabi-light.text-white,
[data-tema="oscuro"] .bg-wasabi-light .text-white,
[data-tema="oscuro"] .bg-wasabi-light.text-white:hover,
[data-tema="oscuro"] .bg-wasabi-light .text-white:hover {
  color: var(--w-sobre-primario, #14160f) !important;
}
[data-tema="oscuro"] .text-wasabi-dark,
[data-tema="oscuro"] .hover\:text-wasabi-dark:hover {
  color: var(--wasabi-light, #A4D65E) !important;
}

/* Separadores y hover sutil del sidebar (usa rgba negro en claro). */
[data-tema="oscuro"] .sidebar-section-separator {
  border-bottom-color: rgba(58, 64, 41, 0.9);
}
html[data-tema="oscuro"] .sidebar-item:hover,
html[data-tema="oscuro"] .contact-item:hover,
html[data-tema="oscuro"] .group-item:hover,
html[data-tema="oscuro"] .area-item:hover,
body[data-tema="oscuro"] .sidebar-item:hover,
[data-tema="oscuro"] .sidebar-item:hover,
[data-tema="oscuro"] .contact-item:hover,
[data-tema="oscuro"] .group-item:hover,
[data-tema="oscuro"] .area-item:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 3.7 Chat: lista de conversaciones, mensajes y caja de entrada ─────── */
[data-tema="oscuro"] #input-container {
  background-color: var(--w-superficie, #1d2016) !important;
  border-top-color: var(--w-borde, #3a4029) !important;
}
[data-tema="oscuro"] #messages-container {
  background-color: var(--w-chat-fondo, #101208);
}
[data-tema="oscuro"] .message-bubble.flex.items-start .flex-1 > div:first-child,
[data-tema="oscuro"] .message-incoming {
  background-color: var(--w-burbuja-entrante, #1d2016);
  color: var(--w-texto, #e8ece1);
}
[data-tema="oscuro"] .message-outgoing {
  background-color: var(--w-burbuja-saliente, #2f3a1d);
  color: var(--w-texto, #e8ece1);
}
[data-tema="oscuro"] .message-skeleton {
  background: linear-gradient(90deg, #1d2016 25%, #262a1c 50%, #1d2016 75%);
  background-size: 200% 100%;
}

/* ── 3.8 Modales, menús y capas por encima de la tarjeta ───────────────── */
[data-tema="oscuro"] .modal-content,
[data-tema="oscuro"] .dropdown-menu,
[data-tema="oscuro"] .popover {
  background-color: var(--w-elevada, #262a1c);
  color: var(--w-texto, #e8ece1);
  border-color: var(--w-borde, #3a4029);
}

/* ── 3.9 Contraste de avisos de estado sobre fondo oscuro ────────────────
   Los avisos (verde/rojo/ámbar/azul) mantienen su color de significado; lo que
   cambia es la SUPERFICIE: en oscuro un `bg-green-50` es un bloque blanco. Se
   usa el mismo tono con alpha bajo, que es la versión oscura del mismo color.
   Van los 50 y los 100: el auditor encontró `bg-blue-100` en los contadores de
   /gestionar_contactos/ y en el selector de /crear_usuario/ sirviendo todavía
   el blanco de Tailwind (1.48:1 con el texto aclarado encima). */
[data-tema="oscuro"] .bg-green-50,
[data-tema="oscuro"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.16) !important; }
[data-tema="oscuro"] .bg-red-50,
[data-tema="oscuro"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.16) !important; }
[data-tema="oscuro"] .bg-amber-50,
[data-tema="oscuro"] .bg-yellow-50,
[data-tema="oscuro"] .bg-amber-100,
[data-tema="oscuro"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.16) !important; }
[data-tema="oscuro"] .bg-blue-50,
[data-tema="oscuro"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16) !important; }
[data-tema="oscuro"] .border-green-200 { border-color: rgba(34, 197, 94, 0.4) !important; }
[data-tema="oscuro"] .border-red-200 { border-color: rgba(239, 68, 68, 0.4) !important; }
[data-tema="oscuro"] .border-amber-200,
[data-tema="oscuro"] .border-yellow-200 { border-color: rgba(245, 158, 11, 0.4) !important; }
[data-tema="oscuro"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.4) !important; }
/* Texto de aviso: se aclara el tono para pasar AA sobre la superficie oscura.
   Se cubren los 500/600/700/800: el auditor encontró `text-red-500` (4.39:1,
   roza el límite) y `text-blue-600` (3.20:1) en /crear_usuario/, y
   `text-green-600` (3.03:1) en /gestionar_localizaciones/. */
[data-tema="oscuro"] .text-green-500,
[data-tema="oscuro"] .text-green-600,
[data-tema="oscuro"] .text-green-700,
[data-tema="oscuro"] .text-green-800 { color: #6ee7a0 !important; }
[data-tema="oscuro"] .text-red-500,
[data-tema="oscuro"] .text-red-600,
[data-tema="oscuro"] .text-red-700,
[data-tema="oscuro"] .text-red-800 { color: #fca5a5 !important; }
[data-tema="oscuro"] .text-amber-500,
[data-tema="oscuro"] .text-amber-600,
[data-tema="oscuro"] .text-amber-800,
[data-tema="oscuro"] .text-yellow-500,
[data-tema="oscuro"] .text-yellow-600,
[data-tema="oscuro"] .text-yellow-800 { color: #fcd34d !important; }
[data-tema="oscuro"] .text-blue-500,
[data-tema="oscuro"] .text-blue-600,
[data-tema="oscuro"] .text-blue-700,
[data-tema="oscuro"] .text-blue-800,
[data-tema="oscuro"] .text-blue-900 { color: #93c5fd !important; }

/* ── 3.10 Scrollbars: sobre oscuro, la barra negra al 8% no se ve ───────── */
html[data-tema="oscuro"] * {
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
}
html[data-tema="oscuro"] *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16) !important;
}
html[data-tema="oscuro"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* ── 3.11 Selector de apariencia (sidebar_nav) ─────────────────────────── */
[data-tema="oscuro"] .apariencia-menu {
  background-color: var(--w-elevada, #262a1c);
  border-color: var(--w-borde, #3a4029);
  color: var(--w-texto, #e8ece1);
}
[data-tema="oscuro"] .apariencia-opcion:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ── 3.12 Splash y fondo de arranque ─────────────────────────────────────
   El splash pinta la marca (identidad). En oscuro el lienzo de detrás pasa al
   fondo oscuro para no encender la pantalla entera al abrir la app. */
html[data-tema="oscuro"] .splash-screen {
  background-color: #14160f;
}

/* ── 3.13 Movimiento reducido ───────────────────────────────────────────────
   NO se añade un bloque `@media (prefers-reduced-motion: reduce)` con `*`
   aquí: el producto YA lo respeta de forma granular en `chat-resync.css` y
   `mobile-sidebar.css`, y una regla global `html[data-tema] *` con
   `transition-duration: .01ms !important` se aplicaría TAMBIÉN EN CLARO,
   matando las animaciones del tema de siempre — justo lo contrario de «el
   claro queda idéntico». Si algún día hace falta, va bajo `[data-tema]. */