/* ══════════════════════════════════════════════════════════════════════════
   quantum-theme.css — Sistema de diseño oscuro portado de Norden Hormigones
   ──────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de dark-mode-overrides.css para ganarle en cascada.

   Por qué un archivo aparte: dark-mode-overrides.css está generado por
   gen-dark-css.mjs — si alguien lo regenera, se lleva por delante cualquier
   edición manual. Este archivo es escrito a mano y sobrevive a eso.

   Todo cuelga de html.dark-mode: el modo claro queda intacto y el botón
   sol/luna del header sigue alternando entre ambos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── a) Tokens ─────────────────────────────────────────────────────────────
   Valores literales del tema oscuro de Norden. */
html.dark-mode {
  --q-ink: #050912;        /* fondo de página */
  --q-surface: #09111d;    /* superficie / card */
  --q-surface-2: #0d1725;  /* elevada: hover, chips */
  --q-surface-3: #12203a;  /* interactiva: inputs, botones */
  --q-line: #1a2438;       /* borde sutil */
  --q-line-2: #22304a;     /* borde hover/focus */
  --q-fg: #e8eef8;         /* texto primario */
  --q-fg-2: #8b97ab;       /* texto secundario */
  --q-fg-3: #5c6b80;       /* deshabilitado, labels, hints */
  --q-accent: #2d5cff;     /* acento azul base */
  --q-accent-2: #4f8ff7;   /* acento luminoso: glow, activos */
  --q-active-bg: #0f2547;  /* fondo de ítem activo */
  --q-accent-violet: #7751f0; /* medido del mockup del dashboard (mediana de
                                 345 px del ícono "Entregables"); token propio
                                 pedido por Victor, distinto del violeta del
                                 gráfico (#a78bfa) */
  --q-ok: #3ddc84;
  --q-warn: #f59e0b;
  --q-bad: #ef4444;
}

/* Fondo de página: de #0f172a (slate-900) al ink de Norden. */
html.dark-mode body {
  background-color: var(--q-ink) !important;
  color: var(--q-fg) !important;
}

/* El header superior es bg-white sin rounded, así que dark-mode-overrides lo
   deja en #0f172a. Lo alineamos al ink con una línea de separación. */
html.dark-mode header[class~="bg-white"] {
  background-color: var(--q-ink) !important;
  border-bottom: 1px solid var(--q-line) !important;
}

/* Texto: afinamos la jerarquía a los tres niveles de Norden. */
html.dark-mode [class~="text-gray-900"],
html.dark-mode [class~="text-slate-900"],
html.dark-mode [class~="text-gray-800"] { color: var(--q-fg) !important; }

html.dark-mode [class~="text-gray-600"],
html.dark-mode [class~="text-gray-500"],
html.dark-mode [class~="text-slate-500"] { color: var(--q-fg-2) !important; }

html.dark-mode [class~="text-gray-400"],
html.dark-mode [class~="text-slate-400"] { color: var(--q-fg-3) !important; }

/* text-gray-100/200/300 quedaban sin mapear y resolvían a gris claro crudo
   de Tailwind — verificado con sonda: se leían encima del fondo oscuro. */
html.dark-mode [class~="text-gray-100"],
html.dark-mode [class~="text-gray-200"] { color: var(--q-fg) !important; }
html.dark-mode [class~="text-gray-300"] { color: var(--q-fg-2) !important; }

/* bg-gray-200/300/400 — las pistas de las barras de progreso (ej. la lista
   de /unidades) usan bg-gray-200, que sin esto queda gris claro crudo sobre
   tarjeta oscura. En Norden ese rol es --color-surface-3, con surface-2
   sobre superficies más claras. Verificado con sonda: antes resolvía a un
   oklch claro; ahora al tono oscuro correcto. */
html.dark-mode [class~="bg-gray-200"],
html.dark-mode [class~="bg-gray-300"] { background-color: var(--q-surface-3) !important; }
html.dark-mode [class~="bg-gray-400"] { background-color: var(--q-line-2) !important; }

