/* Inessentia — Un solo juego de tokens de tema · publico/ds/tokens/tema.css
   ===========================================================================
   Hasta el pase de agosto de 2026, cada pantalla (publico/estilo.css y
   publico/admin/panel.css) declaraba su paleta de noche DOS VECES, letra por
   letra: una dentro de `@media (prefers-color-scheme: dark)` con la guarda
   `:root:not([data-tema="dia"])`, y otra en `html[data-tema="noche"]`. Eran
   4 bloques calcados en 2 archivos, y con la paleta nueva del rediseño
   habrían sido ~60 declaraciones duplicadas: cada tinte, cada filete, cada
   sombra escrito dos veces con el riesgo de que un retoque arregle un bloque
   y se olvide del otro.

   Aquí cada token se declara UNA sola vez, con `light-dark(claro, oscuro)`.
   El navegador elige la mitad que toca según `color-scheme`, así que ya no
   hay dos copias que puedan divergir — hay un valor con dos caras.

   `color-scheme` es lo que además arregla lo que `light-dark()` por sí solo
   no toca: los WIDGETS NATIVOS. Antes, en modo noche, el `input[type=date]`
   de la pestaña Sábados del panel abría un calendario blanco —el navegador
   no tenía forma de saber que la página estaba en oscuro, porque nada se lo
   decía—. Con:

     :root                   { color-scheme: light dark; }
     html[data-tema="dia"]   { color-scheme: light; }
     html[data-tema="noche"] { color-scheme: dark; }

   el botón de sol/luna pasa a escribir sólo `data-tema` en el `<html>`, y
   `color-scheme` hace el resto: el calendario nativo, las barras de scroll y
   `::selection` se pintan en el tema correcto sin una sola regla más.

   `light-dark()` sólo acepta colores, pero eso sí cubre el degradado del
   fondo y las sombras, porque se aplica a cada parada o cada capa por
   separado (ver --fondo y --sombra más abajo). La única excepción real es
   --marca-filtro: un `filter`, no un color, así que se queda con el patrón
   viejo de dos bloques — es el único residuo a propósito.

   DECISIÓN: los tokens de color del DS (publico/ds/tokens/colors.css —
   --purple, --wine, --ink, --warm, --cream-2, --muted, --body-text, --sand,
   --sand-d) se REDECLARAN aquí, no se renombran. colors.css sólo los define
   de día; publico/estilo.css usa `var(--wine)` crudo cinco veces y nunca lo
   redefinía en oscuro, así que la pantalla de la paciente pintaba vino
   #8E2B5D sobre fondo #291D3F —casi ilegible—. Este archivo se importa
   DESPUÉS de colors.css (ver ds/styles.css), así que gana en la cascada y
   arregla esos usos crudos sin tocar ni un consumidor.

   RESERVA para navegadores sin `light-dark()` (Safari < 17.5, etc.): va
   DESPUÉS del bloque principal a propósito. Sin soporte, un `var()` que
   apunte a un valor con `light-dark()` es una CADENA INVÁLIDA en tiempo de
   cómputo, y eso no deja la propiedad en el valor «de antes»: la deja SIN
   valor, y sin valor la página se rompe visualmente. La reserva reescribe
   cada token con su valor de día, plano, para que el navegador viejo vea un
   tema completo y coherente —con el botón de noche inerte, que es un
   compromiso aceptable frente a una página rota—.

   Dentro de la reserva, `color-scheme: light` no es decorativo: el soporte
   de `color-scheme` (Safari 13+) es más viejo que el de `light-dark()`
   (Safari 17.5+). En ese hueco, un navegador con el sistema en oscuro
   pintaría los widgets nativos en oscuro mientras los tokens —ya vueltos
   planos por la reserva— quedan en la paleta clara: texto claro sobre
   widget oscuro. Fijar `color-scheme: light` ahí cierra ese hueco.
   =========================================================================== */

/* ── El interruptor ──────────────────────────────────────────────────────── */

:root { color-scheme: light dark; }
html[data-tema="dia"]   { color-scheme: light; }
html[data-tema="noche"] { color-scheme: dark; }

/* ── Los tokens, cada uno con sus dos caras ──────────────────────────────── */

