:root{
color-scheme:light;
--cream-50:#fcfcfb;--cream-100:#f8f5f4;--cream-200:#f3ebe9;

/* ---------- EL MATIZ DE LA CASA ----------
   El rosa de FARMA-Enfermería es la marca, pero no todo el mundo lo quiere de
   rosa. En Configuración, dentro del menú del perfil, cada uno elige de qué
   color ve la plataforma, y esa elección se le queda a la cuenta (ver
   personalizacion.js y perfiles/{uid}.color en acceso.js).

   El truco es que aquí NO hay una escala de rosa y otra de azul y otra de
   verde. Hay UNA escala -la de siempre, medida a mano tono a tono- y dos
   números que la giran entera:

     --tono-giro   cuántos grados se rota el matiz de cada tono. 0 es el rosa
                   de la casa; lo pone personalizacion.js sin unidad porque
                   `hsl(from ...)` suma grados como número y `hue-rotate()` los
                   quiere como ángulo, y así el mismo valor sirve para los dos.
     --tono-sat    por cuánto se multiplica la saturación. Los tonos elegidos
                   se rebajan un poco -un azul al 100% de un rosa saturado
                   grita-, y ese matiz de cada color va en la paleta, no aquí.

   Cada `--rose-*` se reescribe partiendo de su hex de siempre y rotándole el
   matiz con `calc(h + var(--tono-giro))`: así cada tono conserva SU
   luminosidad y SU saturación -un tinte claro sigue siendo un tinte claro- y
   sólo cambia de color. Con giro 0 y saturación 1 el resultado es, píxel a
   píxel, el de antes de que esto existiera. */
--tono-giro:0;--tono-sat:1;

--rose-100:hsl(from #fdeef0 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-200:hsl(from #f9d7dd calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-300:hsl(from #edaeba calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-400:hsl(from #f28992 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-500:hsl(from #d9628d calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-600:hsl(from #c04578 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-700:hsl(from #9e235f calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--rose-900:hsl(from #5e1339 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);

--ink-900:#2b1720;--ink-700:#4a2f3b;--ink-500:#6f5661;--ink-300:#a3919a;--ink-100:#ded5d9;
--white:#ffffff;
--success-500:#3f8f6d;--success-100:#e2f1ea;
--warning-500:#c9821f;--warning-100:#faf0dd;--warning-800:#7a4d12;
--danger-500:#c0392b;--danger-100:#fbe6e3;--danger-700:#8f2419;
--info-500:#41708f;--info-100:#e5eff5;

/* Celestia. Su rosa no es el de la marca: es el del propio icono
   (assets/iconos/celestia.png), que es de neón. Están aquí, y medidos sobre
   el archivo, para que el icono y los brillitos que dibuja el navegador
   durante la transición sean forzosamente el mismo rosa.

   Giran con el resto: quien pone la plataforma azul quiere a Celestia azul
   también, destellos y cielo incluidos. Los destellos y el polvo del cielo
   salen de estas cuatro variables a través del degradado #brillo-celestia, así
   que rotarlas aquí los tiñe solos; al icono, que es un PNG, lo gira el mismo
   filtro que a los demás (ver .orbe .cara img en app.css). */
--celestia-luz:hsl(from #ffdcc6 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--celestia-rosa:hsl(from #ff62c0 calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--celestia-viva:hsl(from #ff10ac calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);
--celestia-honda:hsl(from #e0107b calc(h + var(--tono-giro)) calc(s * var(--tono-sat)) l);

--brand-primary:var(--rose-700);--brand-accent:var(--rose-500);--brand-soft:var(--rose-300);--brand-warm:var(--rose-400);
--surface-page:var(--cream-50);--surface-card:var(--white);--surface-sunken:var(--cream-100);--surface-tint:var(--rose-100);--surface-invert:var(--rose-700);
--text-title:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-onbrand:var(--cream-50);--text-link:var(--rose-700);--text-link-hover:var(--rose-500);
--border-subtle:var(--ink-100);--border-strong:var(--rose-300);--focus-ring:var(--rose-500);

/* Los dos tonos con los que se pinta el círculo de detrás (.halo i en app.css).
   En claro son los tintes pálidos de siempre, sobre el crema de la página:
   una nube rosa tenue. Con giro 0 esto es, otra vez, la web de siempre. En
   modo oscuro suben a tonos macizos de la misma escala -o sea, del color
   elegido- para que el círculo NO sea un velo blanquecino sobre el negro sino
   un orbe del color de la plataforma, contrastado (ver el bloque de modo
   oscuro más abajo). */
--halo-1:var(--rose-200);--halo-2:var(--rose-100);

/* El realce: ese borde que se enciende al enfocar la caja del buscador o al
   dejar fija una letra de la ruleta. En claro es blanco, que resalta sobre el
   cristal pálido; en oscuro pasa al color elegido, que es lo que resalta sobre
   el cristal oscuro. */
--realce:var(--white);

/* Los tres tramos de Cuidados de Enfermería -antes, durante y después de
   administrarlo-, subiendo de intensidad por la misma escala del rosa de la
   casa (gira con --tono-giro igual que todo lo demás) sin llegar nunca a un
   tono oscuro: el propio degradado dice el orden sin que haga falta leer la
   etiqueta. En oscuro no se redefinen igual -ver el bloque de abajo-, porque
   estos tonos pálidos tal cual quedarían lavados sobre un fondo casi negro. */
--cuidados-antes:var(--rose-100);
--cuidados-durante:var(--rose-200);
--cuidados-despues:var(--rose-300);

/* ---------- EL CRISTAL DE LA CASA ----------
   El material del que están hechas todas las superficies que dejan pasar el
   círculo rosa de detrás: los azulejos del buscador y del resumen, los
   sistemas de Fichas, las categorías, la tabla de Miembros y las tarjetas del
   panel. No es que se parezcan: son estos cuatro valores.

   Estaban escritos a mano en siete sitios, y así es como acaban separándose:
   se ajusta uno, se olvidan los otros seis y la pantalla empieza a tener dos
   materiales que casi coinciden. Ahora se cambian aquí y cambian todos.

   `vivo` es el mismo cristal al pasar por encima o cuando algo está abierto:
   el velo sube y se lee como «éste».

   `--cristal-rgb` son los tres canales del cristal SIN la opacidad: el resto de
   app.css escribe `rgba(var(--cristal-rgb),.XX)` cada vez que necesita este
   material con una transparencia propia. En claro es blanco; en modo oscuro
   (más abajo) pasa a ser un gris casi negro, y con ese único cambio todas las
   superficies de cristal de la web se vuelven oscuras a la vez. */
--cristal-rgb:255,255,255; /* @kind other */
--cristal:rgba(var(--cristal-rgb),.28); /* @kind color */
--cristal-vivo:rgba(var(--cristal-rgb),.46); /* @kind color */
--cristal-medio:rgba(var(--cristal-rgb),.42); /* @kind color */
--cristal-borde:rgba(var(--cristal-rgb),.55); /* @kind color */

/* El mismo cristal, pero mucho más blanco. Es para cuando se posa SOBRE algo
   con color -la definición de un término, que va encima de la cabecera rosa- y
   no sobre el fondo crema de la página: a .28 el rosa se le colaba por debajo,
   los dos tonos casi coincidían y el azulejo dejaba de leerse como una pieza
   aparte. Sigue siendo translúcido y sigue desenfocando; sólo tapa más. */
--cristal-claro:rgba(var(--cristal-rgb),.78); /* @kind color */
--cristal-claro-borde:rgba(var(--cristal-rgb),.9); /* @kind color */
--cristal-borde-tenue:rgba(var(--cristal-rgb),.45); /* @kind color */
--cristal-velo:blur(24px) saturate(1.15); /* @kind other */
}

/* ===========================================================================
   MODO OSCURO
   ---------------------------------------------------------------------------
   Vive en Configuración, dentro del menú del perfil, y se guarda en la cuenta
   igual que el color (ver personalizacion.js y perfiles/{uid}.temaOscuro).

   No hay una segunda hoja de estilos ni reglas repetidas por toda la web: se
   redefine aquí la CAPA SEMÁNTICA -las superficies, los textos, los bordes y
   el cristal- y todo lo que en app.css se pinta con `var(--surface-*)`,
   `var(--text-*)`, `var(--border-*)` o `rgba(var(--cristal-rgb),...)` cambia
   solo. La escala del rosa NO se toca: el color elegido sigue mandando y el
   modo oscuro sólo cambia el lienzo sobre el que se pinta.

   El cambio de blanco a oscuro se ve porque personalizacion.js pone un
   instante la clase `tema-cambiando`, que hace que fondos, textos y bordes
   viajen con una transición en vez de saltar. No se desvanece nada: la
   pantalla entera se oscurece a la vez, suave. */
:root[data-tema="oscuro"]{
color-scheme:dark;

/* Los cremas -que son los fondos claros- pasan a ser los oscuros, y las
   tintas -que son los textos- pasan a ser claras. Con sólo esto, cada
   `--surface-*` y cada `--text-*` que salían de ellos quedan bien sin tocarlos
   uno a uno. El negro no es negro puro: lleva algo del cálido de la marca,
   para que la web no se vuelva azulada. */
--cream-50:#151011;--cream-100:#1b1518;--cream-200:#241c20;
--ink-900:#f6eef1;--ink-700:#e0d4d9;--ink-500:#a99aa1;--ink-300:#7d6f76;--ink-100:#372c31;

/* Las superficies que apuntaban a `--white` -que sigue siendo blanco a
   propósito, porque también es el texto sobre los botones de color- se
   redirigen a mano al gris de tarjeta. */
--surface-card:#201a1d;
--surface-page:var(--cream-50);
--surface-sunken:#181316;
--surface-tint:color-mix(in srgb,var(--rose-700) 26%,#151011);
/* La superficie «invertida» -el chip de dato, el pie- baja a un rosa medio en
   vez del rosa-700: sobre negro, un bloque oscuro no se lee como bloque. */
--surface-invert:var(--rose-500);

/* La marca, para TEXTO. En claro `--brand-primary` es el rosa-700 y va casi
   siempre como color de letra sobre fondos claros; sobre los oscuros ese mismo
   rosa-700 no se ve, así que en oscuro sube al rosa-400. Y como entonces los
   pocos sitios donde `--brand-primary` es FONDO pasan a tener un rosa claro
   debajo, el texto que va encima (`--text-onbrand`) baja a oscuro. Las dos
   cosas van juntas o ninguna. */
--brand-primary:var(--rose-400);
--brand-accent:var(--rose-300);
--text-onbrand:#2b1015;

/* El enlace y el borde fuerte en rosa-700 sobre un fondo oscuro no se
   distinguen: en oscuro suben a un tono más claro de la misma escala. */
--text-link:var(--rose-300);--text-link-hover:var(--rose-200);
--border-subtle:rgba(255,255,255,.12);
--border-strong:var(--rose-400);
--focus-ring:var(--rose-400);

/* El círculo, macizo y del color elegido en vez de una nube pálida; y el
   realce, que pasa de blanco al color. Los dos tiran de la escala del rosa,
   que sigue girando con `--tono-giro`: un tema azul deja el círculo azul. */
--halo-1:var(--rose-500);--halo-2:var(--rose-700);
--realce:var(--rose-300);

/* Los tres tramos de Cuidados de Enfermería, macizos en vez de pálidos por la
   misma razón que --surface-tint: un rosa-100 tal cual, en oscuro, se lava
   contra el fondo casi negro. Se funde cada tono de la escala -subiendo de
   rose-300 a rose-500- con el crema oscuro, y en cada tramo un poco más
   fuerte, para que el degradado se siga viendo de un tramo al siguiente. */
--cuidados-antes:color-mix(in srgb,var(--rose-300) 18%,#151011);
--cuidados-durante:color-mix(in srgb,var(--rose-400) 24%,#151011);
--cuidados-despues:color-mix(in srgb,var(--rose-500) 30%,#151011);

/* El cristal deja de ser un velo blanco y pasa a ser un velo casi negro:
   mismas superficies, misma transparencia por sitio, pero ahora oscurecen en
   vez de aclarar. Las opacidades suben un punto porque un velo oscuro tapa
   menos que uno blanco a igual alfa. */
--cristal-rgb:12,8,10;
--cristal:rgba(var(--cristal-rgb),.34);
--cristal-vivo:rgba(var(--cristal-rgb),.54);
--cristal-medio:rgba(var(--cristal-rgb),.5);
--cristal-borde:rgba(255,255,255,.16);
--cristal-claro:rgba(28,22,25,.82);
--cristal-claro-borde:rgba(255,255,255,.14);
--cristal-borde-tenue:rgba(255,255,255,.1);

/* Los colores de estado -verde, ámbar, rojo, azul- que van SIEMPRE en pareja:
   el `-500` es el trazo y el texto, el `-100` el fondo pálido detrás. En claro
   el `-100` es un tinte casi blanco; en oscuro eso sería un fogonazo, así que
   pasa a ser un lavado del mismo color sobre el negro. Y el `-500` sube de
   tono para que se lea encima. Las gráficas de Health Fair leen estas cuatro
   variables, así que también ellas quedan en su versión oscura. */
--success-500:#5cae8a;--success-100:color-mix(in srgb,#5cae8a 20%,#151011);
--warning-500:#e0a552;--warning-100:color-mix(in srgb,#e0a552 20%,#151011);--warning-800:#e8c07a;
--danger-500:#e57468;--danger-100:color-mix(in srgb,#e57468 20%,#151011);--danger-700:#f0a99f;
--info-500:#6ba4c8;--info-100:color-mix(in srgb,#6ba4c8 20%,#151011);

/* Las sombras en oscuro no pueden ser de rosa translúcido -no se ven-: pasan a
   ser negras y algo más hondas, que es lo que despega una tarjeta o un
   desplegable del fondo cuando el fondo ya es oscuro. */
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 2px 8px rgba(0,0,0,.44);
--shadow-md:0 8px 24px rgba(0,0,0,.5);
--shadow-lg:0 20px 48px rgba(0,0,0,.58);
}