/* ── b) Tarjetas «.glass» ──────────────────────────────────────────────────
   Quantum no usa la clase .glass de Norden. Su patrón dominante de tarjeta es
   `bg-white rounded-xl border border-gray-200` (~52 usos en el bundle), así
   que anclamos por combinación de clases. La sombra son las 3 capas de
   Norden: profundidad + highlight interno + halo de acento al 6%. */
html.dark-mode [class~="bg-white"][class~="rounded-xl"],
html.dark-mode [class~="bg-white"][class~="rounded-2xl"] {
  background: linear-gradient(180deg, #0c1626 0%, var(--q-surface) 24%) !important;
  border-color: var(--q-line) !important;
  /* El estándar de Norden para .glass es rounded-lg (8px), no rounded-xl
     (12px): la especificación original de Norden tenía este dato mal — decía
     0.75rem, pero .glass no fija radio, viene de la clase acompañante, y en
     su base 156 usos son rounded-lg contra apenas 3 rounded-xl. Se corrige
     acá sin tocar el bundle, aunque Quantum siga usando la clase rounded-xl. */
  border-radius: 0.5rem !important;
  box-shadow:
    0 12px 34px -14px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px color-mix(in srgb, var(--q-accent) 6%, transparent) !important;
}

/* Tarjetas chicas (rounded-lg) — mismo lenguaje, sin el gradiente ni el halo,
   que a ese tamaño sólo ensucian. */
html.dark-mode [class~="bg-white"][class~="rounded-lg"] {
  background: var(--q-surface) !important;
  border-color: var(--q-line) !important;
}

/* Separadores internos de tabla/lista, para que no queden más claros que el
   borde de la tarjeta que los contiene. */
html.dark-mode [class~="border-gray-200"],
html.dark-mode [class~="border-gray-100"],
html.dark-mode [class~="divide-gray-200"] > :not([hidden]) ~ :not([hidden]),
html.dark-mode [class~="divide-gray-100"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--q-line) !important;
}

/* Filas de tabla y zonas «grises» de la app. */
html.dark-mode [class~="bg-gray-50"],
html.dark-mode [class~="bg-slate-50"],
html.dark-mode [class~="bg-gray-100"],
html.dark-mode [class~="bg-slate-100"] {
  background-color: var(--q-surface-2) !important;
}

html.dark-mode [class*="hover:bg-gray-50"]:hover,
html.dark-mode [class*="hover:bg-gray-100"]:hover {
  background-color: var(--q-surface-2) !important;
}

/* ── c) Menú lateral con scroll continuo ───────────────────────────────────
   Estructura que renderiza React:

     <aside class="… bg-slate-900 flex flex-col overflow-hidden">
       <div>   ← logo          (fijo)
       <nav>   ← secciones     (flex-1 overflow-y-auto → scrollea solo)
       <div>   ← Usuario + Cerrar Sesión  (pinneado abajo)

   Norden resolvió el scroll continuo MOVIENDO el bloque inferior dentro del
   <nav>. Acá eso está prohibido: mover nodos que React renderiza rompe su
   reconciliación (ver references/quantum/NO-REGENERAR-FRONTEND.md).

   La solución equivalente sin tocar el DOM: pasar el scroll del <nav> al
   <aside>, y dejar el logo sticky para que no se vaya al hacer scroll. El
   resultado visual es el mismo — una sola lista continua. */
/* LAYOUT — fuera del scope de .dark-mode a propósito: esto corrige un bug de
   estructura, no aplica una estética. El menú estaba partido en dos
   contenedores con scroll separado en los dos modos. */
aside[class*="bg-slate-900"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

aside[class*="bg-slate-900"] > nav {
  flex: 0 0 auto !important;
  overflow-y: visible !important;
}

aside[class*="bg-slate-900"] > div:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  /* inherit toma el fondo del <aside>, así funciona en ambos modos sin
     tener que declarar un color por tema. */
  background-color: inherit;
}

/* El bloque de Usuario + Cerrar Sesión deja de estar pinneado: ahora es el
   último tramo de la misma lista. margin-top:auto lo empuja abajo cuando el
   menú es corto y sobra alto. */
