/* ══════════════════════════════════════════════════════════════════════════
   MODO NOCTURNO — psi.ivanwaisman.com
   ══════════════════════════════════════════════════════════════════════════

   Lo enciende night-mode.js según la hora del dispositivo (19:00–07:00).
   Todo cuelga de html[data-theme="night"].

   Por qué funciona con una sola hoja para todo el sistema: portal, intake,
   feedback, form2, tests, recursos, valores, biocontext y dashboard comparten
   el MISMO juego de tokens (--card, --text, --accent, --border…) y hasta el
   mismo degradé de fondo. Redefinir los tokens da vuelta casi todo.

   Lo que los tokens no cubrían eran los blancos escritos a mano
   (`rgba(255,255,255,.8)` como superficie de tarjeta). Esos se reemplazaron en
   cada página por `rgba(var(--white-rgb), .8)`: el alfa sigue diciendo lo
   mismo ("superficie apenas separada del fondo") y de noche la base deja de
   ser blanca y pasa a ser marrón oscuro. Ver STYLE_GUIDE.md.

   ── Regla de oro para editar esto ──
   Cada selector de acá arranca con html[data-theme="night"], así que SIEMPRE
   gana por especificidad contra el <style> de la página. Si necesitás
   !important es que la regla original ya lo tenía.

   Las páginas públicas (index, index-en, privacidad ES/EN, 404) NO cargan este
   archivo a propósito: la cara pública del consultorio queda siempre en claro.
   ══════════════════════════════════════════════════════════════════════════ */

/* Base del sistema en modo día. Las páginas ya no la declaran: vive acá para
   que el reemplazo de blancos tenga siempre un valor con el que resolver. */
/* Bases de superficie en modo día. Son EXACTAMENTE los valores que las páginas
   tenían escritos a mano: de día nada cambia de color, ni un punto. El sistema
   usa seis blancos apenas distintos y esa gradación importa — #fffcf8 no es
   #ffffff, y el STYLE_GUIDE dice que los colores se validan contra el crema.

   OJO: cada página lleva ADEMÁS su propia copia de este bloque en su :root.
   Es a propósito: si esta hoja no llega a cargar, el modo día tiene que quedar
   intacto igual. Si tocás un valor acá, tocalo también en las páginas. */