:root {
  /* Tokens del DS (colors.css), redeclarados para ganar en la cascada y
     dejar de estar «sólo de día». Mismos nombres, cero renombrado. */
  /* --purple es el «acento de texto» del handoff de agosto de 2026: oro
     #E3D09B de noche. ESTO REVIERTE el lavanda #D7C4FB del pase anterior, y
     es a propósito —el palette doc dice, textual, «nunca lavanda»—. Sigue
     siendo la MISMA variable que consumen estilo.css y panel.css como texto
     de acento (`color: var(--acento)`, enlaces, glifos, bordes decorativos);
     lo que ya NO lleva es el relleno de botón, ver --relleno-accion abajo. */
  --purple:    light-dark(#46276E, #E3D09B);
  --purple-d:  light-dark(#3C1F5E, #C2AAF2);  /* hover del acento; sin uso hoy en las 7 pantallas */
  --wine:      light-dark(#8E2B5D, #F6AECB);  /* vino: enlaces, cancelar */
  --ink:       light-dark(#262321, #FBF7EF);
  --body-text: light-dark(#3f3a36, rgba(251, 247, 239, .94));
  /* #635d59 y no el valor de siempre desde el 2026-09-05: el viejo daba 4.08 sobre
     la parada más oscura de --fondo (#E7D6B6), por debajo del 4.5 que pide WCAG AA
     para texto de cuerpo. Medido en la página servida, no en teoría: caían «Aviso de
     privacidad» (12.5px, 4.23) y el rótulo «Tu próxima cita» (9.5px, 4.43), los dos
     abajo, que es donde el degradado se oscurece.

     No vale la exención de «texto grande» (3:1 desde 24px): este token se usa en 27
     reglas de publico/estilo.css y la mayor es de 14px. La exención existe pero aquí
     no aplica en ningún sitio.

     El valor es el mínimo que pasa manteniendo el tono —los tres canales al 93%—:
     4.53 en el peor fondo y 6.48 sobre blanco. Oscurecerlo más era gratis en contraste
     y caro en jerarquía: --tinta-tenue existe para distinguirse de --tinta-suave.

     Los tres sitios cambian JUNTOS, incluido el bloque de @supports not light-dark():
     dejar el respaldo atrás le habría dado a Safari 13-17.4 el valor que falla, en
     silencio y sólo ahí.

     El tema de noche NO se toca y no es un olvido: sus doce combinaciones pasan, la
     peor en 9.66. Hay que componer los rgba sobre cada parada para verlo. */
  --muted:     light-dark(#635d59, rgba(251, 247, 239, .8));  /* nunca menos opaco que esto */
  --warm:      light-dark(#FCFBF6, #241B33);
  --cream-2:   light-dark(#F4F0E6, #191322);
  --sand:      light-dark(#C2B07E, #E3D09B);
  --sand-d:    light-dark(#A8945C, #D8C58F);

  /* Alias en español que ya usan publico/estilo.css y publico/admin/panel.css.
     Se conservan tal cual —ninguna hoja que los consume cambia—. */
  --tinta:        var(--ink);
  --tinta-suave:  var(--body-text);
  --tinta-tenue:  var(--muted);
  --acento:       var(--purple);

  /* El relleno sólido de botones, pestañas y estados «marcado»: mismo morado
     que --acento de día, pero vino/uva de noche en vez de oro. El pase
     anterior pintaba estos rellenos con --acento sin más, y en el juego de
     noche de agosto de 2026 eso los habría vuelto ORO con texto casi blanco
     encima —contraste roto—: por eso «acento de texto» y «relleno de
     acción» se separan aquí en dos tokens que sólo coinciden de día. Cada
     `background: var(--acento)` que hacía pareja con `color:
     var(--acento-tinta)` en estilo.css/panel.css pasó a leer este token; el
     texto que va encima sigue siendo --acento-tinta sin cambios. */
  --relleno-accion: light-dark(#46276E, #7A2B52);

  /* Lo que va ENCIMA del relleno de acción («sobre relleno» del handoff):
     casi-blanco en los dos temas, porque el relleno que tiene debajo ya es
     oscuro en los dos —morado de día, vino de noche—. No es el mismo valor
     que --ink de noche, por eso es un token aparte. */
  --acento-tinta: light-dark(#F7F3EA, #F7EDE3);

  /* El botón primario afirmativo (decisión de Patricio, 2026-09-03): píldora
     de ORO, separado del relleno de acción de arriba —que es el de los
     estados MARCADOS, no botones—. Confundir los dos es justo el defecto que
     esta separación corrige: hoy comparten token y un botón «Reservar» pinta
     el mismo morado/vino que una celda elegida de la reja.
     --relleno-boton es el oro en sí: de DÍA un oro PROFUNDO (--sand-d,
     #A8945C) y NO el oro claro de --sand —el fondo de la app ya es crema y
     los tintes --t0..--t2 de la reja (#EDD9A6..#E0C088) son oro claro; un
     botón de oro claro se leería como una celda más de la reja—. De NOCHE usa
     el oro claro (--sand, #E3D09B), que es lo que se ve sobre el morado casi
     negro del fondo. */
  --relleno-boton: light-dark(#A8945C, #E3D09B);

  /* Lo que va ENCIMA del oro. Fija en los DOS temas —NO light-dark()—, por el
     mismo razonamiento que --sobre-tinte más abajo: el oro de --relleno-boton
     es claro en los dos temas (oro profundo de día, oro claro de noche), así
     que la tinta que va encima no sigue al tema: se queda oscura siempre. Si
     siguiera a --ink (que de noche se vuelve casi-blanco, #FBF7EF) el botón
     de noche quedaría con texto casi blanco sobre oro claro: contraste roto.
     El VALOR lo fijó Patricio el 2026-09-04: #241B33, un negro que tira a
     violeta en vez del pardo #262321 de antes. Ojo con lo que eso deja atrás:
     hasta ese día --sobre-boton y --sobre-tinte eran el MISMO color, y ahora no
     lo son. Lo que siguen compartiendo es el razonamiento (dos tintas que a
     propósito no siguen al tema), no el valor — no es una divergencia que
     alguien deba «arreglar» igualándolas. El violeta, además, es el que ya está
     en la paleta (el vino de --contorno-mio), así que la tinta del botón deja de
     ser un color que no aparece en ningún otro sitio.
     Comprobado con la fórmula WCAG 2.x: 5.51:1 de día (contra #A8945C),
     10.75:1 de noche (contra #E3D09B) — el suelo para texto normal 14-15px/600
     es 4.5:1, así que los dos temas sobran margen. Sube en los dos respecto del
     valor anterior, que daba 5.25 y 10.23. Está en la lista blanca de
     tests/tema-y-fuentes.test.mjs junto con --sobre-tinte, por la misma razón:
     no es un olvido, es un color que a propósito no sigue al tema. */
  --sobre-boton: #241B33;

  /* El degradado del botón dorado (decisión de Patricio, 2026-09-03, "dorado
     2"): la receta del CTA de inessentia.mx — fondo, foquito y elevación al
     :hover/:active. Es una CAPA NUEVA sobre --relleno-boton, no un
     reemplazo: --relleno-boton se queda plano, de reserva para @supports y
     para el propio foquito (`background: currentColor` sobre el texto que
     ya pinta --sobre-boton). Restricción dura de Patricio, literal: "sólo 1x
     por página, en el botón más importante" — un solo botón dorado por
     pantalla, nunca dos.
     light-dark() sólo evalúa a un <color>, nunca a un degradado entero —
     igual que --fondo más abajo, cada parada va por separado. */
  --grad-boton: linear-gradient(100deg,
                  light-dark(#EBD08A, #F2E0AE) 0%,
                  light-dark(#C2B07E, #E3D09B) 58%,
                  light-dark(#B0975E, #CBB478) 100%);

  /* La sombra dorada que el botón gana al :hover (y al :active — obligatorio,
     en un teléfono no hay :hover). Dos capas, mismo patrón que --sombra más
     abajo; el tinte sale de la parada más oscura de --grad-boton en cada
     tema (#B0975E día, #CBB478 noche) para que la sombra combine con el
     botón que la proyecta en vez de con un dorado genérico. */
  --sombra-boton: 0 8px 20px light-dark(rgba(176, 151, 94, .35), rgba(203, 180, 120, .35)),
                  0 2px 6px  light-dark(rgba(176, 151, 94, .22), rgba(203, 180, 120, .22));

  /* Lo que va ENCIMA de un relleno de vino. No puede ser --acento-tinta, como
     sí lo es para el relleno de acción, porque el vino es el único token de
     esta hoja que INVIERTE su polaridad entre temas. De día es #8E2B5D, un
     vino oscuro que pide texto claro encima; de noche es #F6AECB, un rosa
     claro que pide texto oscuro. Un valor crema fijo —que es lo que hacía
     `.confirmacion .si` con su #F4F0E6 escrito a mano— se lee bien de día y
     se pierde de noche, crema sobre rosa.
     Lo estrena la ventana de 3 s de la bandeja: la barra de «cancelar» se
     pinta de --wine y el icono del botón TAMBIÉN era --wine, así que el
     icono desaparecía durante los tres segundos en que hay que verlo para
     poder deshacer. */
  --sobre-vino: light-dark(#F7F3EA, #241B33);

  /* El borde de «tu reserva» en la retícula. De noche NO sigue a --acento
     (que se va a lavanda): se queda en crema, por contraste con el degradado
     morado oscuro.
     CORRECCIÓN 2026-09-03 (§7 de CLAUDE.md — el comentario de al lado es
     parte del cambio): este párrafo decía «hoy ningún consumidor lo usa
     todavía» y era falso, no una previsión que envejeció sola — ya tenía
     CUATRO consumidores el día en que se escribió: publico/estilo.css:609
     (`.leyenda__llave--mia`), :677 y :678 (`.celda--mia`,
     `.celda--mia_por_confirmar`, contorno + color) y
     publico/admin/reja-panel.css:220-221 (`.reja-panel .celda-panel--mia`,
     box-shadow inset + color). Los cuatro sitios donde «tu cita» se dibuja
     con un contorno en vez de un relleno ya leían este token; no había nada
     pendiente de conectar. */
  --contorno-mio: light-dark(#46276E, #F4F0E6);

  /* Lo que se escribe ENCIMA de un tinte. NO lleva light-dark(), y ésa es
     toda su razón de ser: los tintes de la hora son claros en LOS DOS temas —el
     juego de noche va de #F0D9A2 a #8272C6—, así que la tinta que va encima
     no puede seguir al tema. Con `var(--ink)`, que sí lo sigue, un horario
     de noche quedaba en crema #FBF7EF sobre tinte #F0D9A2: contraste bajo,
     casi ilegible. Aquí el valor es fijo y se queda fijo; si alguien lo
     convierte en light-dark() «por consistencia», rompe justo esto. */
  --sobre-tinte: #262321;

  /* El degradado de fondo: arena de día, un morado casi negro de noche.
     Cada parada por separado porque light-dark() sólo admite colores, no un
     gradiente entero. Paradas del handoff de agosto de 2026. */
  --fondo: linear-gradient(168deg,
             light-dark(#FBF6EA, #1B1526) 0%,
             light-dark(#F3E8D2, #141020) 46%,
             light-dark(#E7D6B6, #0C0912) 100%);

  /* Superficies y filetes compartidos por la tarjeta de la paciente y el
     panel. */
  --superficie: light-dark(#ffffff, rgba(255, 255, 255, .055));
  /* La barra de pestañas, y NO es `--superficie` aunque lo fuera hasta el
     2026-09-06. Aquella vale #ffffff, y una barra blanca sobre el degradado
     cálido del portal se lee como un cuadro pegado encima — es la queja que
     abrió este token. El crema del sistema deja pasar el degradado y el
     `backdrop-filter` de `.tabs` mantiene legible lo que corre por debajo.
     Token propio y no un cambio de `--superficie`: esa la usan la tarjeta de
     la paciente y el panel, y ahí el blanco sí es el diseño. */
  /* El único color de ERROR del sistema (2026-09-06). No había ninguno: los
     campos no tenían forma de decir «esto está mal» salvo una frase suelta.
     Derivado en oklch de la L y la C de `--wine` girando el tono a rojo, para
     que alarme sin salirse de la paleta cálida. */
  --peligro:       light-dark(#9E3025, #E08279);
  --filete:     light-dark(rgba(70, 39, 110, .14), rgba(251, 247, 239, .18));
  --filete-2:   light-dark(rgba(70, 39, 110, .16), rgba(255, 255, 255, .3));
  --pastilla:   light-dark(rgba(70, 39, 110, .07), rgba(255, 255, 255, .13));

  /* Las barras fijas y pegajosas del panel (cabecera, pestañas de teléfono,
     el bloque de búsqueda, la barra de guardar del editor). Tienen que tapar
     el contenido que pasa por debajo al hacer scroll, así que NO pueden ser
     transparentes — pero `--warm` las pintaba de un blanco casi neutro
     (#FCFBF6) sobre un lienzo de crema cálida, y una barra que no comparte
     familia con el suelo se lee como otro material. De ahí el «colores
     variados» del rechazo del 2026-09-03.
     La solución es un velo del MISMO crema que la primera parada de --fondo,
     con `backdrop-filter` detrás: la barra toma el color del suelo en vez de
     imponer el suyo. Quien lo use tiene que declarar el respaldo opaco para
     los navegadores sin `backdrop-filter` — si no, el contenido se lee a
     través, que es justo lo que estas barras existen para impedir. */
  --barra:  light-dark(rgba(251, 246, 234, .82), rgba(27, 21, 38, .82));

  /* La variante OPACA, para la barra que va pegada al borde de arriba. Ahí
     el suelo es exactamente la primera parada de --fondo, así que un color
     sólido casa con él sin necesidad de mirar a través — y hace falta que
     sea sólido: `backdrop-filter` convierte al elemento en bloque contenedor
     de sus descendientes `position: fixed`, y la cabecera del panel lleva
     dentro la nav inferior fija. Con blur, esa nav mide su `bottom: 0`
     contra la cabecera y se sube encima de ella. Costó verlo porque el
     archivo no truena: hay que mirarlo renderizado. */
  --barra-alta: light-dark(#FBF6EA, #1B1526);

  /* Fondo de hueco/vacío del handoff. Ningún consumidor lo usa todavía —se
     declara para quien construya el estado vacío de la agenda o del panel. */
  --hueco: light-dark(rgba(70, 39, 110, .07), rgba(251, 247, 239, .07));

  /* La sombra de la tarjeta. De noche no hay sombra —transparent en las dos
     capas—, porque sobre un fondo casi negro una sombra no se ve, sólo pesa. */
  --sombra: 0 1px 2px light-dark(rgba(70, 39, 110, .05), transparent),
            0 8px 24px light-dark(rgba(70, 39, 110, .06), transparent);

  /* Sólo del panel: quedan aquí porque su bloque de tokens (líneas 22-78 de
     panel.css) es parte de lo que este archivo sustituye. Valores sin cambio
     respecto de la versión anterior —el handoff no los toca—. */
  --sombra-acceso: 0 2px 6px light-dark(rgba(38, 35, 33, .08), rgba(0, 0, 0, .3)),
                   0 16px 40px light-dark(rgba(70, 39, 110, .12), rgba(0, 0, 0, .35));
  --vencida-bg: light-dark(rgba(142, 43, 93, .07), rgba(232, 138, 176, .10));

  /* La Agenda de Consultorio (2026-09-18): cuatro capas que se distinguen de un
     vistazo. No se reusa ningún token de estado —una renta no es un aviso, y
     prestarle --aviso-bg sería la avería de «tomar el token que se parece»—,
     pero sí se respeta el reparto de la casa: el vino para lo tentativo, el
     morado para lo confirmado, el oro para la sala. Cada capa lleva su tinta, y
     ninguna se distingue SÓLO por color: la caja dice hora y título. */
  --agenda-cita-bg:      light-dark(rgba(142, 43, 93, .16), rgba(232, 138, 176, .22));
  --agenda-cita-tinta:   light-dark(#5E1B3C, #FBF7EF);
  --agenda-firme-bg:     light-dark(rgba(70, 39, 110, .16), rgba(194, 170, 242, .24));
  --agenda-firme-tinta:  light-dark(#2E1A4A, #FBF7EF);
  --agenda-sala-bg:      light-dark(rgba(168, 148, 92, .22), rgba(227, 208, 155, .22));
  --agenda-sala-tinta:   light-dark(#4A3C14, #FBF7EF);
  --agenda-espacio-bg:   light-dark(rgba(38, 35, 33, .10), rgba(251, 247, 239, .14));
  --agenda-espacio-tinta: light-dark(#262321, #FBF7EF);
  --agenda-personal-bg:  light-dark(rgba(70, 39, 110, .07), rgba(251, 247, 239, .08));
  --agenda-personal-tinta: light-dark(#635d59, rgba(251, 247, 239, .8));
  --agenda-lienzo-bg:    light-dark(rgba(70, 39, 110, .04), rgba(251, 247, 239, .05));
  /* El foquito del «Double check» (Patricio, 2026-09-20: «verde si todo cuadra, rojo si no»).
     La casa no tenía verde: su «éxito» es el acento. Es el único color nuevo; el rojo es
     `--peligro` y el gris `--tinta-tenue`. Verde y rojo NO se distinguen sólo por color: el
     foquito lleva su frase al lado y su `aria-label`. */
  --agenda-foco-verde:   light-dark(#1E7B45, #6FD19A);
  --agenda-linea:        light-dark(rgba(70, 39, 110, .10), rgba(251, 247, 239, .12));

  /* El banner de consentimiento (chip "medición propia", 2026-08-30): un velo
     de página entera detrás de la barra y la sombra que la separa de él. El
     handoff traía las dos como rgba(...) a mano —fallaba
     tests/pagina-tema.test.mjs, "ningún color a mano"—; --velo es literalmente
     --ink a .45 de día (38, 35, 33 = #262321), y de noche se vuelve negro
     puro porque es un velo TRANSITORIO sobre toda la pantalla, no un fondo
     permanente — el «nunca negro puro» de la paleta es sobre superficies que
     se miran rato, no sobre esto. --sombra-banner reusa el vino de
     --sombra/--filete (rgba(70, 39, 110, …)) y de noche baja a negro por la
     misma razón que --sombra ya hace: un vino translúcido no se ve sobre un
     fondo casi negro. */
  --velo: light-dark(rgba(38, 35, 33, .45), rgba(0, 0, 0, .6));
  --sombra-banner: 0 -12px 32px light-dark(rgba(70, 39, 110, .16), rgba(0, 0, 0, .45));

  /* Aviso: el estado de «atención» genérico —error de guardado, casilla que
     hay que leer antes de marcar, filtro activo— que hasta ahora tomaba
     prestado --vencida-bg (que significa, literalmente, «cita vencida») o,
     peor, un rgba(142, 43, 93, …) escrito a mano cuatro veces en panel.css
     (.franja-estado.falla, .marca-filtro, .turno-faltante, .agendar-aviso).
     Mismo vino que --vencida-bg pero un pelo más fuerte —.12 de día en vez
     de .07— porque estos avisos son texto sobre el tinte, no un fondo de
     fila detrás de más contenido; -.16 de noche por la misma razón, escalado
     con la misma lógica que --vencida-bg: de noche el tinte se aclara con
     --wine-rosa en vez de oscurecerse con el vino de día, porque sobre el
     morado casi negro del fondo un tinte vino se pierde. Comprobado con la
     fórmula de contraste WCAG: ~6.3:1 de día, ~7:1 de noche sobre --aviso-tinta. */
  --aviso-bg: light-dark(rgba(142, 43, 93, .12), rgba(232, 138, 176, .16));
  --aviso-tinta: var(--wine);

  /* Un tinte de la hora por bloque horario, tantos como `BLOQUES` (atado por
     `tests/pagina-tema.test.mjs`, que deriva la cuenta de `BLOQUES.length` en vez de
     escribirla). Set «afinados» del handoff de agosto de 2026 — sustituyen a los valores
     del pase anterior. `--t9` es posterior: lo trajo la franja de las 20:15 (Patricio,
     2026-09-28), y no se eligió a ojo — continúa la progresión de amanecer a anochecer con
     el MISMO paso que va de `--t7` a `--t8` (de día R-33 G-18 B-9; de noche R-26 G-11 B+8),
     que es lo que hace que la hora más tarde sea también la más oscura sin que el degradado
     dé un salto. */
  --t0: light-dark(#EDD9A6, #F0D9A2);
  --t1: light-dark(#E7CE95, #EACB94);
  --t2: light-dark(#E0C088, #E2BA8B);
  --t3: light-dark(#D6AE84, #D8A889);
  --t4: light-dark(#C99A85, #CE9891);
  --t5: light-dark(#BA8A92, #C48C9F);
  --t6: light-dark(#A5769A, #B481B0);
  --t7: light-dark(#87679B, #9C7DBE);
  --t8: light-dark(#665592, #8272C6);
  --t9: light-dark(#454389, #6867CE);
}

/* ── El único residuo del patrón viejo: --marca-filtro no es un color ─────
   `light-dark()` sólo evalúa a un <color>; un `filter` no cabe ahí. No hay
   forma de unificarlo sin inventar una propiedad que no existe, así que se
   queda con los dos bloques de siempre. Es la única variable de este archivo
   fuera de la lista blanca de tema-y-fuentes.test.mjs, y está aquí, comentada,
   para que quede claro que es una excepción real y no un olvido. */

:root { --marca-filtro: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) { --marca-filtro: saturate(.92) brightness(1.06); }
}
html[data-tema="noche"] { --marca-filtro: saturate(.92) brightness(1.06); }

/* ── prefers-contrast: more — lo que el sistema ya pedía y nadie escuchaba ────────
   Añadido el 2026-09-05. Hasta hoy `prefers-contrast` no aparecía ni una vez en el
   repo, aunque el mismo archivo lleva desde agosto respetando `prefers-reduced-motion`
   en seis sitios: la casa ya tenía el hábito, le faltaba este ajuste.

   POR QUÉ UN SOLO BLOQUE Y NO TRES. El tema tiene tres estados —claro, oscuro por
   `prefers-color-scheme`, y oscuro forzado con `data-tema="noche"`— pero los tres se
   resuelven por `color-scheme`, que es lo que hace elegir a `light-dark()`. Así que
   redefinir aquí con `light-dark()` compone solo con los tres. Duplicar el bloque por
   estado sería la forma de que uno de ellos se quedara atrás en el próximo retoque.

   QUÉ CAMBIA, y por qué sólo esto:

   · Las TINTAS. `--muted` deja de ser tenue y pasa al valor de `--body-text`. A
     preferencia normal la jerarquía de tres niveles es información —qué es principal y
     qué es apoyo—; a `more` esa jerarquía cuesta más de lo que informa, y se cambia por
     dos niveles bien separados. `--muted` sube de 4.53 a 9.24 sobre el peor fondo.

   · Los FILETES. Medidos antes de tocarlos: entre 1.13 y 2.69 contra lo que rodean,
     por debajo del 3:1 que WCAG 1.4.11 pide para el borde de un control. NO se declara
     eso un incumplimiento y por eso no se toca el valor normal: aquí esos filetes son
     decorativos y los controles se distinguen por relleno, texto y forma, que es lo que
     la propia norma admite. Pero quien enciende `more` está pidiendo exactamente que
     esos bordes se vean, así que aquí sí van a 3:1 — alfa .53 de día y .35 de noche,
     que son los mínimos medidos para llegar, no números redondos elegidos a ojo.

   QUÉ NO CAMBIA, a propósito: ni el degradado del fondo, ni los tintes de la
   hora, ni el oro del botón. Son identidad, no legibilidad, y `more` no es una excusa
   para repintar la marca. Y `prefers-contrast: less` no se implementa: nadie ha pedido
   menos contraste en un portal de salud, y un bloque vacío que nadie mantiene envejece
   peor que su ausencia. */

@media (prefers-contrast: more) {
  :root {
    --muted:      light-dark(#3f3a36, rgba(251, 247, 239, .94));
    --filete:     light-dark(rgba(70, 39, 110, .53), rgba(251, 247, 239, .35));
    --filete-2:   light-dark(rgba(70, 39, 110, .53), rgba(255, 255, 255, .35));
    --pastilla:   light-dark(rgba(70, 39, 110, .18), rgba(255, 255, 255, .24));
    --hueco:      light-dark(rgba(70, 39, 110, .18), rgba(251, 247, 239, .18));
  }
}

/* ── Reserva para navegadores sin `light-dark()` ─────────────────────────── */

@supports not (color: light-dark(#000, #fff)) {
  :root {
    /* Imprescindible: ver la nota sobre el hueco Safari 13-17.4 más arriba. */
    color-scheme: light;

    --purple:    #46276E;
    --purple-d:  #3C1F5E;
    --wine:      #8E2B5D;
    --ink:       #262321;
    --body-text: #3f3a36;
    --muted:     #635d59;
    --warm:      #FCFBF6;
    --cream-2:   #F4F0E6;
    --sand:      #C2B07E;
    --sand-d:    #A8945C;

    --tinta:        #262321;
    --tinta-suave:  #3f3a36;
    --tinta-tenue:  #635d59;
    --acento:       #46276E;
    --relleno-accion: #46276E;
    --acento-tinta: #F7F3EA;
    --relleno-boton: #A8945C;
    --sobre-boton:  #241B33;
    --grad-boton:   linear-gradient(100deg, #EBD08A 0%, #C2B07E 58%, #B0975E 100%);
    --sombra-boton: 0 8px 20px rgba(176, 151, 94, .35), 0 2px 6px rgba(176, 151, 94, .22);
    --sobre-vino:   #F7F3EA;
    --contorno-mio: #46276E;
    --sobre-tinte:  #262321;

    --fondo: linear-gradient(168deg, #FBF6EA 0%, #F3E8D2 46%, #E7D6B6 100%);

    --superficie: #ffffff;
    --peligro:    #9E3025;
    --filete:     rgba(70, 39, 110, .14);
    --filete-2:   rgba(70, 39, 110, .16);
    --pastilla:   rgba(70, 39, 110, .07);
    --barra:      rgba(251, 246, 234, .82);
    --barra-alta: #FBF6EA;
    --hueco:      rgba(70, 39, 110, .07);

    --sombra:         0 1px 2px rgba(70, 39, 110, .05), 0 8px 24px rgba(70, 39, 110, .06);
    --sombra-acceso:  0 2px 6px rgba(38, 35, 33, .08), 0 16px 40px rgba(70, 39, 110, .12);
    --vencida-bg:     rgba(142, 43, 93, .07);
    --agenda-cita-bg:        rgba(142, 43, 93, .16);
    --agenda-cita-tinta:     #5E1B3C;
    --agenda-firme-bg:       rgba(70, 39, 110, .16);
    --agenda-firme-tinta:    #2E1A4A;
    --agenda-sala-bg:        rgba(168, 148, 92, .22);
    --agenda-sala-tinta:     #4A3C14;
    --agenda-espacio-bg:     rgba(38, 35, 33, .10);
    --agenda-espacio-tinta:  #262321;
    --agenda-personal-bg:    rgba(70, 39, 110, .07);
    --agenda-personal-tinta: #635d59;
    --agenda-lienzo-bg:      rgba(70, 39, 110, .04);
    --agenda-foco-verde:     #1E7B45;
    --agenda-linea:          rgba(70, 39, 110, .10);
    --velo:           rgba(38, 35, 33, .45);
    --sombra-banner:  0 -12px 32px rgba(70, 39, 110, .16);
    --aviso-bg:       rgba(142, 43, 93, .12);
    --aviso-tinta:    #8E2B5D;

    --t0: #EDD9A6; --t1: #E7CE95; --t2: #E0C088;
    --t3: #D6AE84; --t4: #C99A85; --t5: #BA8A92;
    --t6: #A5769A; --t7: #87679B; --t8: #665592;
    --t9: #454389;
  }

  /* `prefers-contrast: more` también en la reserva: un navegador sin `light-dark()`
     no deja de tener a alguien que subió el contraste en su sistema. Sólo los valores
     claros, que es lo único que este bloque sirve. */
  @media (prefers-contrast: more) {
    :root {
      --muted:      #3f3a36;
      --filete:     rgba(70, 39, 110, .53);
      --filete-2:   rgba(70, 39, 110, .53);
      --pastilla:   rgba(70, 39, 110, .18);
      --hueco:      rgba(70, 39, 110, .18);
    }
  }

  /* El botón queda inerte en un navegador tan viejo: no hay `light-dark()`
     para que lea. Forzar el mismo tema claro en los dos caminos evita que
     `data-tema="noche"` deje a alguien a medio camino, con widgets nativos
     oscuros y tokens claros. */
  html[data-tema="noche"] { color-scheme: light; }
}