aside[class*="bg-slate-900"] > div:last-child {
  margin-top: auto;
}

/* COLOR — sólo en oscuro. */
html.dark-mode aside[class*="bg-slate-900"] {
  background-color: var(--q-ink) !important;
  border-right: 1px solid var(--q-line);
}

html.dark-mode aside[class*="bg-slate-900"] > div:first-child {
  border-bottom-color: var(--q-line) !important;
}

html.dark-mode aside[class*="bg-slate-900"] > div:last-child {
  border-top-color: var(--q-line) !important;
}

/* Labels de sección: eyebrow uppercase de Norden. */
html.dark-mode aside[class*="bg-slate-900"] nav [class~="uppercase"] {
  color: var(--q-fg-3) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Ítems de navegación: normal / hover / activo. */
html.dark-mode aside[class*="bg-slate-900"] a,
html.dark-mode aside[class*="bg-slate-900"] button {
  font-size: 15px;
  font-weight: 400;
  border-radius: 0.5rem;
}

html.dark-mode aside[class*="bg-slate-900"] [class~="text-slate-300"] {
  color: var(--q-fg-2) !important;
}

html.dark-mode aside[class*="bg-slate-900"] a:hover,
html.dark-mode aside[class*="bg-slate-900"] button:hover {
  background-color: var(--q-surface-2) !important;
  color: var(--q-fg) !important;
}

/* Activo: el par fondo+texto ES el indicador, sin barra lateral. Reemplaza el
   bg-indigo-600 original. */
html.dark-mode aside[class*="bg-slate-900"] [class~="bg-indigo-600"] {
  background-color: var(--q-active-bg) !important;
  color: var(--q-accent-2) !important;
}

html.dark-mode aside[class*="bg-slate-900"] [class~="bg-indigo-600"]:hover {
  background-color: color-mix(in srgb, var(--q-active-bg) 70%, var(--q-accent-2) 30%) !important;
  color: var(--q-accent-2) !important;
}

/* ── d) Tipografía ─────────────────────────────────────────────────────────
   Inter ya viene cargada desde index.html. Acá va sólo la escala, y de forma
   conservadora: tocar los tamaños de cuerpo de forma global rompería layouts
   que dependen del alto de fila, así que se limita a los títulos. */
html.dark-mode h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--q-fg);
}

html.dark-mode h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-fg);
}

html.dark-mode h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-fg);
}

/* ── d.2) Colores semánticos de texto ──────────────────────────────────────
   dark-mode-overrides.css aclara los text-* de Tailwind para que contrasten,
   pero no los lleva a los hex de Norden. Acá se mapean 1:1, en el mismo
   rango de shades que usa la app.

   OJO — sólo se mapean las 4 familias que en Quantum tienen significado
   semántico. `purple` y `teal` se dejan como están A PROPÓSITO: acá no son
   ok/warn/bad sino categorías de estado — `text-teal-700` es "Reservada" y
   `text-purple-*` es "En Desarrollo". Colapsarlas al verde o al azul haría
   que esos estados se confundan con otros. Ya se leen bien sobre el ink. */

/* Éxito */
html.dark-mode [class~="text-green-400"], html.dark-mode [class~="text-green-500"],
html.dark-mode [class~="text-green-600"], html.dark-mode [class~="text-green-700"],
html.dark-mode [class~="text-green-800"], html.dark-mode [class~="text-green-900"],
html.dark-mode [class~="text-emerald-400"], html.dark-mode [class~="text-emerald-500"],
html.dark-mode [class~="text-emerald-600"], html.dark-mode [class~="text-emerald-700"],
html.dark-mode [class~="text-emerald-800"], html.dark-mode [class~="text-emerald-900"] {
  color: var(--q-ok) !important;
}

/* Error */
html.dark-mode [class~="text-red-400"], html.dark-mode [class~="text-red-500"],
html.dark-mode [class~="text-red-600"], html.dark-mode [class~="text-red-700"],
html.dark-mode [class~="text-red-800"], html.dark-mode [class~="text-red-900"],
html.dark-mode [class~="text-rose-400"], html.dark-mode [class~="text-rose-500"],
html.dark-mode [class~="text-rose-600"], html.dark-mode [class~="text-rose-700"],
html.dark-mode [class~="text-rose-800"], html.dark-mode [class~="text-rose-900"] {
  color: var(--q-bad) !important;
}