:root {
  --white-rgb:  255, 255, 255;   /* blanco puro */
  --paper-rgb:  255, 252, 248;   /* #fffcf8 — el crema de las tarjetas */
  --warm-rgb:   255, 250, 244;   /* #fffaf4 */
  --warmer-rgb: 255, 248, 240;   /* #fff8f0 */
  --cream-rgb:  252, 245, 236;   /* #fcf5ec */
  --sand-rgb:   248, 241, 232;   /* #f8f1e8 */

  /* El degradé de cielo que comparten todas las páginas del sistema. */
  --sky-1: #f6fbff;
  --sky-2: #e8f3ff;
  --sky-3: #fbf5ec;

  /* El ámbar de avisos: excepciones de agenda, cartel de credenciales,
     cancelación tardía, tests vencidos. Un solo trío para todo el sistema. */
  --amber-bg: #fff4e6;
  --amber-border: #ffd8a8;
  --amber-text: #b3671a;

  /* Azul de links dentro de texto (referencias del modal FIT, etc.). */
  --link-blue: #2563eb;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS DE NOCHE
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="night"] {
  color-scheme: dark;

  /* Las seis bases de superficie, dadas vuelta. Los pasos siguen siendo
     mínimos, igual que de día: la idea es conservar el relieve de los degradés
     de dos paradas, no amplificar una diferencia que de día casi no se ve.
     Lo que de día es "más cálido/más oscuro" acá es "más cálido/más claro",
     porque el fondo pasó a ser oscuro y las superficies se separan hacia
     arriba, no hacia abajo. */
  --white-rgb:  46, 40, 35;
  --paper-rgb:  48, 42, 36;
  --warm-rgb:   50, 43, 37;
  --warmer-rgb: 52, 45, 39;
  --cream-rgb:  54, 46, 40;
  --sand-rgb:   56, 48, 42;

  --bg: #1a1613;
  --bg-soft: #221d19;
  --bg-ink: #ede4d8;          /* es color de tinta, no de fondo: se invierte */

  --card: rgba(40, 35, 31, 0.94);
  --card-strong: #322b25;
  /* Las dos paradas de los degradés de tarjeta (valores y portal). */
  --card-grad-b: #3a322c;
  --surface-grad-a: #322b25;
  --surface-grad-b: #3a322c;

  --text: #ede4d8;
  /* Más alto que el equivalente diurno a propósito: el texto secundario no cae
     sobre un color plano sino sobre la foto de estrellas, que tiene brillos.
     Con el gris apagado de día acá se perdía. */
  --muted: #cabdad;

  /* Metadatos (fecha de actualización, tags, hints). De día son marrones
     translúcidos; de noche, crema translúcido con el mismo alfa. */
  --meta-text: rgba(228, 216, 202, 0.88);
  --meta-text-mid: rgba(228, 216, 202, 0.76);
  --meta-text-soft: rgba(228, 216, 202, 0.60);

  --primary: #8993a0;
  --primary-strong: #b7c0cb;
  --primary-soft: rgba(137, 147, 160, 0.18);

  --accent: #c2915f;          /* el tostado del sistema, un punto más claro
                                 para que respire sobre fondo oscuro */
  --accent-strong: #d2a274;
  --accent-soft: rgba(194, 145, 95, 0.16);

  --border: rgba(229, 214, 197, 0.16);
  --border-strong: rgba(229, 214, 197, 0.26);
  --line: rgba(229, 214, 197, 0.16);
  --line-soft: rgba(229, 214, 197, 0.09);
  --line-strong: rgba(229, 214, 197, 0.26);

  --ok: #65b384;
  --ok-soft: rgba(101, 179, 132, 0.16);
  --ok-border: rgba(101, 179, 132, 0.34);
  --danger: #e2938a;
  --danger-soft: rgba(180, 88, 70, 0.20);
  --danger-border: rgba(226, 147, 138, 0.34);
  --danger-text: #eda392;
  --muted-soft: #9b8e80;
  --primary-hover: rgba(137, 147, 160, 0.26);

  --shadow: 0 30px 70px rgba(0, 0, 0, 0.50);
  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.34);

  /* Cielo nocturno: el mismo recorrido del diurno (celeste arriba, tierra
     abajo), una noche más abajo. */
  --sky-1: #0c1220;
  --sky-2: #111a2b;
  --sky-3: #1b1611;

  /* El ámbar sigue siendo ámbar: caja tenue en vez de relleno claro, borde
     apagado y texto que sube de brillo para leerse sobre oscuro. Sigue sin ser
     rojo — es un aviso, no un error. */
  --amber-bg: rgba(179, 103, 26, 0.16);
  --amber-border: rgba(226, 175, 107, 0.32);
  --amber-text: #e3a865;

  --link-blue: #7ab0f5;
  --link-blue-hover: #a3c8f8;

  /* Textos que de día son oscuros (rojos de error, verdes de OK, azules
     informativos, títulos en azul marino). De día cada página conserva su
     valor exacto; de noche convergen todos acá, porque lo único que importa
     es que se lean sobre el cielo oscuro. */
  --ink-strong: #f2ece4;      /* casi negro → casi blanco */
  --ink-deep: #cfdcf0;        /* azul marino de títulos → azul muy claro */
  --ink-slate: #c3cbd8;
  --primary-deep: #c8d0da;
  --ok-text: #7fc99a;
  --ok-text-soft: #8ed0a6;
  --olive-text: #bcc691;
  --danger-text-strong: #ee9c8e;
  --warn-text: #e8ab6a;
  --amber-text-strong: #e8ab6a;
  --info-text: #7ab0f5;
  --count-red: #e8877f;

  /* El cielo nocturno: estrellas sobre siluetas de árboles, con un velo que se
     va cerrando hacia abajo para que el texto de la parte baja no pelee con la
     foto. La foto vive en /media, no en Drive: es lo que ya hace el cielo diurno
     del portal (media/bg-sky.jpg) y así la cachea Vercel.
     Reemplazó (2026-08-10) a `bg-night-stars.jpg`, la Vía Láctea sobre las
     montañas que compartía con el sistema de tareas. La vieja sigue en /media:
     volver es cambiar este nombre y nada más.
     El velo es MÁS SUAVE que el de aquella foto porque ésta ya es muy oscura de
     por sí — con los valores viejos (0.50/0.78 abajo) la mitad inferior se
     apagaba en negro liso y las siluetas desaparecían. */
  --night-sky:
    linear-gradient(180deg,
      rgba(4, 6, 14, 0.08)  0%,
      rgba(4, 6, 14, 0.14) 35%,
      rgba(4, 6, 14, 0.34) 68%,
      rgba(4, 6, 14, 0.56) 100%
    ),
    url('/media/bg-night-trees.jpg');
}