/* Advertencia */
html.dark-mode [class~="text-amber-400"], html.dark-mode [class~="text-amber-500"],
html.dark-mode [class~="text-amber-600"], html.dark-mode [class~="text-amber-700"],
html.dark-mode [class~="text-amber-800"], html.dark-mode [class~="text-amber-900"],
html.dark-mode [class~="text-yellow-400"], html.dark-mode [class~="text-yellow-500"],
html.dark-mode [class~="text-yellow-600"], html.dark-mode [class~="text-yellow-700"],
html.dark-mode [class~="text-yellow-800"], html.dark-mode [class~="text-yellow-900"],
html.dark-mode [class~="text-orange-400"], html.dark-mode [class~="text-orange-500"],
html.dark-mode [class~="text-orange-600"], html.dark-mode [class~="text-orange-700"],
html.dark-mode [class~="text-orange-800"], html.dark-mode [class~="text-orange-900"] {
  color: var(--q-warn) !important;
}

/* Acento / info */
html.dark-mode [class~="text-indigo-400"], html.dark-mode [class~="text-indigo-500"],
html.dark-mode [class~="text-indigo-600"], html.dark-mode [class~="text-indigo-700"],
html.dark-mode [class~="text-indigo-800"], html.dark-mode [class~="text-indigo-900"],
html.dark-mode [class~="text-blue-400"], html.dark-mode [class~="text-blue-500"],
html.dark-mode [class~="text-blue-600"], html.dark-mode [class~="text-blue-700"],
html.dark-mode [class~="text-blue-800"], html.dark-mode [class~="text-blue-900"] {
  color: var(--q-accent-2) !important;
}

/* ── d.3) Peso de los valores grandes (KPI) ────────────────────────────────
   Norden usa font-medium (500) para las cifras de tarjeta; Quantum venía en
   font-bold (700). Se excluyen los headings, que ya tienen su propio peso
   en el bloque de tipografía de arriba. */
html.dark-mode [class~="text-2xl"][class~="font-bold"]:not(h1):not(h2):not(h3),
html.dark-mode [class~="text-3xl"][class~="font-bold"]:not(h1):not(h2):not(h3),
html.dark-mode [class~="text-4xl"][class~="font-bold"]:not(h1):not(h2):not(h3) {
  font-weight: 500;
}

/* text-xl (20px) va acotado a <p>: esa combinación también se usa para
   títulos de sección (`text-xl font-bold text-gray-900 truncate`), y ahí el
   bold debe quedarse. Las cifras de KPI son siempre <p> sin hijos. */
html.dark-mode p[class~="text-xl"][class~="font-bold"] {
  font-weight: 500;
}

/* ── e) Inputs y badges ────────────────────────────────────────────────────
   El .input de Norden. Nota: <select> e <input type="date"> siguen siendo
   controles nativos — el navegador dibuja su desplegable y su calendario con
   su propio estilo y esto no lo alcanza. Es el trabajo de la Fase 2. */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: var(--q-surface-3) !important;
  color: var(--q-fg) !important;
  border-color: var(--q-line) !important;
  border-radius: 0.5rem;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  outline: none;
  border-color: var(--q-accent) !important;
}

html.dark-mode ::placeholder {
  color: var(--q-fg-3) !important;
}

/* Los <input type="date"> nativos pintan su texto en gris oscuro, ilegible
   sobre fondo oscuro. Esto lo hace legible; el calendario desplegable sigue
   siendo del navegador (Fase 2). */
html.dark-mode input[type="date"],
html.dark-mode input[type="datetime-local"],
html.dark-mode input[type="time"] {
  color-scheme: dark;
}

/* ── Accesibilidad: texto sobre botones de color sólido ───────────────────
   Tailwind pareaba `text-emerald-200` sobre `bg-emerald-600` en el subtítulo
   del botón de escanear QR (Seguridad): 2.86:1 medido, por debajo de AA
   (4.5) y hasta de AA-large (3.0). Es un problema previo al tema oscuro —
   ese botón queda de color a propósito y no lo toca la paleta — pero la
   pantalla se usa en el puesto de vigilancia, en tablet y con luz de día.

   Aclarar sobre el texto no alcanzaba: sobre `bg-emerald-600` ni el blanco
   puro pasa de 3.77 — el problema no era el texto sino que el botón es
   demasiado claro. Bajarlo un escalón a emerald-700 lleva el subtítulo a
   5.48:1 (AA con margen). */
button[class~="bg-emerald-600"] {
  background-color: #047857 !important; /* emerald-700 */
}

button[class~="bg-emerald-600"]:hover {
  background-color: #065f46 !important; /* emerald-800 */
}

button[class~="bg-emerald-600"] [class~="text-emerald-200"] {
  color: #fff !important;
}

/* ── Ancho de página ───────────────────────────────────────────────────────
   La mayoría de las pantallas ocupan el ancho completo, pero Cobranzas y P&L
   venían centradas a `max-w-4xl`, y quedaban con una franja vacía a los
   lados. Norden no centra ninguna pantalla operativa (su Layout.tsx no tiene
   max-width), así que se unifica a full-width.

   Acotado a hijos directos de <main> a propósito: así no toca los modales ni
   las páginas sueltas que traen su propio padding (`max-w-4xl mx-auto px-4
   py-8`), como el tour público, que sí deben seguir centradas. El
   `max-w-5xl` se deja: es una vista de lectura tipo documento, el mismo caso
   que el Changelog de Norden.

   Fuera del scope de .dark-mode: es layout, no color. */