/* ─────────────────────────────────────────────────────────────────────────
   2. FONDO COMPARTIDO
   Casi todas las páginas del sistema tienen el mismo body: dos radiales
   blancos sobre el degradé de cielo. Una sola regla las cubre a todas.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="night"] body {
  /* El #0b1018 del final es la capa de color: si la foto no llega a cargar,
     el velo por sí solo es casi transparente y se vería el blanco del
     navegador. Con el color detrás, lo peor que pasa es un cielo liso. */
  background: var(--night-sky) #0b1018;
  background-size: auto, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--text);
}

/* Varias páginas funden una foto de cielo DIURNO en body::before (portal,
   feedback, form2). De noche la foto de estrellas ya es el fondo, así que esa
   capa sólo ensuciaría las estrellas: se apaga entera. */
html[data-theme="night"] body::before {
  opacity: 0;
}

/* La grilla y los destellos de body::after quedaban invisibles de noche. */
html[data-theme="night"] body::after {
  opacity: 0.06;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. DETALLES TRANSVERSALES
   ───────────────────────────────────────────────────────────────────────── */

/* ── .on-sky — bloques de texto que van FUERA de la tarjeta ──────────────
   Los encabezados (eyebrow con el tipo de recurso, saludo, título, bajada,
   tags y fecha de actualización) caen directo sobre la foto. Aclarar el color
   no alcanza: el problema no es el brillo del fondo sino el MOTEADO — las
   estrellas son puntitos de alto contraste justo detrás de letras chicas, y
   eso rompe la silueta de cada letra.

   La solución es un velo, no una tarjeta. Una caja con borde arriba del panel
   dejaría la página con dos paneles apilados y perdería el aire que justifica
   haber puesto una foto; un óvalo oscuro que se desvanece sin bordes se lee
   como "acá el cielo está más cerrado" y no agrega una caja más.

   Para ponérselo a un bloque nuevo alcanza con sumarle la clase `on-sky`. */
html[data-theme="night"] .on-sky {
  position: relative;
}

/* Los hijos suben de capa en vez de mandar el velo a z-index negativo: así no
   depende de qué contexto de apilamiento tenga el contenedor de la página. */
html[data-theme="night"] .on-sky > * {
  position: relative;
  z-index: 1;
}

html[data-theme="night"] .on-sky::before {
  content: '';
  position: absolute;
  /* Apenas más grande que el bloque de texto: lo suficiente para que la cola
     tenga dónde apagarse, no más. */
  inset: -14px 0 -10px;
  z-index: 0;
  pointer-events: none;
  /* OJO: en `ellipse A B` los dos valores son RADIOS, no el ancho y el alto.
     Con 90% el óvalo llegaba a 90% del ANCHO DE LA CAJA hacia cada lado, o sea
     casi el doble del bloque, y terminaba oscureciendo media pantalla. Con 58%
     el borde visible queda pegado al texto.

     Centro liviano y cola de ocho paradas: el tramo distal baja de a poquito
     (0.13 → 0.07 → 0.03 → 0) en vez de cerrar de golpe. Termina en
     rgba(...,0) y no en `transparent` a propósito — `transparent` es negro
     transparente y al interpolar ensucia el degradé. */
  background: radial-gradient(
    ellipse 58% 74% at 50% 50%,
    rgba(6, 9, 18, 0.68) 0%,
    rgba(6, 9, 18, 0.62) 24%,
    rgba(6, 9, 18, 0.50) 42%,
    rgba(6, 9, 18, 0.36) 56%,
    rgba(6, 9, 18, 0.23) 68%,
    rgba(6, 9, 18, 0.13) 78%,
    rgba(6, 9, 18, 0.07) 86%,
    rgba(6, 9, 18, 0.03) 93%,
    rgba(6, 9, 18, 0) 100%
  );
}

/* La sombra sigue puesta además del velo: en los bordes, donde el velo ya se
   fue a cero, es lo único que separa la letra de una estrella. */
html[data-theme="night"] .on-sky,
html[data-theme="night"] .portal-header-stack {
  text-shadow: 0 1px 14px rgba(4, 6, 14, 0.72), 0 0 3px rgba(4, 6, 14, 0.5);
}

/* La textura de grano son líneas blancas al 0.2 de alfa. Al invertir la base
   se volvieron líneas oscuras sobre fondo oscuro: invisibles. Se vuelven a
   dibujar en claro, más tenues. */
html[data-theme="night"] .grain {
  opacity: 0.07;
  background:
    linear-gradient(90deg, rgba(229, 214, 197, 0.22) 0, rgba(229, 214, 197, 0.22) 1px, transparent 1px, transparent 100%),
    linear-gradient(180deg, rgba(229, 214, 197, 0.14) 0, rgba(229, 214, 197, 0.14) 1px, transparent 1px, transparent 100%);
  background-size: 120px 120px;
}

html[data-theme="night"] ::selection {
  background: rgba(194, 145, 95, 0.34);
  color: #fff8ef;
}

/* Los controles nativos (date, time, select, checkbox) los da vuelta
   color-scheme, pero el ícono del datepicker de Chrome sigue saliendo negro. */
html[data-theme="night"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="night"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.82);
}