main > [class~="max-w-4xl"][class~="mx-auto"] {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Padding del main: Quantum traía `p-4 md:p-6` (24px); Norden usa
   `p-4 lg:px-5 lg:pt-1 lg:pb-6` → 20px a los lados, 4px arriba, 24px abajo. */
@media (min-width: 1024px) {
  main[class~="flex-1"][class~="overflow-auto"] {
    padding: 4px 20px 24px;
  }
}

/* Sidebar colapsado: el <aside> se quedaba en 256px al colapsar, dejando una
   columna vacía. La clase `w-[70px]` sí existe y resuelve bien; el problema
   es que el <aside> es un flex item y ahí `width` no gobierna el tamaño —
   ni con !important. Sólo `flex-basis` lo mueve. Verificado: 256 → 70 al
   colapsar, y el <main> recupera esos 186px.

   Fuera del scope de .dark-mode: es layout, no color.

   (De paso: el ancho expandido NO se alinea a los 240px de Norden. La clase
   `w-60` no existe en este build — una sonda le da 0px — y forzarlo por CSS
   rompe el colapsado por la misma razón de arriba.) */
aside.w-\[70px\] {
  flex-basis: 70px;
}

/* ── Serie "Ganancia Acumulada" del gráfico ────────────────────────────────
   Recharts pinta el color desde el `stroke` de la serie, un hex fijo en la
   config del gráfico: nunca pasa por una clase `text-indigo-*`, así que el
   mapeo de clases semánticas no lo alcanzaba. `#4f46e5` (indigo-600 crudo)
   sobre el fondo de tarjeta queda ilegible.

   Se aclara a `#a78bfa` (violet-400), que pasa AA con holgura, sigue siendo
   inequívocamente violeta —no se confunde con el celeste de "Ganancia
   Mensual"— y ya es parte de la paleta de Norden.

   Va en tres lugares porque Recharts los pinta por separado: el trazo de la
   curva, el ícono de la leyenda y el texto de la leyenda (este último con
   `style` inline, que sólo cede ante un !important de hoja).

   SÍ scopeado a .dark-mode, al revés que las reglas de layout: en modo claro
   el #4f46e5 sobre blanco tiene buen contraste y aclararlo lo empeoraría. */
html.dark-mode [stroke="#4f46e5"] {
  stroke: #a78bfa !important;
}

html.dark-mode [fill="#4f46e5"] {
  fill: #a78bfa !important;
}

html.dark-mode .recharts-legend-item-text[style*="79, 70, 229"] {
  color: #a78bfa !important;
}

/* ── Fondos tenues: devolver el matiz ─────────────────────────────────────
   dark-mode-overrides.css manda los `bg-*-50` combinados con `rounded-*` a
   un `#1e293b` plano. Resultado: un aviso indigo, una tarjeta verde de
   estadística y una advertencia ámbar quedan idénticos, y se pierde la
   información que el color codificaba (visible en /banco).

   Se reemplaza por el patrón de Norden — el mismo tono al 15% de fondo, con
   el tono pleno en el texto (`color-mix(... 15%, transparent)`).

   Sobre el `[class]` extra: las reglas de dark-mode-overrides.css usan dos
   selectores de atributo (`[class~="bg-green-50"][class~="rounded-lg"]`) y
   por especificidad le ganarían a un solo atributo. El `[class]` empata la
   cuenta, y al cargar este archivo después, gana.

   purple / teal / cyan conservan su propio matiz en vez de ir al azul de
   accent: acá no son severidad sino categorías de estado, el mismo criterio
   que con los `text-*`. */

/* Éxito */
html.dark-mode [class~="bg-green-50"][class],
html.dark-mode [class~="bg-green-100"][class],
html.dark-mode [class~="bg-emerald-50"][class],
html.dark-mode [class~="bg-emerald-100"][class] {
  background-color: color-mix(in srgb, var(--q-ok) 15%, transparent) !important;
}

/* Error */
html.dark-mode [class~="bg-red-50"][class],
html.dark-mode [class~="bg-red-100"][class],
html.dark-mode [class~="bg-rose-50"][class],
html.dark-mode [class~="bg-rose-100"][class] {
  background-color: color-mix(in srgb, var(--q-bad) 15%, transparent) !important;
}

/* Advertencia */
html.dark-mode [class~="bg-amber-50"][class],
html.dark-mode [class~="bg-amber-100"][class],
html.dark-mode [class~="bg-yellow-50"][class],
html.dark-mode [class~="bg-yellow-100"][class],
html.dark-mode [class~="bg-orange-50"][class],
html.dark-mode [class~="bg-orange-100"][class] {
  background-color: color-mix(in srgb, var(--q-warn) 15%, transparent) !important;
}

/* Acento / info */
html.dark-mode [class~="bg-blue-50"][class],
html.dark-mode [class~="bg-blue-100"][class],
html.dark-mode [class~="bg-indigo-50"][class],
html.dark-mode [class~="bg-indigo-100"][class] {
  background-color: color-mix(in srgb, var(--q-accent-2) 15%, transparent) !important;
}

/* Categorías, con matiz propio */
html.dark-mode [class~="bg-purple-50"][class],
html.dark-mode [class~="bg-purple-100"][class] {
  background-color: color-mix(in srgb, #a78bfa 15%, transparent) !important;
}

html.dark-mode [class~="bg-teal-50"][class],
html.dark-mode [class~="bg-teal-100"][class] {
  background-color: color-mix(in srgb, #2dd4bf 15%, transparent) !important;
}

html.dark-mode [class~="bg-cyan-50"][class],
html.dark-mode [class~="bg-cyan-100"][class] {
  background-color: color-mix(in srgb, #22d3ee 15%, transparent) !important;
}

/* Bordes al mismo tono, algo más presentes que el fondo. */
html.dark-mode [class~="border-green-200"][class],
html.dark-mode [class~="border-emerald-200"][class] {
  border-color: color-mix(in srgb, var(--q-ok) 30%, transparent) !important;
}

html.dark-mode [class~="border-red-200"][class],
html.dark-mode [class~="border-rose-200"][class] {
  border-color: color-mix(in srgb, var(--q-bad) 30%, transparent) !important;
}

html.dark-mode [class~="border-amber-200"][class],
html.dark-mode [class~="border-yellow-200"][class],
html.dark-mode [class~="border-orange-200"][class] {
  border-color: color-mix(in srgb, var(--q-warn) 30%, transparent) !important;
}

html.dark-mode [class~="border-blue-200"][class],
html.dark-mode [class~="border-indigo-200"][class] {
  border-color: color-mix(in srgb, var(--q-accent-2) 30%, transparent) !important;
}

html.dark-mode [class~="border-purple-200"][class] {
  border-color: color-mix(in srgb, #a78bfa 30%, transparent) !important;
}

html.dark-mode [class~="border-teal-200"][class] {
  border-color: color-mix(in srgb, #2dd4bf 30%, transparent) !important;
}

/* Texto atenuado DENTRO de una caja tintada: el tinte aclara el fondo, así
   que `--q-fg-3` (#5c6b80) cae a 2.47–2.91, por debajo del piso de 3.0. Se
   sube a `--q-fg-2` sólo en ese contexto — medido 4.53. Fuera de las cajas
   tintadas, fg-3 se queda como está, que es lo que hace Norden. */
html.dark-mode :is(
  [class~="bg-green-50"], [class~="bg-green-100"],
  [class~="bg-emerald-50"], [class~="bg-emerald-100"],
  [class~="bg-red-50"], [class~="bg-red-100"],
  [class~="bg-rose-50"], [class~="bg-rose-100"],
  [class~="bg-amber-50"], [class~="bg-amber-100"],
  [class~="bg-yellow-50"], [class~="bg-yellow-100"],
  [class~="bg-orange-50"], [class~="bg-orange-100"],
  [class~="bg-blue-50"], [class~="bg-blue-100"],
  [class~="bg-indigo-50"], [class~="bg-indigo-100"],
  [class~="bg-purple-50"], [class~="bg-purple-100"],
  [class~="bg-teal-50"], [class~="bg-teal-100"],
  [class~="bg-cyan-50"], [class~="bg-cyan-100"]
) :is([class~="text-gray-400"], [class~="text-slate-400"], [class~="text-gray-500"]) {
  color: var(--q-fg-2) !important;
}

/* Badges: fondo tenue + texto vivo, la fórmula de Norden. */
html.dark-mode [class~="rounded-full"][class*="bg-green-"],
html.dark-mode [class~="rounded-full"][class*="bg-emerald-"] {
  background-color: color-mix(in srgb, var(--q-ok) 18%, transparent) !important;
  color: var(--q-ok) !important;
}

html.dark-mode [class~="rounded-full"][class*="bg-amber-"],
html.dark-mode [class~="rounded-full"][class*="bg-yellow-"] {
  background-color: color-mix(in srgb, var(--q-warn) 18%, transparent) !important;
  color: var(--q-warn) !important;
}

html.dark-mode [class~="rounded-full"][class*="bg-red-"],
html.dark-mode [class~="rounded-full"][class*="bg-rose-"] {
  background-color: color-mix(in srgb, var(--q-bad) 18%, transparent) !important;
  color: var(--q-bad) !important;
}

html.dark-mode [class~="rounded-full"][class*="bg-blue-"],
html.dark-mode [class~="rounded-full"][class*="bg-indigo-"] {
  background-color: color-mix(in srgb, var(--q-accent-2) 18%, transparent) !important;
  color: var(--q-accent-2) !important;
}

/* Botón primario: el azul de acento de Norden. */
html.dark-mode button[class~="bg-indigo-600"]:not(aside button),
html.dark-mode button[class~="bg-blue-600"] {
  background-color: var(--q-accent) !important;
  color: #fff !important;
}

/* Barra de scroll, para que no aparezca un rectángulo claro sobre el ink. */
html.dark-mode * {
  scrollbar-color: var(--q-line-2) transparent;
  scrollbar-width: thin;
}

html.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: transparent;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--q-line-2);
  border-radius: 999px;
}

/* El botón sol/luna del header, alineado a la paleta nueva. */
html.dark-mode .dark-mode-toggle-btn { color: var(--q-fg-2); }
html.dark-mode .dark-mode-toggle-btn:hover { background-color: var(--q-surface-2); }