html[data-theme="night"] input::placeholder,
html[data-theme="night"] textarea::placeholder {
  color: rgba(176, 162, 147, 0.62);
}

/* Fotos y videos: un punto menos de brillo para que no encandilen. */
html[data-theme="night"] img:not([src*="favicon"]),
html[data-theme="night"] iframe,
html[data-theme="night"] video {
  filter: brightness(0.9) contrast(1.02);
}

/* Los emoji y los glifos no se tocan, pero los SVG monocromos que heredan
   currentColor ya vienen resueltos por --text. */

/* ─────────────────────────────────────────────────────────────────────────
   4. TAB BAR DEL PORTAL — cuál está seleccionada
   ─────────────────────────────────────────────────────────────────────────

   "Mis materiales | Agenda | +". De día la pestaña activa es una tarjeta
   crema (`--card-strong`, #fffcf8) apoyada sobre una canaleta apenas más
   tostada: la diferencia es chica pero alcanza, porque de día el contraste lo
   pone la SOMBRA.

   De noche los dos tokens se dan vuelta y quedan pegados —canaleta
   rgba(48,42,36,.7) contra chip #322b25, un punto de diferencia— y la sombra
   marrón al 0.08 de alfa es invisible sobre fondo oscuro. Resultado: la
   pestaña seleccionada se distinguía sólo por el brillo de la letra
   (--text vs --muted), que es demasiado sutil para leerlo de un vistazo.

   Se arregla haciendo de noche lo MISMO que de día, pero con la fuerza que
   pide el fondo oscuro: el chip sigue siendo una tarjeta neutra de la misma
   familia que el resto —nada de teñirlo de tostado, se probó y convertía la
   tab bar en el elemento más llamativo de la pantalla— sólo que sube dos
   escalones de luz en vez de medio, y la sombra invisible se cambia por una
   negra de verdad más un aro claro de 1px que le dibuja el borde.

   Por qué un valor a mano y no un token: la escala nocturna de superficies
   termina en --sand-rgb (56,48,42), que sobre la canaleta (~40,35,33) sigue
   siendo medio escalón. #4d443c está justo arriba de esa escala; es el mismo
   marrón, un paso más.

   El "+" usa la misma clase, así que hereda esto sin tocar nada. */

html[data-theme="night"] .portal-tab-btn.active {
  background: #4d443c;
  color: #f6efe6;
  /* El aro va como `inset` en la misma propiedad que la sombra de abajo: si
     fuera `border` empujaría el texto 1px y las pestañas bailarían al
     cambiar de una a otra. */
  box-shadow:
    inset 0 0 0 1px rgba(229, 214, 197, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Las inactivas quedan planas sobre la canaleta; el hover les da apenas un
   piso para que se note que son botones. */
html[data-theme="night"] .portal-tab-btn:not(.active):hover {
  background: rgba(229, 214, 197, 0.07);
  color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────
   5. ESPACIOS PERSONALES (/personal/*)
   ─────────────────────────────────────────────────────────────────────────

   Las apps de /personal no comparten el juego de tokens completo del sistema
   clínico: cada una nació con su propia paleta. Al sumarles esta hoja, los
   tokens que SÍ tienen el mismo nombre (--card, --line, --muted, --accent,
   --shadow…) se dan vuelta solos; lo que queda acá son los que cada app
   inventó por su cuenta y que nadie más usa.

   Van en esta hoja y no en cada página para no repetir la regla de oro: si
   una regla de noche está acá, está en un solo lugar. Son pocas líneas y el
   resto del sistema ni las mira.

   NO están acá /personal/tareasapp ni las apps de React
   (/personal/actividades, /personal/relaciones): la primera tiene modo noche
   propio desde antes que existiera esta hoja —con su toggle ☾ y su propio
   juego de tokens— y las de React pintan con `style={{}}` en línea, que
   ninguna hoja de estilos puede pisar. Ahí el modo noche vive en el archivo
   de cada una.

   TODO lo de acá abajo cuelga de una clase en el <body> (`app-gastos`,
   `app-noticias`) y NO del :root. Es obligatorio: los nombres que inventó
   cada app se pisan entre sí y con el resto del sistema —`--warn` lo usan
   gastospersonales y study, `.card` es una tarjeta de noticia acá y una
   sección entera allá— así que un override suelto en :root le cambiaría los
   colores a una página que nadie tocó. */

/* ── /personal/gastospersonales ── */
html[data-theme="night"] body.app-gastos {
  /* Superficie alterna (cabeceras de tarjeta, filas al pasar el mouse,
     pastillas): de día es un crema apenas más tostado que la tarjeta, de
     noche un marrón apenas más claro. */
  --card-alt: rgba(58, 50, 44, 0.97);
  /* Rojo de saldo negativo y ámbar de los pesos: los de día son tintas
     oscuras, ilegibles sobre el cielo. */
  --bad: #e2938a;
  --bad-soft: rgba(180, 88, 70, 0.20);
  --warn: #e2c76b;
}

/* ── /personal/noticias ── */
/* Paleta de diario: cremas, marrones y Georgia. `--dark` hacía dos trabajos
   (fondo oscuro y tinta) y el archivo ya separó el de tinta en `--ink`; acá
   sólo hay que aclararlo. Ver la nota en su :root. */
html[data-theme="night"] body.app-noticias {
  --ink: #ede4d8;
  --beige: rgba(58, 50, 44, 0.92);   /* fondo de las tarjetas de noticia */
  --gold: #d0a83f;
  --orange: #e08048;
}

html[data-theme="night"] body.app-noticias .card:hover {
  /* De día sube a #E5D3B8 (un beige más saturado); de noche, un paso de luz. */
  background: rgba(72, 62, 54, 0.95);
}

html[data-theme="night"] body.app-noticias .criterio-tag {
  /* Rojo oscuro sobre caja roja translúcida: de noche no se leía. */
  color: #e8877f;
  border-color: rgba(232, 135, 127, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. DASHBOARD (`/dashboard`)
   ─────────────────────────────────────────────────────────────────────────

   El dashboard comparte el juego de tokens del sistema, así que casi todo se
   da vuelta solo con la sección 1. Acá quedan tres cosas que los tokens no
   alcanzan:

     a. el LIENZO de la red conceptual, que es una superficie propia (no es una
        tarjeta) y tiene su grilla dibujada con degradés;
     b. un puñado de pares de color escritos a mano que no son ninguno de los
        seis blancos del sistema (las cajas de alerta de los tests, el hover de
        borrar sesión);
     c. los colores que vive pintando el JS en atributos SVG — ésos NO están
        acá: viven en `RED_PALETA_NOCHE` dentro de dashboard-vercel.html,
        porque ninguna hoja de estilos puede pisar un atributo `stroke`.

   Los selectores usan nombres de clase que existen sólo en el dashboard
   (`.red-canvas`, `.rmx-bg-*`, `.alerta-test-card`), así que no hace falta
   colgarlos de una clase del <body> como en /personal: no se pisan con nada. */

/* ── El lienzo de la red ─────────────────────────────────────────────────
   Mismo dibujo que de día —realce arriba a la izquierda, degradé y grilla de
   26px— pero en oscuro. El color medio del degradé tiene que quedar en
   #211c18: es el valor con el que el JS rellena la PUNTA HUECA de las flechas
   (`RED_PALETA_NOCHE.puntaHueca`). Si se toca uno hay que tocar el otro, o las
   puntas huecas dejan de leerse como huecas. */
html[data-theme="night"] .red-canvas {
  background:
    radial-gradient(circle at 30% 20%, rgba(229, 214, 197, 0.05), transparent 40%),
    linear-gradient(160deg, #241f1a, #1e1a16),
    linear-gradient(rgba(229, 214, 197, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 214, 197, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px;
  border-color: rgba(229, 214, 197, 0.14);
  box-shadow: inset 0 1px 0 rgba(229, 214, 197, 0.05), 0 8px 30px rgba(0, 0, 0, 0.38);
}

/* La leyenda de las puntas está dibujada con bordes de CSS, no con el SVG, así
   que no la alcanza la paleta del JS y hay que repetirle los dos colores: el
   gris de la flecha sin círculo y el relleno de la punta hueca. Ese relleno es
   el color de la BARRA donde vive la leyenda (no el del lienzo): la punta hueca
   se lee como hueca cuando su interior es del color de lo que tiene detrás. */
html[data-theme="night"] .red-legend .red-punta.llena,
html[data-theme="night"] .red-legend .red-punta.hueca::before,
html[data-theme="night"] .red-legend .red-punta.hueca::after {
  border-left-color: #7e8792;
}
html[data-theme="night"] .red-legend .red-punta.hueca::after {
  border-left-color: #282320;
}

/* La insignia "≈" (medida aproximada) y el "sobreconectado" cuelgan del chip:
   de día son una pastilla blanca con tinta oscura. */
html[data-theme="night"] .red-node.is-aprox:not(.is-sobreconectado)::after {
  background: #2a2521;
  color: #e6cda5;
  border-color: #a38043;
}

/* Los cuatro cuadrantes de la vista Matrix: de día son dos grises y dos verdes
   clarísimos que separan el lado aversivo del apetitivo. De noche el mismo
   gesto, con el tinte apenas insinuado sobre el fondo oscuro. */
html[data-theme="night"] .rmx-canvas { background: rgba(30, 26, 22, 0.55); }
html[data-theme="night"] .rmx-bg-tl { background: linear-gradient(135deg, rgba(138, 151, 168, 0.10), transparent 70%); }
html[data-theme="night"] .rmx-bg-tr { background: linear-gradient(225deg, rgba(62, 163, 103, 0.12), transparent 70%); }
html[data-theme="night"] .rmx-bg-bl { background: linear-gradient(45deg,  rgba(138, 151, 168, 0.07), transparent 70%); }
html[data-theme="night"] .rmx-bg-br { background: linear-gradient(315deg, rgba(62, 163, 103, 0.09), transparent 70%); }
html[data-theme="night"] .rmx-eje-v,
html[data-theme="night"] .rmx-eje-h { background: rgba(229, 214, 197, 0.18); }

/* ── Pares de color sueltos ───────────────────────────────────────────────
   Las alertas de tests: severo y moderado son dos cajas de relleno claro con
   borde saturado. De noche, caja tenue y borde apagado — el mismo tratamiento
   que el ámbar del sistema, que ya está resuelto arriba con los tokens. */
html[data-theme="night"] .alerta-test-card.is-severo {
  background: rgba(180, 88, 70, 0.16);
  border-color: rgba(226, 147, 138, 0.34);
}
html[data-theme="night"] .alerta-test-card.is-moderado {
  background: rgba(179, 103, 26, 0.16);
  border-color: rgba(226, 175, 107, 0.32);
}
html[data-theme="night"] .ses-delete-btn:hover { background: rgba(180, 88, 70, 0.22); }

/* El halo que separa la etiqueta del gráfico de su propia línea: de día es el
   crema de la tarjeta, de noche tiene que ser el fondo de la tarjeta oscura, o
   la etiqueta queda con un contorno claro alrededor. */
html[data-theme="night"] .fb-ml-label { stroke: #2b2622; }