/* FARMA-Enfermería - estilos de la web.
   Los colores, tipografías y espaciados salen de los tokens; aquí sólo se compone. */

*{box-sizing:border-box}
/* El hueco de la barra de desplazamiento se reserva desde el primer momento.
   Si no, al aparecer la barra al terminar la carga, todo se desplaza a la
   izquierda de golpe y se ve el tirón justo cuando aterriza el logo. */
html{scrollbar-gutter:stable;
  /* Tamaño del logo en la pantalla de carga y en el centro del inicio.
     Lo usan el logo del inicio y los cálculos de posición de los iconos.

     EL `26vh` ES NUEVO y arregla la mitad del problema de las ventanas
     achatadas. Con `min(38vmin,200px)` el logo se queda clavado en 200 px en
     cuanto la ventana pasa de 526 px por su lado menor, o sea CASI SIEMPRE en
     un ordenador. Al bajar la ventana de alto -media pantalla en Windows, la
     vista dividida de una tableta- el campo vertical donde se reparten los
     iconos se encogía un tercio mientras el logo seguía midiendo lo mismo, así
     que ocupaba una porción cada vez mayor del centro y los iconos de arriba
     se le echaban encima. Ahora el logo también se encoge cuando lo que falta
     es alto. En una pantalla normal no cambia nada: a 1280×800, `26vh` son 208
     y sigue mandando el tope de 200. */
  --logo-inicio:min(38vmin,26vh,200px);
  /* Los iconos del inicio no se pegan al logo: se reparten por el hueco en
     blanco de la ventana. Tres medidas mandan su colocación (ver HERRAMIENTAS
     en inicio.js):
       --orbe-gapx  separación lateral base; se encoge en móviles estrechos.
       --orbe-aire  cuánto se abren de más a IZQUIERDA-DERECHA; crece en
                    pantallas anchas (portátiles) y es 0 por debajo de 600px.
       --orbe-alto  cuánto se abren de más ARRIBA-ABAJO; crece en pantallas
                    altas (móviles en vertical) y es 0 por debajo de 640px.
     Así en el portátil se estiran a lo ancho y en el móvil a lo alto, sin
     tocarse con el logo ni salirse por los bordes. Queda sitio para más. */
  /* ---------- EL TAMAÑO DE UN ICONO ----------

     Era un número fijo: 112 px por encima de 720 de ancho y 66 por debajo, un
     escalón y nada más. La colocación sí se adapta -fx/fy van contra el
     viewport y se recalculan solos-, así que al estrechar la ventana los
     iconos se acercaban entre sí SIN encoger, y acababan montándose unos sobre
     otros y sobre el logo. Medido en la ventana a media pantalla de Windows y
     en la vista dividida de una tableta: a 900×640 el icono de Simulación se
     metía 48 px dentro del logo; a 1400×420 se solapaban de cuatro en cuatro,
     hasta 74 px.

     Ahora escala con `vmin`, que es el lado MENOR de la ventana, y por eso
     sirve igual para una ventana estrecha que para una achatada: las dos
     aprietan, y aprieta la que aprieta. El logo ya se medía así
     (`--logo-inicio: min(38vmin,200px)`), o sea que los iconos hacen por fin
     lo mismo que el centro alrededor del cual giran.

     Los topes: 112 px arriba -lo de siempre en una pantalla grande, no se
     toca lo que ya se veía bien- y 62 px abajo, que es el suelo por debajo del
     cual el dibujo deja de leerse. En medio, proporcional. */
  --orbe-tam:clamp(62px, 11.5vmin, 112px);

  --orbe-gapx:min(120px, 16vw);
  --orbe-aire:clamp(0px, 50vw - 300px, 440px);
  --orbe-alto:clamp(0px, 50vh - 320px, 190px)}
body{margin:0}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font:inherit}
/* La lista que abre un desplegable la pinta el NAVEGADOR, no la página: con el
   fondo del <select> transparente usa su blanco de siempre, y en modo oscuro
   las opciones heredan la letra clara, así que salían blanco sobre blanco y
   sólo se leía la que estaba bajo el cursor. Se le da fondo y letra propios. */
select option,select optgroup{background-color:var(--surface-card);color:var(--text-title)}
select option:disabled{color:var(--text-muted)}

.contenedor{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.oculto{display:none !important}

/* El atributo `hidden` de HTML esconde poniendo `display:none`, pero lo hace
   con la prioridad más baja que existe, así que CUALQUIER regla nuestra que
   diga `display` lo anula sin avisar y el elemento sigue ahí ocupando sitio.

   Pasó con las tarjetas del acceso: `.acceso-caja` es `display:flex`, y la
   tarjeta escondida seguía contando. El panel medía 830 px con una tarjeta de
   448 dentro y la de entrar se salía por arriba de la pantalla.

   Con esto, `hidden` esconde de verdad, aquí y en cualquier sitio donde se
   use más adelante. */
[hidden]{display:none !important}

/* ---------- Cabecera ---------- */
/* Translucidez al 50%: se ve pasar el contenido por debajo.
   El desenfoque sube para que el texto de la barra siga legible. */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(252,252,251,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle);
  opacity:0;transition:opacity calc(900ms * var(--v,1)) var(--ease-standard)}
/* Es lo primero que aparece cuando termina la carga. */
body.barra .cabecera{opacity:1}
.cabecera .contenedor{display:flex;align-items:center;gap:var(--sp-5);height:72px}
/* `flex:none` porque la barra de al lado ahora puede encogerse (lleva todas
   las secciones y se desplaza de lado): sin esto, quien se encogía era la
   marca, y su texto de dos renglones se salía de su caja y quedaba por debajo
   del primer botón. La que cede es la barra, que para eso se desplaza. */
.marca{flex:none;display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.marca img{width:40px;height:40px;object-fit:contain}
/* La marca va en dos renglones, al lado del logo: FARMA arriba y Enfermería
   debajo. La interlínea se aprieta para que los dos se lean como un bloque a
   la altura del logo y no como dos líneas sueltas. */
.marca-texto{display:flex;flex-direction:column;line-height:1.05;
  font-family:var(--font-display);color:var(--text-title)}
.marca-texto .arriba{font-size:var(--fs-h4);font-weight:var(--fw-bold);
  letter-spacing:.01em}
.marca-texto .abajo{font-size:var(--fs-sm);font-weight:var(--fw-regular);
  color:var(--text-body)}

/* La barra lleva ahora TODAS las secciones -las mismas que tienen icono en el
   inicio-, y diez rótulos no caben a lo ancho de ninguna pantalla junto al
   logo y a los botones de la derecha. Así que se desplaza de lado en cualquier
   tamaño, no sólo en un móvil: apilarlos en dos filas no es una opción, porque
   la cabecera mide 72 px y esa medida no es decorativa -la lee el vuelo del
   logo y la usa #vista-inicio para meterse debajo-.

   `min-width:0` es lo que hace que la barra pueda encogerse dentro de la
   cabecera en vez de empujar a los botones de la derecha fuera de la pantalla;
   sin él, un contenedor flexible se niega a bajar de su contenido.

   El velo de los extremos dice que hay más a los lados sin añadir ninguna
   flecha ni ningún cartel.

   ---------- Y SÓLO DONDE DE VERDAD HAY MÁS ----------

   Estaba puesto fijo a los dos lados, y por la izquierda no había nada que
   velar: con la barra en su sitio, el primer botón es el primero y no hay
   nada antes de él. Lo que pasaba es que ese velo caía justo encima de él, y
   como el primero suele ser el activo -«Inicio»-, la píldora rosa se
   desvanecía por su borde izquierdo, contra el logo. No era un efecto: era el
   elemento marcado a medio pintar.

   Ahora los dos velos son variables que pone el JavaScript según lo que haya
   desplazado a cada lado (`velosDeLaBarra`, en inicio.js). En reposo el de la
   izquierda vale cero -o sea, no existe- y el botón activo se ve entero; al
   desplazar la barra aparece, que es cuando significa algo. */
.nav{margin-left:auto;display:flex;gap:var(--sp-2);
  flex-wrap:nowrap;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right,
      transparent 0, #000 var(--velo-izq,0px),
      #000 calc(100% - var(--velo-der,0px)), transparent 100%);
  mask-image:linear-gradient(to right,
      transparent 0, #000 var(--velo-izq,0px),
      #000 calc(100% - var(--velo-der,0px)), transparent 100%)}
.nav.hay-antes{--velo-izq:20px}
.nav.hay-despues{--velo-der:20px}
.nav::-webkit-scrollbar{display:none}
.nav button{scroll-snap-align:end}

/* En una pantalla estrecha los cuatro botones no caben en una fila, y con
   `flex-wrap` se apilaban: medido en un móvil de 375, la barra pedía 190 px de
   alto dentro de una cabecera de 72, así que se salían por debajo del cristal
   y quedaban encima del contenido.

   Se pasa a una fila que se desplaza de lado. Se prefiere a apilarlos porque
   la cabecera mide 72 y esa medida no es decorativa: la lee el vuelo del logo
   y la usa #vista-inicio para meterse debajo. Y se prefiere a esconder
   botones porque los cuatro son el mapa de la guía; el que no se ve, no
   existe.

   La barra de desplazamiento se oculta: se arrastra con el dedo, que es el
   gesto natural en el sitio donde pasa esto. */
@media (max-width:700px){
  .nav button{padding:var(--sp-2) var(--sp-3)}
  /* El texto de la marca sobra donde no cabe: el logo ya identifica la web,
     y lo que se gana son 45 px para los botones. */
  .marca-texto{display:none}
}
/* La barra en Lora, como la marca y como las fichas. */
.nav button{flex:none;white-space:nowrap;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);
  font-family:var(--font-serif);font-size:var(--fs-body);
  color:var(--text-body);transition:background var(--dur-fast) var(--ease-standard)}
.nav button:hover{background:var(--surface-tint)}
.nav button[aria-current="page"]{background:var(--brand-primary);color:var(--text-onbrand)}

/* ---------- El perfil ----------
   En la esquina derecha, en espejo del logo y del mismo tamaño exacto: 40 px,
   el mismo que .marca img. Si un día cambia el del logo, cambia también aquí. */
.perfil{position:relative;flex:none}

/* `overflow:hidden` para que la foto se recorte en redondo dentro del
   círculo, y `position:relative` para que pueda ponerse encima de la inicial
   sin sacarla de ahí. */
.perfil-circulo{width:40px;height:40px;border-radius:50%;
  overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-primary);color:var(--text-onbrand);
  font-family:var(--font-display);font-size:var(--fs-body-lg);
  font-weight:var(--fw-semibold);line-height:1;text-transform:uppercase;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
/* `cover` y no `contain`: la foto llena el círculo aunque no sea cuadrada del
   todo. Recortar un poco es mejor que dejar barras a los lados, y de todas
   formas ya viene recortada en cuadrado desde el navegador. */
.perfil-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.perfil-circulo:hover{transform:scale(1.06);box-shadow:var(--shadow-sm)}
.perfil-circulo:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* El menú cuelga del círculo, alineado por la derecha para que no se salga
   por el borde de la ventana. Mismo cristal que la barra del buscador y que
   la tarjeta del acceso: es el material de la casa. */
/* Cristal, sí, pero MUCHO más cerrado que el de la barra del buscador y el de
   la tarjeta del acceso, y por una razón concreta: aquellos flotan sobre el
   fondo, que es liso, mientras que éste cae sobre el contenido de la web -una
   ficha, una lista de escalas- y a .62 se leía el texto de debajo cruzándose
   con las opciones. Un menú tiene que poder leerse de un vistazo, y para eso
   necesita tapar lo que hay detrás.

   Sigue siendo translúcido y sigue desenfocando: se intuye lo que pasa por
   debajo, que es lo bonito, pero ya no compite con lo que pone encima. */
.perfil-menu{position:absolute;top:var(--perfil-menu-bajo, calc(100% + var(--sp-3)));right:0;z-index:30;
  /* Más ancho desde los azulejos (14-oct-2026): dos por fila necesitan sitio
     para el icono, el título y su línea. En el teléfono, casi toda la pantalla. */
  width:min(380px, calc(100vw - 24px));
  display:flex;flex-direction:column;gap:var(--sp-1);
  background:rgba(var(--cristal-rgb),.93);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-lg);padding:var(--sp-4);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
body.perfil-abierto .perfil-menu{opacity:1;transform:translateY(0)}

/* El saludo es lo primero que se lee, así que va en la tipografía de los
   títulos y con su tamaño. El correo, debajo y en pequeño.
   El engranaje de configuración va en la esquina superior derecha dentro del mismo margen. */
.perfil-cabecera-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2);
  margin-bottom:var(--sp-3);padding:0 var(--sp-1)}
.perfil-usuario-info{flex:1;min-width:0;display:flex;flex-direction:column}
.perfil-saludo{margin:0;font-family:var(--font-display);
  font-size:var(--fs-h4);color:var(--text-title);line-height:var(--lh-heading);
  overflow-wrap:anywhere}
.perfil-correo{margin:0;
  font-size:var(--fs-xs);color:var(--text-muted);
  overflow-wrap:anywhere}
.perfil-engranaje-btn{flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-tint);color:var(--brand-primary);border:1px solid transparent;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.perfil-engranaje-btn:hover{background:var(--rose-200);border-color:var(--border-strong);
  transform:rotate(30deg);color:var(--brand-accent)}
.perfil-engranaje-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Cada opción en su óvalo, y Cerrar Sesión es una más de la lista: van a ir
   apareciendo otras al lado y ninguna tiene por qué mandar sobre el resto.
   Translúcidas también, para que el menú entero se lea como una sola pieza de
   cristal y no como recuadros pegados encima. */
/* Las opciones se llevan lo que sobre de la cara y se desplazan dentro si un
   día no caben. Hoy caben: es el alto que fija el tamaño de la caja.

   ---------- Y LOS HIJOS NO SE ENCOGEN ----------

   Ésta es la línea que faltaba, y costó una tarjeta rota. Una lista que se
   desplaza tiene que DESBORDARSE, no comprimirse; pero en una columna flexible
   lo primero que hace el navegador cuando el contenido no cabe es encoger a
   los hijos, y sólo desborda cuando ya no puede encoger más. A un `<div>` no
   le pasa -su `min-height:auto` se resuelve al alto de su contenido y ahí se
   planta-, pero a un `<button>` sí: los controles de formulario no exponen ese
   mínimo automático, así que se dejan aplastar todo lo que haga falta.

   Con el alto corto de la primera versión, el navegador tenía que recuperar 26
   px y se los quitó ENTEROS al primer botón de la lista: «Panel de
   Administración» pasó de 40 px a 17 y quedó cortado por la mitad, con el
   número de solicitudes encima del texto. Justo la opción que no puede
   faltar, y precisamente por ser la primera.

   `flex:none` en todo lo que cuelgue de una lista que se desplaza. Va en las
   cuatro caras -opciones, ajustes, emisoras y aparatos-, no sólo aquí: el que
   mañana añada un botón a cualquiera de ellas no tiene por qué saber nada de
   esto. */
.perfil-opciones{display:flex;flex-direction:column;gap:var(--sp-2);
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.perfil-opciones > *,
.configuracion-lista > *,
.radio-emisoras > *,
#dispositivos-lista > *{flex:none}

/* Lo que se dice mientras la foto sube, o lo que falló. Va donde estaba el
   correo, así que no mueve las opciones de sitio al aparecer. */
.perfil-aviso{margin:0 0 var(--sp-3);
  font-size:var(--fs-xs);color:var(--brand-primary);font-weight:var(--fw-semibold)}

/* Los óvalos, en rosa muy pálido en vez de en blanco transparente. Sobre un
   menú ya casi opaco, el blanco translúcido no se veía: se confundía con el
   propio menú y los óvalos desaparecían. Con el tinte de la marca se
   distinguen sin necesidad de tapar nada. */
.perfil-opcion{text-align:left;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);
  background:var(--surface-tint);
  border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--brand-primary);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
/* (Aquí hubo un `.perfil-opcion-aparte` con margen arriba, de cuando Feedback
   iba detrás de Cerrar Sesión y convenía separarlos. Con Feedback delante no
   separaba nada: sólo abría un hueco en medio de la lista y estiraba la
   tarjeta. Las opciones van todas con el mismo aire entre ellas.) */
.perfil-opcion:hover{background:var(--rose-200);
  border-color:var(--border-strong)}
.perfil-opcion:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- LOS AZULEJOS DEL MENÚ (14-oct-2026) ----------
   El lenguaje de los azulejos de la plataforma: icono en su ficha a la
   izquierda, título y una línea de qué hay dentro. Dos por fila cuando caben y
   a lo ancho cuando no; el Panel y Cerrar Sesión siempre a lo ancho. Si las de
   dos en dos quedan impares, `acomodarLosAzulejosDelPerfil` (acceso.js) estira
   la última. Ojo: `display:flex` le gana al `[hidden]` del navegador, de ahí
   la regla que lo devuelve. */
.perfil-opciones{display:grid;grid-template-columns:minmax(0,1fr);
  align-content:start;gap:var(--sp-2);padding:2px;scrollbar-width:thin}
.perfil-opciones > .oculto{display:none}
.perfil-opciones .perfil-azulejo{position:relative;display:flex;align-items:center;gap:10px;
  min-width:0;min-height:60px;padding:var(--sp-3);text-align:left;cursor:pointer;
  border-radius:var(--radius-lg);background:var(--surface-tint);
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard)}
.perfil-opciones .perfil-azulejo[hidden]{display:none}
.perfil-opciones .perfil-azulejo:hover{border-color:var(--border-strong);
  transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.perfil-opciones .perfil-azulejo:active{transform:scale(.98)}
.perfil-azulejo-icono{flex:none;width:36px;height:36px;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--brand-primary);
  background:rgba(var(--cristal-rgb),.85);
  border:1px solid rgba(var(--cristal-rgb),.95);
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.perfil-azulejo-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;position:relative}
.perfil-azulejo-titulo{font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title);line-height:1.2}
.perfil-azulejo-desc{font-size:var(--fs-xs);font-weight:var(--fw-regular,400);
  color:var(--text-muted);line-height:1.3}
.perfil-azulejo .perfil-cuenta{flex:none;margin-left:0;position:relative}
/* Lo que está pasando ahora mismo (la radio sonando) se lee en el color de la casa. */
.perfil-azulejo-desc.en-marcha{color:var(--brand-primary);font-weight:var(--fw-semibold)}
/* Los dos de peligro y de salida: el icono lo dice sin gritar. */
.perfil-opciones .bc-opcion .perfil-azulejo-icono,
.perfil-opciones .perfil-salir .perfil-azulejo-icono{color:var(--danger-500)}
/* El Panel, IGUAL que los demás (Ernesto, 14-oct-2026): ni degradado ni
   destellos; su número de solicitudes es lo único que lo distingue. */

/* ---------- La foto: un desplegable sencillo ----------
   El azulejo de la foto abre debajo dos opciones, Cambiar y Quitar. */
.perfil-foto-opcion{position:relative;display:flex;min-width:0}
.perfil-foto-opcion > .perfil-azulejo{flex:1;width:100%}
.perfil-desplegable{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;
  display:flex;flex-direction:column;padding:4px;border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg)}
.perfil-desplegable[hidden]{display:none}
.perfil-desplegable button{text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard)}
.perfil-desplegable button:hover{background:var(--surface-tint);color:var(--brand-primary)}
.perfil-desplegable button[hidden]{display:none}

/* ---------- Mi Información ----------
   Los datos de dos en dos, cada uno en su azulejo pequeño: el rótulo arriba
   en versalitas y el valor debajo. El fundador ve las mismas casillas para
   escribir, también de dos en dos. */
.mi-informacion{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);
  align-content:start;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:2px;scrollbar-width:thin}
.mi-dato{display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);background:var(--surface-tint)}
.mi-dato-rotulo{font-size:11px;font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-muted)}
.mi-dato-valor{font-size:var(--fs-sm);color:var(--text-title);overflow-wrap:anywhere}
.mi-dato-vacio{color:var(--text-muted);font-style:italic}
.mi-informacion .mi-dato-ancho{grid-column:1 / -1}
.mi-informacion .mi-dato-campo{margin:0;min-width:0}
.mi-informacion .mi-dato-campo label{font-size:var(--fs-xs)}
/* Casillas más bajas que las de un formulario a pantalla completa: aquí van
   dentro de un menú y de dos en dos. */
.mi-informacion .entrada input,.mi-informacion .entrada select,
.seguridad .entrada input{min-height:40px;padding-top:var(--sp-2);padding-bottom:var(--sp-2);
  font-size:var(--fs-sm)}
.mi-informacion .mi-dato{justify-content:flex-start}

/* ---------- Seguridad ---------- */
.seguridad{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin}
.seguridad .campo{margin:0}
.seguridad-par{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.seguridad-final{align-items:end}
.seguridad-final .boton{width:100%;height:42px;padding-top:0;padding-bottom:0;white-space:nowrap}
.seguridad .aviso{margin:0}

/* ---------- La ficha de arriba de «Mi Cuenta» ----------
   Quién eres, de un vistazo: la foto (o las iniciales, como el círculo de la
   cabecera), el nombre completo y el correo. */
.mi-cuenta-ficha{display:flex;align-items:center;gap:var(--sp-3);
  margin:0 0 var(--sp-3);padding:var(--sp-3);border-radius:var(--radius-lg);
  background:rgba(var(--cristal-rgb),.6);border:1px solid rgba(var(--cristal-rgb),.9)}
.mi-cuenta-retrato{position:relative;flex:none;width:56px;height:56px;border-radius:50%;
  overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);
  color:var(--text-onbrand);background:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(var(--cristal-rgb),.95), var(--shadow-xs)}
.mi-cuenta-retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mi-cuenta-retrato img[hidden]{display:none}
.mi-cuenta-quien{min-width:0;display:flex;flex-direction:column;gap:2px}
.mi-cuenta-nombre{font-family:var(--font-display);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);color:var(--text-title);line-height:1.2;overflow-wrap:anywhere}
.mi-cuenta-correo{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere}
/* ---------- LOS ICONOS SE MUEVEN AL PASAR EL CURSOR (14-oct-2026) ----------
   Un gesto pequeño y propio de cada uno, una sola vez cada vez que entra el
   cursor: los recuadros del Panel se recolocan, la cabeza de Mi Cuenta
   asiente, los auriculares se balancean, el globo de Comentarios habla y sus
   líneas se escriben, la flecha de Cerrar Sesión sale y vuelve, la cámara hace
   «clic», el teléfono de Mis Dispositivos salta, el candado de Seguridad se
   cierra y la tapa de la papelera se levanta. Sólo con ratón (en el teléfono
   no hay «pasar por encima») y nunca con «menos movimiento». Sólo `transform`,
   que la tarjeta gráfica mueve sola. */
.perfil-azulejo-icono svg *{transform-box:fill-box;transform-origin:center}
.perfil-azulejo-icono .ani-linea{transform-origin:left center}
.perfil-azulejo-icono .ani-tapa{transform-origin:left bottom}
.perfil-azulejo-icono .ani-arco{transform-origin:center bottom}
.perfil-azulejo-icono .ani-solapa{transform-origin:center top}
.perfil-azulejo-icono .ani-balanceo{transform-origin:center top}
.perfil-azulejo-icono .ani-globo{transform-origin:left bottom}
.perfil-azulejo-icono{transition:transform var(--dur-fast) var(--ease-standard)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .perfil-opciones .perfil-azulejo:hover .perfil-azulejo-icono{transform:scale(1.06)}
  .perfil-azulejo:hover .ani-cuadro{animation:ani-cuadro .5s cubic-bezier(.34,1.56,.64,1) both}
  .perfil-azulejo:hover .ani-c2{animation-delay:.06s}
  .perfil-azulejo:hover .ani-c3{animation-delay:.12s}
  .perfil-azulejo:hover .ani-c4{animation-delay:.18s}
  .perfil-azulejo:hover .ani-cabeza{animation:ani-asiente .6s ease-in-out}
  .perfil-azulejo:hover .ani-balanceo{animation:ani-balanceo .8s ease-in-out}
  .perfil-azulejo:hover .ani-globo{animation:ani-habla .6s ease-in-out}
  .perfil-azulejo:hover .ani-linea{animation:ani-escribe .45s ease-out both}
  .perfil-azulejo:hover .ani-linea-2{animation-delay:.12s}
  .perfil-azulejo:hover .ani-flecha{animation:ani-sale .6s ease-in-out}
  .perfil-azulejo:hover .ani-lente{animation:ani-clic .45s ease-out}
  .perfil-azulejo:hover .ani-movil{animation:ani-salta .55s cubic-bezier(.34,1.56,.64,1)}
  .perfil-azulejo:hover .ani-arco{animation:ani-cierra .55s ease-in-out}
  .perfil-azulejo:hover .ani-tapa{animation:ani-tapa .6s ease-in-out}
  .perfil-azulejo:hover .ani-solapa{animation:ani-solapa .6s ease-in-out}
}
@keyframes ani-cuadro{0%{transform:scale(1)}40%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes ani-asiente{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.6px)}60%{transform:translateY(.8px)}}
@keyframes ani-balanceo{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@keyframes ani-habla{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-8deg) scale(1.06)}60%{transform:rotate(5deg) scale(1)}}
@keyframes ani-escribe{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes ani-sale{0%,100%{transform:translateX(0)}45%{transform:translateX(-3.5px)}}
@keyframes ani-clic{0%,100%{transform:scale(1)}35%{transform:scale(.55)}70%{transform:scale(1.15)}}
@keyframes ani-salta{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}
@keyframes ani-cierra{0%,100%{transform:translateY(0)}35%{transform:translateY(-2.2px)}}
@keyframes ani-solapa{0%,100%{transform:scaleY(1)}45%{transform:scaleY(-.7) translateY(-1px)}}
@keyframes ani-tapa{0%,100%{transform:rotate(0) translateY(0)}40%{transform:rotate(-16deg) translateY(-1.5px)}}

/* EN LA PC, UNA SOLA COLUMNA (Ernesto, 14-oct-2026): un azulejo debajo de
   otro, con el icono a la izquierda, en una tarjeta de 380 px. En el teléfono
   siguen de dos en dos (abajo). */
/* ---------- EN EL TELÉFONO (15-oct-2026) ----------
   El MISMO diseño que en la PC -una columna, icono a la izquierda- y en el
   MISMO sitio que el centro de notificaciones: fija, colgando justo de la
   línea de abajo de la cabecera, de borde a borde con 8 px a cada lado, y con
   el mismo corte (480 px) en el que la campana cambia de forma. El `top` lo
   pone abrirElPerfil() con la misma medida que situarElPanelDeNotificaciones(). */
@media (max-width:480px){
  .perfil-menu{position:fixed;left:var(--sp-2);right:var(--sp-2);width:auto;
    top:var(--perfil-menu-arriba, 72px);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--sp-3)}
  /* Con el nombre del menú delante: la regla general de `.perfil-caras` va
     más abajo en este archivo y, a igual peso, ganaba ella. */
  .perfil-menu .perfil-caras{height:min(400px, calc(100vh - var(--perfil-menu-arriba, 72px) - 16px));
                height:min(400px, calc(100dvh - var(--perfil-menu-arriba, 72px) - 16px))}
  .perfil-opciones .perfil-azulejo{min-height:56px;padding:var(--sp-2) var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  .perfil-opciones .perfil-azulejo:hover,
  .perfil-opciones .perfil-azulejo:active{transform:none}
}

/* ---------- LAS DOS CARAS DEL MENÚ ----------

   El menú del perfil enseña o la lista de siempre o Mis Dispositivos, y se
   pasa de una a otra con EL MISMO CRUCE que las tarjetas del acceso: la que
   llega entra por un lado y se pone delante, la que se va se aparta por el
   otro y se desvanece. Ver `.cruzable`, más arriba.

   Aquí hubo otro gesto -el desplegable de arriba abajo, el de los sistemas- y
   estaba mal elegido. Ese gesto es para algo que se abre DENTRO de donde
   estás; esto es ir a otro sitio y volver, y la web ya tenía su gesto para
   eso. Se veía brusco porque era el gesto equivocado, no porque le faltara
   tiempo.

   ---------- Y AL MENÚ NO SE LE TOCA NADA ----------

   Esto estaba puesto sobre `.perfil-menu`, y le rompió la esquina de la web.
   Dos daños, los dos por lo mismo -escribir encima de una regla que ya
   existía-, y los dos conviene que queden dichos:

     position:relative   le ganaba al `position:absolute` de arriba, porque
                         pesan igual y ésta se escribe después. El menú dejaba
                         de colgar del círculo y se metía en el flujo de la
                         cabecera, y su desenfoque se derramaba por media
                         pantalla con un borde recto.
     transition          `.caja-que-cruza` declaraba entonces la suya para el
                         alto, y al estar en el propio menú le pisaba la de
                         opacidad y desplazamiento. El menú dejaba de abrirse
                         con su fundido y aparecía de golpe. (Esa transición ya
                         no existe -las caras miden todas lo mismo-, pero la
                         lección de abajo sigue valiendo igual.)

   La caja que cruza es ahora un envoltorio de dentro, `.perfil-caras`, que no
   tiene fondo ni cristal ni posición propia. El menú se queda con las reglas
   que tenía y ni se entera de que sus dos caras se cruzan.

   La lección, que ya ha costado dos veces: si hay que darle a un elemento un
   comportamiento nuevo que trae sus propias `position` o `transition`, no se
   le añade la clase encima. Se le mete dentro. */
/* ---------- LAS CUATRO CARAS MIDEN LO MISMO ----------

   Y ése es el arreglo. El cruce animaba también el ALTO de la caja, porque
   cada cara medía lo suyo -el menú 385 px, Configuración 630- y había que
   llevarla de un alto al otro mientras las tarjetas se cruzaban. En el papel
   estaba bien; en la práctica no interpolaba: medido en un móvil de 375×812,
   la caja se quedaba clavada en 385 px durante los 560 ms del cruce y pegaba
   el salto de 125 px de un solo fotograma al soltarse el alto, al final. Eso
   es lo que se veía como un descenso brusco justo cuando el gesto ya había
   terminado. Y encima el alto de destino se medía con `scrollHeight`, que
   aquí daba 554 -lo que el contenido pide- mientras que la cara, al ser un
   hijo flexible que se encoge, acababa en 514: cuarenta píxeles de más que
   también había que devolver de golpe.

   Así que la caja deja de cambiar de tamaño. Un alto fijo, el mismo para las
   cuatro caras, y el cruce se queda con lo único que tenía que hacer: pasar
   una tarjeta por delante de la otra, en horizontal. Lo que no quepa se
   desplaza DENTRO de su cara, que es lo que ya hacían por su cuenta la lista
   de Mis Dispositivos, la de emisoras y la de Configuración, cada una con su
   propio tope. Ahora no hay topes sueltos: cada cara reserva su cabecera y le
   da a su lista todo lo que sobre (`flex:1;min-height:0`). Añadir opciones
   mañana no toca nada, se desplazan y ya.

   EL ALTO SALE DEL MENÚ, y hay que medirlo CON SESIÓN. La primera vez se puso
   en 400 px midiendo el menú sin la opción de Panel de Administración -que
   sólo la enciende panel.js, y sin sesión no aparece-, y con ella el menú pide
   448. El resultado fue el peor posible: la lista se quedaba corta y el Panel,
   que es el primero, se aplastaba a 17 px (ver `.perfil-opciones`). Son 510,
   que es lo que pide el caso MÁS LLENO -saludo, correo, Panel con su número de
   solicitudes, el deslizador de velocidad y las SEIS opciones, contando
   «Instalar la Aplicación», que sale mientras no esté instalada- con un dedo
   de aire. Medido: 496. Quien añada una opción aquí que se acuerde de este
   número, porque lo que sobra se desplaza pero lo que se ve es un menú a
   medias.

   El `min()` es para que no se salga de la pantalla en un teléfono corto: por
   encima del menú hay la cabecera y su separación (84 px) y el acolchado del
   propio menú, y conviene dejar algo por debajo. No es un alto variable
   durante el cruce -la ventana no cambia de tamaño mientras dura- sino el
   mismo número para las cuatro caras. La segunda línea pisa a la primera donde
   se entienda `dvh`, que en un móvil es el alto de verdad: `vh` no descuenta
   la barra del navegador y se pasa de largo. */
.perfil-caras{display:flex;flex-direction:column;
  height:min(500px, calc(100vh - 150px));
  height:min(500px, calc(100dvh - 150px))}
.perfil-cara{height:100%;display:flex;flex-direction:column}
.perfil-dentro{display:flex;flex-direction:column;gap:var(--sp-1);
  flex:1;min-height:0}

/* La cabecera de Mis Dispositivos: la flecha de volver y el título en la misma
   línea, con el título ocupando el sitio del saludo. Es el mismo renglón que
   se lee al abrir el menú, sólo que ahora dice dónde estás. */
.dispositivos-cabeza{display:flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-2)}
.dispositivos-cabeza .perfil-saludo{margin:0}
.perfil-volver{display:flex;align-items:center;justify-content:center;
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--surface-tint);color:var(--brand-primary);
  transition:background var(--dur-fast) var(--ease-standard)}
.perfil-volver:hover{background:var(--rose-200)}
.perfil-volver:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.dispositivos-pie{margin:0 0 var(--sp-3);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-body)}

/* Con muchos aparatos la lista se desplaza dentro del menú en vez de estirarlo
   hasta salirse de la pantalla. Con tres no pasa nada; con doce, sí. Ya no
   lleva tope propio: se queda con lo que sobre de la cara, que mide lo mismo
   que las otras tres. */
#dispositivos-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);
  align-content:start;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:2px;scrollbar-width:thin}
#dispositivos-lista .dispositivos-grupo,
#dispositivos-lista .dispositivos-vacio{grid-column:1 / -1}

.dispositivos-grupo{margin:var(--sp-2) 0 0;
  font-family:var(--font-body);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-muted)}
.dispositivos-grupo:first-child{margin-top:0}
.dispositivos-vacio{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}

/* Un aparato. En el óvalo rosa pálido de las opciones del menú, para que se
   lea como parte de la misma pieza y no como tarjetas metidas dentro. El
   nombre grande arriba y el modelo pequeño debajo, que es como lo pidió
   Ernesto y además como se reconoce un aparato de un vistazo. */
.aparato{display:flex;flex-direction:column;gap:2px;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid transparent}
.aparato-este{border-color:var(--border-strong)}
.aparato{min-width:0}
.aparato-arriba{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
.aparato-nombre{margin:0;min-width:0;font-family:var(--font-display);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-title);
  line-height:var(--lh-tight);overflow-wrap:anywhere}
.aparato-renombrar{flex:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.aparato-renombrar:hover{background:rgba(var(--cristal-rgb),.9);color:var(--brand-primary)}
.aparato-renombrar:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.aparato-nombre-campo{font:inherit;color:inherit;width:100%;min-width:0;padding:0 0 2px;
  background:transparent;border:0;border-bottom:2px solid var(--brand-primary);
  border-radius:0;outline:none}
.aparato-modelo{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.aparato-aqui{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--brand-primary)}
.aparato-cerrar{align-self:flex-start;margin-top:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs)}

/* ---------- Configuración en el menú del perfil ---------- */
/* ---------- Configuración: contenida, no a pantalla completa ----------

   Esta lista no tenía tope de alto, y con el azulejo del color -que lleva su
   rejilla de muestras debajo del texto- la cara crecía más que la pantalla. El
   menú cuelga de la cabecera con `position:absolute`, así que lo que se salía
   por abajo no había manera de alcanzarlo: la página de detrás sí se desplaza,
   pero el menú se va con la cabecera y el final de la lista quedaba fuera.

   Se desplaza por dentro, igual que la lista de emisoras de la Radio y la de
   Mis Dispositivos. El rótulo, la descripción y la flecha de volver se quedan
   fijos arriba; lo que se mueve es el contenido.

   El tope ya no lo pone esta lista: lo pone la cara, que mide lo mismo que
   las otras tres para que el cruce sea sólo horizontal. Aquí sólo se dice que
   lo que sobre es suyo. Ver `.perfil-caras`. */
.configuracion-lista{display:flex;flex-direction:column;gap:var(--sp-2);
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  /* Un respiro a la derecha para que la barra de desplazamiento no se monte
     encima de los interruptores. */
  padding-right:var(--sp-1);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.azulejo-configuracion{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid transparent}
.configuracion-info{flex:1;min-width:0}
/* Los dos apartados de Configuración: Personalización y Notificaciones. */
.configuracion-seccion{margin:var(--sp-3) 0 0;padding:0 var(--sp-1);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-muted)}
.configuracion-seccion:first-child{margin-top:0}
.configuracion-titulo{margin:0 0 2px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-title);line-height:var(--lh-tight)}
.configuracion-desc{margin:0;font-size:var(--fs-xs);color:var(--text-muted);
  line-height:var(--lh-tight)}

/* ---------- Color de la Plataforma ----------
   El único azulejo de Configuración que no es una fila con un interruptor a la
   derecha: aquí debajo del texto va una rejilla de muestras. Por eso se
   endereza en columna y se le deja aire abajo. */
.configuracion-item-color{flex-direction:column;align-items:stretch}
.configuracion-item-color .configuracion-info{margin-bottom:var(--sp-3)}

/* ---------- Sonido de Notificación ----------
   El otro azulejo en columna. El desplegable y el botón de escuchar comparten
   fila; debajo, la línea que describe el tono elegido -«Tres notas que suben,
   como una caja de música»-, que es lo que convierte una lista de nombres en
   algo que se puede elegir sin ir probando de uno en uno. */
.configuracion-item-sonido{flex-direction:column;align-items:stretch}
.configuracion-item-sonido .configuracion-info{margin-bottom:var(--sp-3)}

/* ---------- Velocidad de las Transiciones ----------
   Otro azulejo en columna: debajo del texto, el deslizador. Vivía suelto en
   la cara principal del menú, dentro de su propio óvalo pálido; aquí el óvalo
   ya es el azulejo, así que por dentro va sin fondo ni relleno propios -dos
   óvalos uno dentro del otro se leían como un aparato metido en otro-. La
   clase `.perfil-velocidad` se conserva porque de ella cuelgan la barra
   vestida, el relleno y las chispas del tope (ver velocidad.js). */
.configuracion-item-velocidad{flex-direction:column;align-items:stretch}
.configuracion-item-velocidad .configuracion-info{margin-bottom:var(--sp-2)}
.configuracion-item-velocidad .perfil-velocidad{padding:0;background:none;border-radius:0}
/* Las chispas del tope van a media altura de su capa, y la capa cubría toda la
   caja. Con el rótulo encima -como estaba en el menú- esa media altura caía en
   la barra; aquí el título va fuera, en el azulejo, y caían entre la barra y
   la línea de debajo. Se ciñe la capa a la barra, que es lo primero de la caja
   y mide 18 px (ver `.perfil-velocidad input[type=range]`). */
.configuracion-item-velocidad .rayos{bottom:auto;height:18px}

/* ---------- Memoria de Omnia (v390) ----------
   Otro azulejo en columna: arriba el texto con su interruptor, como los de
   fila; debajo, lo que Omnia recuerda, cada cosa con su aspa. Los rótulos de
   grupo son los de Mis Dispositivos (`.dispositivos-grupo`). */
.configuracion-item-memoria{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.configuracion-memoria-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.configuracion-item-memoria .configuracion-sonido-dice:empty{display:none}
.memoria-vacia{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.memoria-fila{display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-1);border-radius:var(--radius-md);
  background:var(--surface-page);border:1px solid var(--border-subtle)}
.memoria-texto{flex:1;min-width:0}
.memoria-texto p{margin:0;font-size:var(--fs-xs);color:var(--text-title);line-height:var(--lh-tight)}
.memoria-texto span{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-muted)}
.memoria-olvidar{flex:none;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer}
.memoria-olvidar:hover{background:var(--rose-200);color:var(--brand-primary)}
.memoria-olvidar:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.memoria-todo{align-self:flex-start;margin-top:var(--sp-2)}
.configuracion-sonido{display:flex;align-items:center;gap:var(--sp-2)}
/* Vestido como los desplegables del panel: píldora, borde fino y la letra de
   la casa. El `<select>` crudo del navegador es cuadrado y gris, y aquí va
   dentro de un azulejo redondeado. */
.configuracion-sonido select{flex:1;min-width:0;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);
  background:var(--surface-page);border:1px solid var(--border-subtle);
  color:var(--text-title);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  font-family:inherit;cursor:pointer}
.configuracion-sonido select:hover{border-color:var(--border-strong)}
.configuracion-sonido select:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* El botón de volver a escuchar. Redondo y del tamaño del desplegable, para
   que la fila no quede coja. Suena el tono que esté elegido: al desplegar con
   el teclado el `change` salta en cada flecha, pero con el ratón sólo al
   soltar, y a veces se quiere oír otra vez sin cambiar nada. */
.configuracion-sonido-probar{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface-page);border:1px solid var(--border-subtle);
  color:var(--brand-primary);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
.configuracion-sonido-probar:hover{background:var(--rose-200);
  border-color:var(--border-strong)}
.configuracion-sonido-probar:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.configuracion-sonido-dice{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);
  color:var(--text-muted);line-height:var(--lh-tight);font-style:italic}

/* Catorce muestras. Cada una es un disco del color que de verdad pondría -su
   rose-600 girado-, así que la rejilla ya enseña la paleta. `--muestra` la
   escribe personalizacion.js en cada botón.

   LAS COLUMNAS NO SON SIETE FIJAS, y por eso se veían apiñadas. El menú del
   perfil mide `min-width:260px; max-width:min(320px,90vw)` y lleva `--sp-4`
   de relleno a cada lado, así que por dentro quedan entre 228 y 288 px.
   Repartidos en siete columnas, cada muestra caía a 31-34 px -disco de 19 px,
   por debajo del objetivo táctil- y con los huecos pegados unos a otros.

   Con `auto-fit` la rejilla decide cuántas caben -cinco en el menú- y el
   disco pasa del 60% al 72% de su casilla, que es lo que de verdad se toca:
   de 19 px a unos 31, ya por encima del objetivo táctil. La última fila queda
   coja -catorce no es múltiplo de cinco- y así se queda: es lo normal en una
   rejilla de color, y siete columnas clavadas era justo lo apretado. */
.perfil-colores{display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fit,minmax(38px,1fr))}
.muestra-color{position:relative;width:100%;aspect-ratio:1;padding:0;border:0;
  background:none;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.muestra-color > span{width:72%;height:72%;border-radius:50%;
  background:var(--muestra);box-shadow:var(--shadow-xs);
  transition:width var(--dur-base) var(--ease-standard),
             height var(--dur-base) var(--ease-standard)}
.muestra-color:hover > span{width:84%;height:84%}
.muestra-color:focus-visible{outline:none}
.muestra-color:focus-visible > span{box-shadow:var(--shadow-focus)}

/* La elegida se lee por un aro del propio color alrededor del disco, con un
   respiro blanco en medio para que el aro no se confunda con el disco. El
   disco además se planta a tamaño completo. */
.muestra-color.elegida > span{width:100%;height:100%;
  box-shadow:0 0 0 2px var(--surface-card),0 0 0 4px var(--muestra)}

@media (prefers-reduced-motion:reduce){
  .muestra-color > span{transition:none}
}

/* ---------- Radio en el menú del perfil ----------
   Una fila por emisora, en el mismo óvalo rosa pálido que las opciones del
   menú, para que se lea como parte de la misma pieza. Ninguna va resaltada de
   fábrica: el borde rosa marca la que está PUESTA y sigue a esa; el punto que
   late marca que además está sonando.

   Con las cuatro emisoras la lista cabe entera; en una pantalla corta se
   desplaza dentro de su caja y el volumen se queda siempre a la vista debajo
   (mismo recurso que la lista de Mis Dispositivos). */
.radio-emisoras{display:flex;flex-direction:column;gap:var(--sp-2);
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain}
.radio-emisora{display:flex;align-items:center;gap:var(--sp-3);text-align:left;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
.radio-emisora:hover{background:var(--rose-200);border-color:var(--border-strong)}
.radio-emisora:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* La puesta: borde del color de la casa, que se lee claro sobre el óvalo. */
.radio-emisora.elegida{border-color:var(--brand-primary)}

.radio-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.radio-nombre{font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-title);line-height:var(--lh-tight)}
.radio-desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-tight)}

/* El punto: apagado es un aro tenue; encendido se llena del color de la casa y
   late, que es como se lee «esto está en directo». */
.radio-punto{flex:none;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--brand-primary);opacity:.4}
.radio-emisora.sonando .radio-punto{opacity:1;border-color:transparent;
  background:var(--brand-primary);
  animation:radio-late 1.6s var(--ease-standard) infinite}
@keyframes radio-late{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.45}}

/* La acción de la derecha -«Reproducir», «Reanudar» o «Detener»-. Pequeña y en
   el color de la marca: es una etiqueta de lo que hará el toque, no un botón
   dentro del botón. */
.radio-accion{flex:none;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--brand-primary)}

/* ---------- El volumen ----------

   El icono a la izquierda, el deslizador en medio y la cifra a la derecha.
   Estaba con `accent-color` a secas -el deslizador gris y cuadrado del
   sistema, teñido de rosa-, que es justo lo que el de la velocidad, tres
   opciones más arriba en este mismo menú, se molesta en no ser. Ahora se
   viste igual que aquél: barra fina rosa pálido, botón redondo del color de
   marca, y el tramo recorrido pintado con un degradado que se mueve con él.

   El icono no es decoración: dice de un vistazo si está en silencio, bajo o
   alto, que es lo que un número solo tarda en contar. */
.radio-volumen{display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-lg);background:var(--surface-tint)}
.radio-volumen-icono{flex:none;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--brand-primary)}
.radio-volumen-dice{flex:none;min-width:4ch;text-align:right;
  font-family:var(--font-serif);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--brand-primary);font-variant-numeric:lining-nums tabular-nums}

.radio-volumen input[type=range]{appearance:none;-webkit-appearance:none;
  flex:1;min-width:0;height:18px;background:none;cursor:pointer}
/* El tramo recorrido se pinta con un degradado que corta justo donde está el
   botón. `--recorrido` lo pone radio.js en cada movimiento. */
.radio-volumen input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--brand-accent) 0 var(--recorrido,65%),
    var(--rose-200) var(--recorrido,65%) 100%)}
.radio-volumen input[type=range]::-moz-range-track{
  height:4px;border-radius:var(--radius-pill);background:var(--rose-200)}
.radio-volumen input[type=range]::-moz-range-progress{
  height:4px;border-radius:var(--radius-pill);background:var(--brand-accent)}
.radio-volumen input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;margin-top:-6px;border:0;
  background:var(--brand-accent);box-shadow:var(--shadow-sm)}
.radio-volumen input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:0;
  background:var(--brand-accent);box-shadow:var(--shadow-sm)}
.radio-volumen input[type=range]:focus-visible{outline:none}
.radio-volumen input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus)}
.radio-volumen input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--shadow-focus)}

/* El reproductor tiene que estar DENTRO de la ventana -aunque invisible- o
   YouTube lo detecta como "nadie lo ve" y frena el directo. Un píxel en la
   esquina, con opacidad cero y sin capturar clics. Nunca display:none ni
   fuera de pantalla. */
#radio-host{position:fixed;left:0;bottom:0;width:1px;height:1px;
  opacity:0;pointer-events:none;border:0;z-index:-1}

@media (prefers-reduced-motion:reduce){
  .radio-emisora,.radio-punto{transition:none}
  .radio-emisora.sonando .radio-punto{animation:none}
}

/* Interruptor Toggle con estilo azulejo/cristal de la plataforma */
.pauta-multiple-control{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.pauta-multiple-control .interruptor-switch{flex-shrink:0;margin:0}
/* ---------- MARCAR VARIAS DE UNA LISTA CORTA ----------

   Tres sitios hacen exactamente lo mismo: a qué marcas comerciales vale una
   pauta, por qué vías va una presentación, y por cuál sale en Farmacocinética.
   Eran la casilla cuadrada del navegador con la etiqueta al lado, y eso es un
   formulario: aquí lo que se hace es REPASAR -ver de un vistazo qué está
   marcado y qué no-, que es justo lo que ya resolvían las píldoras de permisos
   de Miembros.

   Así que son esas mismas. No una parecida: la regla de abajo lleva los dos
   selectores, y si un día cambia la píldora cambian las dos a la vez. Es la
   cuarta vez que en esta casa algo «parecido» acaba siendo distinto.

   En fila y envueltas: son dos o tres palabras cada una, y apiladas doblaban
   el alto de cada renglón sin ganar nada. */
.pauta-marcas{border:0;padding:0;margin:0;min-width:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2)}
/* `break-word` y NO `anywhere`, y la diferencia es la que aplastaba las
   píldoras. `anywhere` permite partir entre dos letras cualesquiera Y ADEMÁS
   rebaja el ancho MÍNIMO del texto al de un solo carácter; como la etiqueta es
   hija flexible de la píldora, con ese mínimo de un carácter la píldora se
   quedaba en una columna de cien píxeles con «Intramuscular» escrito en
   vertical, letra por letra. `break-word` parte igual cuando de verdad no cabe,
   pero no toca el ancho mínimo, así que la píldora se mide por su texto. */
.pauta-marca span{overflow-wrap:break-word}
.presentacion-vias .pauta-marcas legend{font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-muted);padding:0}
.interruptor-switch{position:relative;display:inline-block;width:42px;height:24px;
  flex:none;cursor:pointer}
.interruptor-switch input{opacity:0;width:0;height:0;position:absolute}
/* Apagado: una versión rebajada del color elegido -no un rosa fijo-, para que
   el interruptor sea de la casa esté en el tema que esté. Encendido: el color
   a plena fuerza. Los dos tiran de `--rose-600`, que gira con `--tono-giro`
   pero NO cambia con el modo oscuro: así el encendido siempre es un tono con
   cuerpo, se lea sobre claro o sobre oscuro, y el botón blanco resalta. */
.interruptor-deslizador{position:absolute;inset:0;
  background:color-mix(in srgb,var(--rose-600) 22%,var(--surface-sunken));
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb,var(--rose-600) 28%,transparent);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard)}
.interruptor-deslizador::before{content:"";position:absolute;height:18px;width:18px;left:2px;bottom:2px;
  background:var(--white);border-radius:50%;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard)}
.interruptor-switch input:checked + .interruptor-deslizador{background:var(--rose-600);
  border-color:var(--rose-600)}
.interruptor-switch input:checked + .interruptor-deslizador::before{transform:translateX(18px)}
.interruptor-switch input:focus-visible + .interruptor-deslizador{box-shadow:var(--shadow-focus)}

@media (prefers-reduced-motion:reduce){
  .perfil-cara,.interruptor-deslizador,.interruptor-deslizador::before{transition:none}
}

/* ---------- El deslizador de la velocidad ----------
   Va en el mismo óvalo rosa pálido que las opciones, para que se lea como una
   más de la lista y no como un aparato aparte que alguien ha metido dentro
   del menú. Lo único que cambia es que dentro, en vez de una palabra que se
   pulsa, hay una barra que se arrastra. */
.perfil-velocidad{padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-lg);background:var(--surface-tint);
  display:flex;flex-direction:column;gap:var(--sp-2)}
.perfil-velocidad label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--brand-primary)}
/* Lo que dice debajo cambia mientras se arrastra, así que se le reserva su
   alto de una línea: sin esto, el menú entero pega un tirón cada vez que el
   texto pasa de una línea a otra. */
.perfil-velocidad-dice{margin:0;min-height:1.2em;
  font-size:var(--fs-xs);color:var(--text-muted)}

/* El deslizador se viste entero a mano. El que trae el navegador de serie es
   gris y cuadrado en cada sistema de una manera, y aquí todo es rosa y
   redondo. `appearance:none` es lo que hay que decir para poder vestirlo. */
.perfil-velocidad input[type=range]{appearance:none;-webkit-appearance:none;
  width:100%;height:18px;background:none;cursor:pointer}
.perfil-velocidad input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:var(--radius-pill);background:var(--rose-200)}
.perfil-velocidad input[type=range]::-moz-range-track{
  height:4px;border-radius:var(--radius-pill);background:var(--rose-200)}
/* El botón redondo. El margen negativo lo centra sobre la barra: sin él se
   apoya en su borde de arriba, que es como lo coloca el navegador. */
.perfil-velocidad input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;margin-top:-6px;border:0;
  background:var(--brand-accent);
  box-shadow:var(--shadow-sm)}
.perfil-velocidad input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:0;
  background:var(--brand-accent);box-shadow:var(--shadow-sm)}
.perfil-velocidad input[type=range]:focus-visible{outline:none}
.perfil-velocidad input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus)}
.perfil-velocidad input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--shadow-focus)}

/* El botón y la barra son UNA sola cosa, no dos de colores distintos. El botón
   lleva el mismo color en el que acaba el relleno, así que lo que se ve es una
   barra que se llena y termina en un redondel, y no un botón montado encima de
   una barra ajena. Y al llegar al tope los dos se van al rosa vivo de
   Celestia, que es de donde salen las chispas. */
.perfil-velocidad.a-tope input[type=range]::-webkit-slider-thumb{background:var(--celestia-rosa)}
.perfil-velocidad.a-tope input[type=range]::-moz-range-thumb{background:var(--celestia-rosa)}

/* ---------- Los rayos del tope ----------
   Al llegar a 3.0x, del botón del deslizador salen chispas que corren por la
   barra. Sólo ahí: es el premio de haber llegado al final, y si salieran
   siempre no significarían nada.

   Salen del botón y NO de un sitio fijo, así que su punto de partida lo
   escribe velocidad.js en --donde, que es el porcentaje al que está el botón.
   A 3.0x eso es el 100%, pero se calcula igual: si mañana el tope cambia, esto
   sigue saliendo de donde esté.

   Corren HACIA LA IZQUIERDA, recorriendo la barra que se acaba de llenar. Es
   el gesto de que la velocidad se ha ido a tope: el rastro va por detrás. */
.perfil-velocidad{position:relative}
.rayos{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}

/* Cada rayo nace en el botón y se va. El `left` es de dónde sale; lo demás lo
   hace la animación.

   ENTRAN Y SALEN DE UNO EN UNO, no los cuatro a la vez. La opacidad de cada
   uno lleva su propio retardo, así que al llegar al tope van apareciendo
   escalonados, y al bajar de él se van apagando en el mismo orden. Es el
   mismo gesto con el que entra la lluvia de Celestia y con el que entran las
   letras de la rueda: en esta casa nada aparece de golpe.

   La opacidad va en DOS elementos anidados y no en uno, y es la misma razón
   que ya obligó a hacerlo así en el polvo de Celestia: la animación de correr
   ya anima la opacidad -la chispa se enciende al salir y se apaga al llegar-,
   y una animación le gana siempre a una transición. En dos elementos, las dos
   opacidades se multiplican y cada una hace lo suyo sin pisar a la otra. */
.rayos i{position:absolute;left:var(--donde,100%);top:var(--alto,50%);
  width:var(--lado,9px);height:var(--lado,9px);
  margin:calc(var(--lado,9px) / -2);
  display:block;opacity:0;
  transition:opacity var(--dur-slow) var(--ease-standard) var(--entra,0s)}
.perfil-velocidad.a-tope .rayos i{opacity:1}

.rayos i > span{display:block;width:100%;height:100%;opacity:0}
.perfil-velocidad.a-tope .rayos i > span{
  animation:correrPorLaBarra var(--compas,1.1s) linear var(--retraso,0s) infinite}
.rayos svg{width:100%;height:100%;display:block;overflow:visible}

@keyframes correrPorLaBarra{
  0%  {opacity:0;   transform:translate(0,0) scale(.3) rotate(0deg)}
  15% {opacity:1;   transform:translate(calc(var(--viaje,120px) * -.12),var(--desvio,0px)) scale(1) rotate(60deg)}
  70% {opacity:.85}
  100%{opacity:0;   transform:translate(calc(var(--viaje,120px) * -1),var(--desvio,0px)) scale(.35) rotate(300deg)}
}

/* ---------- La barra que se llena ----------
   El relleno NO se pinta en la pista del deslizador, y no por gusto: la pista
   es un pseudoelemento del navegador, y un degradado no se puede transicionar.
   Cambiarlo daría un salto de un color a otro, que es justo lo que no se
   quiere: se quiere que se llene poco a poco al subir y se vacíe poco a poco
   al bajar.

   Así que el relleno es un elemento de verdad, debajo del deslizador, con su
   anchura escrita por velocidad.js. Una anchura sí se transiciona, y lo hace
   con la velocidad de la casa, como todo lo demás. */
.relleno-velocidad{position:absolute;left:var(--desde,0px);top:var(--alto-barra,0px);
  width:var(--lleno,0px);height:4px;border-radius:var(--radius-pill);
  pointer-events:none;
  background:linear-gradient(90deg,var(--rose-300),var(--brand-accent));
  transition:width var(--dur-slow) var(--ease-standard),
             background var(--dur-slow) var(--ease-standard)}
/* Y al tope se enciende con el rosa vivo de Celestia: es el mismo sitio del
   que salen las chispas, así que es el mismo color. */
.perfil-velocidad.a-tope .relleno-velocidad{
  background:linear-gradient(90deg,var(--brand-accent),var(--celestia-rosa))}

@media (prefers-reduced-motion:reduce){
  .perfil-velocidad.a-tope .rayos i > span{animation:none}
  .perfil-velocidad.a-tope .rayos i{opacity:.9;transition:none}
  .relleno-velocidad{transition:none}
}

/* ---------- La puerta del panel ----------
   Desde el 14-oct-2026 va IGUAL que las demás opciones (lo pidió Ernesto): ni
   degradado ni destellos. Los destellos de abajo se quedan para quien los use. */

.destellos{position:absolute;inset:0;pointer-events:none}
.destellos{opacity:0;transition:opacity var(--dur-slow) var(--ease-standard)}
/* Los destellos SÓLO salen cuando hay algo esperando. Antes salían siempre, y
   un botón que brilla a todas horas deja de querer decir nada: se convierte en
   adorno. Brillando sólo con solicitudes pendientes, el brillo ES el aviso. */
.perfil-panel.con-aviso .destellos{opacity:1}
.destellos i{position:absolute;left:var(--iz);top:var(--ar);
  width:var(--lado);height:var(--lado);
  margin:calc(var(--lado) / -2);display:block;
  animation:destellar var(--compas) ease-in-out var(--retraso) infinite}
.destellos svg{width:100%;height:100%;display:block;overflow:visible}

/* Latir y girar a la vez, y cada uno a su compás: si fueran acompasados se
   leería como un parpadeo. Así el botón nunca está del todo quieto pero
   tampoco llama tanto como para molestar leyendo el resto del menú. */
@keyframes destellar{
  0%,100%{opacity:.12;transform:scale(.6)  rotate(0deg)}
  50%    {opacity:.55;  transform:scale(1.1) rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  .destellos i{animation:none;opacity:.4}
}

/* El perfil sólo existe cuando hay alguien dentro. Durante la carga y el
   acceso no hay nadie, así que no se enseña un círculo vacío. */
body:not(.barra) .perfil{display:none}

/* ---------- Círculo de carga ----------
   Rosa muy pastel -casi blanco- para que el logo, que ya es rosa, destaque.
   El marco lo coloca y lo achica; el halo, dentro, es el que deriva. Así
   una transformación no pisa la otra.

   Las tres manchas van cerca del centro y con el mismo radio: si se
   reparten hacia los lados, su unión se lee como un óvalo, no como
   un círculo. */
/* Fijo a la ventana y por detrás de todo: el círculo acompaña a cualquier
   sección de la web, no sólo al inicio. El marco lo recorta en los bordes. */
.circulo-marco{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
main{position:relative;z-index:1;
  transition:opacity calc(420ms * var(--v,1)) var(--ease-standard)}

/* ---------- Cambiando de color ----------
   Al elegir un color en Configuración, personalizacion.js pone esta clase y
   dispara la coreografía de siempre: el círculo -que ya vive aquí detrás, en
   z-index 0- se va al centro y crece. Lo único que hace el CSS es apartar todo
   lo demás para dejarlo ver: la cabecera y la sección se funden a
   transparente y vuelven cuando el círculo ya es del color nuevo. El menú del
   perfil se va con la cabecera, que es donde vive. El círculo no se toca aquí;
   de moverlo se encarga el bucle de inicio.js, el de siempre. */
body.recoloreando .cabecera,
body.recoloreando main,
body.dosis-en-circulo .cabecera,
body.dosis-en-circulo main{
  opacity:0;pointer-events:none;
}

/* ---------- Pasando a modo oscuro (y de vuelta) ----------
   El cambio de tema no desvanece nada ni mueve el círculo: la pantalla entera
   se oscurece a la vez, suave. Como los colores viven en variables y una
   variable no se puede animar, lo que se anima son las propiedades que las
   usan -el fondo, el texto, el borde, el relleno y la sombra- en TODO lo que
   hay pintado. Eso sería carísimo de dejar puesto siempre, así que
   personalizacion.js sólo pone `tema-cambiando` el rato que dura el viaje y la
   quita después: fuera de ese momento, la web reacciona igual de seca que
   siempre. */
body.tema-cambiando,
body.tema-cambiando *,
body.tema-cambiando *::before,
body.tema-cambiando *::after{
  transition:background-color calc(600ms * var(--v,1)) var(--ease-standard),
             color calc(600ms * var(--v,1)) var(--ease-standard),
             border-color calc(600ms * var(--v,1)) var(--ease-standard),
             fill calc(600ms * var(--v,1)) var(--ease-standard),
             box-shadow calc(600ms * var(--v,1)) var(--ease-standard) !important;
}

/* ---------- Los rojos, verdes y azules escritos a pelo, en oscuro ----------
   En las notificaciones y en un par de botones del panel hay colores de estado
   puestos con su hex directo -no con `var(--danger-500)`- de cuando no había
   modo oscuro. Sus fondos son translúcidos y aguantan sobre el negro; lo que
   no aguanta es el texto, que es un rojo o un azul oscuros sobre oscuro. Aquí,
   y sólo en oscuro, ese texto sube al mismo tono claro que ya usan las
   variables de estado. El `!important` es para igualar el de los originales. */
:root[data-tema="oscuro"] .notis-borrar-todas:hover,
:root[data-tema="oscuro"] .noti-icono-clinica,
:root[data-tema="oscuro"] .historial-noti-tag.categoria-clinica,
:root[data-tema="oscuro"] .boton-peligro-suave,
:root[data-tema="oscuro"] .texto-ayuda-aviso,
:root[data-tema="oscuro"] .btn-denegar-aprobacion,
:root[data-tema="oscuro"] .boton-quitar-asignacion:hover{color:var(--danger-500) !important}
:root[data-tema="oscuro"] .noti-icono-sistema,
:root[data-tema="oscuro"] .historial-noti-tag.categoria-sistema{color:var(--info-500) !important}
:root[data-tema="oscuro"] .noti-icono-solicitud,
:root[data-tema="oscuro"] .historial-noti-tag.categoria-solicitud{color:var(--success-500) !important}
:root[data-tema="oscuro"] .boton-quitar-asignacion:hover{border-color:var(--danger-500) !important}

/* ---------- Los tres colores de las fichas, en oscuro ----------
   Rojo, ámbar y verde: la gravedad de un efecto adverso o de una interacción,
   y los avisos «grave» del editor. En claro la tarjeta se tiñe mezclando el
   tono `-100` -que ahí es casi blanco- con el cristal; en oscuro ese `-100` ya
   es oscuro y el cristal también, así que la mezcla se quedaba en negro y el
   color desaparecía. Aquí la tarjeta se tiñe con el `-500` -el tono con
   cuerpo- mezclado sobre la tarjeta, que es lo que sí se ve sobre el negro. El
   texto encima sigue siendo el de siempre y no pierde contraste. */
:root[data-tema="oscuro"] .volteable[class*="grado-"]{
  background:color-mix(in srgb,var(--filo) 32%,var(--surface-card));
  border-color:color-mix(in srgb,var(--filo) 55%,transparent)}
:root[data-tema="oscuro"] .volteable[class*="grado-"]:hover{
  background:color-mix(in srgb,var(--filo) 44%,var(--surface-card));
  border-color:color-mix(in srgb,var(--filo) 70%,transparent)}
:root[data-tema="oscuro"] .volteada[class*="grado-"] .cara{
  background:color-mix(in srgb,var(--filo) 38%,var(--surface-card));
  border-color:color-mix(in srgb,var(--filo) 55%,transparent)}
:root[data-tema="oscuro"] .fd-alerta-grave{
  background:color-mix(in srgb,var(--danger-500) 18%,var(--surface-card));
  border-color:color-mix(in srgb,var(--danger-500) 42%,transparent)}
:root[data-tema="oscuro"] .fd-bloque-grave{
  background:color-mix(in srgb,var(--danger-500) 13%,var(--surface-card));
  border-color:color-mix(in srgb,var(--danger-500) 38%,transparent)}
:root[data-tema="oscuro"] .aviso-sync-activo{
  background:color-mix(in srgb,var(--warning-500) 16%,var(--surface-card));
  border-color:color-mix(in srgb,var(--warning-500) 40%,transparent)}
:root[data-tema="oscuro"] .fd-indice-estrecho{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--danger-500) 55%,transparent)}

/* La posición y el tamaño los escribe el JavaScript en --tx, --ty y --escala,
   fotograma a fotograma. Sin transiciones de CSS: si las hubiera, pelearían
   con el seguimiento del ratón. Es UN SOLO elemento en todos los estados. */
/* El tamaño del círculo durante la carga vive AQUÍ y en ningún otro sitio:
   es el valor por defecto de --escala mientras el JavaScript no haya escrito
   nada, y es también el que lee inicio.js para su ESCALA_CENTRO. Si estuviera
   escrito en los dos lados, el primer pintado y el primer fotograma podrían
   no coincidir, y esa diferencia se ve como un pantallazo. */
:root{--escala-carga:1.3;
  /* Lo que tarda el círculo de carga en cruzar entre las nubes y su forma
     final. Antes encadenaba también los pasos de Celestia (CEL_ROSA y
     compañía); Celestia se retiró y sólo queda este cruce. */
  --dur-rosa:1600ms}

/* La opacidad SÍ lleva transición, y sólo ella: es lo único del círculo que
   no escribe el bucle. */
/* El tamaño NO se hace con scale(), y es a propósito. Con una transformación,
   el navegador dibuja el círculo una vez a su tamaño y luego estira esa misma
   imagen: el desenfoque estirado se rompe en escalones y, al crecer, se ve a
   cuadros y a saltos. Escribiendo el ancho de verdad, el círculo se vuelve a
   dibujar a cada tamaño y el degradado sale limpio siempre.

   La transformación se queda sólo con el desplazamiento, que es lo que cambia
   sesenta veces por segundo mientras ronda y lo que tiene que ir por la vía
   barata. El ancho sólo cambia cuando el círculo crece o se achica, que son
   contadas veces.

   AQUÍ HABÍA UN `contain:layout size` Y SE QUITÓ. Lo puse para que cambiar el
   tamaño no arrastrara al resto de la página, y salió caro: el desenfoque de
   dentro asoma por fuera de la caja del marco -para eso es un desenfoque-, y
   al acotar el elemento el navegador compone ese desenfoque dentro de la caja
   y lo recorta justo en su borde. Lo que se ve entonces es un CUADRO alrededor
   del brillo, que es exactamente lo que se rompió en la transición de
   Celestia.

   La lección, por si vuelve la tentación: a un elemento con `filter:blur` no
   se le acota nada. Lo que se dibuja fuera de su caja deja de dibujarse. */
:root{--halo-lado:min(82vmin,660px)}
.halo-marco{position:absolute;left:50%;top:50%;pointer-events:none;
  width:calc(var(--halo-lado) * var(--escala,var(--escala-carga)));
  height:calc(var(--halo-lado) * var(--escala,var(--escala-carga)));
  transition:opacity var(--dur-slow) var(--ease-standard);
  transform:translate(-50%,-50%)
            translate(var(--tx,0px),var(--ty,0px))}
/* El desenfoque lleva transición porque Celestia lo cierra: para que el
   círculo pueda dejar de ser una nube y pasar a ser un disco. */
/* El desenfoque se queda fijo y NO se toca, aunque sea la primera idea que
   viene a la cabeza para suavizar el borde. Este `filter` es el que Celestia
   lleva de 40 a 10 para condensar el círculo en un disco, y esos 1600 ms son
   un paso contado de su transición: cualquier cosa que se meta aquí quedaría
   atrapada en esa misma transición y perseguiría al círculo con medio segundo
   de retraso cada vez que crece.

   Lo que hace que el círculo se vea más degradado cuanto más grande es la
   caída del propio degradado, ahí abajo: va en porcentajes, así que crece con
   él sola y sin que nadie la anime. */
.halo{position:absolute;inset:0;filter:blur(40px);
  transition:filter var(--dur-rosa,1600ms) var(--ease-standard);
  animation:deriva 11s ease-in-out infinite}
@keyframes deriva{
  0%,100%{transform:translate(-2%,-2%) scale(1)}
  33%    {transform:translate(2%,2%)   scale(1.04)}
  66%    {transform:translate(-1%,2%)  scale(.98)}}

/* ---------- EL PASEO VA POR LA TARJETA GRÁFICA (v389) ----------

   Cuando nadie mueve el ratón, el círculo pasea. Lo hacía el JavaScript,
   escribiendo su posición sesenta veces por segundo, y eso era lo más caro de
   toda la web con la pantalla QUIETA: medido, medio hilo principal ocupado en
   un ordenador y el hilo entero en un teléfono, que es lo que hacía esperar a
   cada cambio de sección. Ahora el recorrido es una animación de la propiedad
   `translate`, que el navegador lleva en la tarjeta gráfica sin tocar el hilo
   principal, y el bucle de inicio.js se duerme.

   ES EL MISMO RECORRIDO: una senoide de 22 vw de amplitud y 19,9 s de periodo
   en horizontal (el `sin(fotograma / 190)` de antes, a 60 por segundo) y otra
   de 20 vh y 13,3 s en vertical (`sin(fotograma / 127)`). Una curva
   `easeInOutSine` entre cumbre y cumbre ES una senoide.

   EMPIEZA EN UNA CUMBRE, PARADO, y por eso los fotogramas clave van en
   relativo: inicio.js deja el círculo a 22 vw y 20 vh del centro, y desde ahí
   el bucle baja hasta la cumbre contraria (-44 vw, -40 vh) y vuelve.

   UNA SOLA ANIMACIÓN POR PROPIEDAD, Y ESO NO SE TOCA. Hubo un «arranque» con
   `forwards` delante de cada bucle, sobre el mismo `translate`, y así Chrome
   no lo lleva en la tarjeta gráfica: lo marca como animaciones incompatibles
   y lo pasa al hilo principal, y con una sola animación ahí dentro el
   navegador actualiza TODAS las demás de la página en cada fotograma. Medido
   con las hojas de la casa: 181 recálculos en tres segundos con el arranque,
   2 sin él. El acercamiento a la cumbre lo hace ahora el JavaScript.

   Va en DOS elementos porque son dos periodos distintos: el horizontal en el
   marco y el vertical en la nube de dentro, que ya tenía su `deriva` en
   `transform` -propiedad aparte, así que se suman y no chocan-. Al quitar
   `.paseando`, inicio.js recoge antes dónde estaba y lo pasa a su posición:
   no hay salto. */
@keyframes paseo-x{0%,100%{translate:0 0}50%{translate:-44vw 0}}
@keyframes paseo-y{0%,100%{translate:0 0}50%{translate:0 -40vh}}
.halo-marco.paseando{
  animation:paseo-x 19.9s cubic-bezier(.37,0,.63,1) infinite}
.halo-marco.paseando > .halo{
  animation:deriva 11s ease-in-out infinite,
            paseo-y 13.3s cubic-bezier(.37,0,.63,1) infinite}

/* Tres manchas girando a distinta velocidad: el degradado nunca se repite igual. */
.halo i{position:absolute;inset:0;display:block;border-radius:50%}
.halo i{transition:opacity var(--dur-rosa,1600ms) var(--ease-standard)}
/* La caída hasta transparente llega hasta el borde y pasa por un punto
   intermedio, en vez de cortarse al 82%. Es lo que hace que el círculo se vea
   más degradado cuanto más grande: los porcentajes crecen con él, así que el
   tramo de caída mide el doble cuando el círculo mide el doble, mientras que
   el desenfoque, que va en píxeles, se quedaría igual.

   Los primeros dos puntos de cada uno NO se mueven: hasta ahí llega el rosa
   macizo, y ese es el número que Celestia mide para sacar de él su brillo
   (--celestia-disco, más abajo). Lo que se ha alargado es sólo la cola. */
/* Los dos tonos del círculo salen de `--halo-1` y `--halo-2` (colors.css): en
   claro, los tintes pálidos de siempre; en oscuro, tonos macizos del color
   elegido, para que el círculo contraste sobre el negro en vez de quedar como
   un velo blanquecino. */
.halo i:nth-child(1){background:radial-gradient(closest-side circle at 46% 44%,var(--halo-1) 0%,var(--halo-2) 46%,color-mix(in srgb,var(--halo-2) 45%,transparent) 74%,transparent 100%);
  animation:orbita 9s linear infinite}
.halo i:nth-child(2){background:radial-gradient(closest-side circle at 55% 47%,var(--halo-2) 0%,var(--halo-1) 48%,color-mix(in srgb,var(--halo-1) 45%,transparent) 76%,transparent 100%);
  animation:orbita 13s linear infinite reverse}
.halo i:nth-child(3){background:radial-gradient(closest-side circle at 50% 56%,var(--halo-1) 0%,var(--halo-2) 50%,color-mix(in srgb,var(--halo-2) 45%,transparent) 76%,transparent 100%);
  animation:orbita 17s linear infinite}
@keyframes orbita{to{transform:rotate(360deg)}}

/* ---------- El círculo, volviéndose rosa puro ----------
   Es el paso más largo de la transición porque es el que hay que poder seguir
   con la vista: la nube rosa pálido de siempre se va condensando, sin dejar
   de ser ella, en el círculo rosa de Celestia.

   Y es UNA sola transición, no dos. Antes eran dos -primero la nube se volvía
   un disco rosa liso, y después ese disco se cambiaba por el brillo- y en el
   cambio se veía un salto, porque el disco era de un rosa plano y el brillo
   lleva el degradado de Celestia: se notaba el relevo. Ahora no hay relevo
   que notar. Lo que se enciende mientras las nubes se apagan es directamente
   el brillo, todavía redondo, del tamaño exacto que tenía el círculo y con su
   mismo desenfoque. No hay ningún estado intermedio que pueda desencajar,
   porque no hay ningún elemento intermedio.

   (Aquí vivía `--celestia-disco`, que leía celestia.js para saber de qué
   tamaño nacía el brillo del cielo. Celestia se retiró; el halo de carga
   sigue igual. Ver el degradado de la casa al final del archivo.) */

/* LA ENTRADA VA EN `scale` Y LA RESPIRACIÓN EN `transform`, y no es un
   capricho. El logo lleva las dos animaciones a la vez (ver `.logo-central`),
   y cuando dos animaciones de un mismo elemento tocan la MISMA propiedad
   Chrome no puede llevarlas en la tarjeta gráfica -aunque la de entrada ya
   haya terminado: sigue en la lista-. La respiración pasaba entonces al hilo
   principal y, con una sola animación ahí, el navegador actualiza en cada
   fotograma TODAS las de la página: 180 recálculos en tres segundos con el
   logo quieto, 6 con las propiedades separadas (medido). Se ven igual: sin
   nada más en `transform`, `scale(.55)` y `scale:.55` son lo mismo. Ver el
   punto 21 de CLAUDE.md. */
@keyframes entrarLogo{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
@keyframes respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

body.cargando{overflow:hidden}
/* La página de fondo, quieta mientras hay una tarjeta levantada. Ver
   bloquearElFondo(), en app.js: sin esto, la rueda del ratón sobre el velo
   movía la página de detrás -que al ser `position:fixed` no enseña nada
   nuevo por mucho que se mueva- y parecía que el resto de la ficha no
   existiera. */
body.con-algo-levantado{overflow:hidden}

/* ---------- Vista de inicio ----------
   Sólo el logo centrado y los iconos flotando a su alrededor. */
/* Ocupa la ventana entera y se mete bajo la cabecera (que es translúcida y
   va por encima). Así el centro del escenario coincide con el centro de la
   ventana, que es donde estaba el logo de la pantalla de carga.

   La ventana entera MENOS un píxel, que es el borde de abajo de la cabecera:
   ella mide 73 -sus 72 más el borde- y esto sube 72, así que sin descontarlo
   el documento saca un píxel por debajo de la ventana. Un píxel basta para
   que el navegador pinte la barra de desplazamiento entera, en una pantalla
   en la que no hay absolutamente nada que desplazar. Se descuenta aquí y no
   se toca el -72px: esa medida la lee aterrizar() para el vuelo del logo. */
#vista-inicio{position:relative;padding:0;margin-top:-72px;
  min-height:calc(100vh - var(--border-width));display:flex;align-items:center}

.escenario{position:relative;z-index:1;width:100%;
  min-height:min(64vh,540px);display:flex;align-items:center;justify-content:center}

/* Entra con el mismo zoom que tenía la pantalla de carga y respira sin
   parar de principio a fin. Nada interrumpe esta animación. */
/* `backwards` y no `both`: con `both`, la animación de entrada seguiría
   imponiendo su opacidad final para siempre y el logo no podría apagarse
   al elegir destino. Con `backwards` deja de mandar en cuanto termina. */
.logo-central{position:relative;z-index:1;
  width:var(--logo-inicio);height:var(--logo-inicio);object-fit:contain;
  animation:entrarLogo calc(1500ms * var(--v,1)) var(--ease-standard) backwards,
            respirar 3.2s var(--ease-standard) calc(1500ms * var(--v,1)) infinite;
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard)}

/* ---------- Las imágenes, girando con el matiz de la casa ----------
   El logo y los iconos son PNG de rosa. Cuando alguien pone la plataforma de
   otro color (ver personalizacion.js) las escalas de colors.css rotan su
   matiz, y estas imágenes tienen que rotar EXACTAMENTE lo mismo o la pantalla
   se descose: el fondo azul y un logo todavía rosa. `hue-rotate` conserva el
   brillo y el volumen de cada PNG y sólo le cambia el color; `saturate` lo
   acompaña con la misma rebaja que la escala. Con giro 0 y saturación 1 -el
   rosa de la casa- no tocan nada.

   La foto de perfil queda fuera a propósito: es de la persona, no de la marca.
   El favicon y el badge de las notificaciones también, pero porque son de
   sistema y no hay CSS que los alcance. Y los destellos y la carita de
   Celestia dibujados en SVG tampoco: ésos ya salen del degradado
   #brillo-celestia, que lee las variables --celestia-* de colors.css y por
   tanto giran solos; ponerles el filtro encima los giraría dos veces. Aquí
   sólo van los PNG -icono de Celestia incluido, que sí es un PNG. */
.marca img,
.logo-central,
.cabecera-seccion .logo-seccion img{
  filter:var(--filtro-icono,hue-rotate(calc(var(--tono-giro,0) * 1deg)) saturate(var(--tono-sat,1)));
}

/* El icono de cada orbe -Buscador, Calculadoras, Escalas, Fármacos, Términos,
   Abreviaturas, Celestia, Modo Health Fair- ya lleva SU propia `drop-shadow`
   en `.orbe .cara img`, y la cambia al pasar el ratón. Si el giro del matiz
   fuera ahí, en el mismo selector, esa `drop-shadow` -que va después en el
   archivo- lo borraría entero, y por eso los iconos se quedaban rosas mientras
   el resto de la web ya había cambiado de color. Va en el PADRE `.orbe .cara`:
   el filtro del padre se compone con el del hijo en vez de pelearse con él, y
   el hover, que sólo toca al hijo, no se lo lleva por delante. */
.orbe .cara{
  filter:var(--filtro-icono,hue-rotate(calc(var(--tono-giro,0) * 1deg)) saturate(var(--tono-sat,1)));
}

/* ---------- Acceso ----------
   El panel que pide usuario y contraseña. No es una pantalla: es lo único
   que se le añade al estado de carga, y va colocado igual que los iconos del
   inicio, respecto al centro del escenario. Durante la carga ese centro es
   donde está el logo, así que el panel cae justo debajo sin empujarlo: está
   fuera del flujo y el logo no llega a enterarse de que existe.

   Son dos clases y no una porque el logo y la tarjeta no se van a la vez al
   salir: `body.accediendo` es que el logo ha hecho sitio, y
   `body.acceso-puesto` es que la tarjeta está a la vista. Al entrar se ponen
   casi juntas; al salir se quita primero la de la tarjeta y sólo después la
   del logo, que es lo que hace que se lea como una cosa detrás de otra.

   Hay dos colocaciones. En una pantalla ancha el logo se aparta a la
   IZQUIERDA y la tarjeta aparece a su derecha, los dos a la misma altura. En
   una estrecha eso no cabe -el logo, el hueco y la tarjeta piden 648 px de
   ancho-, así que la tarjeta se queda debajo del logo y lo que se aparta es
   hacia arriba. Cuál de las dos manda lo dice `--acceso-lado`, y lo decide
   esta hoja: acceso.js sólo lo lee para saber en qué dirección medir. */
:root{--acceso-lado:0}

/* Aquí NO hay nada que tape el desplazamiento, y es a propósito. Durante el
   acceso salía barra, y el arreglo está en #vista-inicio, más arriba: sobraba
   un píxel. No se veía antes porque `body.cargando` lo tenía bloqueado, y
   durante el acceso esa clase ya no está -el círculo ronda, no está cargando-,
   así que al quitarla se destapó.

   Se probó a taparlo con `overflow:hidden` aquí y era peor por dos razones.
   Una: con el desbordamiento tapado el navegador deja de reservar el hueco de
   la barra -medido, de 15 px a 0- y lo recupera al entrar, con lo que la
   página se corre de lado justo en la transición; cambiar un salto por otro
   no es arreglarlo. Y dos: dejaría sin salida a quien tenga la ventana tan
   baja que la tarjeta no le quepa. Quitado el píxel, si de verdad sobra
   contenido la barra sale y sirve; si no sobra, no sale. */

/* Colocación de pantalla estrecha: la tarjeta debajo del logo, y entra
   subiendo, igual que los iconos del inicio. */
.acceso{position:absolute;left:50%;z-index:2;
  top:calc(50% + var(--logo-inicio) * 0.5 + var(--sp-7));
  width:min(88vw,400px);
  opacity:0;transform:translate(-50%,14px);
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard),
             transform calc(900ms * var(--v,1)) var(--ease-standard)}
body.acceso-puesto .acceso{opacity:1;transform:translate(-50%,0)}

/* La tarjeta entra un poco después que el logo: primero se abre el hueco y
   después llega ella a ocuparlo. Si entran a la vez, la tarjeta cruza por
   encima del logo mientras éste todavía se está apartando.

   El retraso vive en la clase y no en `.acceso` a posta: así sólo cuenta al
   entrar. Al salir, la clase se quita, con ella se va el retraso y la tarjeta
   empieza a irse en el acto, que es lo que hace falta para que se vea salir
   antes que nada. */
body.acceso-puesto .acceso{transition-delay:calc(300ms * var(--v,1))}

/* Colocación de pantalla ancha: el logo a la izquierda y la tarjeta a su
   derecha, centradas las dos a la misma altura. La tarjeta ya no entra
   subiendo sino desde la derecha, que es de donde viene. */
@media (min-width:860px){
  :root{--acceso-lado:1}
  .acceso{top:50%;
    left:calc(50% + var(--logo-inicio) * 0.5 + var(--sp-8));
    transform:translate(28px,-50%)}
  body.acceso-puesto .acceso{transform:translate(0,-50%)}
}

/* El cristal de la barra de FARMA-Search, con los mismos valores exactos:
   blanco a media opacidad, el fondo desenfocado por detrás y un borde muy
   fino. Es el material de la casa y no hay razón para inventar otro. Lo único
   que cambia es la forma, que aquí no es una píldora sino una tarjeta. */
.acceso-caja{display:flex;flex-direction:column;gap:var(--sp-4);
  background:rgba(var(--cristal-rgb),.62);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-xl);padding:var(--sp-6) var(--sp-5);
  box-shadow:var(--shadow-md)}

/* La tarjeta de solicitar acceso lleva seis campos y no cabe en una pantalla
   de móvil. Se desplaza por dentro en vez de crecer hacia abajo: si creciera,
   el logo que tiene encima -que se aparta lo justo para hacerle sitio, y lo
   mide medirElGrupo- se iría de la pantalla, y con él la mitad del formulario.

   Se le da el alto que quepa y se desplaza sólo lo que le sobra. Lo demás
   -cristal, borde, esquinas- es el de todas. */
.acceso-caja-larga{max-height:min(72vh,640px);overflow-y:auto;
  /* El aire de la derecha es para que la barra de desplazamiento no se coma
     el borde de los campos cuando aparece. */
  padding-right:var(--sp-4);scrollbar-width:thin}

/* No hay título: el título es el logo, que está justo encima y se lee mucho
   mejor que cualquier rótulo que se pusiera aquí. Sólo la entradilla, en la
   tipografía de los textos de sección. */
.acceso-intro{margin:0;text-align:center;font-family:var(--font-display);
  font-size:var(--fs-body-lg);color:var(--text-title);line-height:var(--lh-heading)}

/* La de recuperar sí lleva título, y ahí la entradilla pasa a ser lo que es:
   una explicación, no un rótulo. Por eso baja de tamaño y de peso. */
.acceso-titulo{margin:0;text-align:center;font-family:var(--font-display);
  font-size:var(--fs-h3);color:var(--text-title);line-height:var(--lh-heading)}
.acceso-intro-menor{font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--text-muted);line-height:var(--lh-body)}

/* ---------- EL CRUCE DE DOS TARJETAS ----------

   Un gesto y un solo sitio donde está escrito. Lo usan las tarjetas del acceso
   -entrar, recuperar la contraseña, pedir acceso, elegir contraseña- y las dos
   caras del menú del perfil, que es por donde se entra a Mis Dispositivos.

   Las dos se mueven a la vez y hacia el mismo lado: la que se va se aparta
   apagándose y la que llega entra desde el otro lado. Van juntas a posta, como
   una cinta que corre: si una esperara a la otra se leerían como dos pasos, y
   esto es un solo gesto.

   LA QUE LLEGA VA DELANTE, y eso es lo que se pidió con esas palabras: «una
   tarjeta aparece delante de otra, y al ir hacia atrás la que está encima se
   quita y desvanece». El `z-index` es lo que lo dice; sin él, en el instante en
   que se cruzan, cuál se ve encima depende del orden en que estén escritas en
   el HTML, que no es una decisión, es una casualidad.

   La que se va se saca del flujo (`position:absolute`). Es lo que permite que
   la caja tome ya el alto de la que entra, de modo que lo de alrededor se
   recoloque durante el viaje y no de un tirón al final.

   El viaje es de 44 y no de 38 píxeles, y dura un poco más. Con menos, el
   desplazamiento casi no se veía y el cruce se leía como un simple fundido; lo
   que se quiere es que se vea pasar una por delante de la otra.

   `will-change` mientras dura y no siempre: le dice al navegador que prepare
   una capa aparte para estas dos cajas, con lo que el viaje deja de repintarse
   fotograma a fotograma. Dejarlo puesto todo el rato sería al revés, una capa
   permanente por cada tarjeta gastando memoria sin que nada se mueva. */
.cruzable{transition:opacity calc(560ms * var(--v,1)) var(--ease-standard),
                     transform calc(560ms * var(--v,1)) var(--ease-standard)}
.cruzable.entrando,.cruzable.saliendo{will-change:transform,opacity}

.cruzable.saliendo{position:absolute;top:0;left:0;width:100%;z-index:0;
  pointer-events:none;opacity:0}
.cruzable.saliendo.hacia-la-derecha{transform:translateX(44px)}
.cruzable.saliendo.hacia-la-izquierda{transform:translateX(-44px)}

/* El punto de partida de la que entra. Se le quita en cuanto empieza el
   cruce y desde ahí se deja caer en su sitio. Va delante: es la que llega. */
.cruzable.entrando{opacity:0}
.cruzable.entrando.desde-la-izquierda{transform:translateX(-44px)}
.cruzable.entrando.desde-la-derecha{transform:translateX(44px)}
.cruzable:not(.saliendo){position:relative;z-index:1}

/* La caja que las contiene. Dos cosas y ninguna se mueve: `position:relative`
   porque la tarjeta que se va se cuelga de ella en absoluto, y `overflow:hidden`
   para recortar los 44 px de viaje.

   Aquí hubo además una `transition:height`: la caja crecía o encogía con las
   tarjetas, porque cada una medía lo suyo. No llegaba a interpolar -soltaba el
   salto entero de un fotograma al final del cruce- y se quitó de raíz: las
   caras que se cruzan miden ya todas lo mismo, así que no hay alto que animar.
   Ver `.perfil-caras` y cruzarTarjetas(). */
.caja-que-cruza{position:relative;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .cruzable,.caja-que-cruza{transition:none}
}

/* ---------- El enlace de la tarjeta ----------
   Es un botón, no un enlace, porque no lleva a ninguna parte: cambia lo que
   se ve aquí mismo. Pero se lee como un enlace, que es lo que la gente busca
   con la vista debajo de una contraseña. */
.acceso-enlace{align-self:center;padding:0;
  font-size:var(--fs-sm);color:var(--text-link);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-standard)}
.acceso-enlace:hover{color:var(--text-link-hover)}
.acceso-enlace:focus-visible{outline:none;box-shadow:var(--shadow-focus);
  border-radius:var(--radius-xs)}

/* El botón, a lo ancho: en un formulario de dos campos es el único sitio a
   donde se va, así que no tiene que competir con nada.

   Y de cristal, como la barra del buscador y como la propia tarjeta: el rosa
   va en degradado y translúcido, con el fondo desenfocado por detrás, así que
   el círculo que ronda se le ve pasar por debajo y el botón cambia de matiz
   según por dónde ande. Es el material de la casa, aquí también.

   Los dos rosas son los oscuros de la marca -rose-700 y rose-900- y no los
   claros, y no es por gusto: con los claros a esta transparencia el texto
   crema encima se quedaba en 2,2 de contraste, ilegible. Así se mide 5,8, que
   ya está por encima del mínimo. Si alguien sube la transparencia, que mida
   antes: se aclara el fondo y el texto se pierde. */
.acceso .boton{width:100%;justify-content:center;margin-top:var(--sp-1);
  background:linear-gradient(135deg,
              color-mix(in srgb,var(--rose-700) 86%,transparent) 0%,
              color-mix(in srgb,var(--rose-900) 90%,transparent) 100%);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(var(--cristal-rgb),.38);
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard)}
.acceso .boton:hover{background:linear-gradient(135deg,
              color-mix(in srgb,var(--rose-700) 94%,transparent) 0%,
              color-mix(in srgb,var(--rose-900) 97%,transparent) 100%);
  box-shadow:var(--shadow-md)}
.acceso .boton[disabled]{opacity:.55;cursor:default;box-shadow:var(--shadow-sm)}
.acceso .boton[disabled]:hover{background:linear-gradient(135deg,
              color-mix(in srgb,var(--rose-700) 86%,transparent) 0%,
              color-mix(in srgb,var(--rose-900) 90%,transparent) 100%)}

/* El ojo vive dentro de la caja del campo, igual que el aspa de limpiar vive
   dentro de la barra del buscador, y con el mismo comportamiento: discreto
   hasta que se pasa por encima. */
.acceso .ojo{flex:none;display:flex;align-items:center;color:var(--text-muted);
  padding:0;transition:color var(--dur-fast) var(--ease-standard)}
.acceso .ojo:hover{color:var(--brand-primary)}
.acceso .ojo:focus-visible{outline:none;box-shadow:var(--shadow-focus);
  border-radius:var(--radius-sm)}
/* La raya del ojo tachado está siempre dibujada; lo que se enciende y se
   apaga es ella sola. Con dos iconos distintos, uno podría quedar descuadrado
   respecto al otro; con uno solo, es imposible. */
.acceso .ojo .raya{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.acceso .ojo.viendo .raya{opacity:1}

/* El aviso de error no se despega del campo al que se refiere: aquí el margen
   de arriba que trae .aviso sobra, porque la caja ya reparte el aire. */
.acceso .aviso{margin-top:0}

.acceso-pie{margin:0;text-align:center;
  font-size:var(--fs-xs);color:var(--text-muted)}

/* AQUÍ ESTABA «¿Cómo te llamas?», y se ha quitado entera con su HTML y su
   JavaScript. Ocupaba el sitio del logo la primera vez que alguien entraba.

   No se ha quitado por gusto ni por sitio: es que ese dato ya lo tenemos. La
   persona escribe su nombre, su apellido, su cédula y lo demás en el
   formulario de solicitud, y al aceptarla se le pone a la cuenta y se guarda
   su ficha. Preguntárselo otra vez al entrar era pedirle a alguien un dato que
   acababa de dar, y encima daba la sensación de que no se había leído.

   Ver acceso.js, inicio.js y api/_perfiles.js. */

/* ---------- El logo hace sitio ----------
   El logo y la tarjeta tienen que quedar centrados COMO GRUPO, no cada uno
   por su lado. Centrado cada uno por su lado, el logo se queda en el medio y
   la tarjeta entera cuelga de él: entre los dos ocupan el doble hacia un lado
   que hacia el otro y el grupo sale descentrado. Medido antes de arreglarlo,
   en una ventana de 720 px de alto el botón de Entrar caía 148 px por debajo
   del borde.

   Así que el que se aparta es el escenario entero -logo y tarjeta, que es lo
   único que hay encendido-, lo justo para que el grupo quede centrado. En
   pantalla ancha se aparta hacia la izquierda y en estrecha hacia arriba, y
   es la misma cuenta en los dos casos, sólo que cambiando de eje. Las dos
   medidas se escriben siempre: la que no toca vale cero y no estorba, así que
   aquí no hay que preguntar nada.

   Y por eso el logo se mueve: se aparta al abrirse la tarjeta y vuelve a su
   sitio al cerrarse, con la misma curva y el mismo tiempo que todo lo demás.
   No es un efecto aparte, es el mismo gesto de siempre: hacer sitio y
   recuperarlo. La transición vive en .escenario y no en el logo porque el
   logo ya tiene dueño para su `transform` -la respiración- y dos animaciones
   no pueden compartirlo. Es la misma razón por la que .orbe y .cara van
   separadas.

   Cuánto hay que apartarse depende de lo grande que sea la tarjeta, y eso
   desde aquí no se sabe: lo mide acceso.js, igual que app.js mide y escribe
   --ancho-corto para la barra acortada. */
.escenario{transition:transform calc(900ms * var(--v,1)) var(--ease-standard)}
body.accediendo .escenario{
  transform:translate(calc(var(--izquierda-acceso,0px) * -1),
                      calc(var(--subida-acceso,0px)    * -1))}

/* ---------- Iconos flotantes ----------
   Van colocados con --x/--y respecto al centro del escenario.
   La posición la fija .orbe; el flotar, el hijo .cara: así una cosa
   no pisa la otra (ambas usarían transform). */
.orbe{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));
  transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  /* `left` y `top` van SIN retraso y más rápidos que la entrada, y son lo que
     suaviza el cambio de tamaño de la ventana: la colocación es una expresión
     CSS contra el viewport, así que al estrechar la ventana el navegador la
     recalcula al instante y los iconos daban un salto por fotograma. Con esto
     se deslizan hasta su sitio.

     No estorban a la coreografía de entrada: ahí los iconos nacen ya con su
     `left`/`top` puestos -pintarOrbes los escribe al crearlos-, así que no hay
     ningún valor anterior del que partir y la transición ni se dispara. Lo que
     entra sigue siendo la opacidad y la escala, cada una con su turno. */
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard) calc(var(--i) * calc(600ms * var(--v,1))),
             transform calc(900ms * var(--v,1)) cubic-bezier(.2,.9,.3,1) calc(var(--i) * calc(600ms * var(--v,1))),
             left calc(280ms * var(--v,1)) var(--ease-standard),
             top calc(280ms * var(--v,1)) var(--ease-standard)}
/* Un icono SÓLO responde al tacto cuando está de verdad puesto (dentro, en el
   inicio, con los iconos encendidos). Invisible = no clicable, nunca. */
body.orbes .orbe{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
body.accediendo .orbe,body.recogiendo-inicio .orbe{pointer-events:none}

/* Los iconos son ilustraciones del mismo estilo que el logo, así que van
   sueltas: sin disco ni borde detrás, igual que el logo del centro. */
.orbe .cara{width:var(--ancho,var(--orbe-tam));height:var(--orbe-tam);display:block;
  transition:width calc(280ms * var(--v,1)) var(--ease-standard),
             height calc(280ms * var(--v,1)) var(--ease-standard);
  animation:flotar var(--dur-flote,7s) ease-in-out var(--retraso,0s) infinite}
.orbe .cara img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--rose-900) 16%,transparent));
  transition:transform var(--dur-base) var(--ease-standard),
             filter var(--dur-base) var(--ease-standard)}
.orbe:hover .cara img,.orbe:focus-visible .cara img{transform:scale(1.09);
  filter:drop-shadow(0 12px 26px color-mix(in srgb,var(--rose-900) 30%,transparent))}
.orbe:focus-visible{outline:none}
/* AQUÍ PONÍA `white-space:nowrap`, y se ha cambiado por un ancho máximo.

   Con los cuatro primeros iconos daba igual: «Buscador», «Calculadoras»,
   «Escalas» y «Celestia» son una palabra cada uno y no hay nada que partir.
   «Modo Health Fair» son tres, y en un teléfono el rótulo se salía por el
   borde derecho de la pantalla, porque ese icono va justo en esa esquina.

   Quince caracteres es la medida: deja «Calculadoras» -que es el más largo de
   los de una línea- entero, y parte el que de verdad no cabe. Sin clases
   nuevas y sin tocar a los demás. */
/* El rótulo acompaña al icono. Con el icono encogido, la letra de siempre lo
   desbordaba por los lados y era ella la que chocaba con el de al lado. */
.orbe .nombre{font-family:var(--font-display);
  font-size:clamp(var(--fs-xs), calc(var(--orbe-tam) * 0.155), var(--fs-body));
  font-weight:var(--fw-semibold);color:var(--text-title);
  text-align:center;max-width:15ch;text-wrap:balance}

/* Recorrido corto pero perceptible, y con un punto de escala para que
   recuerde a la deriva del círculo de carga. */
@keyframes flotar{
  0%,100%{transform:translate(0,0) scale(1)}
  20%    {transform:translate(9px,-14px) scale(1.02)}
  40%    {transform:translate(-6px,-22px) scale(1)}
  60%    {transform:translate(-11px,-9px) scale(.985)}
  80%    {transform:translate(5px,4px) scale(1.01)}}

/* Al elegir destino se apagan los otros dos iconos y ya está: en la pantalla
   se quedan el logo, el icono pulsado y el círculo. El degradado sigue
   moviéndose con normalidad: no se toca. */
body.enfocando .orbe:not(.elegido){opacity:0;transition-delay:0ms}

/* Después el icono simplemente se apaga donde está: ni crece, ni encoge,
   ni se mueve. Quien vuelve al centro es el círculo, el mismo que se achicó.
   El tamaño se fija aquí porque al retirar la clase `orbes` el icono
   volvería a su escala reducida y se vería encoger mientras se apaga. */
.orbe.apagando{opacity:0 !important;
  transform:translate(-50%,-50%) scale(1) !important;
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard) !important}

/* Al elegir destino, el logo no cambia de nada: ni de tamaño, ni de sitio,
   ni de opacidad. Sigue respirando igual que en la carga, y por eso no hay
   aquí ninguna regla que lo toque. Quien se mueve es el círculo, y de eso
   se encarga inicio.js. */

@keyframes desvanecer{from{opacity:0}to{opacity:1}}

/* (Las reglas de .revelable van al final del archivo: ver "Aparición al
   desplazarse". Tienen que declararse después de las tarjetas para que su
   transición no quede anulada por la de éstas.) */

/* Quien haya pedido menos movimiento entra directo, sin vuelo ni respiración. */
@media (prefers-reduced-motion:reduce){
  .halo,.halo i,
  .logo-central,.orbe .cara{animation:none}
  .orbe,.orbe .cara{transition:none}
  .halo-marco{transition:none}
  /* El paseo tampoco: inicio.js ya no lo arranca, y esto lo asegura. */
  .halo-marco.paseando,.halo-marco.paseando > .halo{animation:none}
}

/* En pantallas estrechas los iconos se apilan bajo el logo. */
/* En pantallas estrechas los iconos se acercan al logo, pero siguen
   colocados alrededor: el logo debe quedar centrado en la ventana para
   que el relevo con la pantalla de carga siga siendo invisible. */
@media (max-width:720px){
  :root{--orbe-tam:clamp(58px, 17.5vmin, 72px)}
  /* En un teléfono los iconos se comían la pantalla y el logo del centro
     dejaba de mandar, así que aquí el icono va a su propia escala: más
     pequeño en proporción y con su propio techo. Los 66 px de siempre siguen
     siendo la referencia -son los que salen en un teléfono de 375 px de
     ancho-, sólo que ahora no son un número fijo sino el resultado de la
     misma regla que arriba. */
  .orbe .cara{width:var(--ancho,var(--orbe-tam));height:var(--orbe-tam)}
  .orbe .nombre{font-size:var(--fs-sm)}
}

.eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--brand-accent);font-weight:var(--fw-bold);margin:0 0 var(--sp-3)}

/* ---------- Cambiar de sección desde la barra ----------
   Se apaga lo que hay MENOS EL LOGO, que es el que viaja. Ni la sección
   entera ni el círculo: sólo su contenido. Ver irDesdeLaBarra() en inicio.js.

   La salida dura lo mismo para todo (380 ms) para que se lea como una sola
   cosa apagándose y no como varias a destiempo. */
body.saliendo-seccion .cabecera-seccion h2,
body.saliendo-seccion .cabecera-seccion .intro,
body.saliendo-seccion .azulejo,
body.saliendo-seccion .rejilla > .tarjeta,
body.saliendo-seccion #ficha,
body.saliendo-seccion #panel-buscador,
body.saliendo-seccion #panel-calculadora,
body.saliendo-seccion #panel-escala{
  opacity:0 !important;
  transition:opacity calc(380ms * var(--v,1)) var(--ease-standard) !important}

/* Al salir del inicio, los iconos se recogen todos a la vez: sin el
   escalonado de la entrada, que aquí duraría casi dos segundos. */
body.recogiendo-inicio .orbe{opacity:0;transform:translate(-50%,-50%) scale(.86);
  transition:opacity calc(380ms * var(--v,1)) var(--ease-standard),
             transform calc(380ms * var(--v,1)) var(--ease-standard)}

/* Al volver al inicio, el logo del centro no entra desde cero: releva a uno
   que ya está posado en su sitio, así que se le quita `entrarLogo` y su
   retraso, y se queda sólo respirando. */
body.logo-puesto .logo-central{
  animation:respirar 3.2s var(--ease-standard) infinite}

.seccion{padding:var(--sp-8) 0}
.seccion > .contenedor > h2{font-size:var(--fs-h2);margin-bottom:var(--sp-2)}
.seccion .intro{color:var(--text-muted);margin:0 0 var(--sp-6);max-width:var(--container-narrow)}
.rejilla{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Una fila de insignias, separadas. Esta regla no existía suelta -sólo dentro
   de una ficha- y por eso en la tarjeta de una solicitud la universidad y la
   clasificación salían pegadas: sin `gap` lo único que las separaba era el
   espacio en blanco del HTML, que a ojo no es una separación.

   Y NO SE TOCA EL MARGEN, que es lo que rompió la previsualización de una
   ficha. Aquí ponía `margin:0`, escrito por costumbre al declarar un `<p>`, y
   se llevó por delante el margen que el navegador le da de serie: la etiqueta
   del grupo se quedó pegada al «Posología» de debajo. Ese hueco no lo ponía
   ninguna regla nuestra, y por eso no se veía venir.

   Donde el margen tiene que ser otro, ya lo dice quien manda: la cabecera de
   una ficha (`.ficha .encabezado .etiquetas`) y las tarjetas del panel
   (`.tarjeta p`). Los dos pesan más que esta regla, así que siguen ganando.

   La lección es la misma que con el menú del perfil, y van tres: al declarar
   una regla suelta para algo que ya existía, se pone SÓLO lo que se viene a
   arreglar. Todo lo demás que se escriba de más se lo está quitando a alguien. */
.etiquetas{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:var(--sp-5)}

/* La de una solicitud, del cristal de la casa y no de papel. En el panel
   conviven con los azulejos de cifras y con los sistemas, que ya son de
   cristal, y una tarjeta blanca en medio se lee como de otra pantalla. Son los
   mismos cuatro valores que el azulejo, cogidos de la misma variable: ver
   «EL CRISTAL DE LA CASA» en colors.css. */
/* `.cristal` es el mismo cristal con otro nombre, y comparten declaración a
   propósito: son la misma superficie. Se usa en las tres cajas del índice de
   Fichas, que viven ahí abajo entre azulejos y sistemas que ya son de cristal;
   una tarjeta blanca en medio se lee como de otra pantalla. */
.tarjeta.solicitud,
.tarjeta.cristal{
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
.tarjeta.solicitud:hover{background:var(--cristal-vivo);
  border-color:var(--border-strong);box-shadow:var(--shadow-md)}
/* La del índice NO se ilumina al pasar por encima: no es una tarjeta que se
   pulse, es un formulario donde se está trabajando, y una superficie que
   cambia mientras se teclea dentro distrae sin decir nada. */
.tarjeta.cristal{margin-top:var(--sp-5)}
.mando-raya{border:0;border-top:1px solid var(--cristal-borde);
  margin:var(--sp-5) 0}
/* La flecha de arriba del primero y la de abajo del último no llevan a
   ninguna parte. Se apagan en vez de esconderse: escondiéndolas, los botones
   de cada renglón bailan de sitio y el ojo pierde la columna. */
.sistema-quitable button[disabled]{opacity:.18;cursor:default}
.sistema-quitable button[disabled]:hover{opacity:.18;color:inherit}
/* Las flechas no son un borrado: sólo el aspa se pone roja al acercarse. */
.sistema-quitable button:nth-child(-n+3):hover{color:var(--brand-primary)}
.tarjeta.elevada{box-shadow:var(--shadow-md)}
.tarjeta h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.tarjeta p{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}

.tarjeta-boton{text-align:left;width:100%;
  transition:box-shadow var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard)}
.tarjeta-boton:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}

/* ---------- Botones ----------

   LA FORMA ES DE LOS DOS, y esto arregla un fallo que se veía por toda la web.

   `.boton-suave` sólo traía el color y el borde: daba por hecho que iría
   SIEMPRE acompañado de `.boton`, que era quien ponía la forma -la píldora, el
   relleno, el peso de la letra-. Y en la práctica casi nadie lo escribía así:
   «Copiar al Portapapeles» en las gráficas, «Volver» en los juegos, «Mis
   Ferias», los de Vaccini y los del panel llevaban `class="boton-suave"` a
   secas. Con el `button{border:0;background:none}` de arriba, lo que quedaba
   era un botón del navegador sin pintar: cuadrado, apretado y ajeno a la casa.

   Así que la forma pasa a ser de los dos y el color es lo único que los
   separa, que es lo que decían los comentarios que hacían desde el principio.
   Quien ya escribía `class="boton boton-suave"` no nota nada: son los mismos
   valores. */
.boton,.boton-suave{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-pill);
  font-weight:var(--fw-semibold);text-align:center;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
.boton{background:var(--brand-primary);color:var(--text-onbrand)}
.boton:hover{background:var(--rose-600)}
.boton:active,.boton-suave:active{transform:scale(.98)}
.boton:focus-visible,.boton-suave:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* El segundo botón de una pareja: el que no es la acción principal. Mismo
   tamaño y misma forma, pero hueco, para que se vea que no es el que se pulsa
   por costumbre. Rechazar a alguien no debe estar a la misma altura visual
   que aceptarlo. */
.boton-suave{background:none;color:var(--brand-primary);
  border:1px solid var(--border-strong)}
.boton-suave:hover{background:var(--surface-tint);border-color:var(--brand-primary)}
/* Mientras se está creando la cuenta y mandando el correo, los botones no se
   pueden volver a pulsar. Y se nota que no se pueden. */
.boton:disabled,.boton-suave:disabled{opacity:.5;cursor:default}
.boton:disabled:hover{background:var(--brand-primary)}
.boton-suave:disabled:hover{background:none}

/* ---------- El panel: pestañas ----------
   Con una sola pantalla no se enseñan (lo decide panel.js): un menú de una
   opción no es un menú, es el título repetido. */
.panel-pestanas{display:flex;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-6);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-subtle)}
.panel-pestanas button{padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.panel-pestanas button:hover{background:var(--surface-tint);color:var(--brand-primary)}
.panel-pestanas button[aria-current]{background:var(--brand-primary);color:var(--text-onbrand)}

/* ---------- El panel: el resumen ----------
   Los azulejos son los MISMOS del mosaico del buscador, con su cristal y su
   desenfoque sobre el círculo rosa. Aquí sólo se cambian dos cosas: caben
   cuatro por fila en vez de tres, porque lo que llevan dentro es un número y
   no una ilustración, y la cifra, que no existía en ninguna otra parte de la
   web y es lo único de aquí abajo que se ha tenido que inventar. */
.resumen-rotulo{font-family:var(--font-display);font-size:var(--fs-h3);
  color:var(--text-title);margin:0 0 var(--sp-4)}
.resumen-rotulo + .mosaico{margin-bottom:var(--sp-7)}

/* OJO con los nombres dobles de aquí abajo -`.mosaico.mosaico-datos` en vez
   de `.mosaico-datos` a secas-, que no son un adorno. `.mosaico` y `.azulejo`
   se declaran MÁS ABAJO en este archivo, y entre dos reglas que pesan lo
   mismo gana la última: escritas con un solo nombre, éstas perdían y no se
   aplicaba ni una. Se vio midiendo -salían tres columnas en vez de cuatro y el
   fondo de aviso no aparecía-, que a ojo habría pasado por un capricho del
   navegador.

   Se arregla con el nombre doble y no moviendo el bloque al final, porque así
   deja de importar dónde esté: mañana alguien mueve una sección y esto sigue
   funcionando. */

/* `auto-fit` y no tres columnas fijas: estos azulejos son estrechos y su
   número cambia según lo que cada uno pueda ver, así que se colocan solos.
   Con `minmax` no bajan de 190 y no hace falta ningún corte por ancho. */
.mosaico.mosaico-datos{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  max-width:100%}
@media (max-width:880px){
  .mosaico.mosaico-datos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    max-width:100%}
}

/* Un poco más apretado que el azulejo del buscador: allí hay una ilustración
   de 92 px y aquí una línea de texto. Con el mismo aire se veían huecos. */
.azulejo.azulejo-dato{padding:var(--sp-5) var(--sp-5) var(--sp-4);gap:2px}
/* ---------- LAS CIFRAS DEL RESUMEN NO SE MUEVEN, NINGUNA ----------

   Aquí el hover estaba apagado sólo para las que no son `button`, así que
   «Solicitudes Esperando» y «Miembros» -las dos únicas que llevaban a su
   pestaña- se levantaban, se aclaraban y se les marcaba el borde al pasar por
   encima, mientras las de al lado no hacían nada. Ernesto las mandó igualar, y
   después quitó también la navegación: hoy NINGÚN azulejo de cifra hace nada
   al tocarlo, así que ninguno debe parecer que lo hace. Ver `azulejoDe` en
   panel-resumen.js.

   Con tres nombres pesa más que `.azulejo:hover`, así que gana aunque esté más
   arriba en el archivo. El anillo de `:focus-visible` se queda por si mañana
   alguno vuelve a ser un botón: no se ve con el ratón y no estorba a nadie.

   QUEDARSE QUIETO ES CONSERVAR LO QUE CADA UNO TENGA, no pintarlos todos de
   blanco. Escrito con `var(--cristal)` a pelo, «Solicitudes Esperando» perdía
   su ámbar al pasar el ratón: es un azulejo `.azulejo-urge`, y esta regla pesa
   más que la suya. Se vio midiendo el color al vuelo -se iba de
   `color(srgb .98 .95 .89)` a blanco-, que a ojo pasa por un reflejo del
   cristal. Así que cada azulejo deja dicho en dos variables cómo es en reposo
   y aquí sólo se vuelven a poner; el que no diga nada se queda con el cristal
   de siempre, y el tono que se añada mañana lo hereda sin tocar esto. */
.azulejo.azulejo-dato{cursor:default}
.azulejo.azulejo-dato:hover{
  background:var(--azulejo-fondo,var(--cristal));
  border-color:var(--azulejo-borde,var(--cristal-borde));
  box-shadow:var(--shadow-xs);transform:none}

/* La cifra, en Lora y en el rosa de la marca: es lo primero que se lee y a lo
   que se viene. Va con `tabular-nums` para que al refrescarse un número no
   baile de ancho, y con la línea apretada para que quede pegada a su rótulo y
   se lean como una sola cosa. */
.azulejo-cifra{display:block;font-family:var(--font-display);
  font-size:var(--fs-h1);line-height:var(--lh-tight);
  color:var(--brand-primary);font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-display)}
/* El rótulo, debajo y pequeño: aquí el peso lo lleva la cifra. */
.azulejo-dato h3{font-size:var(--fs-h4);color:var(--text-title)}
.azulejo-dato p{font-size:var(--fs-xs);color:var(--text-muted)}

/* Lo que pide que se mire: solicitudes esperando, Celestia apagada. No es un
   color de peligro -no hay nada roto- sino el de aviso, el mismo de las
   insignias caducadas, para que sea el mismo idioma en toda la web. */
/* Su color va en las dos variables que lee la regla de «quedarse quieto» -ver
   `.azulejo-dato` más arriba-, y de ahí se pinta. Así el ámbar se declara una
   sola vez y sigue puesto también al pasar el ratón por encima.

   Aquí había además un aclarado al pasar por encima y se ha quitado con los
   demás: estos azulejos son cifras quietas, y «Solicitudes Esperando» es justo
   una de las dos que se movían. */
.azulejo.azulejo-urge{--azulejo-fondo:color-mix(in srgb,var(--warning-100) 62%,var(--cristal));
  --azulejo-borde:var(--warning-500);
  border-color:var(--azulejo-borde);background:var(--azulejo-fondo)}
.azulejo-urge .azulejo-cifra{color:var(--warning-500)}

/* ---------- El panel: las fichas ----------
   Ninguno de estos nombres existe en otra parte del archivo (comprobado), así
   que aquí no hace falta el nombre doble que sí necesitaba el resumen. Lo que
   sí se reutiliza entero es lo de dentro: `.campo`, `.entrada`, `.boton` y
   `.insignia` son los de siempre y no se tocan. */

.fichas-barra{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.fichas-cuenta{font-size:var(--fs-sm);color:var(--text-muted)}
.fichas-cuenta strong{color:var(--brand-primary);font-family:var(--font-display);
  font-size:var(--fs-body-lg)}

/* ---------- UN SISTEMA ES UN AZULEJO ----------

   Esto era una tarjeta de papel con un borde gris, y ahora es del mismo
   cristal que los azulejos del resumen y del buscador: el mismo velo, el mismo
   desenfoque de 24, el mismo borde blanco y el mismo redondeo. No es que se
   parezca; son los mismos cuatro valores. Si algún día cambia el material de
   la casa, cambia en `.azulejo` y esto le sigue.

   El motivo es el de siempre: dos superficies que hacen lo mismo -contener una
   lista que se abre- no pueden estar hechas de materiales distintos según en
   qué pantalla estén. Y encima, en esta pantalla convivían las dos: las dos
   cifras de arriba en cristal y los sistemas justo debajo en papel, uno encima
   del otro. Se veía el remiendo.

   Vale para los sistemas de Fichas y para las categorías de Abreviaturas, que
   comparten estas clases. Uno se arregla y se arreglan los dos. */
.sistema{border-radius:var(--radius-xl);margin-bottom:var(--sp-3);overflow:hidden;
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
/* Abierto pesa un poco más, como el azulejo al pasar por encima: es la misma
   manera de decir «éste». */
.sistema.abierto{background:var(--cristal-medio);
  border-color:var(--border-strong);box-shadow:var(--shadow-md)}
/* `.sistema-cabeza` es la misma cabecera con menos cosas dentro -la del
   historial de solicitudes, que sólo lleva flecha, nombre y cuenta- y NO tenía
   ni una regla: se quedaba sin acolchado y el rótulo salía pegado al borde de
   arriba y al de la izquierda de la tarjeta. Va con la de al lado en vez de
   tener las suyas propias, que es lo que hay que hacer cuando dos cosas son la
   misma: si mañana cambia el acolchado, cambia en las dos.

   Sólo se aparta en una cosa: aquí no hay nada a la derecha, así que sus tres
   piezas van juntas a la izquierda en vez de repartirse a los extremos. */
.sistema-cabecera,
.sistema-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:var(--sp-4) var(--sp-5);text-align:left;cursor:pointer;user-select:none;
  transition:background var(--dur-fast) var(--ease-standard)}
.sistema-cabeza{justify-content:flex-start;gap:var(--sp-3)}
.sistema-cabecera:hover,
.sistema-cabeza:hover{background:var(--cristal-vivo)}
.sistema-cabecera:focus-visible,
.sistema-cabeza:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Bloque Izquierdo: Icono + Nombre + Burbuja */
.sistema-bloque-izq{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex:1}
.sistema-flecha{display:flex;flex:none;color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-standard)}
.sistema.abierto .sistema-flecha{transform:rotate(90deg)}
.sistema-nombre{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--text-title);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sistema-cuenta{flex:none;min-width:30px;text-align:center;
  padding:2px var(--sp-2);border-radius:var(--radius-pill);
  background:var(--surface-tint);color:var(--brand-primary);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums}

/* Bloque Derecho: Botón + y Equipo */
.sistema-bloque-der{display:flex;align-items:center;gap:var(--sp-4);flex-shrink:0}
.boton-mas-asignar{flex:none;width:28px;height:28px;border-radius:50%;
  border:1.5px dashed var(--border-strong);background:rgba(var(--cristal-rgb),.6);
  color:var(--brand-primary);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.boton-mas-asignar:hover{background:var(--rose-200);border-color:var(--brand-primary);
  border-style:solid;transform:scale(1.1)}

.sistema-equipo-fila{display:flex;align-items:center;gap:var(--sp-4)}
.sistema-equipo-col{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.sistema-equipo-titulo{font-size:10px;font-weight:var(--fw-semibold);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sistema-avatares-lista{display:flex;align-items:center}
.sistema-sin-asignar{font-size:11px;color:var(--text-muted);font-style:italic}

.sistema-cuerpo{padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--cristal-borde)}
.sistema-vacio{padding:var(--sp-5) 0;color:var(--text-muted);font-size:var(--fs-sm)}

/* Dentro de un sistema, los fármacos separados por Borrador/En Revisión/
   Revisado/Publicado: con la CSS importada algunos pasan de cincuenta
   fármacos, y encontrar "los que ya están para publicar" a ojo entre todos
   los demás es justo lo que se pidió arreglar. El grupo que no tiene ninguno
   no se pinta -ver porEstadoDelSistema() en panel-fichas.js-. */
.fichas-estado-grupo + .fichas-estado-grupo{margin-top:var(--sp-4)}
.fichas-estado-titulo{display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.fichas-estado-cuenta{color:var(--ink-300)}

/* Responsividad Móvil (max-width: 768px) */
@media (max-width:768px){
  .sistema-cabecera{flex-direction:column;align-items:stretch;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
  .sistema-bloque-izq{width:100%;justify-content:flex-start}
  .sistema-bloque-der{width:100%;flex-direction:column;align-items:stretch;gap:var(--sp-2);
    padding-top:var(--sp-2);border-top:1px dashed var(--border-subtle)}
  .sistema-equipo-fila{flex-direction:column;align-items:stretch;gap:var(--sp-2);width:100%}
  .sistema-equipo-col{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
  .boton-mas-asignar{align-self:flex-start}
}

/* ---------- LO QUE SE DESPLIEGA ----------

   Una sola regla para los sistemas de Fichas, las categorías de Abreviaturas y
   los renglones de Miembros. Son el mismo gesto -se pulsa una cabecera y lo de
   debajo se abre-, así que es el mismo movimiento y no tres parecidos.

   El truco es `grid-template-rows` de 0fr a 1fr. Hace falta porque no se puede
   animar hasta `height:auto`: el navegador no sabe a qué alto va, y la
   alternativa de siempre -medirlo con JavaScript y escribirlo en píxeles- se
   rompe en cuanto el contenido cambia de tamaño solo, que aquí pasa
   constantemente (un aviso que aparece, un campo que crece al escribir). Una
   rejilla de una fila sí sabe cuánto mide su contenido y sí se puede
   interpolar, y así el alto lo sigue decidiendo el contenido y no un número
   apuntado en algún sitio.

   El `min-height:0` no es de adorno: sin él, un hijo de rejilla se niega a
   encogerse por debajo de su contenido y la fila se queda abierta a 0fr.
   Y el `overflow:hidden` es lo que recorta lo que todavía no cabe.

   Y HACE FALTA UN ENVOLTORIO VACÍO dentro, `.desplegable-dentro`, que parece
   de sobra y no lo es. Se vio midiéndolo: cerrado, el renglón seguía ocupando
   49 píxeles en vez de cero. `min-height:0` pone a cero el CONTENIDO de la
   caja, pero su relleno y su borde siguen ahí -24 arriba, 24 abajo y una línea
   de uno-, y esos 49 no los quita nada. Así que el hijo de la rejilla tiene
   que ser una caja pelada, sin relleno ni borde, y el relleno se queda donde
   estaba, un nivel más adentro.

   Lo cerrado lleva además `inert` desde el JavaScript, porque estar a cero de
   alto no lo saca del camino del tabulador ni de un lector de pantalla.

   Y el contenido se enciende un poco más tarde de lo que tarda en abrirse el
   hueco, no a la vez: primero se hace sitio y después llega lo que va dentro.
   Al revés se ve el texto arrugándose contra el borde mientras crece. */
.desplegable{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease-standard)}
.desplegable > *{overflow:hidden;min-height:0;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}

.sistema.abierto > .desplegable,
.fila-gente.abierta > .desplegable{grid-template-rows:1fr}
.sistema.abierto > .desplegable > *,
.fila-gente.abierta > .desplegable > *{opacity:1;
  transition:opacity var(--dur-base) var(--ease-standard)
             calc(var(--dur-fast) + var(--dur-fast))}

/* Quien pide menos movimiento lo tiene abierto o cerrado, sin viaje. La
   plataforma entera respeta esa preferencia y esto no iba a ser la excepción. */
@media (prefers-reduced-motion:reduce){
  .desplegable,
  .desplegable > *{transition:none}
}
.sistema-anadir{margin-top:var(--sp-3)}

/* Un fármaco. En una fila y no en una tarjeta: aquí se barre una lista
   buscando uno, y las tarjetas obligan a leer de dos en dos. */
.ficha-renglon{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border-subtle)}
.ficha-renglon:last-child{border-bottom:0}
.ficha-quien{flex:1;min-width:180px;display:flex;flex-direction:column}
.ficha-nombre{font-weight:var(--fw-semibold);color:var(--text-title)}
/* El nombre en edición rápida (doble clic, sólo el fundador): el mismo texto,
   en su sitio, con una raya debajo que dice «se está escribiendo». */
.ficha-nombre-campo{font:inherit;color:inherit;width:100%;min-width:0;padding:0 0 2px;
  background:transparent;border:0;border-bottom:2px solid var(--brand-primary);
  border-radius:0;outline:none}
.ficha-grupo{font-size:var(--fs-xs);color:var(--text-muted)}

/* Al llegar desde el buscador universal, un destello -no un salto brusco- para
   que quede claro cuál de toda la fila es la que se buscaba. */
.ficha-renglon.resaltada{animation:destello-ficha 1.6s var(--ease-standard)}
@keyframes destello-ficha{
  0%,100%{background:transparent}
  15%{background:var(--surface-tint)}
}

/* ---------- El buscador de todos los sistemas ----------
   Va debajo de las dos cifras y por encima de la lista de sistemas: es el
   único sitio de la pantalla que no pertenece a un sistema en concreto. El
   margen de abajo es EL MISMO que el de las dos cifras (.mosaico.fichas-cifras,
   más arriba) para que el buscador respire igual que ellas: sin esto quedaba
   pegado al primer sistema mientras que las cifras sí tenían su aire. */
/* Doble clase a propósito y no sólo `.buscador-universal`: `.panel-buscador`
   (más abajo en el archivo) pone `margin:0` con la misma especificidad, y por
   orden de aparición ganaba él y dejaba este margen en 0 -por eso se veía tan
   pegado al primer sistema-. Con las dos clases juntas gana siempre éste,
   venga antes o después en el archivo. */
.panel-buscador.buscador-universal{margin-bottom:var(--sp-6)}
.buscador-universal-resultados{display:flex;flex-direction:column;
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde);
  border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--sp-6)}
.resultado-universal{display:flex;align-items:center;gap:var(--sp-3);
  width:100%;padding:var(--sp-3) var(--sp-4);border:0;border-bottom:1px solid var(--border-subtle);
  background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.resultado-universal:last-child{border-bottom:0}
.resultado-universal:hover,.resultado-universal:focus-visible{background:var(--surface-tint)}
.resultado-universal-nombre{flex:1;min-width:0;font-weight:var(--fw-semibold);
  color:var(--text-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultado-universal-sistema{flex:none;font-size:var(--fs-xs);color:var(--text-muted)}
/* El estado se cambia aquí mismo, sin abrir la ficha: de borrador a publicado
   es lo que más se va a hacer y no puede costar tres pantallas. */
/* ---------- LA PÍLDORA DE ESTADO ----------

   Ya no es un `<select>`. Se intentó apartar su flecha del borde redondeado
   con relleno y no funciona: el relleno aparta el TEXTO, y la flecha la dibuja
   el navegador pegada al borde pase lo que pase. Y su lista de opciones la
   pinta el sistema operativo, fuera de la página, así que tampoco había manera
   de que apareciera con una transición.

   Así que la flecha es nuestra y se coloca donde toca, y la lista también.
   Ver botonDeEstado(), en ficha-campos.js. */
.ficha-estado{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-4);
  background:var(--surface-card);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--fs-sm);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
.ficha-estado:hover{background:var(--surface-tint);border-color:var(--border-strong)}
.ficha-estado:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* El mismo estado, para quien no puede moverlo. Desde v350 el estado lo mueve
   el circuito -cada paso tiene su botón- y sólo el fundador lo pone a mano;
   a los demás se les enseña el dato. Es `.insignia` de siempre, con el mismo
   aire y la misma altura que la píldora para que los renglones no bailen. */
.ficha-estado-fijo{flex:none;padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);font-size:var(--fs-sm)}
.ficha-estado.abierto{background:var(--surface-tint);border-color:var(--border-strong)}

/* La flecha se da la vuelta al abrirse, que es como se dice «esto ya está
   abierto» en toda la web: lo mismo que hace la de un sistema de Fichas o la
   de un renglón de Miembros. */
.estado-flecha{display:flex;color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-standard)}
.ficha-estado.abierto .estado-flecha{transform:rotate(180deg)}

/* ---------- Su lista ----------
   Vive en el `body` y va `fixed` porque los renglones están dentro de cosas
   con `overflow:hidden` -el desplegable de un sistema, la tabla de un
   glosario- y ahí dentro se cortaría por la mitad. La coloca el JavaScript.

   Y entra con el MISMO gesto que el menú del perfil: un palmo hacia abajo y
   un fundido. No es un gesto nuevo; es el que esta web usa para «aquí se abre
   una lista». Si le toca abrirse hacia arriba porque no cabe debajo, el palmo
   se invierte, para que salga del botón en los dos casos. */
.estados-lista{position:fixed;z-index:60;
  display:flex;flex-direction:column;gap:2px;
  min-width:220px;padding:var(--sp-2);
  background:rgba(var(--cristal-rgb),.96);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.estados-lista.hacia-arriba{transform:translateY(6px)}
.estados-lista.puesta{opacity:1;transform:translateY(0);pointer-events:auto}

.estados-lista button{display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;text-align:left;width:100%;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-standard)}
.estados-lista button:hover{background:var(--surface-tint)}
.estados-lista button.elegido{background:var(--surface-tint)}
.estados-lista button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* Lo que hace cada estado, debajo de su nombre. Es la misma frase que el
   editor enseña bajo su casilla, y está aquí porque es justo donde hace falta:
   en el momento de elegir, no después. */
.estado-dice{font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- EL ROJO, EL AMARILLO Y EL VERDE ----------

   La píldora se pinta del color de lo que dice. Y no de un rojo cualquiera: es
   el MISMO par de variables que llevan las cuadrículas de efectos adversos e
   interacciones (ver .grado-alta y compañía, más abajo), que a su vez son los
   colores de estado de toda la plataforma.

     borrador   rojo       esto todavía no vale
     revisado   amarillo   esto está a la espera
     publicado  verde      esto ya está

   Un solo lenguaje: el rojo quiere decir lo mismo en la ficha de un fármaco y
   en el botón que decide si ese fármaco sale. Van DESPUÉS de las reglas de
   arriba porque entre dos que pesan igual gana la última, y con `:hover` y
   `.abierto` propios para que el color no se pierda al tocarla. */
.ficha-estado[data-estado="borrador"]{background:var(--danger-100);
  color:var(--danger-500);border-color:transparent}
.ficha-estado[data-estado="revisado"]{background:var(--warning-100);
  color:var(--warning-500);border-color:transparent}
.ficha-estado[data-estado="publicado"]{background:var(--success-100);
  color:var(--success-500);border-color:transparent}
/* Al acercarse y al abrirla no cambia de color: se marca el borde. Cambiar el
   fondo la haría parecer de otro estado durante el rato que dura el gesto. */
.ficha-estado[data-estado]:hover,
.ficha-estado[data-estado].abierto{border-color:currentColor}
/* La flecha, del color de la píldora y no del gris de siempre: dentro de una
   píldora de color, un gris de fuera se ve como una mancha. */
.ficha-estado[data-estado] .estado-flecha{color:currentColor}

@media (prefers-reduced-motion:reduce){
  .estados-lista,.estado-flecha{transition:none}
}
.ficha-verbos{display:flex;gap:var(--sp-1,4px);flex-wrap:wrap}
.ficha-verbos .boton{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
/* Borrar en rojo, y sólo al acercarse: puesto siempre, la lista entera pide
   atención hacia lo único que no se puede deshacer. */
.ficha-borrar:hover{background:var(--danger-100);color:var(--danger-500)}

/* ---------- Los dos verbos que no son de edición ----------
   «Recomendar» es lo único que puede hacer el personal administrativo sobre
   una ficha, y «Permiso para Edición» lo único que puede hacer quien tiene
   delante una ficha ya publicada. Los dos van en el rosa de la casa y no en
   gris: en un renglón donde lo demás es sólo «Ver», son LA acción. */
.ficha-recomendar,
.ficha-permiso-pildora{color:var(--brand-primary);
  border:1px solid color-mix(in srgb,var(--brand-primary) 30%,transparent);
  border-radius:var(--radius-pill)}
.ficha-recomendar:hover,
.ficha-permiso-pildora:hover{background:var(--surface-tint);
  border-color:var(--brand-primary)}

/* La pregunta de una ventana que pregunta. Va antes de la explicación y con
   cuerpo: lo que se contesta con Sí o No no puede leerse como una nota al pie. */
.modal-pregunta{margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:var(--fs-h4);color:var(--text-title);line-height:var(--lh-tight)}

.insignia-bien{background:var(--success-100);color:var(--success-500)}
/* El rojo del historial. Es el mismo par que usan las cuadrículas de gravedad
   alta, para que el rojo quiera decir lo mismo en toda la plataforma. */
.insignia-mal{background:var(--danger-100);color:var(--danger-500)}

/* El botón de añadir un sistema, separado de su casilla: pegado se leía como
   si formara parte de ella. */
.sistema-anadir-campo{margin-bottom:var(--sp-4)}

/* Las dos cifras de la pantalla de fichas, con aire debajo.

   Nombre doble: `.mosaico` se declara más abajo con `margin:0 auto`, y entre
   dos reglas que pesan igual gana la última. Con un solo nombre esto perdía y
   los azulejos se quedaban pegados al primer sistema.

   Y el hueco de debajo es el MISMO que el de encima, no uno parecido. Encima
   de los azulejos hay 32 -el `margin-bottom` de `.panel-pestanas`, o sea lo
   que separa la línea de las pestañas de lo que viene después- y debajo había
   48. Los azulejos quedaban descolgados hacia arriba, más cerca de la línea
   que de la lista que gobiernan, y se leían como parte de la cabecera en vez
   de como el resumen de lo que hay debajo. Con los dos huecos iguales, el
   bloque se queda centrado entre la línea y el primer sistema. */
/* LAS CUATRO FASES DEL CIRCUITO, y son cuatro: no se dejan al `auto-fit`.
   Con `minmax(190px,1fr)` genérico, a anchos medios caben tres y la cuarta se
   queda sola en su renglón; un 3+1 se lee como si la última fuera otra cosa.
   Cuatro en fila, dos y dos, o una: nunca tres. */
.mosaico.fichas-cifras{margin:0 auto var(--sp-6);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .mosaico.fichas-cifras{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .mosaico.fichas-cifras{grid-template-columns:minmax(0,1fr)} }

/* ---------- Las casillas de permiso ----------
   Se les quita la casilla que trae el navegador, que no se puede vestir, y se
   dibuja una en su sitio. El gancho no aparece de golpe: se dibuja, porque lo
   que se está haciendo es dar un permiso y merece verse.

   `stroke-dashoffset` sobre un trazo de largo conocido es lo que hace que una
   línea parezca escribirse sola: se empieza con el trazo entero desplazado
   fuera y se trae a su sitio. */
.permisos{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.permiso{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  background:var(--surface-card);font-size:var(--fs-sm);color:var(--text-body);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.permiso:hover{border-color:var(--border-strong);background:var(--surface-tint)}

/* La casilla de verdad sigue ahí, pero no se ve: es la que guarda el estado,
   la que responde al teclado y la que lee un lector de pantalla. Lo que se
   dibuja debajo es sólo su cara.

   AL HIJO DIRECTO -`> span`- y no a cualquier span de dentro. Ponía
   `.permiso span` y se dibujaba una casilla por cada span que hubiera:
   la primera etiqueta que llevó la unidad en un span aparte -«Presión Arterial
   (mmHg)», en el Modo Health Fair- salió con dos casillas, la suya y otra
   delante del paréntesis. Una regla de componente tiene que apuntar a su
   propia pieza y no a todo lo que quepa dentro. */
.permiso input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.permiso > span{position:relative;padding-left:26px;line-height:20px}
.permiso > span::before{content:"";position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:6px;
  border:1.5px solid var(--border-strong);background:var(--surface-card);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
/* El gancho, dibujado con un borde girado: dos lados de un rectángulo puestos
   de canto son exactamente un gancho, y así no hace falta ni una imagen. */
.permiso > span::after{content:"";position:absolute;left:6px;top:4px;
  width:5px;height:10px;border:solid var(--text-onbrand);
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity 140ms var(--ease-standard),
                       transform 220ms cubic-bezier(.2,1.4,.4,1)}

.permiso:has(input:checked){background:var(--surface-tint);
  border-color:var(--brand-primary);color:var(--brand-primary);
  font-weight:var(--fw-semibold)}
.permiso input:checked + span::before{background:var(--brand-primary);
  border-color:var(--brand-primary)}
.permiso input:checked + span::after{opacity:1;transform:rotate(45deg) scale(1)}
.permiso input:focus-visible + span::before{box-shadow:var(--shadow-focus)}

@media (prefers-reduced-motion:reduce){
  .permiso > span::after{transition:none}
}

/* El mando de los sistemas, al final de la lista: se toca de tarde en tarde. */
.sistemas-mando{margin-top:var(--sp-6)}
.sistemas-lista{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:var(--sp-3) 0 var(--sp-4)}
.sistema-quitable{display:inline-flex;align-items:center;gap:var(--sp-2)}
.sistema-quitable button{color:inherit;opacity:.55;font-size:var(--fs-body-lg);
  line-height:1;padding:0 2px;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.sistema-quitable button:hover{opacity:1;color:var(--danger-500)}

/* ---------- El panel: el editor de una ficha ---------- */
.editor-barra{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--border-subtle)}
.editor-barra h3{flex:1;font-family:var(--font-display);font-size:var(--fs-h3);
  color:var(--text-title);margin:0}
.editor-verbos{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---------- La barra del editor de fichas, en dos pisos (14-oct-2026) ----------
   Arriba la flecha, el nombre con «Se guarda solo» debajo y el estado a la
   derecha; abajo una franja de cristal con los verbos de MIRAR a un lado y los
   de HACER al otro. Va con su propia clase porque el editor de los glosarios
   usa la misma `.editor-barra` de un solo piso. */
.editor-barra-ficha{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
.editor-cabeza{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.editor-cabeza > .volver{flex:none}
.editor-titulo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.editor-barra-ficha .editor-titulo h3{flex:none;order:0;line-height:1.2;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.editor-barra-ficha .guardado-dice{order:1;flex-basis:auto}
.editor-estado{flex:none;display:flex;align-items:center}
.editor-barra-ficha .editor-verbos{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2);
  border-radius:var(--radius-pill);
  background:rgba(var(--cristal-rgb),.55);border:1px solid rgba(var(--cristal-rgb),.85);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.editor-barra.editor-barra-ficha > .editor-verbos{flex:none}
.editor-verbos-grupo{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.editor-verbos-grupo:empty{display:none}
.editor-verbos-grupo .boton{white-space:nowrap;padding:var(--sp-2) var(--sp-5);min-height:42px}
.editor-verbos-grupo .boton svg{flex:none}
/* La cabecera de la previsualización usa el mismo bloque de título: el nombre
   y, debajo, el estado. En el teléfono la insignia al lado del título se
   montaba encima de «Previsualización». */
.editor-barra > .previa-titulo{flex:1 1 auto;min-width:0;align-items:flex-start}
.editor-barra .previa-titulo h3{flex:none;order:0;line-height:1.2}

/* Los apartados del formulario son los mismos grupos de CAMPOS_FICHA, y se
   separan con aire y un rótulo: treinta casillas seguidas no se rellenan, se
   abandonan. */
.editor-grupo{margin-bottom:var(--sp-7)}
.editor-grupo h4{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle)}
.campo-ancho{margin-bottom:var(--sp-4);max-width:760px}
.campo-ayuda{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}

/* Sistema y estado, en pareja y en su propio apartado. Sueltos y uno debajo
   de otro se leían pegados a la Identificación, como si fueran parte de la
   ficha; y no lo son, son de la trastienda. */
.editor-pareja{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:760px;margin-bottom:var(--sp-4)}
/* Los cuatro de la localización: sistema, grupo, clasificación y familia. Se
   reparten solos según lo que quepa -cuatro en una pantalla ancha, dos y dos
   en una de portátil, uno debajo de otro en el teléfono-, que es lo mismo que
   ya hacía la pareja de arriba. */
.editor-cuarteto{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:980px;margin-bottom:var(--sp-4)}

/* ---------- Los nombres comerciales ----------
   Una casilla por nombre y su aspa al lado, y el botón de Añadir debajo. Es a
   propósito el mismo aire que las cuadrículas de efectos adversos: quien ha
   rellenado aquéllas ya sabe usar esto sin que se lo expliquen. */
.nombres-editor{display:flex;flex-direction:column;gap:var(--sp-2);
  margin-top:var(--sp-2);align-items:flex-start}
.nombres-editor > .boton{margin-top:var(--sp-1)}
.nombre-fila{display:flex;align-items:center;gap:var(--sp-2);width:100%}
.nombre-fila .entrada{flex:1;min-width:0}
.nombre-quitar{flex:none;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-body-lg);line-height:1}
.nombre-quitar:hover{background:var(--danger-100);color:var(--danger-500)}

/* ---------- LAS CASILLAS EN CASCADA ----------
   La posología y la presentación. Se reparten en columnas que van saliendo a
   medida que se contestan: la de la vía aparece sola, la del método aparece al
   elegir vía, y así. Por eso es una rejilla que se ajusta y no un ancho fijo:
   el formulario no mide siempre lo mismo. */
.cascada-fila{padding:var(--sp-4);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);background:var(--surface-sunken)}
.cascada-casillas{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cascada-verbos{display:flex;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-4)}
/* El número y su unidad, pegados: son un solo dato escrito en dos casillas, y
   separados se leerían como dos. El número manda en el ancho. */
.dosis-par{display:grid;grid-template-columns:1fr 130px;gap:var(--sp-2)}
@media (max-width:480px){ .dosis-par{grid-template-columns:1fr} }

/* ---------- Las pautas, en el editor ----------
   Las guardadas arriba y agrupadas por a quién van dirigidas; los tres
   azulejos abajo, para poner otra. */
.pautas-editor,.presentaciones-editor{display:flex;flex-direction:column;
  gap:var(--sp-3);margin-top:var(--sp-2)}
.presentaciones-editor > .boton{align-self:flex-start}
.pautas-tanda{display:flex;flex-direction:column;gap:var(--sp-2)}
.pautas-tanda h5{margin:0;font-family:var(--font-display);font-size:var(--fs-sm);
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
/* Una pauta guardada no lleva color de gravedad: no hay ninguna que sea peor
   que otra. Se queda con el cristal de la casa. */
.pauta-puesta{--tinte:var(--cristal);--filo:var(--cristal-borde)}

/* ---------- Preparación por Nombre Comercial ---------- */
.preparacion-comercial-editor{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-2)}
.preparacion-lista-tarjetas{display:flex;flex-direction:column;gap:var(--sp-4)}
.tarjeta-preparacion-comercial{background:var(--cristal);border:1px solid var(--cristal-borde);
  border-radius:var(--radius-lg);padding:var(--sp-4);
  backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.preparacion-cabecera-fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}
.preparacion-etiquetas{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.preparacion-nombre-comercial{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);font-weight:var(--fw-bold)}
.preparacion-toggle-circular{display:inline-flex;align-items:center;gap:var(--sp-2)}
.preparacion-toggle-label{font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-semibold)}
.toggle-circulos{display:inline-flex;align-items:center;background:var(--surface-tint);
  border-radius:var(--radius-pill);padding:2px;border:1px solid var(--border-subtle);gap:2px}
.btn-circulo{width:32px;height:28px;border-radius:var(--radius-pill);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:var(--text-muted);background:none;border:none;cursor:pointer;
  transition:all var(--dur-fast) var(--ease-standard)}
.btn-circulo:hover{color:var(--text-title)}
.btn-circulo.elegido-si{background:var(--brand-primary);color:var(--text-onbrand);box-shadow:var(--shadow-xs)}
.btn-circulo.elegido-no{background:var(--surface-sunken);color:var(--text-title);box-shadow:var(--shadow-xs)}

.preparacion-cuerpo-pasos{display:flex;flex-direction:column;gap:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px dashed var(--border-subtle)}
.preparacion-pasos-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-title);text-transform:uppercase;letter-spacing:.04em}
.preparacion-pasos-lista{display:flex;flex-direction:column;gap:var(--sp-2)}
.preparacion-paso-fila{display:flex;align-items:center;gap:var(--sp-2)}
.insignia-paso{flex:none;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  padding:var(--sp-1) var(--sp-2);background:var(--surface-tint);color:var(--brand-primary);
  border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
.preparacion-paso-fila .entrada{flex:1}
.paso-quitar{flex:none;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}
.paso-quitar:hover{background:var(--danger-100);color:var(--danger-500)}
.preparacion-anadir-paso{align-self:flex-start;font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-3)}

/* Dosis Adicionales del Esquema (v409). Antes el bloque caía en UNA columna
   de la rejilla de la cascada -doscientos píxeles- y el par tiempo + unidad
   dejaba al número sin sitio: «el número ni siquiera aparece». Ahora ocupa la
   fila entera, cada dosis es una tarjeta con sus casillas rotuladas, y la
   rejilla se reparte por ancho mínimo: un par número + unidad nunca baja de
   doscientos cuarenta píxeles. */
.cascada-casillas > .otras-dosis{grid-column:1 / -1;max-width:none}
.otras-dosis{display:flex;flex-direction:column;gap:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px dashed var(--border-subtle)}
.otras-dosis-cabeza{display:flex;flex-direction:column;gap:var(--sp-1)}
.otras-dosis-titulo{font-family:var(--font-display);font-weight:var(--fw-bold);
  color:var(--text-title)}
.otras-dosis-cabeza .campo-ayuda{margin:0}
.otra-dosis-tarjeta{display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);border-radius:var(--radius-md);
  background:var(--cristal);border:1px solid var(--cristal-borde)}
.otra-dosis-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.otra-dosis-rejilla{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.otra-dosis-rejilla .campo{margin:0}
.otra-dosis-rejilla .dosis-par{grid-template-columns:minmax(72px,1fr) minmax(88px,112px)}
.otra-dosis-condicion{grid-column:1 / -1}
.rotulo-opcional{font-weight:var(--fw-regular);color:var(--text-muted)}
/* Cómo va a leerse en la ficha, con las mismas palabras y ya. */
.otra-dosis-lectura{margin:0;font-family:var(--font-display);font-size:var(--fs-sm);
  color:var(--brand-primary)}
.otra-dosis-lectura:empty{display:none}
.otra-dosis-lectura span{color:var(--text-muted);font-family:var(--font-body)}
.otra-dosis-legado{font-style:italic}
.preparacion-nota-bloque{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:4px}
.preparacion-nota-bloque label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted)}
.preparacion-aviso-no{margin:0;font-size:var(--fs-xs);color:var(--text-muted);font-style:italic}

.preparacion-bloque-comercial{margin-bottom:var(--sp-4)}
.preparacion-bloque-comercial:last-child{margin-bottom:0}
.preparacion-bloque-comercial h4{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);margin:0 0 var(--sp-2)}

/* Los tres azulejos de Adulto, Pediátrico y Casos Especiales. Al elegir uno,
   los otros dos se desvanecen sin irse: es el mismo gesto con el que se elige
   buscador en el inicio, y aquí quiere decir lo mismo. */
.pautas-elegir{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.azulejo-elegible{cursor:pointer;padding:var(--sp-4) var(--sp-4) var(--sp-4)}
.azulejo-elegible h3{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--text-title);margin:0}
.azulejo-elegible p{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.pautas-elegir.eligiendo .azulejo-elegible:not(.elegido){opacity:.32}
.pautas-elegir.eligiendo .azulejo-elegible:not(.elegido):hover{opacity:.6;
  transform:none;box-shadow:var(--shadow-xs)}
.azulejo-elegible.elegido{border-color:var(--brand-primary);
  background:var(--cristal-vivo)}

/* El asterisco de lo obligatorio: se ve, pero no compite con el rótulo. */
.pide{color:var(--brand-accent);font-weight:var(--fw-bold)}

/* ---------- Las cuadrículas que se voltean, en el editor ----------
   Dos estados y sólo uno abierto a la vez: la que se está escribiendo es un
   formulario con Guardar y Descartar, y las ya guardadas son tarjetas con su
   color. El color se elige de una lista y no se escribe, porque escribir
   "alta" mal es perder el color sin enterarse. */
.cuadriculas-editor{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-top:var(--sp-2)}

/* Ya guardada. Lleva las mismas clases de color que la tarjeta del buscador
   (ver .grado-alta y compañía), así que aquí ya se ve de qué color va a salir
   sin tener que ir a la previa. */
.cuadricula-puesta{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  border:1px solid var(--filo,var(--border-subtle));
  background:var(--tinte,var(--surface-card))}
.cuadricula-texto{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cuadricula-suyo{font-weight:var(--fw-semibold);color:var(--text-title)}
.cuadricula-porque{font-size:var(--fs-sm);color:var(--text-body)}
.cuadricula-verbos{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.cuadricula-verbos .boton{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
/* v410: en el teléfono los dos botones iban al lado del texto y lo dejaban en
   una columna de tres palabras por renglón («Aspirina: / Comprimidos de /
   100…»). Debajo, el texto se lee de corrido y los botones no compiten. */
@media (max-width:560px){
  .cuadricula-puesta{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .cuadricula-puesta > .cuadricula-verbos{justify-content:flex-end}
}

.cuadricula-fila{display:grid;gap:var(--sp-2);align-items:start;
  grid-template-columns:1fr 150px 2fr;
  padding:var(--sp-4);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);background:var(--surface-sunken)}
/* Los dos botones, en su propia línea y a lo ancho: Guardar es el final de lo
   que se está haciendo, y un botón que decide algo no se pone de refilón en
   una esquina entre dos casillas. */
.cuadricula-fila .cuadricula-verbos{grid-column:1 / -1;margin-top:var(--sp-2)}
@media (max-width:720px){
  .cuadricula-fila{grid-template-columns:1fr}
}
.cuadricula-fila input,.cuadricula-fila select,.cuadricula-fila textarea{
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:var(--sp-2);font-family:var(--font-body);font-size:var(--fs-sm);
  background:var(--surface-card);color:var(--text-body);width:100%}
.cuadricula-fila :focus-visible{outline:none;border-color:var(--focus-ring);
  box-shadow:var(--shadow-focus)}
.cuadricula-quitar:hover{background:var(--danger-100);color:var(--danger-500)}

/* ---------- Los tres puntos ----------
   Sobre la ficha guardada. Un menú y no dos botones sueltos porque encima de
   una ficha que se está mirando, dos botones compiten con lo que hay que
   leer; los tres puntos esperan a que se les llame. */
.menu-tres{position:relative;flex:none}
/* El botón es literalmente el mismo redondo que la flecha de volver -comparte
   su declaración, más arriba- y lleva los tres puntos dibujados, no el carácter
   «⋮»: ese glifo cambia de tamaño y de centrado con cada tipografía, y dentro
   de una píldora de `.boton` salía una cápsula desproporcionada en móvil. */
.menu-tres-boton{cursor:pointer;padding:0}
.menu-tres-lista{position:absolute;right:0;top:calc(100% + 6px);z-index:5;
  min-width:170px;max-width:min(240px,calc(100vw - var(--sp-5) * 2));padding:var(--sp-2);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column}
.menu-tres-lista button{text-align:left;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text-body);
  transition:background var(--dur-fast) var(--ease-standard)}
.menu-tres-lista button:hover{background:var(--surface-tint);color:var(--brand-primary)}
.menu-tres-lista button:last-child:hover{background:var(--danger-100);color:var(--danger-500)}
/* En móvil la barra se parte en dos renglones y el título se lleva el ancho.
   El menú se queda a la derecha con el botón, y el desplegable se abre hacia
   dentro para no salirse por el borde de la pantalla. */
@media (max-width:720px){
  /* v410: el título va AL LADO de la flecha de volver, que es donde se lee
     «estoy editando esto»; antes caía debajo de los cuatro botones y la
     flecha se quedaba sola en su renglón. Los botones, debajo, repartiéndose
     el ancho y sin partir su texto: partido, «Enviar al Docente» ocupaba tres
     renglones y estiraba todos los demás. */
  .editor-barra > .volver{order:0}
  .editor-barra h3{flex:1 1 0;min-width:0;order:1;font-size:var(--fs-h4)}
  .editor-barra .insignia{order:2}
  .editor-barra .menu-tres{margin-left:auto;order:2}
  .editor-barra > .editor-verbos{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;
    gap:var(--sp-2)}
  .editor-barra > .editor-verbos > .boton{flex:1 1 auto;justify-content:center;
    white-space:nowrap;padding-inline:var(--sp-4);font-size:var(--fs-sm)}
  .editor-barra > .editor-verbos > :not(.boton){flex:1 1 100%}
  .menu-tres-lista{min-width:160px}

  /* El editor de fichas: la franja deja de ser píldora y los dos grupos se
     apilan, cada uno repartiendo su ancho a partes iguales. Con un botón solo,
     ese botón se lleva el renglón entero. */
  .editor-barra-ficha .editor-titulo h3{font-size:var(--fs-h4)}
  .editor-barra-ficha .editor-verbos{flex-direction:column;align-items:stretch;
    border-radius:var(--radius-xl);padding:var(--sp-2);gap:var(--sp-2)}
  .editor-barra-ficha .editor-verbos-grupo{display:grid;gap:var(--sp-2);
    grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .editor-barra-ficha .editor-verbos-grupo .boton{width:100%;padding-inline:var(--sp-3);
    font-size:var(--fs-sm)}
}
/* En los teléfonos más estrechos (360 px), «Enviar al Docente» con su icono
   no cabe junto a «Guardar»: cada verbo de hacer, en su renglón. */
@media (max-width:400px){
  .editor-barra-ficha .editor-verbos-hacer{grid-template-columns:1fr}
}

/* ---------- El panel: cómo queda la ficha ----------
   Se pinta con `fichaFarmacologica()`, la misma del buscador, así que lo de
   aquí abajo NO viste la ficha: sólo le pone el marco. Todo lo que se ve
   dentro ya tiene su estilo puesto por las reglas del buscador, y ése es
   justamente el sentido de esta pantalla. */
/* Desde el 14-oct-2026 el marco ES el del buscador (`.tarjeta.elevada.ficha`,
   con su `.encabezado` rosado): la previa se ve como la ficha publicada. */
.previa-ficha{margin-bottom:var(--sp-6)}

/* ---------- El panel: el historial de solicitudes ----------
   Reutiliza el desplegable de los sistemas de la pantalla de fichas: es el
   mismo gesto -una cabecera con su cuenta y un cuerpo que se abre- y no hacía
   falta inventar otro. Lo propio es el renglón de dentro. */
.historial{margin-top:var(--sp-6)}

/* ---------- Un renglón del historial ----------

   TRES CARRILES: quién, qué se decidió y cuándo. Esto era una fila flexible
   con la insignia metida dentro de la columna de la fecha, apilada encima de
   ella, y de ahí venía el desbarajuste:

     · La insignia y la fecha iban una debajo de otra, así que cada renglón las
       ponía a una altura distinta -uno con «Por Ernesto G.» y otro sin él
       medían distinto- y no había dos que se leyeran en columna.
     · Un nombre largo se partía en dos líneas y empujaba el correo hacia
       abajo, pero la columna de la derecha seguía pegada arriba: la insignia
       quedaba a la altura de la primera línea y la fecha a la de la segunda.
     · Las insignias iban alineadas a la DERECHA, y como «Aceptada» y
       «Rechazada» no miden lo mismo, cada una empezaba en un sitio. Para
       barrer una lista con la vista hay que poder seguir un borde recto.

   Ahora cada cosa tiene su carril y todos empiezan en la MISMA línea de
   arriba. El carril de la insignia tiene un ancho fijo -no `auto`- porque cada
   renglón es su propia rejilla y con `auto` cada uno se mediría por su cuenta;
   con un ancho fijo las insignias de todos los renglones caen en la misma
   vertical sin necesidad de meter la lista entera en una sola rejilla, que
   habría costado el `border-bottom` que las separa.

   Y el de la FECHA también va fijo, por lo mismo y no por capricho: con `auto`
   cada renglón lo medía por su texto -«15 de agosto» no ocupa lo que «3 de
   septiembre»- y al variar ese carril se movía el de la insignia, que está a
   su izquierda. Medidas las doce fechas posibles con el mes más largo y la
   hora más ancha, la peor pide 244 px; 248 le deja sitio sin que sobre. */
.resuelta{display:grid;
  grid-template-columns:minmax(0,1fr) var(--carril-insignia,104px) var(--carril-fecha,248px);
  align-items:start;column-gap:var(--sp-4);row-gap:var(--sp-1);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--border-subtle)}
.resuelta:last-child{border-bottom:0}

/* `min-width:0` para que un correo larguísimo se recorte en vez de empujar a
   los otros dos carriles fuera de la tarjeta. */
.resuelta-quien{min-width:0;display:flex;flex-direction:column;gap:2px}
.resuelta-quien .ficha-grupo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La insignia es más baja que la línea del nombre, así que centrada con ella
   quedaría alta. Este pelo de margen la deja ópticamente en su sitio. */
.resuelta .insignia{justify-self:start;margin-top:2px}

/* La fecha, pegada al borde derecho: los renglones comparten ese borde, así
   que los finales de fecha caen en vertical aunque midan distinto. */
.resuelta-cuando{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-align:right}
.resuelta-fecha{font-size:var(--fs-sm);color:var(--text-body);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.resuelta-por{font-size:var(--fs-xs);color:var(--text-muted)}

/* El motivo del rechazo, a lo ancho y debajo: es un texto para leer, no un
   dato para comparar, así que no cabe en ningún carril. */
.resuelta-motivo{grid-column:1 / -1;margin:var(--sp-2) 0 0;
  font-size:var(--fs-sm);color:var(--text-body)}
.resuelta-motivo strong{color:var(--text-title)}

/* Estrecho -un móvil, o el panel en media pantalla-: los tres carriles no
   caben. El nombre pasa a ocupar la fila entera y debajo van la decisión y la
   fecha compartiendo línea, que es como se lee un renglón cuando no hay ancho.

   Y aquí la fecha SÍ se parte en dos líneas. Con `nowrap` -que es lo que le
   conviene en ancho, para que todas acaben en la misma vertical- no cabía: en
   un teléfono de 375 px el renglón mide unos 290 y la fecha más larga pide
   244, así que empujaba a la insignia y se le montaba encima. */
@media (max-width:720px){
  .resuelta{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-2)}
  .resuelta-quien{grid-column:1 / -1}
  .resuelta .insignia{margin-top:0;align-self:start}
  .resuelta-cuando{min-width:0}
  .resuelta-fecha{white-space:normal}
}
/* ---------- El panel: la tabla de gente ----------
   Esto era una rejilla de tarjetas. Se cambió porque no se usaba como se
   leen las tarjetas: aquí se BARRE, buscando a alguien entre varios o viendo
   quién tiene qué. Para eso hacen falta columnas que se sigan con la vista
   hacia abajo.

   El cristal es el MISMO de los azulejos del resumen -mismo velo, mismo
   desenfoque, mismo borde- porque es la misma superficie sobre el mismo
   círculo rosa. No se hereda de `.azulejo` con una clase de más porque aquél
   es un bloque con su propio aire y esto es una fila; lo que se comparte son
   los valores, y están escritos aquí igual para que se vean igual. */
.filtros{display:grid;gap:var(--sp-4);align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:var(--sp-4)}
/* El buscador, más ancho: es el que más se usa y el que más texto recibe. */
.filtro-buscar{grid-column:span 2}
@media (max-width:560px){ .filtro-buscar{grid-column:auto} }
.filtros-cuenta{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted)}

.tabla-gente{border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--cristal-borde);
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  box-shadow:var(--shadow-xs)}

/* Los rótulos de las columnas. En pantalla estrecha desaparecen: ahí las
   columnas se apilan y un rótulo suelto encima de todo dejaría de nombrar lo
   que tiene debajo. */
/* Cinco columnas ahora: se ha metido el Estado entre la persona y su
   clasificación. Va ahí y no al final porque es lo que se viene a mirar de
   pasada -«¿quién está ahora?»- y eso se barre con la vista pegado al nombre;
   al otro extremo de la fila obligaría a cruzar la tabla entera por cada
   persona. */
/* Los glosarios usan la misma tabla con otras columnas, así que la cabecera
   tiene que seguirles: si no, los rótulos dejan de caer encima de lo que
   nombran. Se ata al contenedor y no a una clase suelta para que no se pueda
   olvidar al añadir el tercer glosario. */
.tabla-gente:has(.fila-glosa) .tabla-cabeza{grid-template-columns:1fr 2.2fr auto auto}
@media (max-width:720px){
  .tabla-gente:has(.fila-glosa) .tabla-cabeza{display:none}
}

.tabla-cabeza{display:grid;gap:var(--sp-3);
  grid-template-columns:2fr 1.15fr .9fr 1.9fr 28px;
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--cristal-borde);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-muted)}

.fila-gente{border-bottom:1px solid var(--cristal-borde-tenue)}
.fila-gente:last-child{border-bottom:0}
.fila-gente.abierta{background:var(--cristal-medio)}

.fila-cabeza{display:grid;gap:var(--sp-3);align-items:center;width:100%;
  grid-template-columns:2fr 1.15fr .9fr 1.9fr 28px;
  padding:var(--sp-4) var(--sp-5);text-align:left;
  transition:background var(--dur-fast) var(--ease-standard)}
.fila-cabeza:hover{background:var(--cristal-vivo)}
.fila-cabeza:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* El retrato a la izquierda y el nombre y el correo apilados a su derecha.
   El círculo es el mismo de la esquina de la web -mismo tamaño, misma letra,
   mismo recorte redondo- para que se reconozca como la misma cosa. */
.fila-quien{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.fila-quien-texto{display:flex;flex-direction:column;min-width:0}
.fila-retrato{flex:none;position:relative;width:38px;height:38px;
  border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-primary);color:var(--text-onbrand);
  font-family:var(--font-display);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);line-height:1;text-transform:uppercase}
/* La foto encima, y la inicial debajo sin borrar: si la foto no cargara, lo
   que se ve es una inicial y no un círculo vacío. */
.fila-retrato img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
/* El nombre trunca; la campanita, no. `.fila-nombre` pasa a repartir el
   espacio entre las dos en vez de ser ella misma el texto: así un nombre
   largo se corta con puntos suspensivos sin llevarse por delante el aviso de
   si tiene las notificaciones activadas. */
.fila-nombre{display:flex;align-items:center;gap:6px;min-width:0;
  font-weight:var(--fw-semibold);color:var(--text-title)}
.fila-nombre-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fila-correo{font-size:var(--fs-xs);color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La campanita: pequeña, sin ganas de competir con el nombre, y del color
   exacto de la casa según diga sí o no -mismo rojo y verde de siempre-. */
.fila-notis{flex:none;display:inline-flex;line-height:1;color:var(--brand-primary)}
.fila-notis-off{color:var(--text-muted);opacity:.7}
.fila-tipo,.fila-puede{display:flex;flex-wrap:wrap;gap:4px;align-items:center}

/* ---------- Si está o no está ----------
   Un punto y una palabra. El punto lleva el color y la palabra lo dice: el
   color solo no vale, porque uno de cada doce hombres no distingue el verde
   del rojo y porque un punto de color sin texto hay que aprendérselo. Las dos
   cosas juntas se entienden sin explicación y se barren igual de rápido.

   El verde y el ámbar son los mismos de los avisos de toda la plataforma. Aquí
   no se inventa ninguna paleta: «bien» es el mismo verde en toda la casa. */
.fila-estado{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Las celdas de la fila tienen que poder encogerse. Sin esto, una sola palabra
   larga -«Ocupado - Editor de Fichas Farmacológicas», que es lo que había-
   fija el ancho mínimo de su columna, la columna se lleva más de lo suyo y la
   fila entera desborda por la derecha. */
.fila-cabeza > *{min-width:0}
.estado{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.estado-punto{flex:none;width:8px;height:8px;border-radius:50%;
  background:currentColor}
.esta-enlinea{color:var(--success-500)}
.esta-ocupado{color:var(--warning-500)}
.esta-offline{color:var(--text-muted);font-weight:var(--fw-regular,400)}
.esta-desactivado{color:var(--text-muted);font-weight:var(--fw-regular,400);opacity:.85}
.estado-icono-desactivado{flex:none;margin-right:2px;color:var(--text-muted)}

/* En línea, el punto respira. Es el único sitio de la tabla donde algo se
   mueve, y por eso mismo dice lo que tiene que decir sin gritar: quien está
   ahora mismo delante es lo único vivo de la lista. El que está ocupado no
   late -está quieto trabajando- y el que no está, menos. */
/* EL HALO ES UNA COPIA DEL PUNTO QUE CRECE Y SE APAGA, no una sombra. Era un
   `box-shadow` animado, y una sombra no la puede mover la tarjeta gráfica: se
   recalculaba en el hilo principal sesenta veces por segundo mientras
   Miembros estuviera abierta, y con él TODAS las demás animaciones de la
   página (ver el punto 21 de CLAUDE.md). `transform` y `opacity` sí van por
   la tarjeta. Mismo dibujo: de 4 a 9 px de radio -los 5 px de la sombra- y de
   0,45 a nada. Y de paso sale del `currentColor`, así que es el verde de cada
   marca y no el de la casa escrito a mano. Encima del punto no se nota: es
   su mismo color sobre su mismo color. */
.esta-enlinea .estado-punto{position:relative}
.esta-enlinea .estado-punto::after{content:"";position:absolute;inset:0;
  border-radius:50%;background:currentColor;opacity:0;
  animation:respirar-punto 2.4s ease-in-out infinite}
@keyframes respirar-punto{
  0%,100%{transform:scale(1);opacity:.45}
  50%    {transform:scale(2.25);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .esta-enlinea .estado-punto::after{animation:none}
}

/* Cuándo entró por última vez, y en qué editor está quien está ocupado. Los
   dos van debajo de la insignia, en pequeño y en gris, y los dos pueden
   partirse en dos líneas: son el detalle, no el estado.

   El detalle va aparte y no dentro de la insignia porque la insignia es
   `nowrap` -un punto separado de su palabra no se lee- y «Editor de Fichas
   Farmacológicas» colgando de ese `nowrap` reventaba el ancho de la columna. */
.estado-cuando,.estado-detalle{font-size:var(--fs-xs);color:var(--text-muted);
  line-height:var(--lh-tight);overflow-wrap:anywhere}
.fila-nada{font-size:var(--fs-sm);color:var(--text-muted)}
.fila-flecha{display:flex;justify-content:flex-end;color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-standard)}
.fila-gente.abierta .fila-flecha{transform:rotate(90deg)}

/* Abierta. Va sobre papel y no sobre el cristal: aquí dentro hay casillas y
   campos de texto, y sobre un fondo difuminado se leen peor. */
.fila-cuerpo{padding:var(--sp-5);background:var(--surface-card);
  border-top:1px solid var(--border-subtle)}
.fila-parte{margin-bottom:var(--sp-6)}
.fila-parte:last-of-type{margin-bottom:0}
.fila-parte h4{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle)}

.persona-campos{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:var(--sp-4)}
.usuario-verbos{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* En estrecho, las columnas se apilan y los rótulos sobran. */
@media (max-width:720px){
  .tabla-cabeza{display:none}
  .fila-cabeza{grid-template-columns:1fr 24px;gap:var(--sp-2)}
  .fila-estado,.fila-tipo,.fila-puede{grid-column:1;margin-top:var(--sp-2)}
  .fila-estado{flex-direction:row;align-items:baseline;gap:var(--sp-2) var(--sp-3);
    flex-wrap:wrap}
  /* El detalle se lleva su propio renglón: al lado de la insignia, en una
     pantalla estrecha, empuja la fila fuera de la tarjeta. */
  .fila-estado .estado-detalle{flex:1 1 100%}
  .fila-flecha{grid-row:1;grid-column:2}
}

/* ---------- «Guardado a las 22:41» ----------
   Lo que está pasando con el guardado automático, en la barra del editor y
   siempre a la vista. Un guardado que no se ve es peor que ninguno: quien
   escribe no sabe si puede cerrar la pestaña, y acaba pulsando Guardar por si
   acaso, que es justo lo que se venía a quitar.

   En gris mientras trabaja, en verde cuando ha quedado y en rojo si no ha
   podido: los mismos tres colores con los que la plataforma dice esas tres
   cosas en todas partes. */
.guardado-dice{font-size:var(--fs-xs);color:var(--text-muted);
  white-space:nowrap;transition:color var(--dur-base) var(--ease-standard)}
.guardado-dice.bien{color:var(--success-500)}
.guardado-dice.mal{color:var(--danger-500);white-space:normal}

/* En estrecho pasa a su propia línea, debajo del título: en la barra no cabe
   junto a los botones y los empujaba fuera. */
@media (max-width:720px){
  .guardado-dice{flex-basis:100%;order:9}
}

/* ---------- Los glosarios: abreviaturas y términos ----------

   La MISMA tabla de Miembros -mismo cristal, misma cabecera de columnas, mismo
   renglón- porque es el mismo gesto: barrer una lista con la vista buscando
   una entrada. Sólo cambian las columnas.

   Aquí antes había nueve desplegables de categorías, uno por cada grupo de
   siglas, y había que abrirlos para encontrar algo. Una lista sola por orden
   alfabético es como se busca en un glosario desde que existen los glosarios.

   La clave -la sigla o el término- en la letra de los títulos y en el rosa de
   la marca: es lo que se busca, y en una lista de sesenta entradas la vista
   necesita una sola columna a la que agarrarse para bajar. */
.fila-glosa{display:grid;gap:var(--sp-3);align-items:center;
  grid-template-columns:1fr 2.2fr auto auto;
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--cristal-borde-tenue);
  transition:background var(--dur-fast) var(--ease-standard)}
.fila-glosa:last-child{border-bottom:0}
.fila-glosa:hover{background:var(--cristal-vivo)}

.glosa-clave{font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);overflow-wrap:anywhere}
/* Los sinónimos de un término, debajo de él y en pequeño: dicen de un vistazo
   por qué otros nombres se le encuentra. Ver panel-glosario.js. */
.glosa-sinonimos{display:block;margin-top:var(--sp-1,4px);font-family:var(--font-body);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-snug,1.35)}
.glosa-valor{color:var(--text-body);font-size:var(--fs-sm)}
.glosa-verbos{display:flex;gap:var(--sp-1,4px);flex-wrap:wrap}
.glosa-verbos .boton{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}

/* En estrecho se apila: la clave arriba, el significado debajo y los mandos al
   final. Cuatro columnas en un móvil dejan el significado en dos letras por
   línea. */
@media (max-width:720px){
  .fila-glosa{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4)}
  .fila-glosa .ficha-estado{justify-self:start}
}

/* ---------- El buscador y el botón, a mitades ----------
   El botón ocupaba la línea entera y era demasiado para lo que es. Y el
   buscador no es una comodidad: aquí no hay categorías por las que ir
   descartando, así que con ochocientas abreviaturas es la única manera de
   comprobar si una ya está escrita.

   En estrecho se apilan, con el buscador arriba: es lo que más se usa. */
.glosario-mandos{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-4);align-items:end;margin-bottom:var(--sp-5)}
.glosario-buscar{margin:0}
/* El botón pierde su margen propio: aquí lo pone la rejilla, y con los dos
   márgenes el buscador y el botón quedaban a distinta altura. */
.glosario-mandos .anadir-cristal{margin-bottom:0}
@media (max-width:720px){
  .glosario-mandos{grid-template-columns:1fr}
}

/* ---------- El botón de añadir ----------
   Traslúcido y a lo ancho, del cristal de la casa: es lo único que se hace en
   esta pantalla además de corregir, así que no tiene que competir con nada ni
   esconderse en una esquina. Se comporta como un azulejo -se levanta al pasar
   por encima- porque eso es lo que es: un azulejo que se pulsa. */
.anadir-cristal{display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);width:100%;margin-bottom:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--radius-xl);
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px dashed var(--cristal-borde);
  box-shadow:var(--shadow-xs);
  font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--brand-primary);cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
/* El borde discontinuo dice «aquí se añade algo» sin necesidad de explicarlo:
   es el mismo lenguaje de un hueco por rellenar. Al acercarse se vuelve
   continuo, que es la manera de decir que ya es un botón de verdad. */
.anadir-cristal:hover{background:var(--cristal-vivo);
  border-style:solid;border-color:var(--border-strong);
  box-shadow:var(--shadow-md);transform:translateY(-2px)}
.anadir-cristal:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.anadir-cristal span{font-size:var(--fs-h3);line-height:1}

/* ---------- El panel: el equipo ---------- */
.persona .permisos{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-4)}
/* Cada permiso es una píldora que se marca. Se ve marcada o sin marcar de un
   vistazo, sin tener que leer la casilla: lo que se hace aquí es repasar
   quién puede qué, no rellenar un formulario. */
/* Esta píldora la comparten los permisos de Miembros y las marcas del editor
   de fichas -`.pauta-marca`, ver «MARCAR VARIAS DE UNA LISTA CORTA» más
   arriba-: es el mismo gesto y tiene que verse igual. */
.persona .permiso,
.pauta-marca{display:inline-flex;align-items:center;gap:var(--sp-2);
  /* `flex:none`, y esto NO es un detalle. Estas píldoras son hijas de un
     contenedor flexible, y cuando el contenido no cabe un contenedor flexible
     ENCOGE a sus hijos antes de envolverlos. Medido en el editor de fichas en
     un teléfono -donde el campo mide 327 px-: «Intramuscular» se quedaba en
     una columna de veinte píxeles con el texto partido LETRA A LETRA, en
     vertical. No desbordaba, que es lo que engaña: se comprimía.
     Es el mismo fallo que aplastó el botón del Panel en el menú del perfil. */
  flex:0 0 auto;max-width:100%;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);background:var(--surface-card);
  font-size:var(--fs-sm);cursor:pointer;user-select:none;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.persona .permiso:hover,
.pauta-marca:hover{border-color:var(--border-strong)}
.persona .permiso:has(input:checked),
.pauta-marca:has(input:checked){background:var(--surface-tint);
  border-color:var(--border-strong);color:var(--brand-primary);
  font-weight:var(--fw-semibold)}
/* ---------- POR QUÉ VA CON LA CLASE DEL CONTENEDOR DELANTE ----------

   `.pauta-marca input` pesa lo mismo que `.campo input` -una clase y un tipo- y
   `.campo input` está más abajo en este archivo, así que GANA. Y `.campo input`
   dice `width:100%`, con lo que la casilla de 16 px se estiraba a noventa y
   pico y echaba la etiqueta fuera de la píldora.

   No se veía en ninguna prueba suelta porque hace falta el `.campo` de
   alrededor, y ése sólo existe dentro del editor de fichas; en Miembros no
   pasaba porque `.persona .permiso input` lleva DOS clases y ahí no hay empate.
   Con `.pauta-marcas` delante se igualan los pesos y se acaba el asunto, sin
   recurrir a `!important`. */
.persona .permiso input,
.pauta-marcas .pauta-marca input{appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;padding:0;flex:none;border-radius:5px;
  border:2px solid var(--border-strong);background:var(--surface-card);
  position:relative;cursor:pointer}
.persona .permiso input:checked,
.pauta-marcas .pauta-marca input:checked{background:var(--brand-primary);
  border-color:var(--brand-primary)}
.persona .permiso input:checked::after,
.pauta-marcas .pauta-marca input:checked::after{content:"✓";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.625rem;font-weight:900}
.persona .permiso input:focus-visible,
.pauta-marcas .pauta-marca input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.persona-aviso{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs)}
.insignia-aviso{background:var(--warning-100);color:var(--warning-500)}

/* ---------- Solicitudes de acceso ---------- */
.solicitud-datos{margin:var(--sp-4) 0 0;display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm)}
.solicitud-datos dt{color:var(--text-muted);white-space:nowrap}
.solicitud-datos dd{margin:0;color:var(--text-body)}
.solicitud-botones{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.solicitud-rechazo{margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.solicitud-aviso{margin-top:var(--sp-4)}

/* El número de solicitudes que esperan, en el óvalo del menú del perfil. Va
   pegado a la derecha para que la palabra empiece siempre en el mismo sitio
   esté el número o no. */
.perfil-cuenta{margin-left:auto;min-width:22px;height:22px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);background:var(--brand-primary);
  color:var(--text-onbrand);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
#perfil-solicitudes{display:flex;align-items:center;gap:var(--sp-3)}
.boton.fantasma{background:none;color:var(--brand-primary);
  border:1px solid var(--border-strong)}
.boton.fantasma:hover{background:var(--surface-tint)}

/* ---------- Formularios ---------- */
.campo{display:flex;flex-direction:column;gap:var(--sp-2)}
.campo label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.campo .entrada{display:flex;align-items:center;gap:var(--sp-2);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--surface-card);padding:0 var(--sp-3)}
.campo .entrada:focus-within{border-color:var(--focus-ring);box-shadow:var(--shadow-focus)}
.campo input,.campo select{border:0;outline:none;background:none;padding:var(--sp-3) 0;
  width:100%;color:var(--text-title)}
.campo .sufijo{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}
/* El área de texto se viste como los demás campos: mismo recuadro, misma
   letra, mismo aire. Sólo se le quita el poder estirarse a mano, que dejaría
   la tarjeta con una esquina descolgada, y se le deja crecer a lo alto. */
.campo textarea{border:0;outline:none;background:none;padding:var(--sp-3) 0;
  width:100%;color:var(--text-title);font-family:inherit;font-size:inherit;
  line-height:var(--lh-body);resize:vertical;min-height:4.5em}
.campo .entrada:has(textarea){align-items:stretch}
/* El desplegable trae de fábrica una flecha gris de cada sistema una. Se le
   quita y se le pone la de la casa, dibujada con el rosa de marca. */
.campo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:var(--sp-5);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239e235f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:560px){.campos{grid-template-columns:1fr}}

/* ---------- Emisor de Notificaciones: elegir a quién le llega ----------

   Las píldoras de quien ya está elegido y la lista de lo que encaja con lo que
   se escribe. Nada de esto es un componente nuevo: la píldora es la `.insignia`
   de siempre con el aspa de `.sistema-quitable`, y el buscador es el
   `.buscador .panel-buscador` de Miembros. */
.noti-miembros{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.noti-miembros:not(:empty){margin-bottom:var(--sp-2)}
.noti-miembro{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  border-radius:var(--radius-pill);font-size:var(--fs-sm);
  background:var(--surface-tint);color:var(--brand-primary);
  border:1px solid color-mix(in srgb,var(--brand-primary) 26%,transparent)}
.noti-miembro button{color:inherit;opacity:.6;font-size:var(--fs-body-lg);
  line-height:1;padding:0 2px;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.noti-miembro button:hover{opacity:1;color:var(--danger-500)}

/* Lo hallado va DEBAJO y en el flujo, no flotando: `.sugerencias` es
   `position:absolute` y aquí quedaría tapado por el campo siguiente del
   formulario. Con ocho como mucho, ocupar sitio no molesta. */
.noti-miembros-hallados{display:flex;flex-direction:column;gap:2px;
  margin-top:var(--sp-2)}
.noti-miembros-hallados:empty{display:none}
.noti-miembro-hallado{display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;width:100%;text-align:left;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-standard)}
.noti-miembro-hallado:hover{background:var(--surface-tint)}
.noti-miembro-hallado:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.noti-miembro-nombre{color:var(--text-title);font-size:var(--fs-sm)}
.noti-miembro-correo{color:var(--text-muted);font-size:var(--fs-xs)}

/* ---------- Ideas y Sugerencias ----------
   Dos paneles: ideas nuevas a la izquierda, sugerencias a la derecha. En
   móvil se apilan. Reutiliza .tarjeta, .campo y .boton. Ver sugerencias.js. */
.sug-columnas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);
  align-items:start;max-width:var(--container-narrow,880px)}
@media (max-width:760px){.sug-columnas{grid-template-columns:1fr}}
.sug-panel{display:flex;flex-direction:column;gap:var(--sp-3)}
.sug-panel h3{margin:0;font-size:var(--fs-h3);color:var(--text-title)}
.sug-ayuda{margin:0 0 var(--sp-1);font-size:var(--fs-sm);color:var(--text-muted);
  line-height:var(--lh-base)}
.sug-panel .campo textarea{width:100%;resize:vertical;min-height:3.2em;
  font:inherit;color:var(--text-body)}
.sug-panel .boton{align-self:flex-start}
.sug-aviso{margin:0}
.sug-aviso[hidden]{display:none}

/* ---------- Resultados ---------- */
.resultados{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-5)}
@media (max-width:560px){.resultados{grid-template-columns:1fr}}
.dato{background:var(--surface-invert);color:var(--text-onbrand);
  border-radius:var(--radius-lg);padding:var(--sp-5);text-align:center}
.dato.plano{background:var(--surface-tint);color:var(--text-title)}
.dato .valor{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight)}
.dato .unidad{font-size:var(--fs-body);opacity:.8;margin-left:4px}
.dato .etiqueta{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);
  text-transform:uppercase;opacity:.85;margin-top:var(--sp-2)}

/* ---------- Avisos ---------- */
.aviso{border-radius:var(--radius-md);padding:var(--sp-4);font-size:var(--fs-sm);
  border:1px solid transparent;margin-top:var(--sp-4)}
.aviso strong{display:block;margin-bottom:4px;color:var(--text-title)}
.aviso.info{background:var(--info-100);border-color:var(--info-500)}
.aviso.exito{background:var(--success-100);border-color:var(--success-500)}
.aviso.alerta{background:var(--warning-100);border-color:var(--warning-500)}
.aviso.peligro{background:var(--danger-100);border-color:var(--danger-500)}

/* `p.descargo` y no `.descargo`: dentro de una `.tarjeta`, `.tarjeta p{margin:0}`
   (misma especificidad de tipo) le comía el margen y el aviso quedaba pegado al
   botón de encima. Con el selector de tipo empatan y gana éste por ir después.
   Ya no lleva línea superior; sólo un margen que lo despega de lo anterior. */
p.descargo{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-6)}

/* ---------- Cabecera de sección (logo + título + entradilla) ---------- */
.cabecera-seccion{text-align:center;margin-bottom:var(--sp-7)}
/* El logo de la cabecera va en dos piezas, y no por capricho: `transform`
   sólo admite un dueño. El marco es el que viaja desde el centro de la
   pantalla (inicio.js le escribe su transición), y la imagen de dentro es la
   que respira. Al ir anidadas, las dos transformaciones se multiplican en vez
   de pisarse, y el logo respira también mientras vuela y ya colocado. */
.cabecera-seccion .logo-seccion{display:block;width:72px;height:72px;margin:0 auto var(--sp-4)}
.cabecera-seccion .logo-seccion img{width:100%;height:100%;object-fit:contain;
  animation:respirar 3.2s var(--ease-standard) infinite}
.cabecera-seccion h2{font-family:var(--font-display);font-size:var(--fs-h1);
  line-height:var(--lh-tight);margin-bottom:var(--sp-3)}
.cabecera-seccion .intro{max-width:var(--container-narrow);margin:0 auto;
  color:var(--text-muted);font-size:var(--fs-body-lg)}

/* ---------- Mosaico de buscadores ----------
   Las tres opciones son cuadrículas translúcidas: dejan pasar el círculo
   rosa que se pasea por detrás, igual que hace la barra superior. Nada de
   relleno sólido ni de sombras marcadas; lo que las separa del fondo es
   el desenfoque y un borde muy fino. */
.mosaico{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(3,1fr);max-width:960px;margin:0 auto}
@media (max-width:880px){.mosaico{grid-template-columns:1fr;max-width:460px}}

/* Velo bajo y desenfoque alto: lo que sostiene la legibilidad no es tapar el
   fondo, es difuminarlo. Con blur(24) lo de detrás pierde todo detalle y el
   texto -tinta oscura- se lee limpio aunque el cristal deje ver el círculo.

   La opacidad tarda 900 ms como en el inicio: es lo que dura el apagarse de
   los otros dos al elegir uno. */
.azulejo{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-2);text-align:left;width:100%;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius:var(--radius-xl);
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             opacity calc(900ms * var(--v,1)) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.azulejo:hover{background:var(--cristal-vivo);
  border-color:var(--border-strong);box-shadow:var(--shadow-md);
  transform:translateY(-3px)}
.azulejo:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- Elegir uno de los tres ----------
   Mismo gesto que en el inicio: se apagan los otros dos y los textos, y el
   elegido se queda a solas antes de irse. El logo y el círculo no se tocan:
   ellos siguen su viaje. */
body.eligiendo .cabecera-seccion h2,
body.eligiendo .cabecera-seccion .intro,
body.eligiendo .azulejo:not(.elegido){opacity:0;transition-delay:0ms}
/* El elegido se apaga donde está: ni crece, ni encoge, ni se mueve. */
.azulejo.apagandose{opacity:0 !important;transform:none !important;
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard) !important}

/* La ilustración va suelta, sin disco ni recuadro detrás: el azulejo ya es la
   superficie. Igual que los iconos del inicio, y con la misma sombra. */
.azulejo-icono{display:block;margin-bottom:var(--sp-3)}
.azulejo-icono img{width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--rose-900) 16%,transparent));
  transition:transform var(--dur-base) var(--ease-standard),
             filter var(--dur-base) var(--ease-standard)}
.azulejo:hover .azulejo-icono img{transform:scale(1.06);
  filter:drop-shadow(0 12px 26px color-mix(in srgb,var(--rose-900) 28%,transparent))}
.azulejo-icono svg{width:34px;height:34px}
.azulejo h3{font-family:var(--font-display);font-size:var(--fs-h3)}
/* Sobre cristal, el texto pide un punto más de contraste que sobre papel. */
.azulejo p{margin:0;color:var(--text-body);font-size:var(--fs-sm)}

/* Barra de vuelta al mosaico, encima del buscador abierto. */
.cabecera-buscador{display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;max-width:760px;margin:0 auto var(--sp-5)}

/* Sólo una flecha. El texto sobraba: se sabe de dónde se viene. Mismo cristal
   que la barra y que las cuadrículas.

   Es el botón redondo de la web, y por eso lo comparte también el de enviar
   de Celestia: una sola declaración para los dos, en vez de dos que hay que
   acordarse de cambiar a la vez. Lo único que cambia entre ellos es hacia
   dónde apunta la flecha. */
.volver,.enviar,.menu-tres-boton{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  color:var(--brand-primary);
  background:var(--cristal-borde-tenue);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(var(--cristal-rgb),.7);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.volver svg,.enviar svg{transition:transform var(--dur-base) var(--ease-standard)}
.volver:hover,.enviar:hover,.menu-tres-boton:hover{background:rgba(var(--cristal-rgb),.65);
  border-color:var(--border-strong);box-shadow:var(--shadow-md)}
/* Al pasar por encima, la flecha se asoma hacia atrás. */
.volver:hover svg{transform:translateX(-2px)}
/* Y al pulsarlo se hunde y da un golpe de luz alrededor. */
.volver:active,.enviar:active,.menu-tres-boton:active{transform:scale(.9)}
.volver:active svg{transform:translateX(-4px)}
.volver:focus-visible,.enviar:focus-visible,.menu-tres-boton:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- Buscador grande ----------
   Una barra de cristal y nada más: fondo blanco a media opacidad con el
   fondo desenfocado por detrás, borde muy fino y esquinas de píldora.
   Sin resplandores ni gradientes: se probaron y se quitaron a propósito. */
/* Al elegir un resultado la barra se acorta hasta dejar sólo la lupa y el
   nombre. El ancho exacto lo mide app.js y lo escribe en --ancho-corto: no se
   puede poner aquí porque depende de lo largo que sea el nombre. */
.buscador{position:relative;max-width:760px;margin:0 auto var(--sp-7);
  transition:max-width calc(620ms * var(--v,1)) var(--ease-standard)}
.buscador.corta{max-width:var(--ancho-corto,320px)}
/* Con la barra corta el campo ya no se escribe: se mira. Quien manda para
   volver a buscar es la lupa. */
.buscador.corta input{pointer-events:none;text-overflow:ellipsis}
/* Fuera del todo, no sólo apagada: apagada seguía ocupando su sitio y, como
   los elementos de una caja flexible no encogen por debajo de su contenido,
   el aspa se salía por fuera de la píldora ya acortada. */
.buscador.corta .limpiar{display:none}
.buscador.corta .lupa{cursor:pointer;color:var(--brand-primary)}
.buscador.corta .lupa:hover{color:var(--rose-500);transform:scale(1.08)}

/* La lupa es un botón desde el principio, aunque sólo haga algo cuando la
   barra está corta. Así no cambia de sitio ni de tamaño al acortarse. */
.buscador .lupa{flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--brand-primary);cursor:default;
  transition:color var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.buscador .lupa:focus-visible{outline:none;box-shadow:var(--shadow-focus);
  border-radius:var(--radius-pill)}

.buscador .caja{position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--sp-3);
  background:rgba(var(--cristal-rgb),.62);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-pill);padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.buscador .caja:hover{border-color:rgba(var(--cristal-rgb),.95);box-shadow:var(--shadow-md)}
/* Al escribir, el cristal se aclara un punto y la barra se levanta. */
.buscador .caja:focus-within{background:rgba(var(--cristal-rgb),.78);
  border-color:var(--realce);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.buscador .caja svg{flex:none;color:var(--brand-primary)}
/* `min-width:0` para que el campo pueda encogerse: sin esto no baja de su
   contenido mínimo y la caja desborda la píldora cuando la barra se acorta. */
.buscador input{flex:1;min-width:0;border:0;outline:none;background:none;
  font-size:var(--fs-body-lg);color:var(--text-title);padding:var(--sp-1) 0}
.buscador input::placeholder{color:var(--ink-300)}
.buscador .limpiar{flex:none;color:var(--text-muted);font-size:var(--fs-h3);
  line-height:1;padding:0 var(--sp-2);opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.buscador.con-texto .limpiar{opacity:1;pointer-events:auto}
.buscador .limpiar:hover{color:var(--brand-primary)}
/* El mismo cristal dentro del panel: sin anchura máxima, sin margen, sin el
   movimiento de acortarse. El botón × aparece con CSS en vez de con JS. */
.panel-buscador{max-width:none;margin:0;transition:none}
.panel-buscador .lupa{cursor:default}
.panel-buscador .caja{padding:var(--sp-3) var(--sp-4)}
.panel-buscador .caja:focus-within{transform:none}
.panel-buscador input:not(:placeholder-shown) ~ .limpiar{opacity:1;pointer-events:auto}

/* El mini buscador de cada sistema, en Fichas: va DENTRO de un desplegable ya
   abierto, así que pide menos que el de arriba -menos alto, letra más chica-
   para no competir con la lista de fármacos que tiene debajo. */
.panel-buscador.sistema-buscar{margin-bottom:var(--sp-3)}
.sistema-buscar .caja{padding:var(--sp-2) var(--sp-3)}
.sistema-buscar input{font-size:var(--fs-body-sm)}

/* Sugerencias en vivo */
.sugerencias{position:absolute;top:calc(100% + var(--sp-2));left:0;right:0;z-index:15;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;animation:aparecer var(--dur-base) var(--ease-standard);
  transition:opacity calc(260ms * var(--v,1)) var(--ease-standard),
             transform calc(260ms * var(--v,1)) var(--ease-standard)}
@keyframes aparecer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Al borrar lo escrito, el panel NO se mueve: son sus renglones los que se
   recogen, exactamente igual que cuando se descarta uno escribiendo (ver
   .sugerencias button.saliendo, más abajo). Aquí sólo se apaga el cristal
   que los sostiene, para que el último fotograma no acabe en un filo.

   `animation:none` no sobra: si el panel acababa de aparecer, su animación
   de entrada seguiría mandando sobre la opacidad y no se apagaría. */
.sugerencias.yendose{opacity:0;animation:none;pointer-events:none}
.sugerencias button{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  text-align:left;padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-standard)}
.sugerencias button:last-child{border-bottom:0}

/* Las que el buscador descarta no desaparecen de golpe: se apagan y se
   recogen. Y las que entran, entran encendiéndose. Las que siguen valiendo
   no se tocan, así que ni parpadean ni se mueven: sólo les cambia el
   resaltado rosa de la parte escrita. */
.sugerencias button{overflow:hidden;
  transition:background var(--dur-fast) var(--ease-standard),
             opacity calc(260ms * var(--v,1)) var(--ease-standard),
             max-height calc(260ms * var(--v,1)) var(--ease-standard),
             padding calc(260ms * var(--v,1)) var(--ease-standard)}
.sugerencias button.entrando,
.sugerencias button.saliendo{opacity:0;max-height:0;
  padding-top:0;padding-bottom:0;border-bottom-width:0}
.sugerencias button{max-height:80px}
.sugerencias .sin-nada .nombre{color:var(--text-muted)}
.sugerencias button:hover,.sugerencias button.activa{background:var(--surface-tint)}
.sugerencias .nombre{font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--fs-body-lg);color:var(--text-title)}
.sugerencias .via{font-size:var(--fs-sm);color:var(--text-muted);margin-left:auto;
  text-align:right;white-space:nowrap}
.sugerencias mark{background:var(--rose-200);color:var(--brand-primary);
  font-weight:var(--fw-bold);border-radius:3px;padding:0 2px}

/* ---------- La rueda de abreviaturas ----------
   La rueda NO tiene círculo propio. El círculo es el de siempre: el mismo que
   llena el centro durante la carga y el que ronda siguiendo al ratón. Al
   entrar aquí se le manda al centro y a crecer (circulo.tomarDeRueda(), en
   inicio.js) y las letras se colocan encima. De ahí que aquí no haya ni
   fondo, ni borde, ni sombra: todo eso ya está pintado por detrás.

   La rueda va en el flujo de la página, en su sitio y debajo del título, como
   cualquier otro panel: no se aparta nada de arriba. Quien se mueve es el
   círculo, que se va a posar sobre ella y la sigue si la página se desplaza
   (ver `posado` en el bucle de inicio.js).

   La caja de la rueda es la del anillo de letras, no la de la nube del
   círculo: la nube es mucho más ancha y desborda por los lados, pero está
   fija a la ventana y por detrás de todo, así que no empuja nada. Reservar el
   ancho de la nube sólo dejaría medio palmo de página en blanco.

   El tamaño lo escribe medirRueda() en --rueda, --caja y --radio, midiendo el
   círculo de verdad. Aquí sólo queda dicho hasta dónde salen las letras, en
   tanto por uno del ancho del círculo, porque eso depende de hasta dónde
   llega el rosa que se ve y es cosa de quien lo pinta. */
:root{--rueda-anillo:.32}

/* LA RUEDA VA FIJA A LA VENTANA, igual que el círculo. Ésa es la solución, y
   costó tres intentos llegar a ella.

   El problema era siempre el mismo: el círculo está fijo a la ventana y la
   rueda estaba en el flujo de la página, así que al desplazarse uno se movía y
   el otro no, y se separaban. Se probó a que el círculo persiguiera a la rueda
   -y cabeceaba- y a impedir que la página se desplazara -y entonces no se
   podía ni subir ni bajar, que es peor que el problema original-.

   Fijos los dos, no hay nada que separar: la ruleta se queda donde está,
   quieta, y la página se desplaza por detrás con toda libertad. Que es lo que
   se pedía desde el principio.

   Se centra en lo que queda de ventana por debajo de la barra de arriba. */
.rueda[hidden]{display:none}
/* `dvh` y no `vh`, y en el móvil se nota: `vh` es la ventana CON la barra de
   direcciones del navegador desplegada, y no cambia nunca. Al desplazarse, esa
   barra se recoge, la ventana crece de verdad... y un sitio calculado con `vh`
   se queda donde estaba, o sea descolocado. `dvh` es la ventana de ahora
   mismo, la que de verdad hay. */
/* DÓNDE SE PLANTA. Debajo de donde acaba la cabecera de la sección, y no
   centrada en la ventana entera, que es lo que estaba mal: arriba hay
   cuatrocientos píxeles de logo, título y entradilla, así que centrarla en
   toda la ventana la montaba encima del texto. Se veía igual en el ordenador
   y en el teléfono, y así estaba en la captura.

   ---------- YA NO VA FIJA, Y ÉSA ES LA DIFERENCIA ----------
   La rueda estaba `position:fixed` y la página con el desplazamiento echado.
   Todo eso venía de cuando se dibujaba sobre el círculo de la web: el círculo
   sí va fijo a la ventana, así que la rueda tenía que ir fija con él, y si la
   página se movía las letras se despegaban del rosa. De ahí el cerrojo.

   Con disco propio nada de eso hace falta. La rueda es un elemento más de la
   página: se desplaza con ella, el título de arriba pasa por debajo del
   cristal de la barra como en cualquier otra pantalla, y no hay ningún
   cerrojo que echar ni que acordarse de quitar.

   Y al no tener que caber entera en lo que se ve de golpe, puede ser mucho
   más grande, que es lo que se le pedía. */
.rueda{position:relative;z-index:2;margin:0 auto var(--sp-7);
  width:var(--caja,720px);height:var(--caja,720px);
  display:grid;place-items:center;place-content:center;pointer-events:none}

/* El círculo no se pulsa; lo que se pulsa son las letras y los botones. Sin
   esto, la caja de la rueda taparía media página.
   `touch-action:manipulation` apaga el doble toque que acerca la página en el
   teléfono: pulsar dos letras seguidas lo disparaba (30-sep-2026). */
.rueda button{pointer-events:auto;touch-action:manipulation}

/* LO QUE VUELA SE RECORTA EN EL BORDE DEL PANEL (30-sep-2026). Ernesto: «la
   página realiza acercamientos y alejamientos involuntarios». Las chispas y la
   onda que salen de la letra pulsada pasaban del borde derecho; en un teléfono
   de 375 px la página medía 409 un instante y el navegador se alejaba para
   encajarla, y volvía a acercarse al terminar. `clip` y no `hidden`: no crea
   una caja de desplazamiento, así que nada de lo de dentro cambia de sitio. */
#panel-buscador{overflow-x:clip}

/* ---------- El disco de cristal de la rueda ----------
   El mismo material que los azulejos del panel: velo blanco bajo y desenfoque
   alto. Lo que sostiene la legibilidad no es tapar el fondo, es difuminarlo;
   así el círculo de la web se sigue viendo pasar por detrás, borroso, y las
   letras se leen limpias encima.

   Entra creciendo y girando un poco, y sale igual. Es lo que le da el aire de
   estar jugando con algo: una rueda que aparece de golpe es un cartel, y una
   que llega girando es una rueda. La curva rebasa un pelo al llegar
   -cubic-bezier con el tercer número por encima de 1- que es lo que hace que
   parezca que tiene peso. */
.rueda-cristal{position:absolute;top:50%;left:50%;
  width:var(--rueda,420px);height:var(--rueda,420px);
  margin:calc(var(--rueda,420px) / -2) 0 0 calc(var(--rueda,420px) / -2);
  border-radius:50%;
  background:rgba(var(--cristal-rgb),.26);
  backdrop-filter:blur(26px) saturate(1.18);
  -webkit-backdrop-filter:blur(26px) saturate(1.18);
  border:1px solid rgba(var(--cristal-rgb),.5);
  box-shadow:0 18px 50px color-mix(in srgb,var(--rose-900) 14%,transparent);
  transform:scale(.86) rotate(-14deg);opacity:0;
  transition:transform calc(760ms * var(--v,1)) cubic-bezier(.2,.9,.25,1.06),
             opacity calc(520ms * var(--v,1)) var(--ease-standard)}
/* Puesta: a su tamaño y derecha. La clase la pone montarRueda al poblarla. */
.rueda.puesta .rueda-cristal{transform:scale(1) rotate(0deg);opacity:1}
/* Y al vaciarse, se va por donde vino. */
.rueda.vaciandose .rueda-cristal{transform:scale(.86) rotate(10deg);opacity:0}

@media (prefers-reduced-motion:reduce){
  .rueda-cristal{transition:none}
}

.rueda-anillo{position:absolute;inset:0}

/* ---------- LA PISTA DE LAS LETRAS (27-sep-2026) ----------
   Un aro fino justo por donde van las letras, y encima un destello de luz que
   lo recorre despacio. Es lo que ata las letras al disco: sin él flotaban
   sueltas a medio camino del borde. El disco de cristal no se toca; esto va
   encima de él.

   El destello es un degradado cónico recortado a una franja con una máscara, y
   se mueve girando (transform): lo lleva la tarjeta gráfica y no ocupa el hilo
   principal (ver scripts/pruebas/animaciones-componibles.mjs). */
.rueda-aro{position:absolute;top:50%;left:50%;
  width:calc(var(--radio,200px) * 2);height:calc(var(--radio,200px) * 2);
  inset:0;margin:auto;
  border-radius:50%;border:1px solid rgba(var(--cristal-rgb),.55);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-accent,#49bec1) 14%,transparent),
             inset 0 0 18px color-mix(in srgb,var(--brand-accent,#49bec1) 10%,transparent);
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity calc(600ms * var(--v,1)) var(--ease-standard) calc(200ms * var(--v,1)),
             transform calc(760ms * var(--v,1)) cubic-bezier(.2,.9,.25,1.06) calc(200ms * var(--v,1))}
.rueda-aro::before{content:"";position:absolute;
  /* La franja mide 1,3 letras de ancho: envuelve el disco de cada letra -elegida
     o con el ratón encima- con un margen a cada lado, sin ir ajustada. */
  inset:calc(var(--lado-letra,40px) * -.65);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,
    color-mix(in srgb,var(--brand-accent,#49bec1) 55%,transparent) 84%,
    color-mix(in srgb,var(--brand-soft,#f28b82) 40%,transparent) 94%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--lado-letra,40px) * 1.3 - 3px),#000 calc(100% - var(--lado-letra,40px) * 1.3),#000 calc(100% - 2px),transparent);
          mask:radial-gradient(closest-side,transparent calc(100% - var(--lado-letra,40px) * 1.3 - 3px),#000 calc(100% - var(--lado-letra,40px) * 1.3),#000 calc(100% - 2px),transparent);
  opacity:.55;animation:rueda-destello 9s linear infinite}
@keyframes rueda-destello{to{transform:rotate(360deg)}}
.rueda.puesta .rueda-aro{opacity:1;transform:scale(1)}
.rueda.vaciandose .rueda-aro{opacity:0;transform:scale(.9)}
/* Con la sigla encontrada la pista se aparta: la protagonista es la tarjeta. */
.rueda.rueda-resuelta .rueda-aro{opacity:.35}

/* La onda que sale de la letra pulsada: nace en su sitio, crece y se apaga. */
.rueda-onda{position:absolute;top:50%;left:50%;pointer-events:none;
  width:var(--lado-letra,40px);height:var(--lado-letra,40px);border-radius:50%;
  border:2px solid var(--brand-accent,#49bec1);
  transform:translate(-50%,-50%) rotate(var(--ang)) translateY(calc(var(--radio) * -1)) scale(1);
  animation:rueda-onda calc(700ms * var(--v,1)) var(--ease-standard) forwards}
@keyframes rueda-onda{to{opacity:0;
  transform:translate(-50%,-50%) rotate(var(--ang)) translateY(calc(var(--radio) * -1)) scale(2.6)}}

/* Las chispas de la sigla encontrada: salen del centro hacia el borde y se
   apagan por el camino. Una vez, no en bucle. */
.rueda-chispa{position:absolute;top:50%;left:50%;z-index:3;pointer-events:none;
  width:var(--tam,18px);height:var(--tam,18px);margin:calc(var(--tam,18px) / -2) 0 0 calc(var(--tam,18px) / -2);
  background:var(--chispa,#49bec1);
  /* Una estrella de cinco puntas, nítida: recortada con clip-path y en un color
     sólido de la marca (ver lanzarChispasDeLaRueda en app.js). */
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:rotate(var(--ang)) translateY(calc(var(--lejos) * -1)) rotate(calc(var(--ang) * -1));
  /* Dos tiempos, cada uno sobre su propiedad: primero sale del centro y se
     posa en su sitio (transform), y ahí se queda; después se apaga (opacity),
     cada una con su retardo, una detrás de otra alrededor del círculo. */
  animation:rueda-chispa-sale calc(520ms * var(--v,1)) cubic-bezier(.2,.9,.25,1.2) var(--espera,0ms) backwards,
            rueda-chispa-apaga calc(420ms * var(--v,1)) var(--ease-standard) var(--apaga,1000ms) forwards}
@keyframes rueda-chispa-sale{
  from{transform:rotate(var(--ang)) translateY(0) rotate(calc(var(--ang) * -1)) scale(.2)}}
@keyframes rueda-chispa-apaga{
  to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .rueda-aro::before{animation:none}
  .rueda-onda,.rueda-chispa{display:none}
}

/* Cada letra es un cristal, no un botón: casi transparente, con el borde
   apenas insinuado, para que se vea el rosa del círculo a través. Lo que
   contrasta es la letra, en el rosa oscuro de la marca contra el rosa claro
   del círculo. Si el disco fuera opaco no habría círculo debajo: habría una
   ficha encima de él.

   El sitio de cada una es su ángulo: se gira, se sale hasta el radio y se
   desgira, para que la letra quede derecha y no tumbada. La escala va en una
   variable porque entrar, salir y elegirse sólo cambian eso, y el giro tiene
   que quedarse quieto.

   El lado lo escribe pintarRueda() en --lado-letra, repartiendo el borde
   entre cuántas letras son: con muchas salen más pequeñas, pero nunca
   encabalgadas. */
/* El disco de cada letra ocupa el 84% de su hueco (27-sep-2026). A tamaño
   entero, al crecer con el ratón (×1,12) o al elegirse (×1,15) se salía de la
   franja por donde pasa el destello de .rueda-aro, y el haz no lo abarcaba. Al
   84% cabe entero incluso crecido: 0,84 × 1,15 = 0,97. */
.rueda-letra{position:absolute;top:50%;left:50%;
  width:calc(var(--lado-letra,56px) * .84);height:calc(var(--lado-letra,56px) * .84);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:calc(var(--lado-letra,56px) * .4);
  font-weight:var(--fw-bold);color:var(--rose-700);
  background:rgba(var(--cristal-rgb),.22);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  border:1px solid var(--cristal-borde);cursor:pointer;
  transform:translate(-50%,-50%) rotate(var(--ang))
            translateY(calc(var(--radio) * -1)) rotate(calc(var(--ang) * -1))
            scale(var(--zoom,1));
  transition:transform calc(260ms * var(--v,1)) var(--ease-standard),
             opacity calc(260ms * var(--v,1)) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.rueda-letra:hover{background:var(--cristal-medio);
  border-color:rgba(var(--cristal-rgb),.9);--zoom:1.12;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent,#49bec1) 22%,transparent),
             0 6px 18px color-mix(in srgb,var(--brand-accent,#49bec1) 30%,transparent)}
.rueda-letra:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Las que no llevan a ninguna sigla. Se enseñan, apagadas, sólo en la primera
   vuelta: así se ve la rueda entera de la A a la Z y de un vistazo se sabe por
   dónde hay algo. No se pueden pulsar, y se nota antes de intentarlo. */
.rueda-letra.apagada{opacity:.3;cursor:default;background:rgba(var(--cristal-rgb),.1);
  border-color:rgba(var(--cristal-rgb),.3)}
.rueda-letra.apagada:hover{background:rgba(var(--cristal-rgb),.1);
  border-color:rgba(var(--cristal-rgb),.3);--zoom:1}

/* Al salir, lo de dentro se va con el círculo todavía grande: es lo que hace
   que se lea como vaciarse y no como apagarse. El círculo no se toca aquí; se
   achica después, cuando ya no queda nada dentro (ver apagarLaRueda). */
.rueda.vaciandose .rueda-letra,
.rueda.vaciandose .rueda-centro{opacity:0;--zoom:.4;
  transition:opacity 360ms var(--ease-standard),
             transform 360ms var(--ease-standard);
  pointer-events:none}
.rueda.vaciandose .rueda-centro{transform:scale(.9)}

/* De dónde salen. Las de la primera vuelta salen del centro; las demás, del
   sitio exacto donde estaba la letra que se acaba de pulsar, que marcarLetra()
   escribe en --org-x y --org-y. Eso es lo que hace que se entienda que unas
   nacen de otra y no que el borde se repuebla solo.

   Entran deprisa y escalonadas: no son una transición que haya que mirar, son
   la respuesta a haber pulsado. Irse, en cambio, va sin retardo: escalonado
   leería como si la rueda dudara. */
.rueda-letra.entrando{opacity:0;transition-delay:calc(var(--i) * calc(18ms * var(--v,1)));
  transform:translate(-50%,-50%)
            translate(var(--org-x,0px),var(--org-y,0px)) scale(.25)}
.rueda-letra.saliendo{opacity:0;--zoom:.4;transition-delay:0s;
  transition-duration:calc(200ms * var(--v,1));pointer-events:none}
/* Las elegidas NO se van con las demás: se quedan en su sitio, encendidas,
   formando la sigla a la vista mientras alrededor aparecen las que pueden
   seguirlas. Marcada la C se queda la C; marcada la M se quedan la C y la M. */
.rueda-letra.elegida{background:rgba(var(--cristal-rgb),.62);
  border-color:var(--realce);--zoom:1.15;transition-delay:0s;
  cursor:default;font-weight:var(--fw-bold)}
.rueda-letra.elegida:hover{background:rgba(var(--cristal-rgb),.62);--zoom:1.15}

/* Y al encontrar la sigla, las elegidas se van al centro y se juntan. No
   desaparecen para que aparezca la tarjeta: son ellas las que se convierten en
   la respuesta, y por eso el viaje se ve.

   El `transform` se escribe entero y sin el giro, porque aquí ya no importa
   dónde estaba cada una: van todas al mismo sitio. Se apagan al llegar, que es
   cuando la tarjeta se enciende debajo. */
.rueda-letra.alCentro{
  transform:translate(-50%,-50%) scale(.35);
  opacity:0;
  transition:transform 620ms var(--ease-standard) calc(var(--i,0) * 60ms),
             opacity 620ms var(--ease-standard) calc(var(--i,0) * 60ms)}

/* Lo de dentro. El ancho se limita para que el texto no llegue al borde
   curvo: a toda anchura dentro de un círculo se lee cortado por unas esquinas
   que no existen. */
.rueda-centro{position:relative;z-index:1;text-align:center;
  max-width:calc(var(--rueda,560px) * .46);padding:var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  animation:aparecer var(--dur-slow) var(--ease-standard)}
.rueda-marcado{font-family:var(--font-display);font-size:var(--fs-h1);
  font-weight:var(--fw-bold);color:var(--rose-900);letter-spacing:var(--ls-display);
  line-height:var(--lh-tight)}
/* Sin nada marcado no hay sigla que enseñar, así que el hueco lo ocupa la
   instrucción, en el tamaño del texto corriente y no en el de la sigla. */
.rueda-marcado.vacio{font-family:var(--font-body);font-size:var(--fs-body-lg);
  font-weight:var(--fw-regular);color:var(--ink-700);letter-spacing:var(--ls-body)}
.rueda-pista{font-size:var(--fs-sm);color:var(--ink-500);margin:0}

/* Los botones son del mismo cristal que las letras, y por lo mismo: aquí
   dentro nada tapa el círculo. Píldoras en vez de discos porque llevan
   palabras, no un carácter. */
.rueda-borrar,.rueda-otra{font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--rose-700);background:rgba(var(--cristal-rgb),.22);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard)}
.rueda-borrar:hover,.rueda-otra:hover{background:var(--cristal-borde-tenue);
  border-color:rgba(var(--cristal-rgb),.9)}

/* La sigla encontrada. Tampoco es una tarjeta blanca: es el mismo cristal,
   ahora en forma de recuadro, y el círculo se sigue viendo por detrás. */
.rueda.rueda-resuelta .rueda-centro{max-width:calc(var(--rueda,560px) * .58);background:rgba(var(--cristal-rgb),.24);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-lg);
  padding:var(--sp-5)}
.rueda.rueda-resuelta .insignia{background:rgba(var(--cristal-rgb),.4);color:var(--rose-700)}
.rueda-sigla{font-family:var(--font-display);font-size:var(--fs-h1);
  font-weight:var(--fw-bold);color:var(--rose-900);line-height:var(--lh-tight)}
.rueda-significado{font-size:var(--fs-body-lg);color:var(--ink-900);margin:0}
/* Varios significados de la misma sigla: numerados, en el mismo tamaño que uno solo. */
.rueda-significados{margin:0;padding:0 0 0 1.4em;text-align:left;
  font-size:var(--fs-body-lg);color:var(--ink-900);display:grid;gap:var(--sp-1,4px)}
.rueda-nota{font-size:var(--fs-sm);color:var(--ink-700);margin:0}

@media (prefers-reduced-motion:reduce){
  .rueda-letra,.rueda-centro{transition:none;animation:none}
  .rueda-letra.entrando{opacity:1;--zoom:1;
    transform:translate(-50%,-50%) rotate(var(--ang))
              translateY(calc(var(--radio) * -1)) rotate(calc(var(--ang) * -1))}
}

.alias{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-2)}

/* ---------- Iconos de tarjeta ---------- */
.icono{width:56px;height:56px;border-radius:var(--radius-md);
  background:var(--surface-tint);color:var(--brand-primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);
  transition:background var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.tarjeta-boton:hover .icono{background:var(--brand-primary);color:var(--text-onbrand);
  transform:scale(1.06)}
.icono.icono-ilustrado{width:80px;height:80px;background:transparent}
.lupa-ilustrada{display:block;width:32px;height:32px;object-fit:contain}
.icono-ilustrado img{display:block;width:100%;height:100%;object-fit:contain;
  filter:var(--filtro-icono,hue-rotate(calc(var(--tono-giro,0) * 1deg)) saturate(var(--tono-sat,1)))}
.tarjeta-boton:hover .icono-ilustrado{background:transparent}
.tarjeta-boton{transform:translateY(0)}
.tarjeta-boton:hover{transform:translateY(-3px);background:var(--cream-100)}

.insignia{display:inline-block;padding:4px var(--sp-3);border-radius:var(--radius-pill);
  background:var(--surface-tint);color:var(--brand-primary);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);text-transform:uppercase}

/* El puntito de color de un rótulo de grupo (Borrador/Revisado/Publicado en
   Fichas): las clases de tono ya existentes -`insignia-bien/mal/aviso`- son
   fondo pálido + texto de color, pensadas para una píldora con letra dentro;
   aquí no hay letra, así que el punto necesita SU color sólido y no el fondo
   pálido de esas clases, o se vería lavado. */
.insignia-punto{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.insignia-punto.insignia-bien{background:var(--success-500)}
.insignia-punto.insignia-mal{background:var(--danger-500)}
.insignia-punto.insignia-aviso{background:var(--warning-500)}

/* ---------- Ficha farmacológica ----------
   De cristal, como las cuadrículas y la barra: la misma superficie en toda
   la sección. El velo va algo más alto que en los azulejos porque aquí hay
   mucho texto seguido y en párrafos largos el fondo cansa la lectura. */
.tarjeta.ficha{background:rgba(var(--cristal-rgb),.48);
  backdrop-filter:blur(26px) saturate(1.25);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
  border:1px solid rgba(var(--cristal-rgb),.6);
  border-radius:var(--radius-xl)}

.ficha .encabezado{background:rgba(253,238,240,.5);
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-6);
  padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid rgba(var(--cristal-rgb),.6);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.ficha .encabezado h3{font-family:var(--font-display);font-size:var(--fs-h2);
  margin-bottom:var(--sp-2)}
/* Grupo y subgrupo, una al lado de la otra y con la misma etiqueta. */
.ficha .encabezado .etiquetas{
  margin:0 0 var(--sp-3)}
.ficha .encabezado .alias{margin-top:0}

/* ---------- LA FICHA DE UN TÉRMINO, PARTIDA EN DOS ----------

   La misma cabecera rosa de una ficha de fármaco -mismo fondo, mismos
   márgenes negativos que la llevan hasta el borde de la tarjeta- pero dividida
   en dos mitades: la palabra a la izquierda y lo que significa a la derecha.
   Debajo, sólo el descargo.

   Es una rejilla de dos columnas y no dos cajas flotando, y eso es lo que hace
   que el alto lo decida el texto: la mitad más larga manda y la otra la
   acompaña, igual que se estira una ficha de fármaco según lo que tenga
   escrito. Nadie tiene que medir nada.

   En estrecho se apilan, con la palabra arriba: es lo que se ha buscado. */
.termino-partido{display:grid;grid-template-columns:1fr 1.4fr;
  gap:var(--sp-5);align-items:stretch}
@media (max-width:720px){
  .termino-partido{grid-template-columns:1fr;gap:var(--sp-4)}
}

.termino-lado{display:flex;flex-direction:column;justify-content:center;
  min-width:0}

/* Cuando se llega a un término desde otra sección -la tarjeta de una vacuna
   de Vaccini-, debajo de la definición va el camino de vuelta. Ver
   abrirTerminoDelGlosario en app.js. */
.termino-regreso{margin:var(--sp-4) 0 0}
.termino-regreso .boton-suave{gap:var(--sp-2)}

/* El rótulo de cada mitad. Pequeño, en versales y en gris: sin él, dos bloques
   de texto uno al lado del otro no dicen cuál es cuál. */
.termino-rotulo{margin:0 0 var(--sp-2);font-family:var(--font-body);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--text-muted)}

/* La palabra, y contrasta: en la letra de los títulos, grande y en el rosa
   hondo de la marca. Es lo que se ha venido a buscar, así que es lo primero
   que tiene que encontrar la vista al llegar. */
.termino-palabra{margin:0;font-family:var(--font-display);
  font-size:var(--fs-h1);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  color:var(--brand-primary);overflow-wrap:anywhere}
.termino-tambien{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);
  color:var(--text-muted)}

/* Los sinónimos, justo debajo del término principal y como píldoras de
   cristal: cada una es un nombre por el que también se encuentra la
   definición. Si se llegó por un sinónimo, aquí va el término original. */
/* El término y sus sinónimos, con aire entre los dos (27-sep-2026). Iban
   apretados, el rótulo casi pegado a la palabra. Ahora una línea fina los
   separa, y las píldoras son más holgadas para que cada sinónimo se lea
   como un nombre aparte. */
.termino-lado .termino-palabra{margin-bottom:var(--sp-2)}
.termino-rotulo-sinonimos{margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid color-mix(in srgb,var(--brand-accent,#49bec1) 28%,transparent)}
.termino-sinonimos{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-2);
  margin:var(--sp-1,4px) 0 0;padding:0;list-style:none}
.termino-sinonimos li{padding:var(--sp-2) var(--sp-4);border-radius:999px;
  background:var(--cristal-claro);border:1px solid var(--cristal-claro-borde);
  box-shadow:var(--shadow-xs);
  color:var(--text-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold,600);
  line-height:var(--lh-snug,1.35)}

/* Y la definición, en el cristal de la casa. Sobre el rosa hace además el
   trabajo de separar la respuesta de la palabra sin una línea de por medio.

   En su versión CLARA, que es la que hace falta aquí: los azulejos de la web
   se posan sobre el fondo crema y con un velo bajo basta, pero éste va encima
   de la cabecera rosa, y a .28 el rosa se le colaba por debajo hasta casi
   igualar los dos tonos. Se leía como una mancha algo más pálida, no como una
   pieza aparte. Ver «EL CRISTAL DE LA CASA» en colors.css. */
.termino-significa{padding:var(--sp-5);
  border-radius:var(--radius-xl);
  background:var(--cristal-claro);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-claro-borde);
  box-shadow:var(--shadow-xs);
  justify-content:flex-start}
.termino-texto{margin:0;color:var(--text-body);font-size:var(--fs-body-lg);
  line-height:var(--lh-body)}
.termino-ejemplo{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);
  border-top:1px solid var(--border-subtle);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-body)}

/* La ficha aparece cuando la barra ha terminado de acortarse, y se va igual
   al pulsar la lupa. Un desvanecimiento a secas apenas se lee en una tarjeta
   tan grande: parece que estaba y ya. Con un palmo de recorrido -sube al
   entrar, baja al salir- el ojo sí registra el gesto.

   El orden importa: `saliendo` va después de `entrando` porque comparten
   especificidad y necesita imponer su duración, más corta. */
/* Curva pareja y no la de la web (--ease-standard). Aquí lo que importa es
   que el cambio se VEA, y esa curva está tan cargada al principio que a un
   cuarto del tiempo ya se ha ido el 72%: se esfuma de golpe y luego se
   arrastra. Con ésta la opacidad avanza a ritmo constante. */
#ficha{transition:opacity calc(700ms * var(--v,1)) cubic-bezier(.35,0,.65,1),
                  transform calc(700ms * var(--v,1)) cubic-bezier(.35,0,.65,1)}
/* `transition:none` al apagarla, y no es un detalle: sin esto, poner la clase
   arrancaba un fundido de 700 ms de 1 a 0, y al quitarla un fotograma después
   la ficha volvía hacia 1 desde casi 1. Nunca llegaba a estar apagada, así
   que nunca se la veía encenderse. Apagar es instantáneo; encender, no. */
#ficha.entrando{opacity:0;transform:translateY(18px);transition:none}
#ficha.saliendo{opacity:0;transform:translateY(12px);
  transition:opacity calc(520ms * var(--v,1)) cubic-bezier(.35,0,.65,1),
             transform calc(520ms * var(--v,1)) cubic-bezier(.35,0,.65,1)}

/* Toda la ficha en Lora, texto incluido. En el resto de la web el cuerpo va
   en la de palo; aquí no, porque la ficha es lo que se lee de verdad y es lo
   que más se parece a la guía impresa. */
.ficha,.ficha p,.ficha li,.ficha dd,.ficha dt,.volteada{font-family:var(--font-serif)}

/* Los doce apartados. Cada uno con su regla arriba: es lo que deja pasar la
   vista de un apartado a otro sin tener que leerlos. */
.apartado{padding-top:var(--sp-5);border-top:1px solid var(--border-subtle)}
.apartado:first-child{padding-top:0;border-top:0}
.apartado + .apartado{margin-top:var(--sp-5)}
/* Título en Lora y en el rosa de marca, del tamaño de un h4: sin mayúsculas
   ni espaciado forzado, que en una serif se leen peor. */
.apartado > h3{font-family:var(--font-serif);font-size:var(--fs-h4);
  color:var(--brand-accent);font-weight:var(--fw-semibold);
  margin:0 0 var(--sp-2)}
.apartado p{margin:0 0 var(--sp-3);color:var(--text-body)}
.apartado p:last-child{margin-bottom:0}
.apartado ul{margin:0;padding-left:var(--sp-5);color:var(--text-body)}
.apartado li{margin-bottom:var(--sp-2)}
.apartado li:last-child{margin-bottom:0}

/* Subapartados: los de la posología y las fases. Van sangrados y con un
   filete a la izquierda para que se lean como partes de su apartado, no como
   apartados nuevos. */
.apartado .parte{margin-top:var(--sp-3);padding-left:var(--sp-3);
  border-left:2px solid var(--rose-200)}
.apartado .parte:first-of-type{margin-top:var(--sp-2)}
.apartado .parte h4{font-family:var(--font-serif);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);color:var(--text-title);
  margin:0 0 var(--sp-2);display:flex;align-items:baseline;gap:var(--sp-2)}
/* El número de la fase, en su disco. Va como parte del título y no como
   lista numerada para que el orden lo mande el código y no el navegador. */
.apartado .parte h4 .numero{flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--surface-tint);color:var(--brand-primary);
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  display:inline-flex;align-items:center;justify-content:center;
  align-self:center}

/* Pares etiqueta/valor: lo que se lee como ficha técnica. */
.apartado .datos{margin:0 0 var(--sp-3);display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3)}
.apartado .datos dt{color:var(--text-title);font-weight:var(--fw-semibold)}
.apartado .datos dd{margin:0;color:var(--text-body)}
/* El dato que no tiene valor: una aclaración suelta dentro de la ficha
   técnica. Ocupa las dos columnas para que no ensanche la de las etiquetas, y
   va en el tono del cuerpo porque no es el nombre de nada. */
.apartado .datos .dato-suelto{grid-column:1/-1;color:var(--text-body);
  font-weight:var(--fw-regular)}
@media (max-width:560px){
  .apartado .datos{grid-template-columns:1fr;gap:0}
  .apartado .datos dt{margin-top:var(--sp-2)}
}

/* ---------- LA POSOLOGÍA Y LA PRESENTACIÓN, EN LA FICHA ----------

   Cada pauta es una cuadrícula y no un renglón de texto, y ésa es la ganancia
   de haberlas escrito en casillas: se pueden barrer con la vista buscando la
   vía que interesa, en vez de leer un párrafo entero para encontrarla.

   Los datos de dentro son el MISMO `<dl class="datos">` de la ficha técnica de
   farmacocinética: no hay una manera nueva de enseñar datos en esta ficha, hay
   una sola. */

/* Posología, Presentación, Farmacocinética, Farmacodinamia, Incompatibilidades y Contraindicaciones en la ficha pública */
.posologia-elegir-publica,.presentacion-elegir-publica,.farmacocinetica-elegir-publica,.farmacodinamia-elegir-publica,.incompatibilidades-elegir-publica,.contraindicaciones-elegir-publica{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}

/* Modal volteado de Posología, Farmacocinética, Farmacodinamia, Incompatibilidades y Contraindicaciones */
.posologia-volteada{width:min(540px,calc(100vw - 32px))!important;max-width:540px}
.fk-modal-volteada,.fd-modal-volteada{width:min(720px,calc(100vw - 32px))!important;max-width:720px}
.fk-fases-tarjeta-lista,.fd-fases-tarjeta-lista{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;margin-top:var(--sp-2)}
.fk-fase-seccion,.fd-fase-seccion{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
  background:rgba(var(--cristal-rgb),.6);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.fk-seccion-sub,.fd-seccion-sub{margin:0;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--brand-primary);text-transform:uppercase;letter-spacing:.04em}
.fk-dato-linea,.fd-dato-linea{margin:0;font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--text-title)}
.fk-no-aplica,.fd-no-aplica{margin:0;font-family:var(--font-sans);font-style:italic;font-size:var(--fs-xs);color:var(--text-muted)}
.fk-detalles-grid,.fd-detalles-grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fk-detalle-item,.fd-detalle-item{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);
  background:var(--surface-tint);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
.fd-item-ancho{grid-column:1 / -1}
.fk-etiqueta,.fd-etiqueta{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--brand-primary)}
.fk-valor,.fd-valor{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--text-title)}

.fd-indice-estrecho{font-weight:var(--fw-bold);box-shadow:0 0 0 1px rgba(220,38,38,.2)}
.fd-efectos-columnas{display:flex;flex-direction:column;gap:var(--sp-3)}
.fd-grupo-efecto{display:flex;flex-direction:column;gap:4px;padding:var(--sp-2) var(--sp-3);
  background:var(--surface-tint);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
.fd-efecto-titulo{font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-title)}
.fd-lista-vinetas{margin:0;padding-left:var(--sp-4);font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--text-body)}
.fd-lista-vinetas li{margin-bottom:2px}
.fd-alerta-grave{background:rgba(254,226,226,.65);border-color:rgba(239,68,68,.3)}
.fd-alerta-grave .fd-efecto-titulo{color:var(--danger-700);font-weight:var(--fw-bold)}
.fd-parejas-tarjeta-grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fd-pareja-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
  background:var(--surface-tint);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.fd-pareja-farmaco,.fd-pareja-consecuencia{display:flex;flex-direction:column;gap:2px}
.fd-pareja-farmaco strong{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--text-title)}
.fd-pareja-consecuencia span{font-family:var(--font-serif);font-size:var(--fs-xs);color:var(--text-body)}

/* Flashcards y Navegación en el Editor */
.flashcards-seccion-bloque{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.flashcard-controles-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);background:var(--surface-tint);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.switch-trabajar-igual-wrap{display:flex;align-items:center;gap:var(--sp-2)}
.switch-trabajar-igual-wrap .switch-control{position:relative;display:inline-block;width:38px;height:22px;margin:0}
.switch-trabajar-igual-wrap .switch-control input{opacity:0;width:0;height:0}
.switch-trabajar-igual-wrap .switch-deslizador{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background-color:color-mix(in srgb,var(--rose-600) 22%,var(--surface-sunken));
  transition:.25s ease;border-radius:22px}
.switch-trabajar-igual-wrap .switch-deslizador:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;
  background-color:#fff;transition:.25s ease;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch-trabajar-igual-wrap input:checked + .switch-deslizador{background-color:var(--rose-600)}
.switch-trabajar-igual-wrap input:checked + .switch-deslizador:before{transform:translateX(16px)}
.switch-etiqueta{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-title)}

.flashcard-nav-botones{display:flex;align-items:center;gap:var(--sp-2)}
.flashcard-btn-nav{padding:4px 10px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);border-radius:var(--radius-sm);
  background:rgba(var(--cristal-rgb),.9);border:1px solid var(--border-subtle);cursor:pointer;transition:all .15s ease}
.flashcard-btn-nav:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.flashcard-indicador{font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-title);padding:0 var(--sp-2)}

.aviso-sync-activo{padding:var(--sp-2) var(--sp-3);background:rgba(254,243,199,.7);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--warning-800)}

.flashcards-pila-contenedor{position:relative;width:100%}
.flashcards-pila-contenedor:before{content:"";position:absolute;top:-4px;left:8px;right:8px;height:10px;
  background:rgba(0,0,0,.03);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);z-index:0}
.flashcard-tarjeta-activa{position:relative;z-index:1;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:transform .25s ease,opacity .25s ease}

/* Editor de Farmacocinética, Farmacodinamia, Incompatibilidades y Contraindicaciones */
.farmacocinetica-comercial-editor,.farmacodinamia-comercial-editor,.incompatibilidades-comercial-editor,.contraindicaciones-comercial-editor{
  display:flex;flex-direction:column;gap:var(--sp-4);width:100%}
.fk-lista-tarjetas,.fd-lista-tarjetas{display:flex;flex-direction:column;gap:var(--sp-4);width:100%}
.tarjeta-fk-comercial,.tarjeta-fd-comercial,.tarjeta-inc-comercial,.tarjeta-ci-comercial{
  display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);
  background:var(--surface-tint);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.fk-cabecera-fila,.fd-cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-subtle)}
.fk-nombre-comercial,.fd-nombre-comercial{margin:0;font-family:var(--font-serif);font-size:var(--fs-h4);
  font-weight:var(--fw-bold);color:var(--text-title)}
.fk-fase-bloque,.fd-fase-bloque{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);
  background:rgba(var(--cristal-rgb),.8);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.fk-fase-titulo,.fd-fase-titulo{margin:0;font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--brand-primary)}
.fk-fila-campos,.fd-fila-campos{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fd-subcampo-indentado{border-left:3px solid var(--brand-primary);padding-left:var(--sp-3);margin-left:2px}
.fd-bloque-grave{background:rgba(254,226,226,.4);border:1px dashed rgba(239,68,68,.3);padding:var(--sp-3);border-radius:var(--radius-md)}
.fd-bloque-grave label{color:var(--danger-700);font-weight:var(--fw-bold)}
.fd-parejas-editor-lista{display:flex;flex-direction:column;gap:var(--sp-2)}
.fd-pareja-editor-fila{display:grid;gap:var(--sp-2);grid-template-columns:1fr 1fr auto;align-items:center}
.entrada-sufijo{position:relative;display:flex;align-items:center}
.entrada-sufijo input{padding-right:32px}
.sufijo-unidad{position:absolute;right:10px;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--text-muted);pointer-events:none}
.fk-multi-campo,.fd-multi-campo{display:flex;flex-direction:column;gap:var(--sp-2)}
.fk-entradas-lista,.fd-entradas-lista{display:flex;flex-direction:column;gap:var(--sp-2)}
.fk-multi-fila,.fd-multi-fila{display:flex;align-items:center;gap:var(--sp-2)}
.fk-quitar-btn,.fd-quitar-btn{padding:2px 8px;font-size:var(--fs-base);color:var(--danger-500);cursor:pointer}
.fk-anadir-btn,.fd-anadir-btn{align-self:flex-start;font-size:var(--fs-xs);margin-top:2px}

/* Filas de Incompatibilidades y Contraindicaciones en Editor */
.inc-lista-entradas,.ci-lista-entradas{display:flex;flex-direction:column;gap:var(--sp-3)}
.inc-entrada-fila,.ci-entrada-fila{display:grid;gap:var(--sp-3);grid-template-columns:1fr 1fr;padding:var(--sp-3);
  background:rgba(var(--cristal-rgb),.75);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.inc-quitar-fila,.ci-quitar-fila{grid-column:1 / -1;display:flex;justify-content:flex-end}
.posologia-volteada .cara{min-height:240px;padding:var(--sp-5)}
.posologia-tarjeta-cuerpo{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.posologia-tarjeta-paso{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.posologia-tarjeta-cabecera{display:flex;flex-direction:column;gap:2px;
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle)}
.posologia-tarjeta-cabecera.con-volver{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3)}
.posologia-tarjeta-sub{font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--brand-primary);text-transform:uppercase;letter-spacing:.05em}
.posologia-tarjeta-titulo{margin:0;font-family:var(--font-serif);font-size:var(--fs-h4);
  font-weight:var(--fw-bold);color:var(--text-title)}

.posologia-volver-btn{display:flex;align-items:center;justify-content:center;
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--surface-tint);color:var(--brand-primary);border:1px solid var(--border-subtle);
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.posologia-volver-btn:hover{background:var(--rose-200);border-color:var(--border-strong);
  color:var(--brand-accent);transform:translateX(-2px)}
.posologia-volver-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Lista de nombres comerciales como azulejos del editor */
.posologia-comerciales-lista{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:var(--sp-2)}
.azulejo-comercial{display:flex;flex-direction:column;gap:4px;
  padding:var(--sp-3) var(--sp-4);text-align:left;cursor:pointer;
  background:var(--cristal-medio);border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-md);box-shadow:var(--shadow-xs);
  transition:all var(--dur-fast) var(--ease-standard)}
.azulejo-comercial:hover{background:rgba(var(--cristal-rgb),.85);border-color:var(--brand-primary);
  transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.azulejo-comercial:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.azulejo-comercial-nombre{font-family:var(--font-serif);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.azulejo-comercial-cuenta{font-size:var(--fs-xs);color:var(--text-muted)}

/* Tablas de pautas en el modal volteado de Posología */
.posologia-tablas-lista{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;margin-top:var(--sp-2)}
/* `position:relative` NO es adorno (v410): sin él, lo que va posicionado dentro
   -el «Quitar» oculto de la tabla de Farmacocinética- no se queda en la caja
   que desplaza, se escapa, y en un teléfono ensanchaba la página entera. */
.pauta-tabla-contenedor{position:relative;width:100%;overflow-x:auto;border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:rgba(var(--cristal-rgb),.75);box-shadow:var(--shadow-xs)}
.pauta-tabla{width:100%;border-collapse:collapse;text-align:left;font-size:var(--fs-sm)}
.pauta-tabla th{background:var(--surface-tint);color:var(--brand-primary);font-family:var(--font-sans);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.pauta-tabla td{padding:var(--sp-3);border-bottom:1px solid var(--border-subtle);
  color:var(--text-title);font-family:var(--font-serif);vertical-align:top}
.pauta-tabla tbody tr:last-child td{border-bottom:none}
.pauta-legado{margin:0;padding:var(--sp-3);font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--text-body)}

.preparacion-pasos-label{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:none;color:var(--brand-primary);letter-spacing:normal}

.permisos-secundarios-bloque{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0;
  padding:var(--sp-2) var(--sp-3);background:var(--surface-tint);border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);transition:opacity var(--dur-base) var(--ease-standard)}
.permisos-secundarios-bloque.apagado{opacity:.45}
/* Antes ponía `.permiso-secundario.deshabilitado`, y se ha ensanchado a
   cualquier `.permiso`: los renglones secundarios llevan las dos clases, así
   que siguen igual, y de paso sirve para las casillas del Modo Health Fair que
   no se pueden desmarcar -sexo y edad- sin repetir la regla. */
.permiso.deshabilitado{cursor:not-allowed;opacity:.55;pointer-events:none}

/* Los redondeles. La casilla del navegador no se puede vestir, así que se
   esconde igual que la de marcar y se le dibuja la suya, que es la misma cara
   pero redonda: en una elección de una sola opción, un cuadrado miente. */
.permiso input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.permiso:has(input[type=radio]) > span::before{border-radius:50%}
.permiso:has(input[type=radio]) > span::after{left:5px;top:6px;width:8px;height:8px;
  border:0;border-radius:50%;background:var(--text-onbrand);transform:scale(.4)}
.permiso:has(input[type=radio]:checked) > span::after{transform:scale(1)}

.apartado .pautas{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.apartado .pauta{margin:0;padding:var(--sp-4);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-md);
  background:var(--cristal)}
.apartado .pauta-cabeza{margin:0 0 var(--sp-2);font-weight:var(--fw-semibold);
  color:var(--text-title)}
.apartado .pauta .datos{margin:0;font-size:var(--fs-sm)}

/* Los pasos de una preparación van numerados de verdad, con `<ol>`. La
   numeración de una secuencia es información: quien lea la ficha con un lector
   de pantalla tiene que oír «paso 2 de 5» y no una viñeta más. */
.apartado .pasos{margin:0;padding-left:var(--sp-5);color:var(--text-body)}
.apartado .pasos li{margin-bottom:var(--sp-2)}
.apartado .pasos li::marker{color:var(--brand-primary);font-weight:var(--fw-bold)}

/* La nota: lo que matiza lo anterior sin ser lo principal. */
.apartado .nota{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:rgba(248,245,244,.7);border-left:2px solid var(--rose-300);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--fs-sm);color:var(--text-muted)}
.apartado .nota strong{color:var(--brand-primary)}

/* ---------- Cuadrículas que se voltean ----------
   Efectos adversos e interacciones. Delante sólo el nombre; el porqué está
   detrás y se ve al pulsarla. Mismo cristal que el resto de la sección. */
.volteables{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.volteable{display:flex;align-items:center;justify-content:center;
  min-height:76px;padding:var(--sp-4);text-align:center;
  border-radius:var(--radius-lg);
  background:var(--cristal-medio);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(var(--cristal-rgb),.7);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.volteable .nombre{font-family:var(--font-serif);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);color:var(--text-title);line-height:var(--lh-heading)}
.volteable:hover{background:rgba(var(--cristal-rgb),.62);border-color:var(--border-strong);
  box-shadow:var(--shadow-md);transform:translateY(-2px)}
.volteable:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* Mientras está en alto, su hueco se queda vacío: así la rejilla no se
   recoloca y la vuelta encaja en el sitio exacto. */
.volteable.en-alto{opacity:0;pointer-events:none}

/* ---------- Gravedad ----------
   Efectos adversos e interacciones, los dos igual. La tarjeta entera se tiñe
   de uno de tres tonos: rojo lo que hay que vigilar sí o sí, ámbar lo
   intermedio, verde lo poco probable o lo leve. Sin rótulos ni leyenda: los
   tres colores ya se entienden solos, y en un apartado que se lee de un
   vistazo cualquier texto de más estorba.

   Los tres colores son los que la web ya usa para los avisos y para los
   tramos de las escalas -danger, warning, success-: no hay ningún color
   nuevo. Van muy rebajados a propósito: la mezcla es poco más de la mitad
   del tono y el resto blanco traslúcido, de modo que la tarjeta se tiñe pero
   sigue siendo el mismo cristal del resto de la sección y el texto en tinta
   oscura no pierde ni un punto de contraste.

   Las tres parejas se declaran una sola vez y las usan la cuadrícula del
   apartado y la tarjeta ya volteada. */
.grado-alta {--tinte:var(--danger-100); --filo:var(--danger-500)}
.grado-media{--tinte:var(--warning-100);--filo:var(--warning-500)}
.grado-baja {--tinte:var(--success-100);--filo:var(--success-500)}

.volteable[class*="grado-"]{
  background:color-mix(in srgb,var(--tinte) 52%,rgba(var(--cristal-rgb),.58));
  border-color:color-mix(in srgb,var(--filo) 20%,rgba(var(--cristal-rgb),.7))}
.volteable[class*="grado-"]:hover{
  background:color-mix(in srgb,var(--tinte) 74%,rgba(var(--cristal-rgb),.62));
  border-color:color-mix(in srgb,var(--filo) 40%,rgba(var(--cristal-rgb),.7))}

/* La que se levanta es la misma tarjeta, así que se lleva su color puesto. */
.volteada[class*="grado-"] .cara{
  background:color-mix(in srgb,var(--tinte) 42%,rgba(var(--cristal-rgb),.9));
  border-color:color-mix(in srgb,var(--filo) 20%,rgba(var(--cristal-rgb),.85))}

/* El cursor que parpadea mientras el nombre se escribe de vuelta. Se apoya en
   el propio texto, así que sigue a la última letra sin tener que medirla. */
.volteable .nombre.escribiendo::after{content:"";display:inline-block;
  width:1px;height:1em;margin-left:2px;vertical-align:-.15em;
  background:var(--brand-accent);animation:cursor .7s steps(1) infinite}
@keyframes cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

/* El velo de detrás. Del mismo cristal que todo lo demás, sólo que a pantalla
   completa: no oscurece, difumina. */
.velo-volteo{position:fixed;inset:0;z-index:60;
  background:rgba(252,252,251,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-standard)}
.velo-volteo.abierto{opacity:1}

/* La cuadrícula en alto. Se monta ya a su tamaño final y de encajarla sobre
   la pequeña y soltarla se encarga app.js.

   La altura NO está escrita aquí: la pone el texto. Las explicaciones van de
   dos renglones a doce, y con una altura fija las largas se salían por
   debajo de la tarjeta. Quien manda es la cara de detrás, que es la que
   lleva el texto: va en el flujo y por eso estira el giro. La de delante,
   que está vacía, se pone encima ocupando lo que haya salido.

   Y como la altura ya no se sabe de antemano, centrarla tampoco se puede
   hacer con un margen escrito a mano: lo mide y lo escribe app.js. */
.volteada{position:fixed;z-index:61;left:50%;top:50%;
  width:min(420px,88vw);perspective:1200px;pointer-events:none}
.volteada .giro{position:relative;width:100%;
  transform-style:preserve-3d;
  transition:transform var(--dur-slow) var(--ease-standard)}
.volteada.abierta .giro{transform:rotateY(180deg)}

.volteada .cara{display:flex;
  border-radius:var(--radius-xl);padding:var(--sp-5);
  background:rgba(var(--cristal-rgb),.86);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(var(--cristal-rgb),.85);
  box-shadow:var(--shadow-lg);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.volteada .delante{position:absolute;inset:0;
  align-items:center;justify-content:center;text-align:center}
.volteada .delante .nombre{font-family:var(--font-serif);font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);color:var(--text-title)}
/* `min-height` y no `height`: es el suelo para las explicaciones cortas, para
   que una de dos renglones no salga como una pastilla. De ahí para arriba
   crece con el texto. Y un techo, por si alguna se dispara. */
.volteada .detras{position:relative;transform:rotateY(180deg);
  flex-direction:column;pointer-events:auto;
  min-height:210px;
  /* `vh` de reserva para lo viejo; `dvh` -la ventana de AHORA, sin la barra del
     navegador- es lo que de verdad manda. Menos 2,5rem para que nunca se pegue
     al borde: app.js la centra, y si no cabe la deja aquí arriba con scroll. */
  max-height:82vh;
  max-height:calc(100dvh - 2.5rem);
  overflow-y:auto;overscroll-behavior:contain;
  /* Delgada y no la del sistema: dice «aquí hay más» sin comerse el sitio
     que ya reparte con cuidado el resto de la tarjeta. */
  scrollbar-width:thin}
.volteada .detras h5{font-family:var(--font-serif);font-size:var(--fs-h4);
  color:var(--brand-accent);font-weight:var(--fw-semibold);
  margin:0 var(--sp-6) var(--sp-3) 0;line-height:var(--lh-heading)}
.volteada .detras p{margin:0;color:var(--text-body);font-size:var(--fs-sm)}
.adverso-modal-volteada{width:min(580px,94vw)!important;max-width:580px}
.adverso-bloque{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
.adverso-subtitulo{margin:0;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--brand-primary);text-transform:none;letter-spacing:normal}
.adverso-bloque-cuidados{padding:var(--sp-2) var(--sp-3);background:rgba(var(--cristal-rgb),.6);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.cuadricula-fila-horizontal{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.9);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);width:100%}
.cuadricula-fila-superior{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr) minmax(0,200px);width:100%}
.cuadricula-fila-inferior-columnas{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
/* v410: en el teléfono el selector de gravedad quedaba fuera de la tarjeta
   (200 px fijos al lado del nombre). Uno debajo del otro. */
@media (max-width:560px){
  .cuadricula-fila-superior,.cuadricula-fila-inferior-columnas{grid-template-columns:minmax(0,1fr)}
}
.cuadricula-campo-columna{display:flex;flex-direction:column;gap:var(--sp-1);width:100%}
.cuadricula-sublabel{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--brand-primary);text-transform:none;letter-spacing:normal}
.cuadricula-cuidados-vista{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}
.toxicidad-tarjeta-vista{padding:var(--sp-3) var(--sp-4);background:rgba(var(--cristal-rgb),.7);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.volteada .cerrar{position:absolute;top:var(--sp-3);right:var(--sp-4);
  font-size:var(--fs-h3);line-height:1;color:var(--text-muted);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-standard)}
.volteada .cerrar:hover{color:var(--brand-primary)}

@media (prefers-reduced-motion:reduce){
  .volteada,.volteada .giro,.velo-volteo{transition:none}
}

/* ---------- Escalas ---------- */
.item-escala{border-bottom:1px solid var(--border-subtle);padding:var(--sp-4) 0}
.item-escala:last-of-type{border-bottom:0}
.item-escala p{font-weight:var(--fw-semibold);color:var(--text-title);
  margin:0 0 var(--sp-3);font-size:var(--fs-body)}
.opciones{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.opciones label{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);
  transition:all var(--dur-fast) var(--ease-standard)}
.opciones label:hover{border-color:var(--border-strong);background:var(--rose-100)}
.opciones input{accent-color:var(--brand-primary)}
.opciones input:checked + span{font-weight:var(--fw-semibold);color:var(--brand-primary)}

/* ---------- Pie ---------- */
.pie{background:var(--surface-invert);color:var(--text-onbrand);
  padding:var(--sp-7) 0}
.pie p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);opacity:.85}
.pie strong{font-family:var(--font-display);font-size:var(--fs-h4)}

/* ---------- Aparición al desplazarse ----------
   Va al final a propósito: .tarjeta-boton declara su propia transición y,
   al tener la misma especificidad, ganaba la que se escribe después.
   Por eso el desvanecimiento de las tarjetas se cortaba de golpe.
   Aquí se listan todas las propiedades juntas para que convivan.

   --i es la posición dentro de la rejilla: escalona la entrada. */
.revelable{opacity:0;
  transition:opacity calc(900ms * var(--v,1)) var(--ease-standard) calc(var(--i,0) * calc(160ms * var(--v,1))),
             box-shadow var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.revelable.visto{opacity:1}
/* Al salir de pantalla se apaga rápido y sin escalonar, para que al volver
   a entrar el escalonado se vuelva a apreciar. */
.revelable:not(.visto){transition-duration:calc(500ms * var(--v,1));transition-delay:0ms}

/* En pantallas estrechas los iconos de FÁBRICA se recogen: en píxeles no
   cabrían y se salían por los lados.

   Sólo tocan a los iconos SIN colocación propia (`:not(.icono-colocado)`) y
   fuera del editor (`body:not(.colocando-iconos)`). Un icono que la cuenta
   haya movido lleva `.icono-colocado` y su --x/--y va en línea con
   `!important` (ver pintarOrbes en inicio.js), así que gana a esto; y mientras
   se está colocando, el editor manda del todo. */
@media (max-width:720px){
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="buscador"]    {--x:-33% !important;--y:-2% !important}
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="calculadoras"]{--x:33% !important;--y:-2% !important}
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="escalas"]     {--x:0% !important;--y:34% !important}
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="simulacion"] {--x:-33% !important;--y:-33% !important}
  /* Simulación, Juegos y Modo Health Fair también, o en móvil se apilaban sobre
     el logo: su posición de código son `calc()` en píxeles pensados para PC,
     que en un teléfono colapsan casi al centro. (Omnia ya tiene la suya, más
     abajo.) */
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="juegos"]      {--x:33% !important;--y:-33% !important}
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="feria"]       {--x:34% !important;--y:27% !important}
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="vaccini"]     {--x:0% !important;--y:-33% !important}
}

/* ---------- Llegada a una sección ----------
   Va al final del archivo por lo mismo que .revelable: comparte especificidad
   con las tarjetas y con los azulejos, y necesita ganarles.

   Mientras el logo vuela del centro a la cabecera, la sección espera apagada.
   Después entran los textos, y por último las cuadrículas. Los tiempos los
   lleva inicio.js: aquí sólo se dice cómo se ve cada paso. */

/* La cabecera no puede apagarse durante el vuelo: es donde está el logo. */
/* (La cabecera ya no se apaga al desplazarse: quedó fuera del vigilante,
   porque su entrada la manda la coreografía. Ver OBSERVABLES en inicio.js.) */
/* Por encima del resto mientras cruza la pantalla. */
body.aterrizando .cabecera-seccion .logo-seccion{position:relative;z-index:5}
/* `transition:none` mientras esperan: si no, se apagarían con un fundido a la
   vista en lugar de estar ya apagados cuando llega la sección. La transición
   sólo tiene que correr al encenderse, y por eso vive en la regla de abajo. */
body.aterrizando .cabecera-seccion h2,
body.aterrizando .cabecera-seccion .intro{opacity:0;transition:none}
.cabecera-seccion h2,
.cabecera-seccion .intro{transition:opacity calc(800ms * var(--v,1)) var(--ease-standard)}

/* Las cuadrículas esperan a que los textos hayan terminado de entrar.
   Se excluye la que se acaba de elegir: esa se está apagando con su propio
   fundido y cortárselo aquí se vería como un tijeretazo.

   Los paneles -el buscador abierto, la calculadora, la escala- esperan lo
   mismo. Se montan mientras la pantalla es la de carga, así que si no se les
   apagara aquí asomarían por debajo del logo en mitad del viaje. */
body.esperando-cuadriculas .azulejo:not(.apagandose),
body.esperando-cuadriculas .rejilla > .tarjeta,
body.esperando-cuadriculas #panel-buscador,
body.esperando-cuadriculas #panel-calculadora,
body.esperando-cuadriculas #panel-escala{opacity:0 !important;transition:none !important}

/* Y entran con un fundido, a la vez que las cuadrículas hacen su zoom. */
#panel-buscador,#panel-calculadora,#panel-escala{
  transition:opacity calc(700ms * var(--v,1)) var(--ease-standard)}

/* Entran creciendo y escalonadas. Es una animación y no una transición a
   propósito: al acabar deja de mandar sobre `transform`, y así el hover de
   la cuadrícula vuelve a ser suyo sin heredar ni el retraso ni la duración. */
.azulejo.entra,
.rejilla > .tarjeta.entra{
  animation:entrarCuadricula calc(700ms * var(--v,1)) var(--ease-standard) calc(var(--i,0) * calc(110ms * var(--v,1))) backwards}
@keyframes entrarCuadricula{
  from{opacity:0;transform:scale(.88)}
  to  {opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .azulejo.entra,.rejilla > .tarjeta.entra{animation:none}
}

/* ---------- El degradado de la casa ----------
   Celestia se retiró entera (su sección, su cielo animado, su chat). Lo único
   que queda de aquel bloque es el `<div class="cielo">` de index.html, que ya
   no dibuja nada: sólo sostiene el `<linearGradient id="brillo-celestia">`
   que comparten los destellos del botón del panel (panel.js) y el pulgar del
   deslizador de velocidad (velocidad.js). Estas dos reglas lo dejan invisible
   y sin ocupar sitio. */
.cielo{position:fixed;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}
.cielo .tintero{position:absolute;width:0;height:0}

/* El orbe de Omnia en la pantalla de inicio ocupa el hueco -y hereda el
   tamaño y la posición- que tenía el de Celestia: un punto más pequeño que
   los tres primeros, en la segunda fila. En pantallas estrechas se recoge
   como los demás, con `!important` porque el sitio se lo escribe el
   JavaScript en el propio atributo `style`. */
.orbe[data-id="omnia"] .cara{width:calc(var(--orbe-tam) * 0.86);
  height:calc(var(--orbe-tam) * 0.86)}
@media (max-width:720px){
  .orbe[data-id="omnia"]{--x:-34% !important;--y:27% !important}
  /* Omnia ya no necesita medida propia aquí: va en proporción a `--orbe-tam`
     como los demás, y ese token ya es más pequeño en esta franja. */
}

/* ===========================================================================
   OMNIA
   La sección propia (chat con historial) y la presencia en el editor de
   fichas (icono flotante + coreografía). Ver omnia.js y omnia-editor.js.
   =========================================================================== */

/* ---------- La sección: dos columnas ----------
   Mismo lenguaje que el resto de la web: dos paneles de cristal sobre el
   degradado rosa, con los azulejos, la barra de cristal y los botones de la
   casa. Ver .azulejo y .buscador .caja, de los que sale todo esto. */
/* ALTO FIJO (v392): la columna izquierda cambia entre los chats y la
   configuración, y las dos vistas tienen que medir lo mismo -lo pidió Ernesto-;
   con el alto puesto por el contenido, la configuración estiraba el azulejo a
   1.300 px. Así cada lista desplaza por dentro y el azulejo no se mueve. */
.omnia-app{display:grid;grid-template-columns:288px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  gap:var(--sp-5);max-width:1180px;margin:var(--sp-5) auto 0;
  height:clamp(540px,calc(100svh - 200px),880px);
  padding:0 var(--gutter)}

/* Un panel de cristal, como los azulejos de todo el sitio. */
.omnia-lateral,.omnia-principal{
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs)}

/* Columna izquierda (v392): DOS VISTAS EN EL MISMO AZULEJO. La de los chats
   -logo, buscador con el botón de nueva conversación, historial y, al pie, el
   consumo y la entrada a la configuración- y la Configuración de Omnia, que
   ocupa su sitio con el mismo tamaño. Cada vista llena la columna y sólo
   desplaza por dentro su lista, así que el azulejo no cambia de alto al pasar
   de una a otra. */
.omnia-lateral{display:flex;flex-direction:column;padding:var(--sp-5);min-width:0;min-height:0}
.omnia-vista-chats,.omnia-vista-ajustes{flex:1;display:flex;flex-direction:column;
  gap:var(--sp-4);min-height:0;min-width:0}
.omnia-vista-chats[hidden],.omnia-vista-ajustes[hidden]{display:none}
.omnia-lateral-cabeza{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center}
.omnia-logo{width:84px;height:84px;object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(var(--cristal-rgb),.5))
         drop-shadow(0 2px 6px rgba(var(--cristal-rgb),.4))}
.omnia-nuevo{display:grid;place-items:center;flex:none;
  width:36px;height:36px;padding:0;border:1px solid var(--cristal-borde);cursor:pointer;
  border-radius:var(--radius-pill);
  background:var(--cristal);color:var(--brand-primary);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.omnia-nuevo:hover{background:var(--surface-tint);border-color:var(--border-strong)}
.omnia-nuevo:active{transform:scale(.98)}
.omnia-nuevo:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* La misma barra de cristal del buscador de la casa. */
.omnia-lateral-buscar{display:flex;align-items:center;gap:var(--sp-2);flex:none;min-width:0}
.omnia-lateral-buscar input{flex:1;min-width:0;width:0;border:1px solid rgba(var(--cristal-rgb),.8);
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);
  background:rgba(var(--cristal-rgb),.62);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--shadow-xs);color:var(--text-title);font-size:var(--fs-sm);outline:none;
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
.omnia-lateral-buscar input::placeholder{color:var(--ink-300)}
.omnia-lateral-buscar input:focus{background:rgba(var(--cristal-rgb),.78);
  border-color:var(--realce);box-shadow:var(--shadow-sm)}

.omnia-lista-chats{display:flex;flex-direction:column;gap:var(--sp-2);
  overflow-y:auto;flex:1;min-height:0;padding-right:2px;scrollbar-width:thin}
.omnia-lista-vacia{margin:var(--sp-3) var(--sp-1);color:var(--text-muted);font-size:var(--fs-sm)}

/* Cada chat, un azulejo. Mismo cristal, mismo borde, mismo levantarse al pasar
   por encima que los azulejos del resto de la web. */
.omnia-chat-fila{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);box-shadow:var(--shadow-xs);
  color:var(--text-body);font-size:var(--fs-sm);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.omnia-chat-fila:hover{background:var(--cristal-vivo);
  border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.omnia-chat-fila.activo{background:var(--cristal-vivo);
  border-color:var(--brand-primary);color:var(--brand-primary);font-weight:var(--fw-semibold)}
.omnia-chat-titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «Configuración de Omnia» (v391): el mismo azulejo que un chat, abajo del
   todo de la columna y con su rueda dentada. Es un <button>, así que se le
   devuelve la letra y la alineación que el reinicio le quita. */
.omnia-ajustes-abrir{width:100%;flex:none;font:inherit;font-size:var(--fs-sm);text-align:left}
.omnia-ajustes-abrir svg{flex:none}
.omnia-ajustes-abrir:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- El historial y sus carpetas ---------- */
.omnia-historial-cabeza{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);margin-bottom:calc(-1 * var(--sp-2));padding:0 var(--sp-1)}
.omnia-historial-cabeza > span,.omnia-historial-grupo{font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.omnia-historial-grupo{margin:var(--sp-2) var(--sp-1) 0}
.omnia-carpeta-nueva{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  padding:4px var(--sp-2);border-radius:var(--radius-pill);background:none;
  color:var(--brand-primary);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  transition:background var(--dur-fast) var(--ease-standard)}
.omnia-carpeta-nueva:hover{background:var(--surface-sunken)}
.omnia-carpeta-nueva:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.omnia-carpeta{display:flex;flex-direction:column;gap:var(--sp-2)}
.omnia-carpeta-cabeza{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-lg);
  color:var(--text-title);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  transition:background var(--dur-fast) var(--ease-standard)}
.omnia-carpeta-cabeza:hover{background:var(--surface-sunken)}
.omnia-carpeta-cabeza:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.omnia-carpeta-cabeza > svg{flex:none;color:var(--brand-primary)}
.omnia-carpeta-flecha{transition:transform var(--dur-fast) var(--ease-standard)}
.omnia-carpeta.abierta .omnia-carpeta-flecha{transform:rotate(90deg)}
.omnia-carpeta-cuenta{flex:none;min-width:20px;padding:0 6px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--text-muted);font-size:var(--fs-xs);text-align:center}
.omnia-carpeta-chats{display:flex;flex-direction:column;gap:var(--sp-2);
  margin-left:var(--sp-3);padding-left:var(--sp-3);border-left:2px solid var(--cristal-borde)}
.omnia-carpeta-chats .omnia-lista-vacia{margin:0;font-size:var(--fs-xs)}
.omnia-carpeta-alta{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-lg);
  border:1px solid var(--realce);background:var(--cristal-vivo);color:var(--brand-primary)}
.omnia-carpeta-alta input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:var(--fs-sm);color:var(--text-title)}
.omnia-carpeta-alta input::placeholder{color:var(--ink-300)}

/* La acción de un chat o de una carpeta: aparece al pasar, como el aspa. */
.omnia-chat-accion{flex:none;display:grid;place-items:center;border:0;background:none;
  color:var(--text-muted);cursor:pointer;padding:0 2px;font-size:.95rem;line-height:1;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-standard),color var(--dur-fast)}
.omnia-chat-fila:hover .omnia-chat-accion,.omnia-chat-fila.activo .omnia-chat-accion,
.omnia-carpeta-cabeza:hover .omnia-chat-accion,.omnia-carpeta-cabeza:hover .omnia-chat-borrar{opacity:1}
.omnia-chat-accion:hover{color:var(--brand-primary)}
.omnia-renombrar{opacity:.6;width:24px;height:24px}
.omnia-editar-nombre{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px;
  gap:6px;align-items:center;min-width:0;padding:var(--sp-2);border-radius:var(--radius-lg);
  border:1px solid var(--realce);background:var(--cristal-vivo)}
.omnia-editar-nombre input{min-width:0;width:100%;border:0;background:transparent;font:inherit;
  font-size:var(--fs-sm);color:var(--text-title);outline:none}
.omnia-editar-nombre button{border:0;border-radius:var(--radius-pill);background:var(--surface-tint);
  color:var(--brand-primary);cursor:pointer;height:28px;font:inherit}
.omnia-editar-nombre button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.omnia-editar-nombre p{grid-column:1/-1;margin:0;font-size:var(--fs-xs);color:var(--danger-500)}
.omnia-chat-accion:focus-visible,.omnia-chat-borrar:focus-visible{opacity:1;outline:none;box-shadow:var(--shadow-focus)}
.omnia-mover{flex:none;max-width:9.5rem;border:1px solid var(--cristal-borde);
  border-radius:var(--radius-pill);padding:2px var(--sp-2);background:var(--surface-card);
  color:var(--text-title);font:inherit;font-size:var(--fs-xs)}
/* Las acciones conservan su sitio para que el lápiz no se desplace al
   acercar el cursor cuando aparece el botón de borrar. */
.omnia-carpeta-cabeza .omnia-chat-accion,.omnia-carpeta-cabeza .omnia-chat-borrar{display:grid}
.omnia-carpeta-cabeza:hover .omnia-chat-accion,.omnia-carpeta-cabeza:hover .omnia-chat-borrar,
.omnia-carpeta-cabeza:focus-within .omnia-chat-accion,.omnia-carpeta-cabeza:focus-within .omnia-chat-borrar{display:grid;opacity:1}
@media (hover:none){
  .omnia-chat-accion,.omnia-chat-borrar{opacity:1}
  .omnia-carpeta-cabeza .omnia-chat-accion,.omnia-carpeta-cabeza .omnia-chat-borrar{display:grid}
}

/* ---------- El pie del lateral: el consumo en pequeño y la configuración ---------- */
.omnia-lateral-pie{display:flex;flex-direction:column;gap:var(--sp-2);flex:none;
  padding-top:var(--sp-3);border-top:1px solid var(--cristal-borde)}
.omnia-uso-mini{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  border:0;background:none;cursor:pointer;padding:var(--sp-1) var(--sp-1);text-align:left;
  font:inherit;border-radius:var(--radius-md)}
.omnia-uso-mini:empty{display:none}
.omnia-uso-mini:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- El consumo: dos barras ---------- */
.omnia-uso-fila{display:flex;flex-direction:column;gap:6px;min-width:0}
#omnia-uso-detalle{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.omnia-uso-rotulo{display:flex;justify-content:space-between;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--text-muted)}
.omnia-uso-rotulo strong{color:var(--text-title);font-weight:var(--fw-semibold)}
.omnia-uso-carril{height:6px;border-radius:var(--radius-pill);overflow:hidden;
  background:color-mix(in srgb,var(--text-muted) 16%,transparent)}
.omnia-uso-carril span{display:block;height:100%;min-width:0;border-radius:inherit;
  background:var(--filo);transition:width var(--dur-slow) var(--ease-standard)}
.omnia-uso-dice{margin:0;font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-tight)}

/* ---------- La Configuración de Omnia, dentro del lateral ---------- */
.omnia-vista-ajustes .dispositivos-cabeza{margin:0;flex:none}
.omnia-ajustes-lista{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:var(--sp-2);padding-right:2px;
  scrollbar-width:thin;overscroll-behavior:contain}
.omnia-ajustes-lista > .azulejo-configuracion{flex:none;min-width:0;max-width:100%}
.omnia-ajuste-columna{flex-direction:column;align-items:stretch}
.omnia-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(88px,100%),1fr));
  gap:6px;min-width:0;max-width:100%}
/* Las tres etiquetas no caben juntas en el lateral de escritorio. La rejilla
   decide cuántas columnas caben y cada botón puede partir su texto. */
#omnia-extension{grid-template-columns:repeat(auto-fit,minmax(min(88px,100%),1fr))}
.omnia-opcion{border:1px solid var(--cristal-borde);border-radius:var(--radius-pill);
  min-width:0;white-space:normal;overflow-wrap:anywhere;
  padding:6px var(--sp-2);background:var(--surface-card);cursor:pointer;
  color:var(--text-body);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.omnia-opcion:hover{border-color:var(--border-strong)}
.omnia-opcion.elegida{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-onbrand)}
.omnia-opcion:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.omnia-ajuste-columna .configuracion-sonido-dice{margin:0}
.omnia-ajuste-columna .configuracion-sonido-dice:empty{display:none}
.omnia-vista-ajustes .configuracion-memoria-cabeza{width:100%}
.omnia-vista-ajustes .configuracion-titulo,.omnia-vista-ajustes .configuracion-desc,
.omnia-vista-ajustes .omnia-uso-dice{overflow-wrap:anywhere}
.omnia-vista-ajustes .configuracion-item-memoria{flex-direction:column;align-items:stretch}
.omnia-chat-borrar{flex:none;border:0;background:none;color:var(--text-muted);
  font-size:1.15rem;line-height:1;cursor:pointer;padding:0 2px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-standard),color var(--dur-fast)}
.omnia-chat-fila:hover .omnia-chat-borrar,.omnia-chat-fila.activo .omnia-chat-borrar{opacity:1}
.omnia-chat-borrar:hover{color:var(--danger-500)}

/* Columna derecha: el chat abierto, o el logo centrado para empezar */
.omnia-principal{display:flex;flex-direction:column;min-width:0;
  padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.omnia-vacio{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4)}
.omnia-logo-grande{width:112px;height:112px;object-fit:contain;
  filter:drop-shadow(0 16px 44px rgba(var(--cristal-rgb),.55))
         drop-shadow(0 4px 12px rgba(var(--cristal-rgb),.45));
  animation:omnia-gira 26s linear infinite}
.omnia-vacio h2{margin:0;font-family:var(--font-display);font-size:var(--fs-h1);color:var(--text-title)}
.omnia-vacio p{margin:0;max-width:440px;color:var(--text-muted);line-height:var(--lh-body)}

.omnia-hilo{flex:1;display:flex;flex-direction:column;gap:var(--sp-5);
  overflow-y:auto;padding:var(--sp-4) var(--sp-2) var(--sp-5);min-height:0;scrollbar-width:thin}
.omnia-turno{display:flex;flex-direction:column;gap:var(--sp-3)}
.omnia-turno p{margin:0;line-height:var(--lh-body)}
.omnia-turno .omnia-datos-aviso{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere}
.omnia-mio{align-self:flex-end;max-width:82%;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  background:var(--brand-primary);color:var(--text-onbrand);font-size:var(--fs-sm)}
.omnia-suyo{align-self:flex-start;max-width:94%;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  background:color-mix(in srgb,var(--rose-200) 40%,var(--surface-card));
  border:1px solid var(--cristal-borde);color:var(--text-body)}
.omnia-turno.pensando .omnia-suyo{opacity:.6}

/* Las imágenes que llevaba la pregunta. */
.omnia-mio-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-2)}
.omnia-mio-fotos img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.35)}
.omnia-mio-chapa{display:inline-block;margin-bottom:6px;padding:2px var(--sp-2);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.18);font-size:var(--fs-xs)}

/* El razonamiento, ANTES de la respuesta y plegado. */
.omnia-pensamiento{align-self:flex-start;max-width:94%;font-size:var(--fs-xs);color:var(--text-muted)}
.omnia-pensamiento summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  padding:4px var(--sp-3);border-radius:var(--radius-pill);border:1px dashed var(--cristal-borde);
  font-weight:var(--fw-semibold)}
.omnia-pensamiento summary::-webkit-details-marker{display:none}
.omnia-pensamiento summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard)}
.omnia-pensamiento[open] summary::before{transform:rotate(45deg)}
.omnia-pensamiento summary:hover{color:var(--brand-primary)}
.omnia-pensamiento summary:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.omnia-pensamiento p{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);
  border-left:2px solid var(--cristal-borde);white-space:pre-wrap;line-height:var(--lh-body);
  max-height:22rem;overflow-y:auto}
.omnia-turno.pensando .omnia-suyo::after{content:"escribiendo..."}

/* La barra de escribir, el mismo cristal en píldora del buscador de la casa. */
.omnia-barra{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border:1px solid rgba(var(--cristal-rgb),.8);border-radius:var(--radius-pill);
  background:rgba(var(--cristal-rgb),.62);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.omnia-barra:focus-within{background:rgba(var(--cristal-rgb),.78);
  border-color:var(--realce);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.omnia-barra input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--fs-body-lg);color:var(--text-title);padding:var(--sp-1) 0}
.omnia-barra input::placeholder{color:var(--ink-300)}
#omnia-q::placeholder{opacity:.5}
/* ---------- El clip y el documento adjunto ----------
   El archivo no sale del navegador: se le saca el texto con pdf.js y lo que
   viaja a la API son caracteres. Ver js/omnia-entradas.js. */
.omnia-clip{display:grid;place-items:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  color:var(--text-muted);transition:background var(--dur-base) var(--ease-standard),
                                     color var(--dur-base) var(--ease-standard)}
.omnia-clip:hover{background:var(--surface-sunken);color:var(--brand-primary)}
.omnia-clip:focus-within{outline:2px solid var(--brand-primary);outline-offset:2px}
.omnia-adjunto{margin-bottom:var(--sp-2);font-size:var(--fs-sm)}
.omnia-adjunto-cargando{color:var(--text-muted);font-weight:var(--fw-semibold)}
.omnia-adjunto-chapa{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-card));
  border:1px solid color-mix(in srgb,var(--brand-primary) 24%,transparent)}
.omnia-adjunto-chapa strong{color:var(--text-title);max-width:22ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omnia-adjunto-chapa i{font-style:normal;color:var(--text-muted);font-size:var(--fs-xs)}
.omnia-adjunto-chapa button{border:0;background:none;cursor:pointer;
  color:var(--text-muted);padding:0 var(--sp-1);line-height:1}
.omnia-adjunto-chapa button:hover{color:var(--danger-500)}
.omnia-adjunto{display:flex;flex-wrap:wrap;gap:6px}
.omnia-adjunto[hidden]{display:none}
.omnia-adjunto-foto{padding-left:4px}
.omnia-adjunto-foto img{width:28px;height:28px;object-fit:cover;border-radius:50%}

.omnia-enviar{width:40px;height:40px;flex:none;border:0;border-radius:50%;
  background:var(--brand-primary);color:var(--text-onbrand);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.omnia-enviar:hover{background:var(--rose-600)}
.omnia-enviar:active{transform:scale(.94)}
.omnia-descargo{margin:var(--sp-3) 0 0;text-align:center;border-top:0;padding-top:0}

@keyframes omnia-gira{to{transform:rotate(360deg)}}

/* En móvil no hay dos columnas: la barra lateral se apila arriba, compacta, y
   el chat ocupa el resto. El panel llena la pantalla para que la barra de
   escribir quede abajo del todo y el logo de bienvenida no se coma el centro. */
@media (max-width:860px){
  #vista-omnia{padding:var(--sp-3) 0 var(--sp-4)}
  .omnia-app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    gap:var(--sp-3);margin-top:0;padding:0 var(--sp-3);
    height:auto;min-height:calc(100svh - 118px)}
  /* En el teléfono la columna va arriba: alto fijo también, el mismo para
     los chats y para la configuración. */
  .omnia-lateral{height:min(460px,56svh)}
  .omnia-lateral,.omnia-principal{padding:var(--sp-4)}
  .omnia-lateral{gap:var(--sp-3)}
  .omnia-lateral-cabeza{flex-direction:row;gap:var(--sp-3)}
  .omnia-logo{width:52px;height:52px}

  .omnia-principal{min-height:0}
  .omnia-hilo{min-height:0;padding:var(--sp-3) 0 var(--sp-4)}
  .omnia-vacio{gap:var(--sp-2);padding:var(--sp-4) var(--sp-3)}
  .omnia-logo-grande{width:72px;height:72px}
  .omnia-vacio h2{font-size:var(--fs-h3)}
  .omnia-vacio p{font-size:var(--fs-sm);max-width:280px}
  .omnia-descargo{font-size:var(--fs-xs)}
}

/* ---------- La presencia en el editor ---------- */
.omnia-capa{position:fixed;inset:0;z-index:60;pointer-events:none}
.omnia-capa > *{pointer-events:auto}

/* 76 px (60 en el teléfono): lo pidió Ernesto el 29-sep-2026, cuando llegó el
   botón de Omnia de Vaccini (60 y 48, ver css/vaccini-omnia.css). El centro
   escala más para que Omnia obrando mida lo mismo que antes (unos 310 px). */
.omnia-orbe{position:fixed;right:22px;top:110px;width:76px;height:76px;
  border:0;background:none;cursor:pointer;padding:0;
  filter:drop-shadow(0 8px 22px rgba(var(--cristal-rgb),.4));
  transition:transform .85s cubic-bezier(.4,0,.2,1),right .85s cubic-bezier(.4,0,.2,1),
             top .85s cubic-bezier(.4,0,.2,1),filter .85s var(--ease-standard)}
.omnia-orbe-logo{width:100%;height:100%;object-fit:contain;display:block;
  animation:omnia-gira 24s linear infinite}
.omnia-orbe:hover{transform:scale(1.06)}
.omnia-orbe:focus-visible{outline:2px solid var(--celestia-viva);outline-offset:4px;border-radius:var(--radius-md)}
.omnia-capa--centro .omnia-orbe{right:calc(50vw - 38px);top:calc(50vh - 38px);transform:scale(4.1);
  filter:drop-shadow(0 0 40px var(--celestia-viva)) drop-shadow(0 0 90px var(--celestia-rosa)) brightness(1.12)}
.omnia-capa--centro .omnia-orbe:hover{transform:scale(3.85)}

.omnia-globo{position:fixed;right:134px;top:118px;max-width:250px;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--cristal-medio);border:1px solid rgba(var(--cristal-rgb),.7);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--shadow-md);color:var(--text-body);font-size:var(--fs-sm);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 0;
  transition:opacity .35s var(--ease-standard),transform .35s var(--ease-standard)}
.omnia-globo.puesto{opacity:1;transform:none}
.omnia-globo p{margin:0;line-height:var(--lh-body)}

.omnia-chat{position:fixed;right:22px;top:196px;width:min(320px,86vw);
  border-radius:var(--radius-xl);overflow:hidden;
  background:var(--cristal-vivo);border:1px solid rgba(var(--cristal-rgb),.7);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 0;
  transition:opacity .3s var(--ease-standard),transform .3s var(--ease-standard)}
.omnia-chat.puesto{opacity:1;transform:none}
.omnia-chat-cabeza{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid rgba(var(--cristal-rgb),.5);
  font-weight:var(--fw-bold);color:var(--brand-primary)}
.omnia-chat-cerrar{border:0;background:none;font-size:1.3rem;line-height:1;
  color:var(--text-muted);cursor:pointer}
.omnia-chat-cuerpo{max-height:210px;overflow-y:auto;padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);scrollbar-width:none}
.omnia-chat-cuerpo::-webkit-scrollbar{display:none}
.omnia-chat-cuerpo p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body)}
.omnia-dice{color:var(--text-body)}
.omnia-tuyo{align-self:flex-end;max-width:88%;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-md);background:var(--brand-primary);color:var(--text-onbrand)}
.omnia-chat-barra{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-top:1px solid rgba(var(--cristal-rgb),.5)}
.omnia-chat-barra input{flex:1;border:0;background:none;outline:none;
  font-size:var(--fs-sm);color:var(--text-body);padding:var(--sp-2) 0}
.omnia-chat-enviar{width:34px;height:34px;flex:none;border:0;border-radius:50%;
  background:var(--brand-primary);color:var(--text-onbrand);cursor:pointer;
  display:flex;align-items:center;justify-content:center}

.omnia-tarjeta{position:fixed;right:22px;bottom:26px;width:min(380px,88vw);
  display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--radius-lg);
  background:var(--cristal-vivo);border:1px solid rgba(var(--cristal-rgb),.7);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow-lg);color:var(--text-body);font-size:var(--fs-sm);
  opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-standard),transform .35s var(--ease-standard)}
.omnia-tarjeta.puesta{opacity:1;transform:none}
.omnia-tarjeta strong{color:var(--brand-primary)}
.omnia-tarjeta--mal strong{color:var(--danger-500)}
.omnia-tarjeta a{color:var(--text-link);align-self:flex-start;margin-top:var(--sp-1)}
.omnia-tarjeta-cerrar{position:absolute;top:6px;right:10px;border:0;background:none;
  font-size:1.2rem;line-height:1;color:var(--text-muted);cursor:pointer}

body.omnia-obrando #panel-contenido{opacity:.06;filter:blur(3px);pointer-events:none;
  transition:opacity .5s var(--ease-standard),filter .5s var(--ease-standard)}
body.omnia-obrando .omnia-globo,body.omnia-obrando .omnia-chat{display:none}
#panel-contenido{transition:opacity .5s var(--ease-standard),filter .5s var(--ease-standard)}

@media (max-width:720px){
  .omnia-orbe{right:14px;top:auto;bottom:84px;width:60px;height:60px}
  .omnia-globo{display:none}
  .omnia-chat{right:14px;left:14px;width:auto;top:auto;bottom:14px}
  .omnia-capa--centro .omnia-orbe{right:calc(50vw - 30px);top:calc(50vh - 30px);bottom:auto;transform:scale(3.5)}
}
@media (prefers-reduced-motion:reduce){
  .omnia-orbe,.omnia-orbe-logo,.omnia-logo-grande{transition:none;animation:none}
  body.omnia-obrando #panel-contenido{filter:none}
}

/* ===========================================================================
   CENTRO DE NOTIFICACIONES & WEB PUSH
   =========================================================================== */

.cabecera-acciones{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;position:relative}

/* ---------- Botón de Campana ---------- */
.notificaciones-envoltorio{position:relative}
.campana-btn{position:relative;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-tint);color:var(--brand-primary);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs);
  cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),
                            background var(--dur-fast) var(--ease-standard),
                            border-color var(--dur-fast) var(--ease-standard)}
.campana-btn:hover{transform:scale(1.06);background:var(--rose-200);border-color:var(--border-strong)}
.campana-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- Botón «colocar los iconos» (sólo el fundador) ----------
   Usa la clase .campana-btn para ser idéntico a la campana que tiene al lado;
   aquí sólo se le añade el estado activo y se esconde en el acceso. */
#editar-iconos-btn[aria-pressed="true"]{background:var(--brand-primary);color:var(--text-onbrand);border-color:var(--brand-primary)}
body.accediendo #editar-iconos-btn{display:none}

/* ---------- Modo «colocando los iconos» ---------- */
body.colocando-iconos .orbe{cursor:grab;touch-action:none;z-index:6;pointer-events:auto}
body.colocando-iconos .orbe.arrastrando{cursor:grabbing;z-index:7}
/* Parados mientras se colocan: se arrastra una posición fija, no un icono que flota. */
/* Arrastrando un icono no se quiere ninguna suavidad: el icono tiene que ir
   pegado al dedo. La transición de `left`/`top` lo dejaría rezagado. */
body.colocando-iconos .orbe{transition:none}
body.colocando-iconos .orbe .cara{animation:none;transition:none}
body.colocando-iconos .orbe:hover .cara img{transform:none}
body.colocando-iconos .orbe .nombre{opacity:.55}
/* El logo se atenúa para que se lea que ahora manda el reparto, no él. */
body.colocando-iconos .logo-central{opacity:.5;transition:opacity var(--dur-base) var(--ease-standard)}
/* Un tramado muy tenue en el hueco, sólo como guía visual del espacio libre. */
body.colocando-iconos #escenario::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);
  background-size:40px 40px;opacity:.35;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%)}

/* ---------- Barra del editor ----------
   PC: una píldora flotante abajo-centro. Móvil: una barra fija al pie, de
   borde a borde, con botones grandes y respetando la zona segura del móvil. */
.iconos-editor-barra{position:fixed;left:50%;bottom:var(--sp-4);transform:translateX(-50%);
  z-index:120;display:flex;align-items:center;gap:var(--sp-3);
  max-width:calc(100vw - var(--sp-5));
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);
  background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm)}
.iconos-editor-barra button{cursor:pointer;font:inherit;font-weight:var(--fw-semibold);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;background:none;color:var(--text-body);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.iconos-editor-barra button:disabled{opacity:.4;cursor:default}
.iconos-editor-barra button svg{flex:none}

.iconos-editor-barra .ie-cerrar{width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--surface-tint);color:var(--text-muted)}
.iconos-editor-barra .ie-cerrar:hover{background:var(--rose-200);color:var(--brand-primary)}

.ie-secundarias{display:flex;align-items:center;gap:var(--sp-2)}
.ie-secundarias button{padding:8px 12px;border-radius:var(--radius-pill);
  color:var(--text-muted);background:var(--surface-tint)}
.ie-secundarias button:hover:not(:disabled){color:var(--brand-primary);background:var(--rose-100)}

.iconos-editor-barra .ie-primario{padding:10px 22px;border-radius:var(--radius-pill);
  background:var(--brand-primary);color:var(--text-onbrand);box-shadow:var(--shadow-sm)}
.iconos-editor-barra .ie-primario:hover:not(:disabled){filter:brightness(1.06)}
.iconos-editor-barra .ie-primario:disabled{background:var(--surface-sunken);color:var(--text-muted);box-shadow:none}

@media (max-width:600px){
  .iconos-editor-barra{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;
    border-radius:18px 18px 0 0;border-width:1px 0 0;
    gap:var(--sp-2);justify-content:space-between;
    padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom,0px))}
  .ie-secundarias{flex:1;justify-content:center}
  .ie-secundarias button span{display:none}          /* en móvil, sólo el icono */
  .ie-secundarias button{width:40px;height:40px;padding:0}
  .iconos-editor-barra .ie-primario{padding:11px 20px;font-size:var(--fs-body)}
  .iconos-editor-barra .ie-cerrar{width:40px;height:40px}
}

/* El aviso breve tras Guardar. */
.iconos-editor-aviso{position:fixed;left:50%;bottom:calc(var(--sp-4) + 64px);transform:translate(-50%,10px);
  z-index:121;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);
  background:var(--brand-primary);color:var(--text-onbrand);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;max-width:calc(100vw - var(--sp-5));text-align:center;
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.iconos-editor-aviso.visible{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){
  .iconos-editor-aviso{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* Badge de no leídas */
/* ---------- La insignia de la cuenta ----------

   Tres cosas la tenían torcida. El número se centraba con `line-height:18px`
   sobre una caja de 18px que, con `box-sizing:border-box`, sólo tiene 14 de
   alto por dentro: el dígito caía dos píxeles por debajo. El anillo era blanco
   fijo, que en modo oscuro es un aro luminoso alrededor de nada. Y la insignia
   se colgaba de la esquina del cuadrado que envuelve al botón, no del borde
   del círculo. Y era grande: veinte píxeles sobre un botón de cuarenta se
   comían la campana en cuanto la cuenta pasaba de un dígito.

   Ahora el número se centra con flex y `line-height:1` -da igual la
   tipografía-, va en Lora con cifras de caja alta y ancho fijo para que el 1 y
   el 8 ocupen lo mismo, y el anillo toma el color del fondo de la página. Se
   apoya en la tangente a 45° del círculo, que es donde una insignia se sostiene
   sin pisar el icono ni despegarse de él. */
.notificaciones-cuenta{position:absolute;top:-4px;right:-4px;
  display:flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-pill);
  background:var(--brand-primary);color:var(--white);
  font-family:var(--font-serif);font-size:11px;font-weight:var(--fw-bold);
  line-height:1;font-variant-numeric:lining-nums tabular-nums;
  box-shadow:0 1px 5px rgba(162,94,117,.45);
  border:2px solid var(--surface-page);
  animation:pulso-badge 2.4s infinite}

@keyframes pulso-badge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* ---------- Panel Desplegable de Notificaciones ----------

   Vive colgado del `<body>` y NO de la cabecera, y eso no es un capricho de
   maquetación: la cabecera lleva `backdrop-filter`, y un ancestro con filtro
   se convierte en el bloque contenedor de sus descendientes `fixed`. Con el
   panel dentro, el `bottom:0` de la hoja de móvil se resolvía contra los 72
   píxeles de la cabecera en vez de contra la pantalla, así que la hoja crecía
   hacia arriba y se salía por el borde superior. Lo mueve `abrirCentroNotificaciones`
   y lo coloca `situarElPanelDeNotificaciones` (notificaciones.js).

   Es `fixed` en los dos tamaños: en escritorio lo sitúa el JS bajo la campana
   -en móvil, el CSS de aquí abajo-, y así no depende de dónde esté colgado.

   El material es el cristal de la casa -el mismo `--cristal-velo` de las
   tarjetas- pero en su versión clara: aquí hay texto pequeño que hay que leer
   sobre lo que pase por debajo, y el .28 de una tarjeta no lo sostiene. */
.notificaciones-panel{position:fixed;z-index:40;
  width:min(360px,calc(100vw - 16px));max-height:min(480px,calc(100vh - 96px));
  display:flex;flex-direction:column;
  background:var(--cristal-claro);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-claro-borde);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  animation:entrar-panel-noti var(--dur-fast) var(--ease-standard)}

@keyframes entrar-panel-noti{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* En móvil baja de la línea que separa la cabecera del contenido -de donde
   está la campana- y se abre a casi todo el ancho. El `top` lo pone el JS con
   el borde de abajo de la cabecera medido, que es pegajosa y puede moverse. */
@media (max-width:480px){
  .notificaciones-panel{
    bottom:auto;left:var(--sp-2);right:var(--sp-2);width:auto;
    max-height:calc(100vh - 96px);
    padding-bottom:env(safe-area-inset-bottom,0px)
  }
}

.notis-cabeza{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--cristal-borde);
  display:flex;flex-direction:column;gap:var(--sp-1);
  background:rgba(var(--cristal-rgb),.35)}
.notis-titulo-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.notis-titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.notis-acciones-cabeza{display:flex;align-items:center;gap:4px}
.notis-accion-cabeza{background:none;border:none;color:var(--brand-primary);
  font-size:11px;font-weight:var(--fw-medium);cursor:pointer;
  padding:2px 6px;border-radius:var(--radius-sm);transition:all var(--dur-fast)}
.notis-accion-cabeza:hover{background:var(--rose-100);opacity:.85}
.notis-borrar-todas{color:var(--text-muted)}
.notis-borrar-todas:hover{color:#dc2626;background:rgba(239,68,68,.1)}

.notis-filtros{display:flex;gap:4px}
.notis-filtro-btn{padding:2px 10px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid transparent;color:var(--text-muted);
  font-size:11px;font-weight:var(--fw-medium);cursor:pointer;
  transition:all var(--dur-fast)}
.notis-filtro-btn:hover{color:var(--brand-primary);background:var(--rose-100)}
.notis-filtro-btn.activo{background:var(--rose-200);color:var(--brand-primary);
  border-color:var(--border-subtle);font-weight:var(--fw-semibold)}

.notificaciones-lista{padding:var(--sp-1) var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-1);
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Tarjeta individual de notificación - versión minimalista y limpia */
.noti-item{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-md);background:transparent;
  border:1px solid transparent;cursor:pointer;
  transition:all var(--dur-fast) var(--ease-standard)}
.noti-item:hover{background:var(--rose-100);border-color:var(--border-subtle)}
.noti-item.no-leida{background:var(--surface-tint);border-color:var(--cristal-borde)}
.noti-item.leida{opacity:.7}

.noti-icono{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:none}
.noti-icono-farmaco{background:var(--rose-200);color:var(--brand-primary)}
.noti-icono-clinica{background:rgba(239,68,68,.12);color:#dc2626}
.noti-icono-sistema{background:rgba(59,130,246,.12);color:#2563eb}
.noti-icono-solicitud{background:rgba(16,185,129,.12);color:#059669}
.noti-icono-general{background:var(--surface-tint);color:var(--brand-primary)}
/* La invitación a una feria de salud. Ver feria.js. */
.noti-icono-feria{background:var(--rose-100);color:var(--rose-600)}
/* Una idea o sugerencia. Sólo le llega al fundador. Ver sugerencias.js. */
.noti-icono-idea{background:var(--rose-100);color:var(--brand-primary)}
/* La de Omnia lleva su propia cara -una imagen, no un trazo-, así que el
   círculo no le pone color de fondo: sería taparla. */
.noti-icono-omnia{background:transparent}
.noti-icono-omnia-img{width:100%;height:100%;object-fit:contain;border-radius:50%}

.noti-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.noti-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
/* EL TÍTULO SE CORTA POR LÍNEAS, NO POR PUNTOS SUSPENSIVOS. Iba en una sola
   línea con `text-overflow:ellipsis`, y «Nuevo fármaco publicado: Metilpred…»
   deja fuera justo la palabra por la que se busca el aviso. Ahora caben dos
   líneas, y al desplegar se ve entero.

   Y hay una razón técnica además de la de leerlo: con `ellipsis` el navegador
   informa de `scrollWidth === clientWidth` -el texto no desborda, está
   recortado-, así que no había manera de saber si hacía falta el botón de «Ver
   Más». Con el corte por líneas, `scrollHeight > clientHeight` lo dice. Ver
   senalarLosAvisosQueNoCaben() en notificaciones.js. */
.noti-titulo{margin:0;font-size:12px;font-weight:var(--fw-semibold);
  color:var(--text-title);line-height:1.3;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word}
.noti-indicador-no-leida{width:6px;height:6px;border-radius:50%;background:var(--brand-primary);flex:none}
.noti-texto{margin:0;font-size:11px;color:var(--text-body);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word}

/* Desplegado: se quita el corte de las dos líneas Y el de una sola línea del
   título, que también se comía la mitad de «Nuevo fármaco publicado: ...».
   `display:block` hace falta: con `-webkit-box` puesto, quitar el número de
   líneas no siempre basta. Ver senalarLosAvisosQueNoCaben(). */
.noti-item.desplegada .noti-texto,
.noti-item.desplegada .noti-titulo{display:block;-webkit-line-clamp:none;overflow:visible}
.noti-mas{font-size:10px;font-weight:var(--fw-semibold);color:var(--brand-primary);
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.noti-mas:hover{text-decoration:underline}
.noti-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:2px}
.noti-tiempo{font-size:10px;color:var(--text-muted);white-space:nowrap;margin-left:auto}
.noti-accion-btn{align-self:flex-start;font-size:11px;font-weight:var(--fw-semibold);
  color:var(--brand-primary);background:none;border:none;padding:0;cursor:pointer}

.notis-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-6) var(--sp-4);text-align:center;gap:var(--sp-2)}
.notis-vacio-texto{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- Banner Contextual de Solicitud de Permisos ---------- */
.aviso-permiso-notificaciones{position:fixed;bottom:var(--sp-5);right:var(--sp-5);z-index:90;
  max-width:400px;width:calc(100vw - 32px);background:rgba(var(--cristal-rgb),.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);padding:var(--sp-4);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.aviso-permiso-notificaciones.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.aviso-permiso-cuerpo{display:flex;flex-direction:column;gap:var(--sp-3)}
.aviso-permiso-icono{width:36px;height:36px;border-radius:50%;background:var(--rose-200);
  color:var(--brand-primary);display:flex;align-items:center;justify-content:center;flex:none}
.aviso-permiso-info{display:flex;flex-direction:column;gap:2px}
.aviso-permiso-titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.aviso-permiso-desc{margin:0;font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-base)}
.aviso-permiso-botones{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2)}

/* ---------- Panel de Administración: Notificaciones ----------
   Tres azulejos de cristal, el mismo material que el Resumen y el buscador.
   Dentro, las piezas de siempre: `.campo`/`.entrada`, `.boton`, `.insignia`,
   `.interruptor-switch`. Ni un icono ni un recuadro suelto. */
.panel-notis{display:flex;flex-direction:column;gap:var(--sp-5);
  max-width:720px;margin:0 auto}

.panel-notis-bloque{display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius:var(--radius-xl);
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs)}

.panel-notis-cabeza{display:flex;flex-direction:column;gap:2px}
.panel-notis-h{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);
  color:var(--text-title)}
.panel-notis-p{margin:0;font-size:var(--fs-xs);color:var(--text-muted);
  line-height:var(--lh-base)}

.panel-notis-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.panel-notis-acciones{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-1)}

/* Vista previa: un recuadro de cristal más apretado con una notificación de
   verdad dentro (las clases .noti-* son las mismas de la campana). */
.panel-notis-previa{display:flex;flex-direction:column;gap:var(--sp-2)}
.panel-notis-previa-rotulo{font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--text-muted);letter-spacing:var(--ls-caps);text-transform:uppercase}
.previa-noti-tarjeta{padding:var(--sp-4);border-radius:var(--radius-lg);
  background:var(--cristal-medio);border:1px solid var(--cristal-borde)}

/* Listas (sugerencias e historial): una sub-tarjeta por entrada. */
.panel-notis-lista{display:flex;flex-direction:column;gap:var(--sp-3);
  max-height:520px;overflow-y:auto;overflow-x:hidden}
.panel-notis-vacio{margin:0;font-size:var(--fs-xs);color:var(--text-muted);
  text-align:center;padding:var(--sp-5)}

.panel-notis-item{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--cristal-borde)}
.panel-notis-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--text-muted)}
.panel-notis-item-nombre{margin:0;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.panel-notis-item-texto{margin:0;font-size:var(--fs-xs);color:var(--text-body);
  line-height:var(--lh-base)}
.panel-notis-motivos{margin:2px 0 0;font-size:var(--fs-xs);color:var(--text-body);
  line-height:var(--lh-base)}
.panel-notis-botones{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1)}
.panel-notis-denegar{margin-top:var(--sp-2)}
.panel-notis-item-pie{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);margin-top:var(--sp-1)}
.panel-notis-item-enlace{font-size:var(--fs-xs);color:var(--brand-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Botón pequeño: mismo estilo, menos cuerpo. Lo usan las listas de aquí. */
.boton-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.boton-peligro-suave{color:#dc2626 !important}
.boton-peligro-suave:hover{background:rgba(239,68,68,.1) !important}

/* ---------- Avatares en cabecera de sistemas ---------- */
/* DOS INICIALES, no una: la del nombre y la del primer apellido (v364). Con
   una sola, Andrea Castillo y Allison Peñalba eran las dos una «A». Este es el
   círculo más pequeño de la casa -24px con 2px de borde dejan 20 por dentro-,
   así que las dos letras piden un punto menos de cuerpo y algo de negativo
   entre ellas; medido en pantalla, no a ojo. */
.avatar-circulo{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:-.02em;font-weight:var(--fw-bold);color:var(--white);border:2px solid rgba(var(--cristal-rgb),.9);
  box-shadow:var(--shadow-xs);margin-left:-5px;transition:transform var(--dur-fast) var(--ease-standard);cursor:pointer;position:relative}
.avatar-circulo:first-child{margin-left:0}
.avatar-circulo:hover{transform:scale(1.18);z-index:5}
.avatar-circulo-estudiante{background:linear-gradient(135deg, #0284c7, #0369a1)}
.avatar-circulo-docente{background:linear-gradient(135deg, var(--brand-primary), var(--rose-600))}
.avatar-foto-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.sistema-sin-asignar{font-size:11px;color:var(--text-muted);font-style:italic}

/* Sección de asignaciones actuales dentro del modal */
.asignar-actuales-bloque{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  background:var(--surface-tint);border-radius:var(--radius-md);padding:var(--sp-3);
  border:1px solid var(--border-subtle);margin-bottom:var(--sp-3)}
.asignar-actuales-col{display:flex;flex-direction:column;gap:var(--sp-1)}
.asignar-miembro-actual{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:4px var(--sp-2);border-radius:var(--radius-sm);background:rgba(var(--cristal-rgb),.7)}
.asignar-miembro-nombre{font-size:var(--fs-xs);color:var(--text-title);font-weight:var(--fw-medium);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boton-quitar-asignacion{flex:none;width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(239,68,68,.4);background:transparent;color:rgba(239,68,68,.7);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all var(--dur-fast) var(--ease-standard)}
.boton-quitar-asignacion:hover{background:rgba(239,68,68,.1);border-color:#ef4444;color:#dc2626}
.asignar-separador{border:none;border-top:1px solid var(--border-subtle);margin:var(--sp-2) 0 var(--sp-3)}
@media (max-width:480px){.asignar-actuales-bloque{grid-template-columns:1fr}}

/* Minibuscador de la asignación de equipo, con el lenguaje de la casa: la
   píldora .buscador de siempre y, debajo, una lista que va saliendo al teclear
   y se elige con un clic. Sólo Nombre Apellido, sin correo. */
.asignar-picker{display:flex;flex-direction:column;gap:var(--sp-2);position:relative}
.asignar-picker > label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.asignar-buscador{margin:0;width:100%}
.asignar-resultados{list-style:none;margin:var(--sp-1) 0 0;padding:var(--sp-1);
  display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--surface-card);box-shadow:var(--shadow-lg)}
.asignar-resultado{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);color:var(--text-title);cursor:pointer}
.asignar-resultado:hover{background:var(--rose-100)}
.asignar-resultado-vacio{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- Modal de Asignación Flotante ---------- */
.modal-fondo{position:fixed;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:999;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard)}
.modal-fondo.activo{opacity:1;pointer-events:auto}
.modal-tarjeta-asignar{max-width:460px;width:100%;background:rgba(var(--cristal-rgb),.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--sp-5)}
.modal-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.modal-cabecera h3{margin:0;font-family:var(--font-display);font-size:var(--fs-md);color:var(--text-title)}
.modal-cerrar{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-muted);line-height:1}
.modal-subtitulo{margin:var(--sp-1) 0 var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--brand-primary)}

/* ---------- La ventana de Omnia ----------
   La misma tarjeta de todo modal -mismo velo, mismo cristal, mismo aspa-,
   con su logo y su nombre en vez del rótulo de siempre: es ella quien habla,
   y la cabecera lo dice antes que ninguna palabra. */
.modal-omnia{max-width:420px}
.modal-omnia-cabecera{display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.modal-omnia-cabecera .omnia-logo{width:40px;height:40px;flex:none;
  filter:drop-shadow(0 2px 6px rgba(var(--cristal-rgb),.4))}
.modal-omnia-nombre{font-family:var(--font-display);font-size:var(--fs-md);
  font-weight:var(--fw-semibold);color:var(--brand-primary)}
.modal-omnia-titulo{margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:var(--fs-h4);color:var(--text-title)}
.modal-omnia-mensaje{margin:0;font-size:var(--fs-sm);color:var(--text-body);
  line-height:var(--lh-base)}
.texto-ayuda-aviso{display:block;margin-top:4px;font-size:11px;color:#b91c1c}

/* ---------- Comentarios y Observaciones por Sección (Docente / Estudiante) ---------- */
.seccion-comentarios-contenedor{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px dashed var(--border-subtle)}
.seccion-comentarios-barra{display:flex;align-items:center;justify-content:flex-end}
.btn-comentario-toggle{background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  padding:3px 10px;font-size:11px;font-weight:var(--fw-medium);color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:all var(--dur-fast) var(--ease-standard)}
.btn-comentario-toggle:hover{background:var(--surface-tint);color:var(--brand-primary);border-color:var(--border-strong)}
.btn-comentario-toggle.con-comentarios{background:var(--rose-100);color:var(--brand-primary);border-color:var(--rose-300);font-weight:var(--fw-semibold)}

.comentarios-caja{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2);
  background:rgba(var(--cristal-rgb),.7);padding:var(--sp-3);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}
.comentarios-lista{display:flex;flex-direction:column;gap:var(--sp-2)}
.comentario-item{padding:var(--sp-2) var(--sp-3);background:rgba(var(--cristal-rgb),.9);border-radius:var(--radius-sm);
  border-left:3px solid var(--brand-primary);box-shadow:var(--shadow-xs)}
.comentario-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:11px;margin-bottom:2px}
.comentario-autor{font-weight:var(--fw-semibold);color:var(--text-title)}
.comentario-fecha{color:var(--text-muted)}
.comentario-texto{margin:0;font-size:var(--fs-xs);color:var(--text-body);line-height:var(--lh-base)}
.comentario-form{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.comentario-input{flex:1;padding:6px 10px;font-size:var(--fs-xs);border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);background:var(--surface-card)}

/* ---------- Botones de Acción y Aprobación en Visualizador / Editor ---------- */
.revision-acciones-barra{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  margin-top:var(--sp-5);padding:var(--sp-4);background:rgba(var(--cristal-rgb),.8);backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);border:1px solid var(--border-strong);box-shadow:var(--shadow-md)}
.btn-denegar-aprobacion{background:rgba(239,68,68,.1) !important;color:#b91c1c !important;border:1px solid rgba(239,68,68,.3) !important}
.btn-denegar-aprobacion:hover{background:rgba(239,68,68,.2) !important}
.btn-aceptar-aprobacion{background:linear-gradient(135deg, #059669, #047857) !important;color:var(--white) !important}
.btn-aceptar-aprobacion:hover{filter:brightness(1.08)}
.btn-publicar-definitivo{background:linear-gradient(135deg, var(--brand-primary), var(--rose-600)) !important;color:var(--white) !important}

/* ===========================================================================
   EL CIRCUITO DE REVISIÓN DE UNA FICHA
   Enviar al docente · comentar apartado por apartado · decidir · publicar.
   Ver panel-fichas.js y api/ficha-revision.js.
   =========================================================================== */

/* ---------- Lo común de las ventanas ----------
   Estaba escrito a mano con `style=` en cada modal, así que cada uno separaba
   distinto. Aquí una vez, y todas se parecen. */
.modal-cuerpo{display:flex;flex-direction:column;gap:var(--sp-3)}
.modal-ayuda{margin:0;font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-base)}
.modal-acciones{display:flex;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-2)}

/* ---------- Elegir docente: azulejos, no un desplegable ----------
   El mismo lenguaje que el resto de la casa: cristal, píldora y avatar. Un
   `<select>` del navegador no se puede vestir y aquí desentonaba. */
.modal-enviar{max-width:480px}
.buscador-envio{margin:0 0 var(--sp-1);max-width:none}
.buscador-envio .caja{padding:6px var(--sp-3)}
.buscador-envio input{font-size:var(--fs-sm)}

.envio-docentes{display:flex;flex-direction:column;gap:var(--sp-2);
  max-height:280px;overflow-y:auto;padding:2px}
.envio-docente{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);cursor:pointer;
  background:rgba(var(--cristal-rgb),.55);border:1px solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard)}
.envio-docente:hover{background:rgba(var(--cristal-rgb),.85);border-color:var(--border-strong);transform:translateY(-1px)}
.envio-docente.elegido{background:var(--rose-100);border-color:var(--brand-primary);
  box-shadow:0 0 0 1px var(--brand-primary) inset}
.envio-docente-avatar{width:34px;height:34px;font-size:13px;margin-left:0;flex:none;cursor:inherit}
.envio-docente-quien{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.envio-docente-nombre{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio-docente-correo{font-size:11px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio-docente-marca{flex:none;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--white);background:var(--brand-primary);
  opacity:0;transform:scale(.6);transition:all var(--dur-fast) var(--ease-standard)}
.envio-docente.elegido .envio-docente-marca{opacity:1;transform:scale(1)}

/* ---------- El círculo del más, junto al título de cada apartado ----------
   `.detalle h2` es el título del bloque de identificación -el principio
   activo-, que se comenta igual que cualquier apartado pero no es un
   `.apartado`: vive en su propio `<div class="detalle">`. Sin este selector
   el círculo quedaba en el flujo normal del texto, pegado a la última letra
   del nombre igual que si fuera una palabra más de la frase. */
.apartado h3, .detalle h2, .ficha .encabezado.detalle h3{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.apartado-anotar{flex:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  border:1px dashed var(--border-strong);background:rgba(var(--cristal-rgb),.6);
  color:var(--text-muted);
  transition:all var(--dur-fast) var(--ease-standard)}
.apartado-anotar:hover{background:var(--rose-100);border-style:solid;
  border-color:var(--brand-primary);color:var(--brand-primary);transform:scale(1.1)}
.apartado-anotar.con-notas{border-style:solid;border-color:var(--brand-primary);
  background:var(--rose-100);color:var(--brand-primary)}
.apartado-anotar-cuenta{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;
  border-radius:var(--radius-pill);padding:0 3px;font-size:9px;font-weight:var(--fw-bold);
  line-height:15px;text-align:center;color:var(--white);background:var(--brand-primary)}
/* La cuenta que ve quien NO puede comentar -el estudiante, el fundador-. Va con
   el mismo relleno de marca y texto blanco que el avatar de cada observación y
   que el contador de la tira de arriba: en oscuro, rosa claro sobre rosa
   clarito no se leía, y un número que no se lee no cuenta nada. */
.apartado-notas-cuenta{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);
  font-size:10px;font-weight:var(--fw-bold);line-height:20px;text-align:center;
  color:var(--white);background:linear-gradient(135deg, var(--brand-primary), var(--rose-600))}

/* ---------- Las observaciones, debajo del apartado que comentan ----------

   VAN EN SU PROPIO RECUADRO. Antes iban sueltas debajo del texto con una línea
   de puntos encima, y quedaban «pegadas hacia arriba» y desiguales:

     · Un apartado se separa del siguiente con `border-top` (.apartado, arriba).
       Una observación al final del apartado caía justo encima de esa línea, así
       que se leía como si fuera del apartado de ABAJO.
     · Sin caja tenían el mismo peso visual que la ficha, y lo que las separaba
       dependía de con qué terminara cada apartado -un párrafo, una lista, unas
       cuadrículas que se voltean-. La misma observación se veía distinta en
       cada sitio.

   Con recuadro y un margen FIJO arriba se separan igual en todos, y se leen por
   lo que son: una capa encima de la ficha, no parte de ella. */
.apartado-notas{display:flex;flex-direction:column;gap:var(--sp-3);
  margin:var(--sp-5) 0 0;padding:var(--sp-4);
  border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  background:rgba(var(--cristal-rgb),.6)}
/* En el bloque de identificación no hay un apartado entero por encima, así que
   con menos aire ya se separa igual. */
.detalle .apartado-notas{margin-top:var(--sp-4)}

.apartado-notas-rotulo{display:flex;align-items:center;gap:var(--sp-2);
  margin:0 !important;font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand-primary)}
.apartado-notas-rotulo svg{flex:none}

.nota-revision{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-left:3px solid var(--brand-primary);box-shadow:var(--shadow-xs)}
.nota-revision-avatar{flex:none;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:-.02em;font-weight:var(--fw-bold);color:var(--white);
  background:linear-gradient(135deg, var(--brand-primary), var(--rose-600))}
.nota-revision-dicho{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nota-revision-cabeza{display:flex;align-items:baseline;gap:var(--sp-2);
  flex-wrap:wrap;margin:0 !important}
.nota-revision-autor{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-title)}
.nota-revision-cuando{font-size:11px;color:var(--text-muted)}
.nota-revision-texto{margin:0 !important;font-size:var(--fs-sm);
  line-height:var(--lh-base);color:var(--text-body)}
.nota-revision-quitar{flex:none;width:22px;height:22px;border-radius:50%;
  border:none;background:none;cursor:pointer;color:var(--text-muted);
  font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast) var(--ease-standard)}
.nota-revision-quitar:hover{background:rgba(239,68,68,.12);color:#dc2626}

/* La caja de escribir, dentro del mismo recuadro. */
.apartado-nota-nueva{display:flex;flex-direction:column;gap:var(--sp-2)}
.apartado-nota-campo{width:100%;padding:var(--sp-2) var(--sp-3);font:inherit;font-size:var(--fs-sm);
  color:var(--text-body);border-radius:var(--radius-md);border:1px solid var(--border-subtle);
  background:var(--surface-card);resize:vertical}
.apartado-nota-campo:focus{outline:none;border-color:var(--brand-primary);box-shadow:var(--shadow-focus)}
.apartado-nota-verbos{display:flex;justify-content:flex-end;gap:var(--sp-2)}

/* El bloque de identificación es el «apartado cero» de la previsualización, y
   el primer apartado de verdad nace sin borde ni relleno arriba (.apartado
   :first-child). Sin esto, «Docente fiscalizador: …» quedaba pegado al título
   del apartado siguiente, y en el móvil parecía que fuera suyo. */
.previa-ficha .encabezado .previa-meta-autoria{margin-top:var(--sp-3)}

/* En pantalla estrecha, la observación se queda sin ancho: entre el relleno de
   su recuadro, el del apartado y el avatar, el texto acababa partiéndose en
   tres palabras por línea. Se aprieta todo un punto. */
@media (max-width:600px){
  .apartado-notas{padding:var(--sp-3);gap:var(--sp-2)}
  .nota-revision{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .nota-revision-avatar{width:24px;height:24px;font-size:9px}
}

/* ---------- La cabecera de la previsualización ---------- */
.previa-aviso{margin:0 0 var(--sp-3)}
.previa-correcciones{margin-bottom:var(--sp-4)}
.previa-meta-autoria{display:flex;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-2);flex-wrap:wrap;
  font-size:12px;color:var(--text-muted)}
.previa-meta-autoria strong{color:var(--text-title)}
.previa-comentarios-tira{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:rgba(var(--cristal-rgb),.75);border:1px solid var(--border-strong)}
.previa-comentarios-tira p{margin:0;font-size:var(--fs-xs);color:var(--text-body)}
.previa-comentarios-cuenta{flex:none;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--white);background:linear-gradient(135deg, var(--brand-primary), var(--rose-600))}

/* ---------- Las observaciones DENTRO del editor ----------

   Mismo recuadro que las de la previa (`.apartado-notas`) y misma insignia
   redonda que la tira de arriba, porque son lo mismo dicho en otro sitio: no
   hacía falta un tercer aspecto para una tercera pantalla.

   Es un `<details>` abierto de entrada: quien acaba de recibir la devolución
   quiere leerlas, y quien ya las ha leído quiere plegarlas y ponerse a
   corregir sin tenerlas ocupando media pantalla. */
.editor-observaciones{margin:0 0 var(--sp-5);padding:var(--sp-4);
  border-radius:var(--radius-lg);border:1px solid var(--border-strong);
  background:rgba(var(--cristal-rgb),.6);max-width:760px}
.editor-observaciones > summary{display:flex;align-items:center;gap:var(--sp-3);
  cursor:pointer;list-style:none;font-size:var(--fs-sm);color:var(--text-body)}
.editor-observaciones > summary::-webkit-details-marker{display:none}
.editor-observaciones-cuenta{flex:none;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--white);background:linear-gradient(135deg, var(--brand-primary), var(--rose-600))}
.editor-observaciones > .campo-ayuda{margin:var(--sp-3) 0 0}
.editor-observaciones-grupo{margin-top:var(--sp-4);display:flex;
  flex-direction:column;gap:var(--sp-2)}
.editor-observaciones-verbos{margin-top:var(--sp-4);display:flex;justify-content:flex-end}

/* El renglón que dice que la ficha VOLVIÓ, y por qué sigue en borrador. */
.editor-devuelta{margin-bottom:var(--sp-4);max-width:760px}

/* ---------- La bandeja de autorizaciones del fundador ---------- */
.permisos-edicion{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5);
  padding:var(--sp-4);border-radius:var(--radius-lg);
  background:rgba(var(--cristal-rgb),.8);border:1px solid var(--border-strong);
  box-shadow:var(--shadow-md)}
.permisos-edicion-titulo{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-title)}
.permiso-edicion{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  transition:opacity var(--dur-base) var(--ease-standard)}
.permiso-edicion-quien{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.permiso-edicion-nombre{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.permiso-edicion-ficha{font-size:11px;color:var(--text-muted)}
.permiso-edicion-motivo{margin:0;font-size:var(--fs-xs);color:var(--text-body);
  line-height:var(--lh-base);font-style:italic}
.permiso-edicion-verbos{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.permiso-edicion-verbos .comentario-input{flex:1;min-width:160px}
@media (max-width:600px){
  .permiso-edicion-verbos{flex-direction:column;align-items:stretch}
  .revision-acciones-barra{flex-direction:column}
  .revision-acciones-barra .boton{width:100%}
}

/* ---------- Pie de Autoría Pública (FARMA-Search) ---------- */
.ficha-autoria-pie{margin-top:var(--sp-5);padding:var(--sp-4);border-top:1px solid var(--border-subtle);
  text-align:center;background:rgba(var(--cristal-rgb),.4);border-radius:var(--radius-md)}
.ficha-autoria-texto{margin:0;font-size:var(--fs-xs);color:var(--text-muted);font-style:italic;line-height:var(--lh-base)}
.ficha-autoria-texto strong{color:var(--text-title);font-style:normal}

/* ==========================================================================
   LA FICHA REESTRUCTURADA
   Nada de esto inventa un lenguaje nuevo: el cristal, los azulejos, las tablas
   médicas y la cascada del editor son los de siempre. Lo que hay aquí son las
   piezas que faltaban para las formas nuevas.
   ========================================================================== */

/* ---------- El editor: la vía que sale sola de la forma ----------
   Se enseña mientras se escribe la presentación, para que quien la rellena vea
   en el acto qué está diciendo. Va en el tono de una nota, no de un dato: no lo
   ha escrito nadie, lo ha deducido el sistema. */
.cascada-deducido{margin:var(--sp-3) 0 0;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs);color:var(--text-body);
  background:var(--surface-tint);border-left:2px solid var(--brand-primary);
  border-radius:var(--radius-sm)}
.cascada-deducido strong{color:var(--brand-primary)}

/* El rango de edad: desde, hasta y la unidad. Tres casillas que son un solo
   dato, así que van pegadas y no repartidas por la rejilla. */
/* El rango ocupa la fila entera de la cascada: tres casillas dentro de una
   columna de doscientos pixeles salen de cincuenta y cuatro, y en cincuenta y
   cuatro no se lee un número de dos cifras. */
.cascada-casillas > .campo-edad{grid-column:1 / -1}
/* Las casillas de vía ocupan la fila entera: en una columna de las estrechas
   el rótulo de cada vía se parte en dos renglones y la ayuda cae en vertical. */
.cascada-casillas > .presentacion-vias{grid-column:1 / -1}
/* El `display:flex` y el hueco los pone ya `.pauta-marcas`; aquí sólo se dice
   que el rótulo y la ayuda ocupan la fila entera, por delante de las píldoras. */
.presentacion-vias .pauta-marcas legend,
.presentacion-vias .pauta-marcas .campo-ayuda{flex:0 0 100%}
.edad-trio{display:grid;grid-template-columns:1fr 1fr 130px;gap:var(--sp-2);
  max-width:460px}
@media (max-width:480px){ .edad-trio{grid-template-columns:1fr} }

/* ---------- Las listas planas: incompatibilidades y contraindicaciones ----------
   Se escriben en línea, sin Guardar por renglón: son dos o tres casillas
   cortas, y meterlas en un formulario con su propio botón sería tres clics
   para escribir cuatro palabras. */
.lista-plana-editor{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-top:var(--sp-2);align-items:flex-start}
.lista-plana-editor > .boton{margin-top:var(--sp-1)}
/* Flexible y no una rejilla de columnas fijas: incompatibilidades trae tres
   casillas y contraindicaciones dos, y el mismo renglón tiene que servir para
   las dos sin declararle a cada una cuántas columnas lleva. */
.fila-plana{display:flex;flex-wrap:wrap;gap:var(--sp-3);width:100%;
  align-items:flex-end;
  padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--cristal);border:1px solid var(--cristal-borde)}
.fila-plana > .campo{flex:1 1 180px;min-width:0}
.fila-plana-quitar{flex:none;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-body-lg);line-height:1;margin-bottom:2px}

/* ---------- La preparación, sólo para los líquidos ---------- */
.preparacion-editor{display:flex;flex-direction:column;gap:var(--sp-4);
  margin-top:var(--sp-2)}
/* El mismo cristal que la tarjeta que había antes; sólo cambia el nombre. */
.tarjeta-preparacion{background:var(--cristal);border:1px solid var(--cristal-borde);
  border-radius:var(--radius-lg);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.tarjeta-preparacion .preparacion-pasos-lista{width:100%}
.preparacion-paso-fila{display:flex;align-items:center;gap:var(--sp-2)}
.preparacion-paso-fila .entrada{flex:1;min-width:0}
.tarjeta-preparacion .preparacion-paso-fila .entrada input{width:100%}

/* ---------- La dilución para infusión, sólo para lo que va en bolsa ----------
   Mismo cristal y mismo aire que la preparación. Las casillas van en una
   rejilla que se colapsa a una columna en pantallas estrechas. */
.dilucion-editor{display:flex;flex-direction:column;gap:var(--sp-4);
  margin-top:var(--sp-2)}
.tarjeta-dilucion .dilucion-campos{width:100%;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
.dilucion-campos .campo-ancho{grid-column:1/-1}
@media (max-width:560px){ .tarjeta-dilucion .dilucion-campos{grid-template-columns:1fr} }
.dilucion-concentracion{margin:0;padding:var(--sp-3) 0;font-family:var(--font-display);
  font-weight:var(--fw-bold);color:var(--brand-primary)}
.dilucion-concentracion .campo-ayuda{font-family:var(--font-body);font-weight:var(--fw-regular)}
.dilucion-ritmo{display:grid;grid-template-columns:1fr 1fr 130px;gap:var(--sp-2)}
@media (max-width:480px){ .dilucion-ritmo{grid-template-columns:1fr} }

/* ---------- La tabla de farmacocinética, en el editor ----------
   La vía va en negrita y debajo, en pequeño, de dónde ha salido. Importa que se
   vea: una fila que apareció sola y otra que puso una persona no se pueden
   quitar igual, y hay que saber por qué. */
.cinetica-editor{display:flex;flex-direction:column;gap:var(--sp-4);
  margin-top:var(--sp-2)}
.cinetica-tabla td{vertical-align:middle}
.cinetica-tabla .entrada input{min-width:120px}
/* La primera columna manda: lleva la vía, sus marcas y, si lo hay, el aviso.
   Sin suelo, en un teléfono se quedaba en una tira donde «Medicamento» ocupaba
   un renglón él solo. */
.cinetica-tabla td:first-child,
.cinetica-tabla th:first-child{min-width:150px}
/* En el teléfono cada vía es un bloque con sus tres tiempos debajo, cada uno
   con su rótulo (data-label). En tabla, dos de las tres casillas quedaban
   fuera de la tarjeta y había que desplazarla de lado para escribir. */
@media (max-width:560px){
  .cinetica-tabla thead{display:none}
  .cinetica-tabla,.cinetica-tabla tbody,.cinetica-tabla tr,.cinetica-tabla td{display:block;width:100%}
  .cinetica-tabla tr{padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
  .cinetica-tabla tr:last-child{border-bottom:0}
  .cinetica-tabla td{border:0;padding:var(--sp-1) var(--sp-3)}
  .cinetica-tabla td:first-child{min-width:0}
  .cinetica-tabla td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
  .cinetica-tabla .entrada input{min-width:0;width:100%}
  .cinetica-tabla td:last-child:not(:has(button)){display:none}
}
.cinetica-origen{display:block;font-size:var(--fs-xs);color:var(--text-muted);
  margin-top:2px}

/* ---------- Las marcas que van por cada vía ----------

   Debajo del nombre de la vía, en la primera columna de la tabla. La tabla
   decía «Subcutánea» y nada más; con tres marcas comerciales y dos vías, saber
   cuál iba por cuál obligaba a subir a «Información del Medicamento» y
   cruzarlo a mano.

   Son chapas y no texto corrido porque se leen de un vistazo y porque son
   varias: en corrido, dos marcas largas partían el renglón y la vía dejaba de
   verse como el encabezado de su fila. */
/* El feedback del Resumen (panel-resumen.js). */
.uso-feedback{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---------- El historial de versiones de una ficha ---------- */
.historial-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2)}
.historial-copia{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--border-subtle)}
.historial-cuando{flex:1 1 220px;min-width:0}
.historial-cuando strong{display:block;font-size:var(--fs-sm);color:var(--text-title)}
.historial-trae{flex:1 1 100%;margin:0;font-size:var(--fs-xs);color:var(--text-body);
  overflow-wrap:anywhere}
.historial-copia .boton{flex:none}

/* Lo que Omnia propone para un apartado que ya tenía algo escrito. Va en el
   aviso de alerta de la casa: no es un error, pero hay que decidir. */
.omnia-propone{max-width:760px;margin-bottom:var(--sp-4)}
.omnia-propone-lista{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-2)}
.omnia-propone-lista li{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-md);background:rgba(var(--cristal-rgb),.7)}
.omnia-propone-lista li > span{flex:1 1 180px;min-width:0;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}

/* ---------- Corregir una fila ya guardada (Modo Health Fair) ----------
   El formulario es el MISMO de arriba; lo que cambia es el rótulo y el borde,
   para que no se escriba encima de una fila creyendo que se hace una nueva. */
.feria-corrigiendo{border-left:3px solid var(--brand-primary);
  padding-left:var(--sp-4);background:var(--surface-tint);border-radius:var(--radius-lg)}
.feria-col-verbos{white-space:nowrap}
.feria-col-verbos .feria-editar{font-size:var(--fs-xs);padding:2px var(--sp-3)}
/* La chapa de «Incompleto» va pegada a quién registró, que es donde se mira
   para saber a quién preguntar por lo que falta. */
.feria-incompleto{margin-left:var(--sp-2);font-size:10px}

/* Las observaciones clínicas, debajo de la tabla de vías. Es el recuadro de
   nota de la casa: lo que no cabe en tres tiempos se lee aparte, no entre las
   filas. */
.cinetica-observaciones{margin-top:var(--sp-4);padding:var(--sp-4);
  border-radius:var(--radius-lg);background:var(--surface-tint);
  border-left:3px solid var(--brand-primary)}
.cinetica-observaciones h4{margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:var(--fs-sm);color:var(--text-title)}
.cinetica-observaciones p{margin:0;font-size:var(--fs-sm);color:var(--text-body);
  line-height:var(--lh-base)}

.cinetica-marcas{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cinetica-marca{font-size:var(--fs-xs);line-height:1.2;
  padding:2px var(--sp-2);border-radius:var(--radius-pill);
  background:var(--surface-tint);border:1px solid var(--border-subtle);
  color:var(--text-body);overflow-wrap:anywhere}

/* La pista de la forma farmacéutica, al elegirla. Hoy sólo la tiene «Polvo»:
   en la caja de un inyectable pone «polvo para suspensión inyectable», y eso
   invita a marcar «Polvo» cuando la forma correcta es «Polvo Liofilizado».
   Ver PISTA_DE_LA_FORMA en ficha-campos.js. */
.presentacion-pista{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-xs)}

/* ---------- Liberación modificada y cubierta entérica ----------
   Cuelga de la tabla de vías, separada por una raya: no es una vía más, es una
   nota al pie de la vía oral. Cada formulación lleva arriba de qué marca es y
   de qué tipo, y debajo sus tres tiempos, que son los que la distinguen. */
.cinetica-liberacion{border-top:1px solid var(--border-subtle);padding-top:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);max-width:760px}
/* Lleva `campo` además de esto: de ahí le vienen el recuadro de cada casilla y
   la flecha de la casa en los desplegables, que es lo que la iguala al resto
   del editor. Aquí sólo va la raya que separa una formulación de la siguiente. */
.liberacion-fila{padding-bottom:var(--sp-3);border-bottom:1px dashed var(--border-subtle)}
.liberacion-fila:last-of-type{border-bottom:0;padding-bottom:0}
.liberacion-cabeza{display:flex;align-items:center;gap:var(--sp-2)}
.liberacion-cabeza .entrada{flex:1;min-width:0}
.liberacion-tiempos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2)}
@media (max-width:720px){ .liberacion-tiempos{grid-template-columns:1fr} }

/* Y en la ficha: el renglón de la formulación va sangrado y en tono apagado
   bajo su vía, para que se lea como lo que es -una variante de esa vía- y no
   como otra vía distinta. */
.cinetica-liberacion-fila td{background:var(--surface-tint)}
.cinetica-liberacion-tipo{display:block;font-weight:var(--fw-semibold);
  color:var(--brand-primary);font-size:var(--fs-sm)}
.cinetica-liberacion-marca{display:block;font-size:var(--fs-xs);color:var(--text-muted)}

/* Los rótulos de la teoría de la liberación: inmediata, y modificada con sus
   tres clasificaciones. Cada una lleva su punto de color para reconocerla de
   un vistazo, en el editor y en la ficha. */
.cinetica-chip{display:flex;align-items:center;gap:6px;margin-top:4px;padding:2px 10px;
  border-radius:var(--radius-pill,999px);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  line-height:1.4;background:var(--surface-tint);color:var(--text-title);
  border:1px solid var(--border-subtle);width:fit-content}
.cinetica-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-primary)}
.cinetica-chip-inmediata::before{background:var(--brand-accent)}
.cinetica-chip-prolongada::before{background:var(--brand-primary)}
.cinetica-chip-retardada::before{background:var(--brand-soft)}
.cinetica-chip-pulsatil::before{background:#f5c542}
.cinetica-no-aplica{color:var(--text-muted);font-size:var(--fs-sm);font-style:italic}
.cinetica-leyenda{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-direction:column;
  gap:var(--sp-1);font-size:var(--fs-sm);color:var(--text-muted)}
.cinetica-leyenda strong{color:var(--text-title)}
.cinetica-teoria{font-size:var(--fs-sm);color:var(--text-muted)}
.cinetica-teoria summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--brand-primary)}
.cinetica-teoria ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.cinetica-liberacion-ayuda{margin:0}

/* La posología en tarjetas, una por indicación (4-oct-2026). Cada tarjeta es la
   misma de las marcas; al pulsar una se levanta otra tarjeta con su detalle. */
.pauta-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.pauta-ficha{text-align:left}

/* Se lee, no se ve. Para los encabezados de tabla que sólo existen para que un
   lector de pantalla sepa qué hay en esa columna. */
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Cuidados de Enfermería ----------
   Antes, durante y después en tres azulejos de un mismo rosado que va
   subiendo de intensidad -claro, medio, algo más- sin llegar nunca a un tono
   oscuro. Es azulejo, no menú desplegable: se ve entero de un tirón, al
   contrario que Efectos Adversos e Interacciones, que hay que voltear. */
.cuidados-ficha{display:flex;flex-direction:column;gap:var(--sp-3)}
.cuidados-fase{padding:var(--sp-4);border-radius:var(--radius-md);
  border:1px solid var(--cristal-borde)}
.cuidados-fase.cuidados-antes{background:var(--cuidados-antes)}
.cuidados-fase.cuidados-durante{background:var(--cuidados-durante)}
.cuidados-fase.cuidados-despues{background:var(--cuidados-despues)}
.cuidados-fase-titulo{margin:0 0 var(--sp-2);font-family:var(--font-serif);
  font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--brand-primary)}
.cuidados-fase ul{margin:0;padding-left:var(--sp-5);color:var(--text-body)}
.cuidados-fase li+li{margin-top:var(--sp-1)}

/* Los tres azulejos de fase son los MISMOS que los de Información del
   Medicamento -se navega igual, así que se ven igual-; lo único suyo es el
   tono, que va subiendo de claro a algo más intenso sin llegar a oscuro. */
.azulejo.cuidados-antes{background:var(--cuidados-antes)}
.azulejo.cuidados-durante{background:var(--cuidados-durante)}
.azulejo.cuidados-despues{background:var(--cuidados-despues)}
/* El fundamento de una intervención: un párrafo, sin adornos, que es lo que
   se ha venido a leer. */
.cuidado-fundamento{margin:0;color:var(--text-body);line-height:var(--lh-body)}

/* ---------- Los cuidados, en el editor ----------
   Una tarjeta por intervención: arriba su número y el nombre -«Tomar Signos
   Vitales»-, y debajo el fundamento. El número no es decorativo: la lista se
   lee en orden y hay que saber en cuál se está escribiendo. */
.intervenciones-editor{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-top:var(--sp-2);max-width:760px}
.intervencion-fila{padding-bottom:var(--sp-3);
  border-bottom:1px dashed var(--border-subtle)}
.intervencion-fila:last-of-type{border-bottom:0;padding-bottom:0}
.intervencion-cabeza{display:flex;align-items:center;gap:var(--sp-2)}
.intervencion-cabeza .entrada{flex:1;min-width:0}
.intervenciones-editor .preparacion-anadir-paso{align-self:flex-start}

/* ---------- El antídoto ---------- */

/* ---------- LA ESCALERA DEL ATC ----------
   Los cinco niveles de la clasificación de la OMS, en el editor y en la ficha.
   Es UNA sola pinta para los dos sitios: el mismo `.atc-escalera` lo escriben
   `bloqueATCDelEditor` (panel-fichas.js) y `jerarquiaDeLaFicha` (app.js), y dos
   maneras de pintar lo mismo acaban discrepando.

   Se lee como una escalera y no como una tabla porque eso es lo que es: cada
   nivel está DENTRO del anterior, y el sangrado con su filete lo dice sin
   escribirlo.

   OJO CON LOS TOKENS DE CRISTAL: el primer intento pintó cada escalón con
   `background:var(--cristal-velo)`, y `--cristal-velo` NO ES UN COLOR: es
   `blur(24px) saturate(1.15)`, el valor del `backdrop-filter`. El navegador lo
   descartaba y los escalones salían transparentes. Y los demás cristales son
   blancos con alfa, pensados para ir sobre el degradado: sobre el fondo casi
   blanco de una ficha no se ven. Se vio midiendo el color calculado, no
   leyendo la hoja. Por eso aquí se usa el filete de `--ink-100`, que es un
   color de verdad. */
.atc-escalera{display:flex;flex-direction:column;gap:var(--sp-1);
  margin:0;padding:0;list-style:none}
.atc-nivel{display:flex;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left:2px solid var(--ink-100)}
/* Cada nivel entra un poco más que el de arriba. Escalones cortos: cinco de
   veinticuatro píxeles dejarían el último contra el borde en un móvil. */
.atc-nivel:nth-child(2){margin-left:12px}
.atc-nivel:nth-child(3){margin-left:24px}
.atc-nivel:nth-child(4){margin-left:36px}
.atc-nivel:nth-child(5){margin-left:48px;border-left-color:var(--brand-primary)}
.atc-codigo{flex:0 0 auto;min-width:6.5ch;font-family:var(--font-mono,monospace);
  font-size:.8rem;font-weight:700;color:var(--brand-primary);letter-spacing:.02em}
.atc-cuerpo{display:flex;flex-direction:column;gap:0;min-width:0}
.atc-rotulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);line-height:1.5}
.atc-nombre{font-size:.92rem;line-height:1.35}
/* El quinto nivel es el fármaco: es de lo que va la ficha, así que se lee como
   tal y no como un renglón más del escalafón. */
.atc-nivel:nth-child(5) .atc-nombre{font-family:var(--font-serif);font-weight:600;
  font-size:1rem}

.atc-bloque .campo-ayuda{margin-bottom:var(--sp-3)}
.atc-sin{margin-top:0}

/* OTRAS CLASIFICACIONES. Los códigos secundarios del mismo fármaco, cada uno
   con PARA QUÉ SE USA -el subgrupo terapéutico- en primera línea, que es lo
   que se busca de un vistazo, y el detalle químico debajo. El mismo bloque en
   la ficha pública y en el editor. */
.atc-otras{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--ink-100)}
/* Con `.atc-otras` delante: dentro del editor, `.editor-grupo h4` pesaba más y
   el rótulo pequeño salía como un título de apartado, más grande que el suyo. */
.atc-otras .atc-otras-titulo{margin:0 0 var(--sp-2);padding:0;border:0;font-family:inherit;
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);font-weight:var(--fw-bold)}
.atc-otras-lista{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-2)}
.atc-otra{display:flex;align-items:baseline;gap:var(--sp-3)}
.atc-uso{font-size:.92rem;line-height:1.35}
.atc-otra .atc-nombre{font-size:.82rem;color:var(--text-muted)}

.apartado-atc .atc-codigo-titulo{font-family:var(--font-mono,monospace);
  font-size:.68em;font-weight:700;color:var(--brand-primary);
  letter-spacing:.02em;margin-left:var(--sp-2);vertical-align:middle}
.apartado-atc .descargo{margin-top:var(--sp-3)}

/* El código en el renglón de la lista de fichas: ocupa el hueco donde antes
   iba el «grupo» escrito a mano. */
.ficha-atc{font-family:var(--font-mono,monospace);letter-spacing:.02em}
.ficha-sin-atc{opacity:.75;font-style:italic}

@media (max-width:640px){
  .atc-nivel:nth-child(2){margin-left:7px}
  .atc-nivel:nth-child(3){margin-left:14px}
  .atc-nivel:nth-child(4){margin-left:21px}
  .atc-nivel:nth-child(5){margin-left:28px}
}

.antidoto-editor{margin-top:var(--sp-2)}
.antidoto-ficha{padding:var(--sp-4);border-radius:var(--radius-md);
  background:var(--cristal);border:1px solid var(--cristal-borde)}
.antidoto-sustancia{margin:0 0 var(--sp-3);font-family:var(--font-serif);
  font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--text-title)}
.antidoto-ficha .datos{margin:0}

/* Los efectos adversos ya no llevan cuidados de enfermería, así que la fila de
   abajo es de una columna y no de dos. */
.cuadricula-fila-inferior-columnas.una-columna{grid-template-columns:1fr}

/* ---------- Dentro de la tarjeta levantada ----------
   Lo que se ve al abrir un azulejo de «Información del Medicamento»: primero
   los datos de la presentación y debajo sus bloques, cada uno con su rótulo. */
.medicamento-cabecera-datos{padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  background:var(--surface-tint);border-radius:var(--radius-md)}
.medicamento-cabecera-datos .datos{margin:0;display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm)}
.medicamento-cabecera-datos dt{color:var(--text-title);font-weight:var(--fw-semibold)}
.medicamento-cabecera-datos dd{margin:0;color:var(--text-body)}

.medicamento-bloque{margin-top:var(--sp-5)}
.medicamento-bloque:first-of-type{margin-top:0}
.medicamento-bloque-titulo{margin:0 0 var(--sp-3);font-family:var(--font-display);
  font-size:var(--fs-sm);color:var(--brand-primary);
  text-transform:uppercase;letter-spacing:.06em}
.medicamento-bloque .pasos{margin:0;padding-left:var(--sp-5);color:var(--text-body)}
.medicamento-bloque .pasos li{margin-bottom:var(--sp-2)}
.medicamento-bloque .pasos li::marker{color:var(--brand-primary);font-weight:var(--fw-bold)}

/* El esquema de dosis de un Caso Especial, en su propia tabla debajo del
   rango (v409). Antes cada dosis era una columna más con la frase dentro. */
.esquema-dosis{margin-top:var(--sp-3)}
.esquema-dosis-rotulo{display:block;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em}
.esquema-dosis-paso{display:inline-block;padding:2px var(--sp-2);border-radius:var(--radius-pill);
  background:var(--surface-tint);color:var(--brand-primary);font-size:var(--fs-xs);
  font-weight:var(--fw-bold)}
.esquema-dosis .pauta-tabla th,.esquema-dosis .pauta-tabla td{padding:var(--sp-2) var(--sp-3)}
/* Cinco columnas en una tarjeta estrecha: los encabezados se parten en dos
   renglones en vez de empujar la tabla fuera de la tarjeta. */
.esquema-dosis .pauta-tabla th{white-space:normal}
/* En el teléfono cada dosis es un bloque con sus rótulos, que cinco columnas
   no caben: los rótulos salen del data-label de cada celda. */
@media (max-width:560px){
  .esquema-dosis thead{display:none}
  .esquema-dosis .pauta-tabla,.esquema-dosis tbody,.esquema-dosis tr,.esquema-dosis td{display:block;width:100%}
  .esquema-dosis tr{padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
  .esquema-dosis tr:last-child{border-bottom:0}
  .esquema-dosis .pauta-tabla td{display:flex;gap:var(--sp-3);border:0;padding:var(--sp-1) var(--sp-3)}
  .esquema-dosis .pauta-tabla td::before{content:attr(data-label);flex:0 0 38%;
    font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.04em}
}

/* La dilución como receta (v409): la mezcla de izquierda a derecha y el
   resultado destacado; debajo, los límites de la bomba en tabla y las notas
   como avisos. */
.dilucion-receta{display:flex;flex-direction:column;gap:var(--sp-3)}
.dilucion-flujo{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--sp-2)}
.dilucion-paso{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;gap:2px;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-sunken);border:1px solid var(--border-subtle)}
.dilucion-paso-rotulo{font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em}
.dilucion-paso strong{font-family:var(--font-display);color:var(--text-title)}
.dilucion-paso-resultado{background:var(--surface-tint);border-color:var(--brand-primary)}
.dilucion-paso-resultado strong{color:var(--brand-primary);font-size:var(--fs-h4)}
.dilucion-signo{align-self:center;font-weight:var(--fw-bold);color:var(--brand-primary)}
.dilucion-notas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.dilucion-notas li{padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--brand-primary);
  background:var(--surface-sunken);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--fs-sm);color:var(--text-body)}
@media (max-width:520px){
  .dilucion-flujo{flex-direction:column}
  .dilucion-signo{align-self:flex-start;padding-left:var(--sp-3)}
}

/* Cada tanda de posología con su rótulo -Adulto, Pediátrico, Casos Especiales-
   encima de su tabla. Sin él, tres tablas seguidas no se distinguen. */
.posologia-tanda-publica{margin-bottom:var(--sp-4)}
.posologia-tanda-publica:last-child{margin-bottom:0}
.posologia-tanda-rotulo{display:block;margin-bottom:var(--sp-2);
  font-family:var(--font-display);font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em}

/* La insignia dentro de una tabla médica no arrastra el renglón. */
.pauta-tabla .insignia{font-size:var(--fs-xs);padding:2px var(--sp-2)}

/* ===========================================================================
   MODO HEALTH FAIR
   El registro de una feria de salud. Ver feria.js.

   Casi todo se apoya en lo que ya existe -`.tarjeta.cristal` para las
   tarjetas, `.permiso` para las casillas, `.campo` para el formulario,
   `.panel-pestanas` para las pestañas y `.grado-*` para los tres colores-, así
   que aquí abajo sólo está lo que de verdad no tenía dónde apoyarse: la tabla,
   los dos cálculos en vivo, las gráficas y el informe que se imprime.
   =========================================================================== */

.feria-bloque{margin-bottom:var(--sp-7)}
.feria-bloque > h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.feria-bloque .campo-ayuda{margin-bottom:var(--sp-4)}

/* Título a la izquierda y su acción a la derecha, alineados por la base del
   texto y no por el centro: alineados por el centro, el botón queda un pelo
   alto respecto al título y se nota. */
.feria-cabeza-bloque{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-2)}

.feria-cabeza-feria{display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.feria-cabeza-texto{flex:1;min-width:200px}
.feria-cabeza-texto h3{font-size:var(--fs-h3)}
.feria-cabeza-texto p{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}
.feria-volver-btn{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}

.feria-vacio{color:var(--text-muted);font-size:var(--fs-sm);
  padding:var(--sp-5);text-align:center;
  border:1px dashed var(--border-subtle);border-radius:var(--radius-lg)}

.feria-botonera{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.feria-borrar{color:var(--danger-500);border-color:var(--danger-500)}
.feria-borrar:hover{background:var(--danger-100)}

/* La unidad, dentro del rótulo de una casilla o de una columna: se lee, pero
   no compite con el nombre. */
.feria-unidad{color:var(--text-muted);font-weight:var(--fw-regular)}

.feria-constantes{gap:var(--sp-2) var(--sp-3)}

/* Vacunación en la feria: el bloque «Vacunas Aplicadas» del formulario y la
   celda de la tabla. Reutiliza .permiso (la casilla de la casa). */
.feria-vac-campo > label{display:block;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title);margin-bottom:var(--sp-2)}
.feria-vac-aplicadas{display:flex;flex-direction:column;gap:var(--sp-2);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-md);
  padding:var(--sp-3);background:rgba(var(--cristal-rgb),.4)}
.feria-vac-fila{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.feria-vac-fila .permiso{margin:0}
.feria-vac-dosis{padding:2px var(--sp-2);border-radius:var(--radius-sm);
  border:1px solid var(--cristal-borde);background:var(--surface-card);
  font-size:var(--fs-xs)}
.feria-vac-dosis[hidden]{display:none}
.feria-vac-celda{font-size:var(--fs-xs);color:var(--text-body)}

.feria-tarjeta{cursor:pointer}
.feria-tarjeta-pie{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-top:var(--sp-4)}
.feria-cabeza-gente{flex:0 0 auto}

/* ---------- El formulario de registro ---------- */

/* La presión son dos cifras en un solo campo, con su barra en medio: es como
   se escribe y como se dice, «ciento veinte sobre ochenta». Dos campos
   separados habrían sido dos preguntas donde hay una. */
.feria-entrada-presion{gap:var(--sp-1)}
.feria-entrada-presion input{text-align:center}
.feria-barra-presion{color:var(--text-muted);font-size:var(--fs-body-lg)}

/* «En Ayunas» cuelga del campo de glucemia y no va suelta: cambia cómo se lee
   esa cifra y ninguna otra, así que tiene que verse pegada a ella. */
.feria-ayunas-casilla{align-self:flex-start;margin-top:var(--sp-1)}

/* ---------- Lo que se calcula solo ----------
   La PAM y el IMC no se preguntan: salen del resto y se ven mientras se
   teclea, igual que en las calculadoras de la web. El color es el del rango en
   que cae, con las tres parejas de la casa. */
.feria-calculados{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.feria-calculado{flex:1 1 180px;padding:var(--sp-4);text-align:center;
  border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid var(--border-subtle);
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard)}
.feria-calculado[class*="grado-"]{
  background:color-mix(in srgb,var(--tinte) 62%,var(--surface-card));
  border-color:color-mix(in srgb,var(--filo) 34%,var(--surface-card))}
.feria-calculado-valor{display:block;font-family:var(--font-display);
  font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--text-title)}
.feria-calculado-unidad{font-size:var(--fs-sm);color:var(--text-muted)}
/* También en Title Case, y por lo mismo que la cabecera de la tabla: aquí no
   pone «PAM», pone el rango en que ha caído, y «HIPERTENSIÓN GRADO 1» a gritos
   en la cara de quien acaba de tomar la tensión no es la manera de decirlo. */
.feria-calculado-que{display:block;margin-top:var(--sp-1);
  font-size:var(--fs-sm);color:var(--text-muted)}
.feria-calculado[class*="grado-"] .feria-calculado-que{color:var(--filo);
  font-weight:var(--fw-semibold)}

/* ---------- La tabla ----------
   Se desplaza a lo ancho DENTRO de su envoltorio y no arrastra la página: con
   doce constantes marcadas no cabe en un teléfono, y una página que se mueve
   de lado se lee peor que una tabla que se mueve de lado. */
.feria-tabla-envoltorio{overflow-x:auto;border-radius:var(--radius-lg);
  border:1px solid var(--cristal-borde);background:var(--cristal);
  backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo)}
.feria-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.feria-tabla th,.feria-tabla td{padding:var(--sp-3);text-align:left;
  white-space:nowrap;border-bottom:1px solid var(--cristal-borde)}
/* En Title Case y NO en versalitas, aunque el resto de rótulos de la casa vaya
   en versalitas: aquí el rótulo lleva su unidad pegada, y en mayúsculas
   «mmHg» sale «MMHG» y «mg/dL» sale «MG/DL», que ya no son las unidades sino
   otra cosa parecida. Es la misma norma que se aplicó a los subtítulos de las
   fichas: Title Case limpio. */
.feria-tabla thead th{font-family:var(--font-display);font-size:var(--fs-sm);
  color:var(--text-muted);font-weight:var(--fw-semibold)}
.feria-tabla tbody tr:last-child td{border-bottom:0}
.feria-tabla tbody tr:hover{background:var(--cristal-vivo)}
.feria-col-n{width:44px;color:var(--text-muted)}
.feria-col-marca{width:38px}
.feria-col-quien{color:var(--text-muted)}
.feria-sin{color:var(--ink-300)}

/* El valor con su rango. El mismo par de tonos que la cuadrícula de gravedad
   de una ficha, y por el mismo motivo: que el rojo quiera decir lo mismo se
   mire donde se mire. Sin rango -el nombre, el sexo- no se tiñe nada. */
.feria-valor{display:inline-block;padding:2px var(--sp-2);
  border-radius:var(--radius-pill);font-weight:var(--fw-semibold)}
.feria-valor[class*="grado-"]{background:var(--tinte);color:var(--filo)}

/* ---------- Las gráficas ---------- */
.feria-graficas{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media (max-width:520px){
  .feria-graficas{grid-template-columns:1fr}
}
.feria-grafica{display:flex;flex-direction:column;gap:var(--sp-4);
  align-items:flex-start}
.feria-lienzo{display:block;max-width:100%}

/* ---------- Quién está registrando ---------- */
.feria-gente{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2)}
.feria-persona{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:var(--cristal);border:1px solid var(--cristal-borde)}
.feria-persona-nombre{flex:1;font-weight:var(--fw-semibold);color:var(--text-title)}

/* ---------- El informe ----------
   Esto ES el PDF: lo que se ve aquí es lo que se imprime. Va sobre papel
   blanco y no sobre el cristal de la web, porque el cristal deja pasar el
   círculo rosa de detrás y en papel eso no existe.

   Y es LO ÚNICO que no cambia con el color ni con el modo oscuro: se pega en
   un trabajo que va en blanco. Para conseguirlo sin reescribir cada regla de
   dentro, se vuelven a declarar AQUÍ, sobre el propio informe, las variables
   de tema con sus valores claros de siempre: todo lo que dentro se pinta con
   `var(--text-*)`, `var(--surface-*)`, el cristal o los colores de estado
   hereda estos y no los del <html>. El matiz elegido tampoco entra: la escala
   del rosa se ancla a su hex original. */
.feria-informe{margin-top:var(--sp-6);padding:var(--sp-6);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  --tono-giro:0;--tono-sat:1;
  --cream-50:#fcfcfb;--cream-100:#f8f5f4;--cream-200:#f3ebe9;
  --ink-900:#2b1720;--ink-700:#4a2f3b;--ink-500:#6f5661;--ink-300:#a3919a;--ink-100:#ded5d9;
  --rose-100:#fdeef0;--rose-200:#f9d7dd;--rose-300:#edaeba;--rose-500:#d9628d;--rose-600:#c04578;--rose-700:#9e235f;
  --cristal-rgb:255,255,255;
  --surface-card:#ffffff;--surface-page:#fcfcfb;--surface-sunken:#f8f5f4;--surface-tint:#fdeef0;
  --text-title:#2b1720;--text-body:#4a2f3b;--text-muted:#6f5661;--text-onbrand:#fcfcfb;
  --brand-primary:#9e235f;--brand-accent:#d9628d;
  --border-subtle:#ded5d9;--border-strong:#edaeba;
  --success-500:#3f8f6d;--success-100:#e2f1ea;--warning-500:#c9821f;--warning-100:#faf0dd;
  --danger-500:#c0392b;--danger-100:#fbe6e3;--info-500:#41708f;--info-100:#e5eff5;
  --halo-1:#f9d7dd;--halo-2:#fdeef0;--realce:#ffffff;
  background:#ffffff;color:var(--text-body)}
.feria-informe-cabeza{display:flex;align-items:center;gap:var(--sp-4);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);
  border-bottom:2px solid var(--brand-primary)}
.feria-informe-logo{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
/* La portada. El rótulo de encima del título dice QUÉ es este papel antes de
   decir de qué feria: al pasar de mano en mano, un informe sin esa línea se
   lee como una lista. */
.feria-informe-rotulos{min-width:0}
.feria-informe-sobre{margin:0 0 var(--sp-1);font-size:var(--fs-xs);
  letter-spacing:var(--ls-wide,.08em);text-transform:uppercase;
  color:var(--brand-accent);font-weight:var(--fw-bold)}
.feria-informe-titulo{font-family:var(--font-display);font-size:var(--fs-h2);
  line-height:var(--lh-tight);color:var(--brand-primary);margin:0}
.feria-informe-lugar{margin:var(--sp-1) 0 0;color:var(--text-muted)}

/* La ficha de la jornada, en pares rótulo/dato. Era un renglón corrido
   («Integrantes: A · B · C») donde el equipo, la fecha y el lugar iban
   mezclados con el título; separados en columnas se encuentran de un vistazo,
   que es lo que se le pide a la primera plana de un informe. */
.feria-informe-ficha{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin:0 0 var(--sp-6);padding:var(--sp-4) var(--sp-5);
  background:var(--surface-sunken);border-radius:var(--radius-lg)}
.feria-informe-ficha dt{font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:var(--ls-wide,.06em);color:var(--text-muted);
  margin:0 0 var(--sp-1)}
.feria-informe-ficha dd{margin:0;font-size:var(--fs-sm);color:var(--text-title);
  font-weight:var(--fw-medium)}

.feria-informe-seccion{margin:var(--sp-7) 0 var(--sp-4)}
.feria-informe-nota{margin:0 0 var(--sp-4);font-size:var(--fs-sm);
  color:var(--text-muted);max-width:68ch}

/* Los azulejos son los MISMOS del Resumen del panel. Aquí sólo se les quita el
   cristal, igual que a la tabla unas líneas más abajo: el cristal deja pasar
   el círculo rosa de detrás, y en papel no hay nada detrás. */
.feria-informe-cifras{margin:0}
.feria-informe .azulejo{background:var(--surface-card);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border-subtle);box-shadow:none;
  padding:var(--sp-5) var(--sp-4)}
.feria-informe .azulejo-cifra{font-size:var(--fs-h2)}

/* El reparto por categorías. La barra no lleva ni un color escrito: hereda
   --tinte y --filo de la clase .grado-* que ya usan las cuadrículas de
   gravedad y las celdas de la tabla. Un solo sitio para los tres colores. */
.feria-informe-repartos{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.feria-informe-reparto{padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  background:var(--surface-card);break-inside:avoid}
.feria-informe-reparto h3{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-3);
  font-family:var(--font-display);font-size:var(--fs-h4);color:var(--text-title)}
.feria-informe-medidos{font-family:var(--font-body);font-size:var(--fs-xs);
  font-weight:var(--fw-regular);color:var(--text-muted);white-space:nowrap}
.feria-informe-reparto ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-2)}
/* La columna del rótulo mide 12em porque es lo que ocupa «Compatible con
   Diabetes», que es la categoría más larga de RANGOS. Con menos, las tres
   categorías largas parten en dos líneas y el reparto deja de leerse de un
   barrido. Si algún día se añade una más larga, este número sube. */
.feria-informe-reparto li{display:grid;align-items:center;gap:var(--sp-2);
  grid-template-columns:minmax(0,12em) 1fr auto;font-size:var(--fs-xs)}
.feria-informe-cat{color:var(--text-body);overflow-wrap:anywhere}
.feria-informe-barra{display:block;height:8px;border-radius:999px;
  background:var(--tinte);overflow:hidden}
.feria-informe-barra i{display:block;height:100%;border-radius:999px;
  background:var(--filo)}
.feria-informe-n{font-variant-numeric:tabular-nums;color:var(--text-title);
  font-weight:var(--fw-bold);white-space:nowrap}
.feria-informe-n small{margin-left:.4em;font-weight:var(--fw-regular);
  color:var(--text-muted)}
/* Una categoría sin nadie se queda, para que dos ferias se puedan comparar,
   pero apagada: si no, los ceros pesan lo mismo que las cifras. */
.feria-informe-cero{opacity:.45}

.feria-informe-hallazgos td:first-child{font-weight:var(--fw-medium);
  color:var(--text-title)}
.feria-informe .feria-tabla-envoltorio{background:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;border-color:var(--border-subtle)}
.feria-informe .feria-tabla th,.feria-informe .feria-tabla td{
  border-bottom-color:var(--border-subtle)}
.feria-informe-pie{margin:var(--sp-5) 0 0;font-size:var(--fs-xs);
  color:var(--text-muted);padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle)}

/* Mientras se imprime, el informe está SACADO de su sección y colgando del
   body: es la única manera de dejarlo solo en la página, porque un
   `display:none` en un antepasado apaga a sus descendientes hagan lo que
   hagan. Fuera de la impresión se aparta de la vista, para que ese instante no
   llegue a verse. Ver descargarElPDF() en feria.js. */
body.imprimiendo-feria > #feria-informe{position:absolute;left:-99999px;top:0}

@media print{
  @page{margin:14mm}
  body.imprimiendo-feria > *{display:none !important}
  body.imprimiendo-feria > #feria-informe{display:block !important;
    position:static;left:auto;border:0;padding:0;margin:0}
  /* En papel no hay dónde desplazarse: la tabla tiene que caber, así que se le
     deja partir el texto y encoger la letra. */
  .feria-informe .feria-tabla-envoltorio{overflow:visible;border:0}
  .feria-informe .feria-tabla{font-size:10pt}
  .feria-informe .feria-tabla th,.feria-informe .feria-tabla td{
    white-space:normal;padding:5pt}
  /* Y los tres colores se imprimen. De serie el navegador tira los fondos, y
     un informe de tensiones sin el rojo de las altas no dice la mitad de lo
     que tiene que decir. */
  .feria-valor{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Y por lo mismo se imprimen los fondos del resumen: un reparto en el que
     no se ve el rojo es una lista de números. */
  .feria-informe .azulejo,.feria-informe-ficha,.feria-informe-reparto,
  .feria-informe-barra,.feria-informe-barra i{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Nada de esto se parte entre dos hojas, y ningún rótulo se queda solo al
     pie de una: media tarjeta de reparto no se puede leer. */
  .feria-informe .azulejo,.feria-informe-reparto,
  .feria-informe-ficha > div{break-inside:avoid}
  .feria-informe-seccion{break-after:avoid;margin-top:var(--sp-6)}
  /* Dos columnas fijas en papel. Con `auto-fit` sobre el ancho de un A4 salía
     una sola y el reparto se llevaba dos hojas. */
  .feria-informe-repartos{gap:8pt;grid-template-columns:1fr 1fr}
  .feria-informe-reparto{padding:7pt 9pt}
  /* Que no se parta una fila entre dos páginas, y que la cabecera se repita
     en cada una: sin eso, la página tres son cifras sin columna. */
  .feria-informe tr{break-inside:avoid}
  .feria-informe thead{display:table-header-group}
}

/* ===========================================================================
   SECCIÓN «JUEGOS»  (ver web/js/juegos.js)
   Menú de sonido, galería de cartas, lienzo del juego y panel de récords.
   Todo con los tokens de la casa, así que va en claro y en oscuro sin tocar
   nada aquí abajo.
   =========================================================================== */

#juegos-cuerpo{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-5)}

.juegos-sonido{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);background:var(--surface-tint)}
.juegos-sonido-titulo{font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em;color:var(--brand-primary)}
.juegos-sonido-fila{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.juegos-sonido-nota{font-size:var(--fs-xs);color:var(--text-muted)}

.juegos-galeria{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.juego-carta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);
  text-align:left;padding:var(--sp-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);background:var(--surface-card);cursor:pointer;
  box-shadow:var(--shadow-xs);transition:transform .12s,box-shadow .12s,border-color .12s}
.juego-carta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--border-strong)}
.juego-carta:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.juego-carta-icono{font-size:2rem;line-height:1}
.juego-carta-icono img{display:block;width:72px;height:72px;object-fit:contain}
.juego-carta-nombre{font-family:var(--font-display,inherit);font-size:var(--fs-lg);
  font-weight:var(--fw-bold);color:var(--text-title)}
.juego-carta-tag{font-size:var(--fs-sm);color:var(--text-body);flex:1}
.juego-carta-jugar,.juego-carta-pronto{margin-top:var(--sp-1);padding:2px var(--sp-3);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.juego-carta-jugar{background:var(--brand-primary);color:var(--text-onbrand)}
.juego-carta-pronto{background:var(--surface-sunken);color:var(--text-muted)}
.juego-carta.pendiente{cursor:default;opacity:.6;box-shadow:none}
.juego-carta.pendiente:hover{transform:none;box-shadow:none;border-color:var(--border-subtle)}

/* El tablero: pequeño en móvil, GRANDE en pantallas anchas (más visión y mejor
   jugabilidad). El búfer del <canvas> se ajusta por JS a este tamaño real ×
   densidad, así que se ve nítido a cualquier medida. */
.juego-escena{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  --juego-ancho:min(94vw, 340px);
  /* Nada de esto es texto que se pueda copiar: al tocar en una tablet no debe
     salir el bocadillo azul de selección / «Copiar». */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (min-width:680px){ .juego-escena{--juego-ancho:440px} }
@media (min-width:1040px){ .juego-escena{--juego-ancho:500px} }
.juego-cabecera{display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--juego-ancho);gap:var(--sp-3)}
.juego-titulo-vivo{font-family:var(--font-display,inherit);font-size:var(--fs-lg);
  font-weight:var(--fw-bold);color:var(--text-title)}
.juego-marcador{min-width:2.5ch;text-align:right;font-size:var(--fs-h4,1.4rem);
  font-weight:var(--fw-bold);color:var(--brand-primary);font-variant-numeric:tabular-nums}
.juego-volver{flex:none}

.juego-lienzo-caja{position:relative;width:100%;max-width:var(--juego-ancho)}
#juego-canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  background:var(--surface-sunken);touch-action:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
/* Saltos y FARMA-Crush llevan la clase .juego-ancho. El aspect-ratio real lo
   fija juegos.js en el propio <canvas> (lo sabe por A/AL): Saltos siempre
   apaisado; FARMA-Crush apaisado en PC y RETRATO en móvil (banda de marcadores,
   jeringa horizontal y tablero, apilados). Aquí sólo se da el ancho. */
.juego-escena.juego-ancho{--juego-ancho:min(96vw, 460px)}
@media (min-width:680px){ .juego-escena.juego-ancho{--juego-ancho:min(88vw, 580px)} }
/* FARMA-Crush en móvil es RETRATO y alto. Se limita el ANCHO también contra la
   altura de la ventana (el lienzo escala con su aspect-ratio), así nunca empuja
   la tabla de récords fuera de la pantalla. Sólo afecta a FARMA-Crush. */
@media (max-width:720px){ .juego-escena.juego-crush{--juego-ancho:min(96vw, 54vh, 460px)} }
.juego-overlay{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:var(--sp-4);
  background:color-mix(in srgb,var(--surface-page) 78%,transparent);
  border-radius:var(--radius-lg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.juego-overlay-caja{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-5);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--surface-card);box-shadow:var(--shadow-lg);text-align:center}
.juego-overlay-fin{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.juego-overlay-pts{margin:0;font-size:var(--fs-lg);color:var(--text-title)}
.juego-overlay-pts strong{font-size:var(--fs-h3,1.75rem);color:var(--brand-primary)}
/* Sólo lo usa la Ruta al Centro de Salud: ahí los puntos salen del tiempo,
   así que el cartel dice también en cuánto se hizo la carrera. */
.juego-overlay-detalle{margin:0;font-size:var(--fs-sm);color:var(--text-muted,var(--text-body));font-variant-numeric:tabular-nums}
.juego-overlay-estado{margin:0 0 var(--sp-1);font-size:var(--fs-sm);color:var(--text-body);min-height:1.2em}
.juego-overlay-caja .boton,.juego-overlay-caja .boton-suave{width:100%;justify-content:center}
.juego-pista{margin:0;font-size:var(--fs-xs);color:var(--text-muted);text-align:center}

.juegos-records{padding:var(--sp-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);background:var(--surface-card)}
.juegos-records-titulo{margin:0 0 var(--sp-3);font-size:var(--fs-md,1rem);
  font-weight:var(--fw-bold);color:var(--text-title)}
.juegos-records-vacio,.juegos-records-cargando{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.juegos-tabla{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.juegos-fila{display:grid;grid-template-columns:2ch 1fr auto auto;gap:var(--sp-3);
  align-items:baseline;padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
.juegos-fila:last-child{border-bottom:0}
.juegos-pos{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);text-align:right}
.juegos-quien{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.juegos-cuando{font-size:var(--fs-xs);color:var(--text-muted)}
.juegos-pts{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--brand-primary);
  font-variant-numeric:tabular-nums}
.juegos-fila.mia{background:var(--surface-tint);border-radius:var(--radius-sm);
  margin:0 calc(var(--sp-2) * -1);padding-left:var(--sp-2);padding-right:var(--sp-2)}
.juegos-fila.mia .juegos-pos{color:var(--brand-primary)}

/* --- Modo PC: con un juego abierto, repartir la escena en HORIZONTAL -------
   En una pantalla ancha el tablero se veía pequeño en una columna estrecha y
   la tabla de récords caía muy abajo. A partir de 1024px, y sólo con un juego
   en marcha (#juegos-cuerpo.juegos-jugando, lo pone juegos.js al abrir/cerrar
   un juego), la escena y los récords se colocan lado a lado:

     [ Sonido ......................................... ]
     [ lienzo (algo más de la mitad) ][ Récords (fijo al scroll) ]

   · Torre (retrato): el lienzo se mide por la ALTURA de la ventana; el ancho
     sale de su aspect-ratio. La columna «auto» se ciñe a él y queda centrada.
   · FARMA-Crush y Saltos (apaisados): el lienzo se queda con algo más de la
     mitad del ancho y los récords, una columna cómoda al lado.
   Mismas piezas y opciones que en móvil, sólo que distribuidas en horizontal. */
@media (min-width:1024px){
  #juegos-cuerpo.juegos-jugando{
    display:grid;
    grid-template-columns:auto minmax(300px,360px);
    grid-template-areas:
      "sonido  sonido"
      "escena  records"
      "galeria galeria";
    justify-content:center;
    align-items:start;
    column-gap:clamp(1.5rem,3vw,2.75rem);
    row-gap:var(--sp-5)}
  #juegos-cuerpo.juegos-jugando > .juegos-sonido  { grid-area:sonido }
  #juegos-cuerpo.juegos-jugando > #juego-escena   { grid-area:escena }
  #juegos-cuerpo.juegos-jugando > #juegos-galeria { grid-area:galeria }
  #juegos-cuerpo.juegos-jugando > #juegos-records {
    grid-area:records;position:sticky;top:var(--sp-4);align-self:start;margin:0}

  /* Torre: retrato, el alto de la ventana manda. */
  .juegos-jugando .juego-escena{--juego-alto:min(70vh,660px)}
  .juegos-jugando .juego-escena .juego-cabecera,
  .juegos-jugando .juego-escena .juego-pista{max-width:none;width:100%}
  .juegos-jugando .juego-escena .juego-lienzo-caja{width:auto;max-width:100%}
  .juegos-jugando .juego-escena #juego-canvas{width:auto;height:var(--juego-alto);max-width:100%}

  /* FARMA-Crush / Saltos: apaisados. El lienzo toma la fracción libre (algo
     más de la mitad), con un tope para que no se dispare en pantallas enormes;
     los récords, su columna al lado. */
  #juegos-cuerpo.juegos-jugando:has(.juego-escena.juego-ancho){
    grid-template-columns:minmax(0,1fr) minmax(300px,360px);
    justify-content:stretch}
  .juegos-jugando .juego-escena.juego-ancho{width:100%}
  .juegos-jugando .juego-escena.juego-ancho .juego-cabecera,
  .juegos-jugando .juego-escena.juego-ancho .juego-lienzo-caja{width:100%;max-width:720px}
  .juegos-jugando .juego-escena.juego-ancho #juego-canvas{width:100%;height:auto}
}

/* ---- Inmuno-Defensa (Tower Defense Inmunológico v2) ---- */
.juegos-jugando .juego-escena.juego-inmuno .juego-cabecera,
.juegos-jugando .juego-escena.juego-inmuno .juego-lienzo-caja{max-width:960px;width:100%}
.juego-escena.juego-inmuno{--juego-ancho:min(98vw, 960px);max-height:100vh}

.juegos-jugando .juego-escena.juego-inmuno .juego-lienzo-caja{
  position:relative;width:100%;aspect-ratio:880/520;overflow:hidden;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border-subtle);
}
.juegos-jugando .juego-escena.juego-inmuno #juego-canvas{
  width:100%!important;height:100%!important;aspect-ratio:unset;display:block;
}

/* HUD Overlay sin scroll */
#inmuno-hud{
  position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;
  justify-content:space-between;padding:8px;z-index:10;box-sizing:border-box;
}

.inmuno-barra-sup{
  pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px;padding:6px 12px;background:color-mix(in srgb, var(--surface-card) 85%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
}
.inmuno-stat{display:flex;flex-direction:column;gap:1px}
.inmuno-stat-label{font-size:9px;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted)}
.inmuno-stat-val{font-size:var(--fs-xs, 0.85rem);font-weight:var(--fw-bold);color:var(--text-title);
  font-variant-numeric:tabular-nums}
.inmuno-stat-destacado .inmuno-stat-val{color:var(--brand-primary)}
.inmuno-atp{color:#0284c7}

.inmuno-barra-salud{position:relative;width:100px;height:14px;background:rgba(0,0,0,0.25);
  border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--border-subtle)}
.inmuno-barra-salud-relleno{height:100%;background:#10b981;transition:width .2s ease, background-color .2s ease}
.inmuno-hp-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:var(--fw-bold);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.9)}

.inmuno-controles-rapidos{display:flex;align-items:center;gap:4px}
.inmuno-btn-ctrl{padding:4px 8px;font-size:11px;font-weight:var(--fw-bold);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface-page);color:var(--text-title);cursor:pointer;transition:all .15s ease}
.inmuno-btn-ctrl:hover{background:var(--surface-sunken);transform:scale(1.03)}
.inmuno-btn-ronda{padding:5px 12px;font-size:11px;font-weight:var(--fw-bold);
  border:none;border-radius:var(--radius-md);background:linear-gradient(135deg, var(--brand-primary), #e11d48);
  color:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(225,29,72,0.35);transition:all .2s ease}
.inmuno-btn-ronda:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px rgba(225,29,72,0.45)}
.inmuno-btn-ronda:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* Bandeja flotante inferior unificada */
.inmuno-bandeja-flotante{
  pointer-events:auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:6px 10px;background:color-mix(in srgb, var(--surface-card) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
.inmuno-celulas-compactas{display:flex;align-items:center;gap:5px;flex-shrink:0}
.inmuno-carta-compacta{
  display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--surface-page);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;
  transition:all .15s ease;position:relative;flex-shrink:0;
}
.inmuno-carta-compacta:hover:not(:disabled){border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.inmuno-carta-compacta:disabled{opacity:0.4;cursor:not-allowed}
.inmuno-cc-activa{border-color:var(--brand-primary)!important;background:color-mix(in srgb, var(--brand-primary) 15%, var(--surface-card))!important;box-shadow:0 0 0 2px var(--brand-primary)}
.inmuno-cc-icono-caja{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
/* Los sprites llegan a 512 px y se enseñan a 28: sin `image-rendering` suave
   el navegador los reduce bien, pero la sombra propia es lo que los despega
   del fondo oscuro de la bandeja. */
.inmuno-cc-img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.inmuno-cc-emoji{font-size:1.1rem}
.inmuno-cc-datos{display:flex;flex-direction:column;text-align:left}
.inmuno-cc-nombre{font-size:10px;font-weight:var(--fw-bold);color:var(--text-title);white-space:nowrap}
.inmuno-cc-coste{font-size:9px;font-weight:var(--fw-bold);color:#0284c7}
.inmuno-cc-atajo{font-size:9px;font-weight:var(--fw-bold);color:var(--text-muted);opacity:0.6;margin-left:2px}

/* Habilidades compactas */
.inmuno-habs-compactas{display:flex;align-items:center;gap:5px;flex-shrink:0}
.inmuno-btn-hab-comp{
  display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--surface-page);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;
  font-size:10px;font-weight:var(--fw-bold);color:var(--text-body);transition:all .15s ease;flex-shrink:0;
}
.inmuno-btn-hab-comp:hover:not(:disabled){background:var(--surface-sunken);border-color:var(--border-strong)}
.inmuno-btn-hab-comp:disabled{opacity:0.4;cursor:not-allowed}
/* Los cuatro iconos de habilidad dejaron de ser emojis del sistema y pasaron a
   ser piezas modeladas (ver scripts/blender/inmuno.py): un emoji lo dibuja cada
   sistema operativo a su manera y no era de la casa. */
.inmuno-hab-icon{font-size:1rem;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.inmuno-hab-icon img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.inmuno-hab-lbl{white-space:nowrap}
.inmuno-hab-cd{font-size:9px;font-weight:var(--fw-bold);color:#ef4444}

/* Panel flotante de célula */
.inmuno-panel-info{
  position:absolute;top:54px;right:10px;max-width:270px;width:calc(100% - 20px);
  pointer-events:auto;z-index:20;background:color-mix(in srgb, var(--surface-card) 95%, transparent);
  backdrop-filter:blur(12px);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:var(--shadow-xl);padding:10px;display:flex;flex-direction:column;gap:6px;
  animation:inmunoFadeIn .2s ease;
}
@keyframes inmunoFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.inmuno-panel-cabecera{display:flex;align-items:center;gap:8px;position:relative}
.inmuno-panel-icono{font-size:1.4rem;display:inline-flex;width:34px;height:34px;flex:0 0 34px}
.inmuno-panel-icono img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.inmuno-panel-nombre{font-size:12px;font-weight:var(--fw-bold);color:var(--text-title)}
.inmuno-panel-sub{font-size:10px;color:var(--text-muted)}
.inmuno-panel-cerrar{position:absolute;top:0;right:0;background:none;border:none;font-size:1.1rem;color:var(--text-muted);cursor:pointer}
.inmuno-panel-stats{display:grid;grid-template-columns:repeat(2, 1fr);gap:4px;padding:6px;background:var(--surface-page);border-radius:var(--radius-sm);font-size:10px;color:var(--text-body)}
.inmuno-panel-acciones{display:flex;flex-direction:column;gap:5px}
.inmuno-btn-upgrade{width:100%;padding:6px;background:#10b981;color:#fff;border:none;border-radius:var(--radius-md);font-size:11px;font-weight:var(--fw-bold);cursor:pointer}
.inmuno-btn-upgrade:hover:not(:disabled){background:#059669}
.inmuno-btn-upgrade:disabled{opacity:0.45;cursor:not-allowed}
.inmuno-max-lvl{text-align:center;font-size:10px;font-weight:var(--fw-bold);color:#f59e0b;padding:3px}
.inmuno-panel-fila-sec{display:flex;gap:4px}
.inmuno-btn-ficha, .inmuno-btn-vender{flex:1;padding:5px;font-size:10px;font-weight:var(--fw-bold);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-page);color:var(--text-body);cursor:pointer;text-align:center}
.inmuno-btn-vender{color:#ef4444;border-color:rgba(239,68,68,0.3)}
.inmuno-btn-vender:hover{background:rgba(239,68,68,0.08)}

/* Modal Ficha Biológica */
.inmuno-modal{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);z-index:9999;pointer-events:auto}
.inmuno-modal-caja{background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--sp-4);max-width:460px;width:100%;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:var(--sp-3)}
.inmuno-modal-cabecera{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:var(--sp-2)}
.inmuno-modal-titulo{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-title)}
.inmuno-modal-cerrar{background:none;border:none;font-size:1.2rem;color:var(--text-muted);cursor:pointer}
.inmuno-ficha-header{display:flex;align-items:center;gap:var(--sp-3)}
.inmuno-ficha-img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.32))}
.inmuno-ficha-icono{font-size:2rem}
.inmuno-ficha-header h4{margin:0;font-size:var(--fs-base);color:var(--text-title)}
.inmuno-ficha-sub{margin:2px 0 0;font-size:11px;color:var(--text-muted)}
.inmuno-ficha-texto h5{margin:var(--sp-2) 0 4px;font-size:var(--fs-xs);color:var(--brand-primary);text-transform:uppercase;letter-spacing:.05em}
.inmuno-ficha-texto p{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--text-body);line-height:1.5}

/* ===========================================================================
   PANTALLA DEL PANEL «VACUNAS»  (ver web/js/panel-vacunas.js)
   El Esquema Nacional de Vacunación 2026, la línea de vida, el carné y la
   cobertura del equipo. Todo con tokens de la casa: claro y oscuro salen
   solos. Los tres colores de estado son los mismos de .grado-alta y compañía
   (rojo atrasada · amarillo pendiente · verde al día).
   =========================================================================== */
.vac{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-4)}

.vac-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);
  border-bottom:1px solid var(--cristal-borde)}
.vac-tabs button{appearance:none;border:0;background:none;cursor:pointer;
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.vac-tabs button:hover{color:var(--text-title)}
.vac-tabs button[aria-selected="true"]{color:var(--brand-primary);
  border-bottom-color:var(--brand-primary)}

.vac-descargo{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.vac-cuerpo{display:flex;flex-direction:column;gap:var(--sp-4)}
.vac-ayuda{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}

/* --- El Esquema --- */
.vac-esquema{display:flex;flex-direction:column;gap:var(--sp-4)}
.vac-grupo-cabeza h3{margin:0;font-family:var(--font-display);color:var(--text-title)}
.vac-grupo-edad{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--text-muted)}

.vac-selvac{max-width:340px}

.vac-canvas-caja{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:var(--cristal);backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);border:1px solid var(--cristal-borde);
  overflow-x:auto}
.vac-lienzo{display:block;max-width:100%}
.vac-canvas-mandos{margin-top:var(--sp-2);display:flex;gap:var(--sp-2)}

.vac-azulejos{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.vac-azulejo{border-radius:var(--radius-xl);
  background:var(--cristal);backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);border:1px solid var(--cristal-borde);
  overflow:hidden}
.vac-azulejo.abierto{grid-column:1/-1}
.vac-azulejo-cara{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;
  text-align:left;cursor:pointer;border:0;background:none;padding:var(--sp-4)}
.vac-azulejo-cara:hover{background:var(--cristal-vivo)}
.vac-azulejo-nombre{font-family:var(--font-display);font-size:var(--fs-body-lg);
  color:var(--text-title)}
.vac-azulejo-protege{font-size:var(--fs-sm);color:var(--text-muted)}
.vac-azulejo-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1);
  font-size:var(--fs-xs);color:var(--text-muted)}
.vac-via{font-weight:var(--fw-bold);color:var(--brand-primary);
  border:1px solid var(--cristal-borde);border-radius:6px;padding:0 6px}
.vac-viva{background:var(--warning-100);color:var(--warning-500);
  border-radius:6px;padding:0 6px;font-weight:var(--fw-semibold)}
.vac-azulejo-detalle{padding:0 var(--sp-4) var(--sp-4);
  border-top:1px solid var(--cristal-borde)}
.vac-azulejo-detalle dl{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0 0}
.vac-azulejo-detalle dt{font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.03em;color:var(--brand-primary)}
.vac-azulejo-detalle dd{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-body)}
.vac-notas{margin:var(--sp-3) 0 0;padding-left:var(--sp-4);
  font-size:var(--fs-sm);color:var(--text-muted)}
.vac-notas li{margin-bottom:4px}

.vac-especial{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde)}
.vac-especial h4{margin:0 0 var(--sp-2);font-family:var(--font-display);color:var(--text-title)}
.vac-especial p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--text-body)}
.vac-especial ul{margin:0;padding-left:var(--sp-4);font-size:var(--fs-sm);color:var(--text-muted)}

/* --- Estado (los tres colores de la casa) --- */
.vac-estado{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  padding:2px 8px;border-radius:999px;
  background:var(--tinte,var(--cristal));border:1px solid var(--filo,var(--cristal-borde));
  color:var(--text-title)}

/* --- Mi Carné --- */
.vac-carne{display:flex;flex-direction:column;gap:var(--sp-4)}
.vac-carne-resumen{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vac-tabla-envoltorio{overflow-x:auto;border-radius:var(--radius-lg);
  border:1px solid var(--cristal-borde)}
.vac-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.vac-tabla th,.vac-tabla td{padding:var(--sp-3);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--cristal-borde)}
.vac-tabla thead th{font-family:var(--font-display);font-size:var(--fs-sm);
  color:var(--text-title);background:rgba(var(--cristal-rgb),.5)}
.vac-tabla tbody tr:last-child td{border-bottom:0}
.vac-carne-protege{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}
.vac-carne-vacio{font-size:var(--fs-xs);color:var(--text-muted)}
.vac-dosis-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.vac-dosis-lista li{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--text-body)}
.vac-borrar-dosis{appearance:none;border:0;background:none;cursor:pointer;
  color:var(--text-muted);font-size:var(--fs-sm);line-height:1;padding:2px 4px}
.vac-borrar-dosis:hover{color:var(--danger-500)}

.vac-alta{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.vac-alta h4{margin:0;font-family:var(--font-display);color:var(--text-title)}
.vac-alta-campos{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.vac-alta .campo{margin:0}

/* La caja desde la que se baja el carné. Lo que va debajo de ella es el
   documento de verdad, no una muestra: ver .vac-informe. */
.vac-carne-salida{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde);
  display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.vac-carne-salida h4{margin:0;font-family:var(--font-display);color:var(--text-title)}
.vac-carne-salida .boton{margin-top:var(--sp-1)}

/* --- Dónde está guardado el carné ---
   Una insignia junto a los tres marcadores. Existe porque el carné estuvo
   guardándose sólo en el navegador desde v254 y no había manera de notarlo:
   un carné atrapado en un teléfono se veía igual que uno sincronizado. */
.vac-sincro{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  padding:4px var(--sp-3);border-radius:999px;border:1px solid transparent}
.vac-sincro::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none}
.vac-sincro.bien{color:var(--success-500);background:var(--success-100);
  border-color:color-mix(in srgb,var(--success-500) 22%,transparent)}
.vac-sincro.local{color:var(--warning-500);background:var(--warning-100);
  border-color:color-mix(in srgb,var(--warning-500) 26%,transparent)}
.vac-sincro.obrando{color:var(--text-muted);background:var(--surface-sunken);
  border-color:var(--border-subtle)}
.vac-sincro.obrando::before{animation:vac-late 1.1s ease-in-out infinite}
@keyframes vac-late{0%,100%{opacity:.25}50%{opacity:1}}

/* --- Próximas dosis y avisos --- */
.vac-avisos{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde);
  display:flex;flex-direction:column;gap:var(--sp-2)}
.vac-avisos h4{margin:0;font-family:var(--font-display);color:var(--text-title)}
.vac-avisos-lista{margin:var(--sp-1) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--sp-2)}
.vac-aviso{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid var(--border-subtle)}
/* Lo atrasado lleva además una barra en el canto: en una lista larga, el color
   de la píldora solo se pierde entre lo demás. */
.vac-aviso.urge{border-left:3px solid var(--danger-500)}
.vac-aviso .vac-estado{flex:none;margin-top:1px}
.vac-aviso-cuerpo{flex:1 1 auto;min-width:0}
.vac-aviso-cuerpo strong{display:block;color:var(--text-title);font-size:var(--fs-sm)}
.vac-aviso-fecha{flex:none;font-size:var(--fs-xs);color:var(--text-muted);
  white-space:nowrap;margin-top:2px}
/* El boton de confirmar. Es lo que apaga el recordatorio, asi que va en el
   renglon y no escondido en el formulario de abajo. */
.vac-aviso-ya{flex:none;padding:4px var(--sp-3);font-size:var(--fs-xs)}
/* En un telefono el renglon no cabe en una linea: el rotulo y la fecha arriba,
   el nombre debajo y el boton a lo ancho. Apretados salian de tres pixeles. */
@media (max-width:560px){
  .vac-aviso{flex-wrap:wrap}
  .vac-aviso-cuerpo{flex:1 1 100%;order:3}
  .vac-aviso-fecha{margin-left:auto}
  .vac-aviso-ya{flex:1 1 100%;order:4;margin-top:var(--sp-2)}
}

/* --- Leer la cartilla con una foto --- */
.vac-escaner{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde);
  display:flex;flex-direction:column;gap:var(--sp-2)}
.vac-escaner h4{margin:0;font-family:var(--font-display);color:var(--text-title)}
.vac-escaner-boton{align-self:flex-start;cursor:pointer;margin-top:var(--sp-1)}
.vac-escaner-nota{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.vac-escaner.obrando{align-items:center;text-align:center}
.vac-escaner-halo{margin:var(--sp-3) auto}
.vac-escaner-mandos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.vac-leido-tabla .entrada{margin:0}
.vac-leido-tabla select,.vac-leido-tabla input[type="text"],
.vac-leido-tabla input[type="date"]{min-width:0}
.vac-leido-marca{width:64px;text-align:center}
/* La fila desmarcada se apaga, pero se sigue leyendo: es la que hay que
   repasar, no la que sobra. */
.vac-leido-fuera{opacity:.55}
.vac-leida{display:inline-block;margin-left:var(--sp-2);
  font-size:10px;font-weight:var(--fw-semibold);
  padding:1px 8px;border-radius:999px;
  background:var(--info-100);color:var(--info-500)}

/* --- Registro del Grupo --- */
.vac-grupo{display:flex;flex-direction:column;gap:var(--sp-4)}
.vac-faltas{border-radius:var(--radius-xl);padding:var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde)}
.vac-faltas h4{margin:0 0 var(--sp-2);font-family:var(--font-display);color:var(--text-title)}
.vac-faltas ul{margin:0;padding-left:var(--sp-4);font-size:var(--fs-sm);color:var(--text-body)}
.vac-faltas li{margin-bottom:4px}

/* ===========================================================================
   EL CARNÉ EN PAPEL  (#vacunas-carne, ver pintarBloqueCarneImprimible)

   Una plantilla de documento, no una tabla suelta: cabecera con cintillo,
   bloque de identificación, marcadores en los tres colores de la casa, las dos
   tablas, la leyenda y el espacio de firmas. Es el mismo bloque en pantalla y
   en papel -de ahí que se vea-, y por eso hay una sola maquetación que cuidar.

   Como en .feria-informe, aquí se vuelven a declarar las variables de tema con
   sus valores CLAROS: un carné se imprime sobre papel blanco, y quien tenga el
   modo oscuro puesto sacaría si no tinta clara sobre blanco. El matiz elegido
   en Configuración tampoco entra: la escala del rosa se ancla a su hex.
   =========================================================================== */
.vac-informe{margin-top:var(--sp-2);padding:var(--sp-6);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  --tono-giro:0;--tono-sat:1;
  --cream-50:#fcfcfb;--cream-100:#f8f5f4;--cream-200:#f3ebe9;
  --ink-900:#2b1720;--ink-700:#4a2f3b;--ink-500:#6f5661;--ink-300:#a3919a;--ink-100:#ded5d9;
  --rose-100:#fdeef0;--rose-200:#f9d7dd;--rose-300:#edaeba;--rose-500:#d9628d;--rose-600:#c04578;--rose-700:#9e235f;
  --cristal-rgb:255,255,255;--cristal:#ffffff;--cristal-borde:#ded5d9;
  --surface-card:#ffffff;--surface-page:#fcfcfb;--surface-sunken:#f8f5f4;--surface-tint:#fdeef0;
  --text-title:#2b1720;--text-body:#4a2f3b;--text-muted:#6f5661;--text-onbrand:#fcfcfb;
  --brand-primary:#9e235f;--brand-accent:#d9628d;
  --border-subtle:#ded5d9;--border-strong:#edaeba;
  --success-500:#3f8f6d;--success-100:#e2f1ea;--warning-500:#c9821f;--warning-100:#faf0dd;
  --danger-500:#c0392b;--danger-100:#fbe6e3;--info-500:#41708f;--info-100:#e5eff5;
  background:#ffffff;color:var(--text-body)}

/* 1. Cabecera. El cintillo de abajo es lo que le da aire de documento. */
.vac-informe-cabeza{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);
  border-bottom:2px solid var(--brand-primary)}
.vac-informe-logo{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
.vac-informe-rotulo{flex:1 1 300px;min-width:0}
.vac-informe-titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h2);
  line-height:var(--lh-tight);color:var(--brand-primary)}
.vac-informe-sub{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.vac-informe-emision{margin:0 0 0 auto;flex:0 0 auto;text-align:right;line-height:1.3}
.vac-informe-emision span{display:block;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.vac-informe-emision strong{font-size:var(--fs-sm);color:var(--text-title)}

/* 2. Identificación: de quién es el carné. */
.vac-informe-ficha{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:var(--sp-4);border-radius:var(--radius-lg);
  background:var(--surface-tint);border:1px solid var(--border-subtle)}
.vac-informe-ficha dt{font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em;color:var(--brand-primary)}
.vac-informe-ficha dd{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-title);
  font-weight:var(--fw-semibold);overflow-wrap:anywhere}

/* 3. Los tres marcadores, con los colores de .grado-alta y compañía. */
.vac-informe-marcadores{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-5);
  grid-template-columns:repeat(3,1fr)}
.vac-marcador{padding:var(--sp-3);border-radius:var(--radius-lg);text-align:center;
  background:var(--tinte,var(--surface-sunken));
  border:1px solid var(--filo,var(--border-subtle))}
.vac-marcador strong{display:block;font-family:var(--font-display);
  font-size:var(--fs-h2);line-height:1;color:var(--text-title)}
.vac-marcador span{display:block;margin-top:2px;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-body)}

/* 4 y 5. Los rótulos de bloque y las dos tablas. */
.vac-informe-bloque{margin:0 0 var(--sp-3);font-family:var(--font-display);
  font-size:var(--fs-body-lg);color:var(--brand-primary)}
.vac-informe-bloque + .vac-informe-scroll,
.vac-informe-bloque + .vac-informe-nada{margin-bottom:var(--sp-5)}
.vac-informe-scroll{overflow-x:auto;
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.vac-informe-tabla{min-width:520px;border-collapse:separate;border-spacing:0}
.vac-informe-tabla th,.vac-informe-tabla td{border-bottom-color:var(--border-subtle);
  vertical-align:middle}
.vac-informe-tabla tbody tr:last-child th,
.vac-informe-tabla tbody tr:last-child td{border-bottom:0}
.vac-informe-tabla thead th{background:var(--surface-sunken);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  font-family:var(--font-ui);font-weight:var(--fw-bold);color:var(--brand-primary)}
.vac-informe-tabla tbody th{font-weight:var(--fw-regular);text-align:left}
.vac-informe-centro{text-align:center;white-space:nowrap}
.vac-informe-numero{color:var(--text-muted)}
.vac-informe-vacuna{display:block;font-weight:var(--fw-semibold);color:var(--text-title)}
.vac-informe-menudo{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}
.vac-informe-nada{margin:0;padding:var(--sp-4);border-radius:var(--radius-lg);
  font-size:var(--fs-sm);color:var(--text-muted);
  background:var(--surface-sunken);border:1px dashed var(--border-subtle)}

/* 6. Leyenda, firmas y pie. */
.vac-informe-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5);
  border-radius:var(--radius-lg);background:var(--surface-sunken)}
.vac-informe-leyenda .vac-informe-menudo{display:inline;margin:0;flex:1 1 200px}
.vac-informe-firmas{display:grid;gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.vac-informe-firma{font-size:var(--fs-xs);color:var(--text-muted);text-align:center}
.vac-informe-firma span{display:block;height:var(--sp-6);margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--text-muted)}
.vac-informe-pie{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);
  font-size:var(--fs-xs);color:var(--text-muted);
  border-top:1px solid var(--border-subtle)}

/* Mientras se imprime, el carné está SACADO de su sección y colgando del body:
   es la única manera de dejarlo solo en la página, porque un display:none en un
   antepasado apaga a sus descendientes hagan lo que hagan. Fuera de la
   impresión se aparta de la vista, para que ese instante no llegue a verse.
   Ver vacDescargarCarne() en vaccini.js. */
body.imprimiendo-vacunas > #vacunas-carne{position:absolute;left:-99999px;top:0}

@media (max-width:560px){
  .vac-informe{padding:var(--sp-4)}
  .vac-informe-emision{text-align:left;margin-left:0}
  .vac-informe-marcadores{grid-template-columns:1fr}
}

@media print{
  @page{margin:14mm}
  /* Apagar, no esconder: con visibility:hidden los vecinos seguían ocupando su
     sitio y salían páginas en blanco por delante del carné. */
  body.imprimiendo-vacunas > *{display:none !important}
  body.imprimiendo-vacunas > #vacunas-carne{display:block !important;
    position:static;left:auto;border:0;padding:0;margin:0}
  /* En papel no hay dónde desplazarse: la tabla tiene que caber. */
  .vac-informe-scroll{overflow:visible}
  .vac-informe .vac-informe-tabla{font-size:9.5pt;min-width:0}
  .vac-informe .vac-informe-tabla th,.vac-informe .vac-informe-tabla td{
    white-space:normal;padding:5pt}
  .vac-informe .vac-informe-centro{white-space:nowrap}
  /* Y los tres colores se imprimen. De serie el navegador tira los fondos, y un
     carné sin el rojo de las atrasadas no dice la mitad de lo que tiene que decir. */
  .vac-estado,.vac-marcador,.vac-informe-ficha,.vac-informe-tabla thead th,
  .vac-informe-leyenda{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Que no se parta una fila entre dos páginas, y que la cabecera se repita en
     cada una: sin eso, la página dos son fechas sin columna. */
  .vac-informe tr{break-inside:avoid}
  .vac-informe thead{display:table-header-group}
  .vac-informe-bloque{break-after:avoid}
  .vac-informe-firmas{break-inside:avoid}
}

/* ==================== Cálculo de dosis ====================
   Pantalla propia dentro de Calculadoras: elección adulta/pediátrica, el
   formulario con el buscador de fármacos tintado por rango, y el resultado
   en círculo. Reutiliza .tarjeta, .campo/.entrada, .buscador y .aviso.
   Motor en calculadoras.js; recorrido en app.js; voz en omnia-dosis.js. */

.dosis-eleccion,.dosis-forma{
  max-width:760px;margin:0 auto;animation:dosis-entra .32s var(--ease-out) both}
@keyframes dosis-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dosis-eleccion,.dosis-forma{animation:none}}

.dosis-eleccion-botones{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:560px){.dosis-eleccion-botones{grid-template-columns:1fr}}
.dosis-proximamente{opacity:.55;cursor:not-allowed}
.dosis-proximamente .insignia{margin-top:var(--sp-3)}

.dosis-forma-cabeza{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
.dosis-forma-cabeza h3{margin:0}

.dosis-campos{margin-bottom:var(--sp-5)}
.dosis-campo-ancho{grid-column:1/-1}
.dosis-doble{display:flex;gap:var(--sp-2)}
.dosis-doble .entrada:first-child{flex:1}
.campo-nota{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--text-muted);
  line-height:var(--lh-base)}
.campo-label-suelto{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-title);margin-bottom:2px}

/* El desplegable de unidad, dentro de la misma caja del número. Se sube la
   especificidad a propósito: `.campo select{width:100%}` es más fuerte que
   una sola clase y, sin esto, el select se comía toda la caja y el número
   se quedaba en 0 de ancho. */
.dosis-forma .entrada > input{flex:1 1 auto;width:auto;min-width:0}
.dosis-forma .entrada > .dosis-sufijo-select{flex:0 0 auto;width:auto;min-width:0;
  color:var(--text-muted);font-size:var(--fs-sm)}

/* Botón partido Kg / lb. */
.unidad-toggle{display:inline-flex;border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card)}
.unidad-toggle button{border:0;background:none;padding:0 var(--sp-3);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted);
  cursor:pointer;min-width:44px}
.unidad-toggle button.activa{background:var(--brand-primary);color:var(--text-onbrand)}

/* Buscador embebido: hereda de .buscador; sólo lo justo para vivir dentro
   de la tarjeta. */
.dosis-buscar-bloque{margin-bottom:var(--sp-4)}
.dosis-buscar-bloque .buscador{max-width:none;margin:var(--sp-2) 0 0}
.dosis-buscar-bloque .buscador .lupa{pointer-events:none}

/* El tinte de cada sugerencia según el rango de la ficha del fármaco. */
.dosis-buscar-bloque .sugerencias button.dosis-ok{box-shadow:inset 3px 0 0 var(--success-500)}
.dosis-buscar-bloque .sugerencias button.dosis-mal{box-shadow:inset 3px 0 0 var(--danger-500)}
.dosis-buscar-bloque .sugerencias button.dosis-mal .nombre{color:var(--danger-500)}

/* El fármaco fijado, con su motivo. */
.dosis-elegido{margin-top:var(--sp-3);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);background:var(--surface-card)}
.dosis-elegido--ok{border-color:var(--success-500);background:var(--success-100)}
.dosis-elegido--mal{border-color:var(--danger-500);background:var(--danger-100)}
.dosis-elegido--neutro{border-color:var(--border-strong)}
.dosis-elegido-cabeza{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dosis-elegido-nombre{font-family:var(--font-display);font-weight:var(--fw-semibold);
  color:var(--text-title)}
.dosis-elegido-alias{font-size:var(--fs-sm);color:var(--text-muted)}
.dosis-elegido-quitar{margin-left:auto;border:0;background:none;font-size:var(--fs-h3);
  line-height:1;color:var(--text-muted);cursor:pointer}
.dosis-elegido-motivo{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);line-height:var(--lh-base)}
.dosis-elegido--mal .dosis-elegido-motivo,
.dosis-elegido--mal .dosis-elegido-motivo strong{color:var(--danger-700,var(--danger-500))}

.dosis-forma-acciones,.dosis-eleccion-acciones{display:flex;gap:var(--sp-3);
  flex-wrap:wrap;margin-top:var(--sp-6)}
#dosis-error{margin-top:var(--sp-4)}
#dosis-error[hidden]{display:none}

/* ---- El resultado, dentro del círculo de la casa ----
   Al calcular, `body.dosis-en-circulo` funde la cabecera y el <main> (regla
   más arriba, junto a `recoloreando`), el bucle de inicio.js manda el círculo
   al centro y crece, y esta capa fija pone la información delante en una
   tarjeta de cristal -el mismo material de la sigla resuelta de la ruleta.
   La cifra manda arriba; debajo, los datos en dos columnas concepto → detalle. */
#dosis-circulo-texto{position:fixed;inset:0;z-index:40;display:flex;
  align-items:center;justify-content:center;padding:var(--sp-5);pointer-events:none}
.dosis-circulo-tarjeta{pointer-events:auto;
  width:min(520px,92vw);max-height:88vh;overflow-y:auto;
  padding:var(--sp-6);
  background:rgba(var(--cristal-rgb),.3);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-xl);
  box-shadow:0 24px 60px color-mix(in srgb,var(--rose-900) 18%,transparent);
  opacity:0;transform:scale(.92);
  transition:opacity calc(360ms * var(--v,1)) var(--ease-standard),
             transform calc(360ms * var(--v,1)) cubic-bezier(.2,.9,.25,1.06)}
#dosis-circulo-texto.puesta .dosis-circulo-tarjeta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dosis-circulo-tarjeta{transition:none}}

.dosis-circulo-cifra{text-align:center;font-family:var(--font-display);
  font-size:var(--fs-h1);font-weight:var(--fw-bold);color:var(--rose-900);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.dosis-circulo-cifra span{font-size:.42em;opacity:.75;margin-left:.15em;font-weight:var(--fw-semibold)}
.dosis-circulo-cifra em{display:block;margin-top:2px;font-style:normal;
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-regular);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}

/* Dos columnas: la etiqueta a la izquierda (mide por su contenido), el detalle
   a la derecha. Cada fila con una línea tenue de separación. */
.dosis-circulo-datos{margin:var(--sp-5) 0 var(--sp-5);display:grid;
  grid-template-columns:auto 1fr;column-gap:var(--sp-4);row-gap:0;
  font-size:var(--fs-sm);line-height:var(--lh-base)}
.dosis-circulo-datos dt{grid-column:1;padding:var(--sp-3) 0;
  font-weight:var(--fw-semibold);color:var(--text-muted);white-space:nowrap}
.dosis-circulo-datos dd{grid-column:2;margin:0;padding:var(--sp-3) 0;
  color:var(--text-title);border-bottom:1px solid rgba(var(--cristal-rgb),.35)}
.dosis-circulo-datos dt{border-bottom:1px solid rgba(var(--cristal-rgb),.35)}
.dosis-circulo-datos dt:last-of-type,
.dosis-circulo-datos dd:last-of-type{border-bottom:0}
.dosis-dato-tenue{color:var(--text-muted)}

/* La fila de comprobación: ocupa las dos columnas y va con su color. */
.dosis-circulo-datos dd.dosis-circulo-veredicto{grid-column:1 / -1;
  margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:0;
  border-radius:var(--radius-md);font-size:var(--fs-sm)}
.dosis-circulo-veredicto.dosis-ok{background:var(--success-100);color:var(--success-500)}
.dosis-circulo-veredicto.dosis-mal{background:var(--danger-100);color:var(--danger-700,var(--danger-500))}
.dosis-circulo-veredicto.dosis-warn{background:var(--warning-100);color:var(--warning-800)}
.dosis-circulo-veredicto.dosis-neutro{background:var(--surface-tint);color:var(--text-title)}

/* La fila «Clasificación» de las calculadoras de formulario (IMC, PAM,
   Superficie, Pérdidas Insensibles): fila normal de dos columnas -no ocupa
   el ancho como la «Comprobación»-, y lo único que cambia es el color del
   valor según el tono clínico. Se sube la especificidad (dd.<clase>) porque
   `.dosis-circulo-datos dd` ya fija el color y una sola clase no le ganaba. */
.dosis-circulo-datos dd.calc-clas{font-weight:var(--fw-semibold)}
.dosis-circulo-datos dd.calc-clas-ok{color:var(--success-500)}
.dosis-circulo-datos dd.calc-clas-warn{color:var(--warning-800)}
.dosis-circulo-datos dd.calc-clas-mal{color:var(--danger-700,var(--danger-500))}
.dosis-circulo-datos dd.calc-clas-neutro{color:var(--text-muted)}

.dosis-circulo-otra{display:block;margin:0 auto;border:1px solid var(--cristal-borde);
  border-radius:var(--radius-pill);background:rgba(var(--cristal-rgb),.42);color:var(--rose-700);
  font-weight:var(--fw-semibold);padding:var(--sp-2) var(--sp-5);cursor:pointer;
  transition:background var(--dur-fast,.16s) var(--ease-standard)}
.dosis-circulo-otra:hover{background:rgba(var(--cristal-rgb),.62)}

/* Calculadoras y Escalas: entrada FIJA, una sola vez, y de ahí quietas. Ya no
   aparecen/desaparecen al desplazarse (ver `enElPanel` en inicio.js, que las
   deja fuera del IntersectionObserver). */
#panel-calculadora > .tarjeta,
#panel-escala > .tarjeta{max-width:760px;margin:0 auto}
#vista-calculadoras .rejilla > .tarjeta,
#vista-escalas .rejilla > .tarjeta,
#panel-calculadora > .tarjeta,
#panel-escala > .tarjeta{
  animation:dosis-entra .3s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  #vista-calculadoras .rejilla > .tarjeta,
  #vista-escalas .rejilla > .tarjeta,
  #panel-calculadora > .tarjeta,
  #panel-escala > .tarjeta{animation:none}}

/* ---- Omnia dentro de la calculadora de dosis ----
   Sin panel anclado al icono (se salía de la pantalla en el móvil). El icono
   reacciona a la voz y gira al pensar; lo que dice va en una hoja fija abajo,
   centrada, que nunca se sale del margen. */
.omnia-dosis{position:relative;flex:none;--omnia-nivel:0;--omnia-base:1}
/* La ROTACIÓN de "pensando" la hace el CSS: 360° lineal, continuo, a
   velocidad constante. Lo mueve el compositor -no depende de rAF- y no da
   tirones. El JS sólo pone/quita `--pensando` (y lo hace justo al final de
   una vuelta, escuchando `animationiteration`, para que pare recto). */
.omnia-dosis-orbe{border:0;background:none;padding:0;cursor:pointer;display:block;
  width:56px;height:56px;border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(var(--cristal-rgb),.55));
  transition:filter .2s var(--ease-standard)}
.omnia-dosis--pensando .omnia-dosis-orbe{animation:omnia-dosis-gira 1.05s linear infinite}
@keyframes omnia-dosis-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* La ESCALA (el latido con la voz) va en el logo, con una transición corta
   para que el pulso sea suave. */
.omnia-dosis-logo{width:100%;height:100%;object-fit:contain;display:block;
  transform:scale(calc(var(--omnia-base) + var(--omnia-nivel) * .3));
  transition:transform .12s ease-out;
  animation:omnia-dosis-flota 6s ease-in-out infinite}
@keyframes omnia-dosis-flota{0%,100%{translate:0 0}50%{translate:0 -4px}}
.omnia-dosis--activa{--omnia-base:1.24}
.omnia-dosis--activa .omnia-dosis-orbe,
.omnia-dosis--pensando .omnia-dosis-orbe{filter:drop-shadow(0 0 20px rgba(var(--cristal-rgb),.95))}
.omnia-dosis--activa .omnia-dosis-logo,
.omnia-dosis--pensando .omnia-dosis-logo{animation:none}
/* Sin giro bajo reduced-motion: el "pensando" se marca con un pulso de opacidad. */
@media (prefers-reduced-motion:reduce){
  .omnia-dosis-logo{animation:none}
  .omnia-dosis--pensando .omnia-dosis-orbe{animation:omnia-dosis-pensar 1.2s ease-in-out infinite}
}
@keyframes omnia-dosis-pensar{0%,100%{opacity:1}50%{opacity:.55}}

.omnia-dosis-sheet{position:fixed;left:50%;transform:translateX(-50%) translateY(12px);
  bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px));z-index:60;
  width:min(440px,92vw);
  background:rgba(var(--cristal-rgb),.95);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-lg);
  box-shadow:0 18px 44px color-mix(in srgb,var(--rose-900) 20%,transparent);padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease-standard),transform .22s var(--ease-standard)}
.omnia-dosis-sheet.puesta{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.omnia-dosis-sheet-cabeza{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-title);
  font-size:var(--fs-sm)}
.omnia-dosis-sheet-cerrar{border:0;background:none;font-size:var(--fs-h3);line-height:1;
  color:var(--text-muted);cursor:pointer}
.omnia-dosis-linea{margin:0;min-height:2.4em;font-size:var(--fs-sm);
  line-height:var(--lh-base);color:var(--text-body)}
.omnia-dosis-linea.tuyo{color:var(--text-muted);font-style:italic}
.omnia-dosis-accion{display:flex;gap:var(--sp-2);align-items:stretch}
.omnia-dosis-mic,.omnia-dosis-enviar{border:0;border-radius:var(--radius-pill);
  background:var(--brand-primary);color:var(--text-onbrand);font-weight:var(--fw-semibold);
  padding:var(--sp-2) var(--sp-5);cursor:pointer}
.omnia-dosis-mic{width:100%}
.omnia-dosis-sheet.escuchando .omnia-dosis-mic{background:var(--danger-500)}
.omnia-dosis-escribir{display:flex;gap:var(--sp-2);width:100%}
.omnia-dosis-escribir textarea{flex:1;border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--sp-2);font:inherit;font-size:var(--fs-sm);
  resize:none;min-height:2.6em;background:var(--surface-card);color:var(--text-title)}

/* ---- Móvil ---- */
@media (max-width:600px){
  .tarjeta.dosis-eleccion,.tarjeta.dosis-forma{padding:var(--sp-4)}
  .dosis-eleccion-botones{grid-template-columns:1fr}
  .dosis-forma-cabeza{margin-bottom:var(--sp-3)}
  .dosis-forma-cabeza h3{font-size:var(--fs-h3)}
  .omnia-dosis-orbe{width:46px;height:46px}
  .dosis-campos{gap:var(--sp-3);margin-bottom:var(--sp-4)}
  /* Peso: el número arriba y el Kg/lb debajo, cada uno a lo ancho. */
  .dosis-doble{flex-wrap:wrap}
  .dosis-doble > .entrada:first-child{flex:1 1 100%}
  .dosis-campo-ancho .unidad-toggle{width:100%}
  .dosis-campo-ancho .unidad-toggle button{flex:1}
  /* Duración: número y días/meses en una fila, sin envolver. */
  .campo:not(.dosis-campo-ancho) .dosis-doble{flex-wrap:nowrap}
  .campo:not(.dosis-campo-ancho) .dosis-doble > .entrada:first-child{flex:1 1 auto}
  .dosis-buscar-bloque .buscador .caja{padding:var(--sp-2) var(--sp-3)}
  .dosis-forma-acciones .boton{flex:1}
  .dosis-circulo-tarjeta{padding:var(--sp-5) var(--sp-4)}
  .dosis-circulo-cifra{font-size:var(--fs-h2)}
  .dosis-circulo-datos{margin:var(--sp-4) 0;column-gap:var(--sp-3)}
}

/* El tiempo del equipo bajo las cifras del Resumen (panel-resumen.js). Vivía
   con el Dashboard, que se retiró el 14-oct-2026. */
.resumen-tiempo{color:var(--text-muted);font-size:var(--fs-sm);
  margin:calc(var(--sp-4) * -1) 0 var(--sp-6)}
.resumen-tiempo strong{color:var(--text-title)}

/* ===========================================================================
   FARMA-QUIZ · el concurso en vivo
   ---------------------------------------------------------------------------
   Sin lienzo y sin marco: son elementos de la página. Se apoya en lo que ya
   hay -`.tarjeta.cristal`, `.boton`, `.boton-suave`, `.campo`, `.feria-tabla`,
   `.interruptor-switch`, el `.halo` del círculo de la casa- y sólo añade lo
   que no existía: el PIN grande, el vestíbulo con los avatares flotando, la
   cuenta atrás, la tarima de la pregunta, las barras del recuento y el podio.

   Las opciones NO se distinguen sólo por el color: cada una lleva su figura
   (triángulo, rombo, círculo, cuadrado). Desde el fondo de un aula, y para
   quien no distinga bien los colores, la figura es lo que se lee.

   ---------- LOS DOS MODOS DE LA SECCIÓN ----------

   `body.reto-proyectando`  la sección ocupa la pantalla entera y TODO crece:
                            es la vista del proyector, que se lee a diez metros.
                            Se pone al pulsar «Proyectar», con pantalla
                            completa de verdad si el navegador deja y sin ella
                            si no; el aspecto es el mismo en los dos casos.

   `body.reto-invitado`     alguien entró por el código QR y no tiene cuenta.
                            Se apagan la barra de secciones y la esquina del
                            perfil: entró a una partida, no a la guía.

   Las medidas grandes van con `clamp()` contra `vmin` y no con tamaños fijos,
   porque un proyector de aula y un portátil no tienen ni la misma proporción
   ni la misma distancia de lectura.
   =========================================================================== */

#reto-cuerpo{display:flex;flex-direction:column;gap:var(--sp-5)}

.reto-barra{display:flex;align-items:center;gap:var(--sp-2)}
.reto-barra-hueco{flex:1}
.reto-aviso{margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--warning-500) 14%,transparent);
  color:var(--text-title);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}

/* ---------- El modo invitado ----------
   Una casa con una sola habitación. No es seguridad -eso lo llevan las reglas
   de Firestore- sino no enseñar puertas que no se pueden abrir. */
body.reto-invitado .nav,
body.reto-invitado .cabecera-acciones{display:none !important}
/* El logo deja de ser un enlace: llevaria al inicio de la guia, que es
   justamente donde quien entro de invitado no ha entrado. */
body.reto-invitado .cabecera .marca{pointer-events:none}

/* ---------- El modo proyección ----------
   La sección se sale de la página y ocupa la ventana. Con pantalla completa de
   verdad esto sobra, pero cuesta cuatro líneas y hace que la proyección
   funcione igual en el navegador que no la conceda. */
body.reto-proyectando{overflow:hidden}
body.reto-proyectando #vista-reto{position:fixed;inset:0;z-index:80;
  overflow:auto;background:var(--surface-page);padding:var(--sp-4) 0}
body.reto-proyectando #vista-reto .cabecera-seccion{display:none}
body.reto-proyectando .cabecera{display:none}
body.reto-proyectando #reto-cuerpo{gap:var(--sp-4)}

/* ---------- La puerta ---------- */
.reto-puerta{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.reto-puerta-tarjeta{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.reto-puerta-tarjeta h3{margin:0}
.reto-puerta-tarjeta p{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}
.reto-pin-campo{width:100%}
.reto-pin-campo input{width:100%;text-align:center;letter-spacing:.34em;
  font-family:var(--font-heading);font-size:2rem;font-weight:var(--fw-bold);
  padding:var(--sp-3);border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:var(--surface-sunken);color:var(--text-title)}
.reto-campo-nombre{width:100%;margin:0}
.reto-botonera{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.reto-botonera-ancha{margin-top:var(--sp-4);justify-content:center}
.reto-cabeza-fila{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.reto-cabeza-fila h3{margin:0}
.reto-cuantos{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted)}

/* ---------- Mis FARMA-Quizzes, y el editor ---------- */
.reto-lista-quizzes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.reto-lista-quizzes li{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-sunken)}
.reto-lista-quizzes .campo-ayuda{display:block}
.reto-borrar{color:var(--danger-500)}

.reto-preguntas{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-4)}
.reto-pregunta-edit{padding:var(--sp-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);background:var(--surface-sunken);
  display:flex;flex-direction:column;gap:var(--sp-3)}
/* A la que le falta algo se le marca el canto. Es un aviso, no un error: se
   sigue pudiendo escribir, lo que no se puede es guardarla a medias. */
.reto-pregunta-edit.coja{border-color:color-mix(in srgb,var(--warning-500) 60%,transparent)}
.reto-num{font-family:var(--font-heading);font-size:var(--fs-h4);color:var(--brand-primary)}
.reto-falta,.reto-falta-linea{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--warning-500)}
.reto-fila-pie{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap}
.reto-fila-pie .campo{margin:0}

.reto-opciones-edit{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.reto-opcion-edit{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  border:2px solid transparent;background:var(--surface-card)}
.reto-opcion-edit input{flex:1;min-width:0;border:0;background:none;
  color:var(--text-title);font:inherit;padding:var(--sp-1) 0}
.reto-opcion-edit input:focus{outline:none}
.reto-opcion-edit.es-correcta{border-color:var(--success-500);
  background:color-mix(in srgb,var(--success-500) 10%,var(--surface-card))}
.reto-marcar,.reto-quitar-op{border:0;background:none;cursor:pointer;font-size:1.1rem;
  color:var(--text-muted);padding:0 var(--sp-1);line-height:1}
.reto-opcion-edit.es-correcta .reto-marcar{color:var(--success-500)}
.reto-quitar-op{font-size:.9rem;color:color-mix(in srgb,var(--danger-500) 72%,transparent)}
.reto-quitar-op:disabled{opacity:.28;cursor:default}
.campo-corto{max-width:260px}
.reto-pregunta-edit .campo .entrada{background:var(--surface-card)}
.reto-pegado{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.reto-pegado textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-sm);
  padding:var(--sp-3);border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:var(--surface-sunken);color:var(--text-body)}

/* ===========================================================================
   EL VESTÍBULO

   A la izquierda lo que hay que copiar -dirección, PIN y QR-; a la derecha el
   escenario, con el isotipo de la casa en el centro y los avatares flotando a
   su alrededor. En proyección el escenario manda y el panel de datos se queda
   en una columna estrecha: lo que la clase necesita ver todo el rato es el PIN
   y a sí misma entrando.
   =========================================================================== */
.reto-vestibulo{display:grid;gap:var(--sp-5);align-items:stretch;
  grid-template-columns:minmax(260px,26%) minmax(0,1fr)}
/* El cristal se escribe entero y no con la clase `.cristal`: esa regla es
   `.tarjeta.cristal`, o sea que sin `.tarjeta` no pinta nada, y `.tarjeta`
   trae un margen superior que aqui descuadraria las dos columnas. */
.reto-vestibulo-datos{display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-2);padding:var(--sp-5) var(--sp-4);border-radius:var(--radius-xl);
  text-align:center;
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs)}
.reto-rotulo{margin:0;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:var(--fw-bold);color:var(--brand-primary)}
.reto-sitio{margin:0;font-weight:var(--fw-semibold);color:var(--text-title);
  font-size:clamp(.95rem,1.7vmin,1.2rem);overflow-wrap:anywhere}
/* El PIN, partido en dos mitades de tres cifras con un respiro en medio: seis
   dígitos seguidos se copian mal desde el fondo del aula. */
.reto-pin{margin:var(--sp-2) 0;font-family:var(--font-heading);
  font-size:clamp(2.6rem,7vmin,5rem);line-height:1;letter-spacing:.1em;
  font-weight:var(--fw-bold);color:var(--text-title);
  display:flex;align-items:center;justify-content:center}
.reto-pin i{display:inline-block;width:.32em}

.reto-qr{width:min(100%,300px);aspect-ratio:1;padding:var(--sp-2);
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  display:grid;place-items:center}
.reto-qr svg{width:100%;height:100%;display:block}
/* Los módulos van en el color de la casa sobre blanco. El contraste de
   `--brand-primary` contra el blanco pasa de sobra lo que pide un lector de
   QR; los tonos claros de la paleta NO valdrían aquí. */
.reto-qr-modulos{fill:var(--brand-primary,#9e235f)}
.reto-qr-pie{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}

.reto-escenario{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.reto-escenario-cabeza{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap}
.reto-escenario-cabeza h3{margin:0;font-size:clamp(1.1rem,2.6vmin,2rem)}
.reto-nadie{text-align:center}

/* ---------- El enjambre ----------
   La caja donde flotan los avatares. Los coloca el JavaScript con
   `translate3d`, así que aquí sólo hace falta que sea un lienzo con posición
   propia y que no se desborde. */
.reto-enjambre{position:relative;overflow:hidden;
  min-height:clamp(280px,44vmin,560px);
  border-radius:var(--radius-xl);
  /* El cristal de la casa, con sus tres piezas en su sitio: `--cristal` es el
     color, `--cristal-velo` es el FILTRO -no un color, y ponerlo de fondo
     anulaba la declaracion entera- y `--cristal-borde` el canto. */
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);
  -webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs)}

/* El isotipo, quieto en el centro y respirando. La animación es «sutil» a
   propósito: es el ancla de la pantalla, no el espectáculo. */
.reto-isotipo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(96px,20vmin,220px);aspect-ratio:1;display:grid;place-items:center;
  pointer-events:none}
.reto-isotipo .halo{position:absolute;inset:-46%;opacity:.5}
.reto-isotipo img{position:relative;width:78%;height:78%;object-fit:contain;
  animation:reto-respira 7s ease-in-out infinite}
@keyframes reto-respira{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-3%) scale(1.035)}}

.reto-flotante{position:absolute;left:0;top:0;width:var(--reto-lado,66px);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;pointer-events:none;will-change:transform;
  animation:reto-entra .5s var(--ease-standard) both}
.reto-flotante-nombre{max-width:150%;font-size:clamp(.62rem,1.3vmin,.95rem);
  font-weight:var(--fw-semibold);color:var(--text-title);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--surface-card);border-radius:var(--radius-pill);
  padding:1px var(--sp-2);box-shadow:0 1px 4px rgba(20,30,40,.12)}
.reto-flotante-marca{font-size:.58rem;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted)}
.reto-flotante.se-va{animation:reto-se-va .34s ease both}
@keyframes reto-entra{from{opacity:0;transform:scale(.72)}}
@keyframes reto-se-va{to{opacity:0}}

/* ---------- El avatar ---------- */
.reto-avatar{display:inline-flex;width:var(--reto-av,64px);height:var(--reto-av,64px);
  flex:0 0 auto}
.reto-avatar svg{width:100%;height:100%}
.reto-av-cuerpo{fill:var(--reto-col,var(--brand-primary))}
.reto-av-cara{fill:rgba(0,0,0,.62);stroke:rgba(0,0,0,.62)}
.reto-av-oro{fill:#f0d05a;stroke:#f0d05a}
.reto-av-osc{fill:#2f3a42}
.reto-av-blanco{fill:#fafcfc}
.reto-av-cruz{fill:var(--brand-primary)}
.reto-av-vidrio{fill:rgba(255,255,255,.55);stroke:#2f3a42;stroke-width:3}
.reto-av-cinta{fill:#d9628d}
.reto-avatar-foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:3px solid var(--reto-col,var(--brand-primary))}
.reto-mi-avatar{display:flex;justify-content:center;margin:var(--sp-4) 0}
.reto-avatar-elegir{display:flex;flex-direction:column;gap:var(--sp-3)}
.reto-avatar-elegir fieldset{border:0;margin:0;padding:0}
.reto-avatar-elegir legend{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:var(--fw-bold);color:var(--text-muted);
  margin-bottom:var(--sp-2)}
.reto-fila-op{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.reto-chip{cursor:pointer;border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--brand-primary);background:var(--surface-card);
  border:1px solid color-mix(in srgb,var(--brand-primary) 28%,transparent)}
.reto-chip.puesto{background:var(--brand-primary);color:var(--text-onbrand);border-color:transparent}
.reto-color{width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--reto-col);border:3px solid transparent}
.reto-color.puesto{border-color:var(--text-title)}
.reto-fila-switch{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}

/* ===========================================================================
   LA CUENTA ATRÁS

   El círculo de la casa -el mismo `.halo` de la carga y del recolorido-
   agrandado en el centro, con la cifra encima. La cifra la cambia el
   JavaScript sin repintar nada más, y cada número entra con su propio salto.
   =========================================================================== */
.reto-cuenta-escena{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-4);
  min-height:clamp(320px,56vmin,680px);text-align:center}
.reto-cuenta-circulo{position:relative;display:grid;place-items:center;
  width:clamp(220px,46vmin,520px);aspect-ratio:1;
  animation:reto-circulo-crece .6s cubic-bezier(.2,.9,.3,1) both}
.reto-cuenta-circulo .halo{position:absolute;inset:0}
@keyframes reto-circulo-crece{from{opacity:0;transform:scale(.35)}}
.reto-cuenta-cifra{position:relative;font-family:var(--font-heading);
  font-size:clamp(5rem,24vmin,16rem);line-height:1;font-weight:var(--fw-bold);
  color:var(--text-title);font-variant-numeric:tabular-nums}
.reto-cuenta-cifra.late{animation:reto-late .9s var(--ease-standard)}
@keyframes reto-late{
  0%  {transform:scale(1.42);opacity:.25}
  38% {transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:1}}
.reto-cuenta-texto{margin:0;color:var(--text-muted);
  font-size:clamp(.95rem,2vmin,1.4rem);font-weight:var(--fw-semibold)}

/* ===========================================================================
   LA ESCENA DE JUEGO
   =========================================================================== */
.reto-escena{display:flex;flex-direction:column;gap:var(--sp-4)}
.reto-escena-cabeza{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap}

/* La TARIMA: el enunciado tiene su propio contenedor, encabezado por
   «Pregunta #N». Antes el número iba suelto arriba del todo, entre el reloj y
   el contador, y no se leía como el título de nada. */
.reto-tarima{padding:var(--sp-5);border-radius:var(--radius-xl);
  background:
    radial-gradient(120% 100% at 50% -20%,
      color-mix(in srgb,var(--brand-accent) 18%,transparent), transparent 64%),
    var(--surface-card);
  border:1px solid var(--cristal-borde);
  box-shadow:0 10px 28px rgba(20,30,40,.1);text-align:center}
.reto-tarima-rotulo{margin:0 0 var(--sp-3);font-family:var(--font-heading);
  font-size:clamp(1rem,2.4vmin,1.7rem);font-weight:var(--fw-bold);
  color:var(--brand-primary);letter-spacing:.02em}
.reto-tarima-rotulo span{font-family:var(--font-body);font-weight:var(--fw-semibold);
  font-size:.72em;color:var(--text-muted)}
.reto-enunciado{margin:0;font-family:var(--font-heading);
  font-size:clamp(1.3rem,4.4vmin,3rem);line-height:var(--lh-heading);
  color:var(--text-title);text-align:center}

/* La cuenta atrás de cada pregunta: un aro que se vacía. `--reto-fr` va de 1 a
   0 y lo escribe el JavaScript en cada tic. */
.reto-aro{position:relative;display:grid;place-items:center;
  width:clamp(72px,12vmin,132px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--brand-primary) calc(var(--reto-fr,1) * 360deg),
                            color-mix(in srgb,var(--text-muted) 22%,transparent) 0);
  font-family:var(--font-heading);font-size:clamp(1.5rem,4vmin,3rem);
  font-weight:var(--fw-bold);color:var(--text-title)}
.reto-aro::before{content:"";position:absolute;inset:9%;border-radius:50%;
  background:var(--surface-card)}
.reto-aro span{position:relative}

/* Los bloques de color. En la pantalla de la clase son la REFERENCIA: quien
   juega busca el color y la figura y los pulsa en su teléfono. Con dos
   opciones se reparten el ancho en dos; con tres y con cuatro, en dos filas. */
.reto-opciones{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.reto-opciones-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.reto-opcion{display:flex;align-items:center;gap:var(--sp-3);text-align:left;
  padding:var(--sp-4) var(--sp-5);border:0;border-radius:var(--radius-lg);
  font:inherit;font-size:clamp(1rem,2.4vmin,1.6rem);font-weight:var(--fw-semibold);
  color:#fff;cursor:pointer;min-height:clamp(72px,11vmin,140px);
  box-shadow:0 6px 18px rgba(20,30,40,.16);transition:transform .12s,filter .12s}
.reto-opcion:hover:not([disabled]){transform:translateY(-2px);filter:brightness(1.06)}
.reto-opcion[disabled]{cursor:default;opacity:.9}
.reto-opcion.es-mia{outline:4px solid var(--text-title);outline-offset:3px}
.reto-figura{font-size:1.4em;line-height:1}
.reto-opcion-texto{flex:1;min-width:0}
/* El color de relleno es SÓLO del botón de juego. Las mismas clases se usan en
   el editor para colorear la figura, y sin acotar esto los campos de escribir
   salían con el fondo rojo, azul, ámbar y verde: ilegibles. */
.reto-opcion.op-a{background:#c0392b}
.reto-opcion.op-b{background:#2f6f9e}
.reto-opcion.op-c{background:#c9821f}
.reto-opcion.op-d{background:#3f8f6d}
.reto-opcion-edit.op-a .reto-figura{color:#c0392b}
.reto-opcion-edit.op-b .reto-figura{color:#2f6f9e}
.reto-opcion-edit.op-c .reto-figura{color:#c9821f}
.reto-opcion-edit.op-d .reto-figura{color:#3f8f6d}
.reto-espera-texto{margin:0;text-align:center;color:var(--text-muted);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold)}

/* ---------- El recuento ---------- */
.reto-barras{display:flex;flex-direction:column;gap:var(--sp-2)}
.reto-barra-fila{display:grid;align-items:center;gap:var(--sp-3);
  grid-template-columns:auto minmax(0,1fr) 2fr auto;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-sunken);opacity:.62}
.reto-barra-fila.es-correcta{opacity:1;
  background:color-mix(in srgb,var(--success-500) 14%,var(--surface-sunken));
  font-weight:var(--fw-bold)}
.reto-barra-fila.op-a .reto-figura{color:#c0392b}
.reto-barra-fila.op-b .reto-figura{color:#2f6f9e}
.reto-barra-fila.op-c .reto-figura{color:#c9821f}
.reto-barra-fila.op-d .reto-figura{color:#3f8f6d}
.reto-barra-pista{height:14px;border-radius:var(--radius-pill);overflow:hidden;
  background:color-mix(in srgb,var(--text-muted) 18%,transparent)}
.reto-barra-pista i{display:block;height:100%;border-radius:var(--radius-pill);
  background:var(--brand-primary);transition:width .5s ease}
.reto-barra-num{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold)}
.reto-barra-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.reto-marcador h4{margin:0 0 var(--sp-2)}
.reto-tabla-puestos{list-style:none;margin:0;padding:0;counter-reset:puesto;
  display:flex;flex-direction:column;gap:var(--sp-1)}
.reto-tabla-puestos li{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);background:var(--surface-sunken)}
.reto-tabla-puestos li::before{counter-increment:puesto;content:counter(puesto);
  font-weight:var(--fw-bold);color:var(--text-muted);min-width:1.5em}
.reto-tabla-puestos li span{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.reto-tabla-puestos li b{font-variant-numeric:tabular-nums}

/* ---------- El feedback del jugador ---------- */
.reto-feedback{text-align:center;display:flex;flex-direction:column;gap:var(--sp-2)}
.reto-feedback-titulo{margin:0;font-family:var(--font-heading);
  font-size:clamp(1.6rem,5vw,2.6rem);font-weight:var(--fw-bold)}
.reto-feedback.bien .reto-feedback-titulo{color:var(--success-500)}
.reto-feedback.mal .reto-feedback-titulo{color:var(--danger-500)}
.reto-feedback.tarde .reto-feedback-titulo{color:var(--text-muted)}
.reto-feedback-correcta{margin:0;color:var(--text-body)}
.reto-feedback-puntos{margin:0;font-family:var(--font-heading);
  font-size:2rem;font-weight:var(--fw-bold);color:var(--success-500)}

/* ---------- El podio ---------- */
.reto-podio-escena{position:relative;display:flex;flex-direction:column;
  gap:var(--sp-5);align-items:center;padding:var(--sp-5) 0;
  border-radius:var(--radius-xl);overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb,var(--brand-accent) 26%,transparent), transparent 62%),
    var(--surface-sunken)}
.reto-confeti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.reto-podio-titulo{position:relative;margin:0;text-align:center}
.reto-podio{position:relative;display:grid;gap:var(--sp-4);align-items:end;
  grid-template-columns:repeat(3,minmax(90px,150px));justify-content:center;width:100%}
.reto-podio-puesto{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  text-align:center}
.reto-podio-puesto strong{font-size:var(--fs-sm);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reto-podio-puntos{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);
  color:var(--brand-primary)}
.reto-podio-caja{display:grid;place-items:center;width:100%;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  font-family:var(--font-heading);font-size:1.6rem;font-weight:var(--fw-bold);
  color:#3a2a10}
.reto-puesto-1 .reto-podio-caja{height:120px;background:linear-gradient(180deg,#f0d05a,#c9a02a)}
.reto-puesto-2 .reto-podio-caja{height:88px;background:linear-gradient(180deg,#cfd6da,#98a3aa)}
.reto-puesto-3 .reto-podio-caja{height:66px;background:linear-gradient(180deg,#d8a06a,#a9713d)}
.reto-resto{position:relative;width:min(100%,520px);margin-top:var(--sp-5)}

/* ---------- Proyectando: todo más grande ----------

   El vestíbulo ocupa lo que sobra de la ventana, y lo hace REPARTIENDO el alto
   sobrante en vez de restar píxeles a ojo. Con `calc(100vh - 160px)` -que es
   lo que había- los botones de «Empezar» y «Cerrar sala» quedaban debajo del
   borde inferior y el anfitrión no llegaba a ellos sin desplazarse, que es
   justo lo que no se puede hacer con un proyector delante de la clase. */
body.reto-proyectando #reto-cuerpo{min-height:calc(100vh - 2 * var(--sp-4))}
body.reto-proyectando .reto-vestibulo{grid-template-columns:minmax(240px,22%) minmax(0,1fr);
  flex:1;min-height:0}
body.reto-proyectando .reto-escenario{min-height:0}
/* Y lo mismo para las demas escenas: la cuenta atras, la pregunta y el podio
   se quedan CENTRADOS en lo que sobra de pantalla en vez de arrimados arriba,
   que es donde los dejaba el flujo normal de la pagina. */
body.reto-proyectando .reto-cuenta-escena,
body.reto-proyectando .reto-escena,
body.reto-proyectando .reto-podio-escena{flex:1;justify-content:center}
body.reto-proyectando .reto-enjambre{flex:1;min-height:200px}
body.reto-proyectando .reto-tarima{padding:var(--sp-6)}
body.reto-proyectando .reto-podio{grid-template-columns:repeat(3,minmax(120px,260px))}
body.reto-proyectando .reto-puesto-1 .reto-podio-caja{height:min(26vh,240px)}
body.reto-proyectando .reto-puesto-2 .reto-podio-caja{height:min(19vh,176px)}
body.reto-proyectando .reto-puesto-3 .reto-podio-caja{height:min(14vh,132px)}

/* ---------- Estrecho ---------- */
@media (max-width:720px){
  .reto-vestibulo{grid-template-columns:1fr}
  .reto-enjambre{min-height:clamp(220px,42vh,340px)}
  .reto-opciones,.reto-opciones-2{grid-template-columns:1fr}
  .reto-opcion{min-height:72px;padding:var(--sp-3) var(--sp-4)}
  .reto-barra-fila{grid-template-columns:auto minmax(0,1fr) auto;row-gap:var(--sp-1)}
  .reto-barra-pista{grid-column:1 / -1}
  .reto-podio{grid-template-columns:repeat(3,minmax(72px,1fr));gap:var(--sp-2)}
  .reto-fila-pie{flex-direction:column;align-items:stretch}
  .campo-corto{max-width:none}
  /* El icono del inicio, como los demás: su sitio de código son `calc()` en
     píxeles pensados para PC, que en un teléfono colapsan sobre el logo. */
  body:not(.colocando-iconos) .orbe:not(.icono-colocado)[data-id="reto"]{--x:0% !important;--y:47% !important}
}

/* ===========================================================================
   EL TELÉFONO COMO PULSADOR

   En la proyección se lee la pregunta; en el teléfono NO. El teléfono es un
   mando de colores: rectángulos grandes con su figura y nada escrito. Es la
   mecánica de Kahoot, y lo que consigue es que la clase levante la vista de la
   pantalla pequeña y mire la de todos.

   El texto de la opción sigue estando, en `aria-label` y en `.reto-sr`: quien
   use un lector de pantalla no puede mirar el proyector, y para esa persona un
   rectángulo rojo no dice nada.
   =========================================================================== */
.reto-pulsadores{gap:var(--sp-3)}
.reto-pulsadores .reto-opcion{justify-content:center;min-height:clamp(96px,22vh,190px)}
.reto-pulsadores .reto-figura{font-size:clamp(2.4rem,11vw,4rem)}
.reto-rotulo-solo{text-align:center;margin:0}
.reto-pulsa{margin:0;text-align:center;color:var(--text-muted);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold)}

/* Sólo para lectores de pantalla. */
.reto-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- El acuse de recibo ---------- */
.reto-acuse{align-items:center;text-align:center}
.reto-acuse-sello{display:grid;place-items:center;
  width:clamp(110px,34vw,180px);aspect-ratio:1;border-radius:var(--radius-xl);
  color:#fff;box-shadow:0 10px 26px rgba(20,30,40,.2);
  animation:reto-sello .42s cubic-bezier(.2,.9,.3,1) both}
.reto-acuse-sello .reto-figura{font-size:clamp(2.8rem,13vw,4.6rem)}
@keyframes reto-sello{from{opacity:0;transform:scale(.62) rotate(-8deg)}}
.reto-acuse-sello.op-a{background:#c0392b}
.reto-acuse-sello.op-b{background:#2f6f9e}
.reto-acuse-sello.op-c{background:#c9821f}
.reto-acuse-sello.op-d{background:#3f8f6d}
.reto-acuse-titulo{margin:0;font-family:var(--font-heading);
  font-size:clamp(1.4rem,5vw,2rem);font-weight:var(--fw-bold);color:var(--text-title)}
.reto-acuse-texto{margin:0;color:var(--text-body)}

/* ===========================================================================
   LA TABLA DE POSICIONES QUE SE MUEVE

   Las filas se pintan YA en el orden nuevo y el JavaScript las manda un
   momento a donde estaban, para soltarlas acto seguido (FLIP). Lo único que
   hace falta de aquí es la transición: sin ella no hay viaje, hay salto.
   =========================================================================== */
.reto-resultado-dos{display:grid;gap:var(--sp-4);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.reto-marcador-vivo{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-1)}
.reto-fila-vivo{display:grid;align-items:center;gap:var(--sp-2);
  grid-template-columns:1.6em auto minmax(0,1fr) auto auto 3.2em;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-sunken);
  transition:transform .62s cubic-bezier(.2,.9,.3,1);
  animation:reto-fila-entra .4s ease both}
@keyframes reto-fila-entra{from{opacity:0}}
.reto-fila-vivo.sumo{background:color-mix(in srgb,var(--success-500) 12%,var(--surface-sunken))}
.reto-puesto-num{font-family:var(--font-heading);font-weight:var(--fw-bold);
  color:var(--text-muted);text-align:right}
.reto-vivo-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:var(--fw-semibold)}
.reto-vivo-puntos{font-variant-numeric:tabular-nums}
.reto-vivo-sumo{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);
  color:var(--success-500);font-size:var(--fs-sm);text-align:right}
.reto-flecha{font-size:var(--fs-xs);font-weight:var(--fw-bold);font-style:normal}
.reto-flecha.sube{color:var(--success-500)}
.reto-flecha.baja{color:var(--danger-500)}
.reto-flecha.igual{color:color-mix(in srgb,var(--text-muted) 50%,transparent)}
.reto-tarima-chica{padding:var(--sp-4)}
.reto-tarima-chica .reto-enunciado{font-size:clamp(1.05rem,2.6vmin,1.6rem)}

/* ---------- El resultado en el teléfono ---------- */
.reto-feedback-cuenta{display:flex;justify-content:center;gap:var(--sp-5);
  color:var(--text-muted);font-size:var(--fs-sm)}
.reto-feedback-cuenta b{color:var(--text-title);font-size:var(--fs-h4);
  font-family:var(--font-heading)}
.reto-sin-puntos{color:var(--text-muted) !important}

/* ---------- El podio, destapándose de abajo arriba ---------- */
.reto-podio-puesto.por-revelar{opacity:0;transform:translateY(46px);
  pointer-events:none}
/* La animación de subida SÓLO se usa al destaparse. Antes estaba puesta a
   todas desde el principio con retrasos escalonados, y eso ya no vale: ahora
   quien decide cuándo aparece cada una es el reloj del JavaScript, que además
   tiene que hacer sonar su arpegio en el mismo instante. */
.reto-podio-puesto{animation:none;
  transition:opacity .5s var(--ease-standard),
             transform .6s cubic-bezier(.2,.9,.3,1)}
.reto-puesto-1 .reto-avatar{filter:drop-shadow(0 0 14px rgba(240,208,90,.85))}

/* ---------- La música, en el formulario ---------- */
.reto-musica-fila{display:flex;gap:var(--sp-2);align-items:center}
.reto-musica-fila .entrada{flex:1;min-width:0}

/* El informe ya no es HTML: desde v328 se construye como PDF de verdad con
   jsPDF (ver `armarElPDFDelInforme` en js/reto.js), así que aquí no queda nada
   que maquetar. Se fueron con él el bloque escondido, los colores claros
   escritos a mano para el papel y las reglas de `@media print`. */

/* ---------- Omnia escribiendo preguntas, en el editor ---------- */
.reto-omnia{margin-top:var(--sp-5)}
.reto-omnia-abrir{display:inline-flex;align-items:center;gap:var(--sp-2)}
.reto-omnia-abrir img{border-radius:50%}
.reto-omnia-caja{margin-top:var(--sp-3);padding:var(--sp-4);
  border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--brand-primary) 26%,transparent);
  background:
    radial-gradient(120% 100% at 0% 0%,
      color-mix(in srgb,var(--brand-accent) 12%,transparent), transparent 60%),
    var(--surface-sunken);
  display:flex;flex-direction:column;gap:var(--sp-3);
  animation:reto-omnia-entra .3s var(--ease-standard) both}
@keyframes reto-omnia-entra{from{opacity:0;transform:translateY(-6px)}}
.reto-omnia-caja .campo{margin:0}
.reto-omnia-caja .entrada{background:var(--surface-card)}
.reto-omnia-fila{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.reto-omnia-fila .campo{flex:1 1 150px}
@media (prefers-reduced-motion: reduce){ .reto-omnia-caja{animation:none} }

/* ---------- El micrófono y el clip del panel de Omnia ---------- */
.reto-omnia-fila-tema{display:flex;gap:var(--sp-2);align-items:flex-end}
.reto-omnia-fila-tema .entrada{flex:1;min-width:0}
.reto-omnia-fila-tema label{flex:1}
.reto-omnia-micro,.reto-omnia-clip{white-space:nowrap;flex:0 0 auto;cursor:pointer}
/* Mientras escucha, el botón late. Es lo único que dice que el micrófono está
   abierto, y eso tiene que verse sin leer nada. */
.reto-omnia-micro.escuchando{background:var(--brand-primary);color:var(--text-onbrand);
  border-color:transparent;animation:reto-late-micro 1.1s ease-in-out infinite}
@keyframes reto-late-micro{50%{transform:scale(1.045)}}
.reto-omnia-oyendo{color:var(--brand-primary);font-weight:var(--fw-semibold)}
/* El rotulo del documento se escribe como un `<label>` pero no lo es: no hay
   ningun campo al que apuntar cuando ya hay archivo puesto. */
.reto-omnia-rotulo{display:block;margin-bottom:var(--sp-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.reto-omnia-leyendo{color:var(--brand-primary);font-weight:var(--fw-semibold)}
/* La chapa del documento leido. El texto NO se ensena -se queda por dentro-:
   aqui sale el nombre del archivo y cuanto se ha leido, y nada mas. */
.reto-omnia-chapa{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);font-size:var(--fs-sm);
  background:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-card));
  border:1px solid color-mix(in srgb,var(--brand-primary) 24%,transparent);
  max-width:100%}
.reto-omnia-chapa strong{color:var(--text-title);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.reto-omnia-chapa i{font-style:normal;color:var(--text-muted);font-size:var(--fs-xs);
  white-space:nowrap}
.reto-omnia-chapa button{border:0;background:none;cursor:pointer;line-height:1;
  color:var(--text-muted);padding:0 var(--sp-1)}
.reto-omnia-chapa button:hover{color:var(--danger-500)}
@media (prefers-reduced-motion: reduce){ .reto-omnia-micro.escuchando{animation:none} }

/* ---------- Proyectando: la tabla de posiciones también crece ---------- */
body.reto-proyectando .reto-fila-vivo{font-size:clamp(1rem,1.9vmin,1.5rem);
  padding:var(--sp-2) var(--sp-4)}
body.reto-proyectando .reto-marcador h4{font-size:clamp(1rem,2.2vmin,1.6rem)}

@media (max-width:960px){
  .reto-resultado-dos{grid-template-columns:1fr}
}
@media (max-width:720px){
  .reto-fila-vivo{grid-template-columns:1.4em auto minmax(0,1fr) auto 3em;
    font-size:var(--fs-sm)}
  .reto-fila-vivo .reto-vivo-sumo{display:none}
  .reto-musica-fila{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){
  .reto-fila-vivo{transition:none;animation:none}
  .reto-acuse-sello{animation:none}
  .reto-podio-puesto{transition:none}
}

/* Quien pide menos movimiento no ve ni respirar el isotipo ni latir la cifra.
   Los avatares no se mueven tampoco: eso lo decide el JavaScript, que no llega
   ni a arrancar su bucle. */
@media (prefers-reduced-motion: reduce){
  .reto-isotipo img{animation:none}
  .reto-cuenta-cifra.late{animation:none}
  .reto-cuenta-circulo{animation:none}
  .reto-flotante{animation-duration:.01ms}
}

/* Los cuidados usan el mismo azulejo y giro, conservando sus tres tonos. */
.volteable.cuidados-antes,.volteada.cuidados-antes .cara{background:var(--cuidados-antes)}
.volteable.cuidados-durante,.volteada.cuidados-durante .cara{background:var(--cuidados-durante)}
.volteable.cuidados-despues,.volteada.cuidados-despues .cara{background:var(--cuidados-despues)}
.cuidados-lista{padding-left:var(--sp-5);color:var(--text-body)}
.cuidados-lista li+li{margin-top:var(--sp-2)}
.cuidados-lista li{overflow-wrap:anywhere}
@media(max-width:720px){.cuadricula-fila-inferior-columnas{grid-template-columns:1fr}}

/* ---------- Simulación ----------

   La estantería de módulos. El azulejo es el `.tarjeta.tarjeta-boton` de
   siempre -el de Calculadoras y Escalas-, con una diferencia: en vez del
   icono de 80 px lleva una VISTA PREVIA apaisada del módulo, porque lo que
   distingue a un módulo de simulación es lo que se ve dentro, no un símbolo.

   La rejilla pide azulejos más anchos que la de las calculadoras: con 300 px
   la vista previa del cuerpo salía del tamaño de un sello.                  */
#simulacion-modulos{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.simulacion-azulejo{display:flex;flex-direction:column;gap:var(--sp-2);padding:0;overflow:hidden}
.simulacion-previa{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,var(--surface-sunken),var(--surface-tint));
  border-bottom:1px solid var(--border-subtle)}
.simulacion-previa img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow,.5s) var(--ease-standard)}
.simulacion-azulejo:hover .simulacion-previa img{transform:scale(1.035)}
/* El texto va con el aire de una tarjeta normal; lo que se pegó al borde es
   la imagen, que por eso el `padding` se quitó arriba y se pone aquí. */
.simulacion-azulejo h3,.simulacion-azulejo p,.simulacion-detalle{
  padding-inline:var(--sp-5);margin:0}
.simulacion-azulejo h3{padding-top:var(--sp-4)}
.simulacion-detalle{padding-bottom:var(--sp-5);font-size:11.5px;color:var(--text-muted);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.simulacion-volver{margin-bottom:var(--sp-4)}
.simulacion-esperando{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);min-height:340px;text-align:center}
.simulacion-esperando p{margin:0;color:var(--text-muted)}

/* ---------- LO DE DENTRO DE LA RUEDA, A LA MEDIDA DEL DISCO (27-sep-2026) ----------
   Los tamaños del centro iban fijos (el título h1, el texto grande) y en el
   teléfono, con un disco de 320 px, la tarjeta de la sigla medía 186 × 246 y
   se metía en la franja de las letras. Ahora salen del propio disco
   (--rueda) con un suelo y un techo: en el ordenador se quedan como estaban
   y en el teléfono encogen en proporción. El cristal de la tarjeta no cambia. */
.rueda .rueda-sigla,
.rueda .rueda-marcado:not(.vacio){font-size:clamp(26px, calc(var(--rueda,560px) * .09), 40px)}
.rueda .rueda-significado,
.rueda .rueda-significados,
.rueda .rueda-marcado.vacio{font-size:clamp(14px, calc(var(--rueda,560px) * .048), 18px)}
.rueda .rueda-pista{font-size:clamp(12px, calc(var(--rueda,560px) * .036), 14px)}
.rueda .rueda-centro{gap:clamp(6px, calc(var(--rueda,560px) * .022), 12px)}
.rueda.rueda-resuelta .rueda-centro{
  padding:clamp(12px, calc(var(--rueda,560px) * .045), 24px) clamp(14px, calc(var(--rueda,560px) * .05), 24px);
  max-width:calc(var(--rueda,560px) * .62)}
.rueda .rueda-otra,.rueda .rueda-borrar{
  font-size:clamp(12px, calc(var(--rueda,560px) * .038), 14px);
  padding:clamp(5px, calc(var(--rueda,560px) * .016), 8px) clamp(12px, calc(var(--rueda,560px) * .045), 16px)}

/* ===========================================================================
   LAS NOTAS DEL EDITOR (30-sep-2026)

   Una cápsula por nota, cada una con su estrella de cinco puntas, que brilla
   un poco. Ver APARTADOS_CON_NOTAS en ficha-campos.js. El halo de la estrella
   es un `::before` que sólo mueve `opacity` y `transform`, una animación por
   elemento (scripts/pruebas/animaciones-componibles.mjs), y con «menos
   movimiento» se queda quieto y encendido.
   =========================================================================== */
/* Cada estrella lleva un color de la casa, en orden y dando la vuelta:
   turquesa, coral, azul, y otra vez turquesa. Salen de los tokens de la
   marca, así que siguen a la tríada que cada cual haya elegido. */
.nota-editor{--nota-c:var(--brand-accent)}
.nota-editor:nth-child(3n+2){--nota-c:var(--brand-soft)}
.nota-editor:nth-child(3n){--nota-c:var(--brand-primary)}
/* En oscuro el azul de la marca se vuelve turquesa claro y se confundiría con
   la primera: se usa el azul clínico aclarado. */
:root[data-tema="oscuro"] .nota-editor:nth-child(3n){
  --nota-c:color-mix(in srgb,var(--asc-azul-800,#0D4F70) 30%,var(--asc-fondo-200,#CFE3F2))}

.notas-editor{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.medicamento-bloque .notas-editor{margin-top:var(--sp-4)}
.notas-editor .notas-editor-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}

.nota-editor{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--nota-c) 7%,var(--surface-card));
  border:1px solid color-mix(in srgb,var(--nota-c) 30%,var(--border-subtle));box-shadow:var(--shadow-xs)}
.nota-editor p{margin:0 !important;flex:1;min-width:0;font-size:var(--fs-sm);
  line-height:var(--lh-base);color:var(--text-body)}

.nota-editor-estrella{flex:none;width:20px;height:20px;overflow:visible;
  fill:var(--nota-c,var(--brand-accent));
  stroke:color-mix(in srgb,var(--nota-c,var(--brand-accent)) 70%,var(--text-title));
  stroke-width:.8;stroke-linejoin:round}
.nota-editor > .nota-editor-estrella{position:relative;z-index:1;margin-top:1px}

/* El halo va detrás de la estrella de la cápsula. */
.nota-editor::before{content:"";position:absolute;pointer-events:none;
  left:calc(var(--sp-4) - 10px);top:calc(var(--sp-3) - 9px);width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--nota-c) 50%,transparent) 0%, transparent 68%);
  animation:nota-brilla 3.6s ease-in-out infinite}
.nota-editor:nth-child(2n)::before{animation-delay:-1.2s}
.nota-editor:nth-child(3n)::before{animation-delay:-2.4s}
@keyframes nota-brilla{
  0%,100%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .nota-editor::before{animation:none;opacity:.8}
}

/* En el editor: la misma cápsula, con su caja para escribir y su aspa. */
.notas-editor-editor{display:flex;flex-direction:column;gap:var(--sp-2);align-items:stretch}
.nota-editor-escribiendo textarea{flex:1;min-width:0;resize:none;overflow:hidden;
  field-sizing:content;min-height:1.6em;border:0;background:transparent;padding:0;
  font:inherit;font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--text-body)}
.nota-editor-escribiendo textarea:focus{outline:none}
.nota-editor-escribiendo:focus-within{border-color:var(--nota-c)}
.nota-editor-quitar{flex:none;width:24px;height:24px;border-radius:50%;border:none;background:none;
  cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.nota-editor-quitar:hover{color:var(--brand-primary);background:rgba(var(--cristal-rgb),.7)}
.nota-editor-anadir{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-2)}
.nota-editor-anadir .nota-editor-estrella{width:16px;height:16px}

/* ===========================================================================
   EL DISEÑO DEFINITIVO DEL EDITOR DE FICHAS (3-oct-2026)
   Lo opcional va plegado y cerrado («Más Detalles»), con los mismos tokens de
   los demás bloques del editor. Y, en la ficha, lo nuevo sólo se pinta si está
   escrito: embarazo y lactancia, monitoreo, conservación, manejo,
   requisitos de la infusión, eliminación y antídotos alternativos.
   =========================================================================== */

/* ---- En el editor ---- */
.cascada-casillas > .mas-detalles-campo{grid-column:1 / -1;max-width:none}
.mas-detalles-campo{margin:0}
.mas-detalles{border:1px dashed var(--border-subtle);border-radius:var(--radius-md);
  background:rgba(var(--cristal-rgb),.35)}
.mas-detalles > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--brand-primary);border-radius:var(--radius-md)}
.mas-detalles > summary::-webkit-details-marker{display:none}
.mas-detalles > summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard)}
.mas-detalles[open] > summary::before{transform:rotate(45deg)}
.mas-detalles > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mas-detalles-cuenta{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);
  background:var(--brand-primary);color:var(--text-onbrand);font-size:var(--fs-xs)}
.mas-detalles-cuerpo{display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-2) var(--sp-3) var(--sp-4)}
.mas-detalles-rejilla{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mas-detalles-rejilla .campo{margin:0}
.mas-detalles-rejilla .dosis-par{grid-template-columns:minmax(72px,1fr) minmax(88px,130px)}
.mas-detalles-bloque{display:flex;flex-direction:column;gap:var(--sp-2)}
.mas-detalles-titulo{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-title)}
.mas-detalles .campo-ayuda{margin:0}
.componente-fila{display:grid;gap:var(--sp-3);align-items:end;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.componente-fila .campo{margin:0}
@media (max-width:560px){ .componente-fila{grid-template-columns:minmax(0,1fr) auto}
  .componente-fila .campo:first-child{grid-column:1 / -1} }
.alternativo-fila{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);
  border-radius:var(--radius-md);background:var(--cristal);border:1px solid var(--cristal-borde)}
.alternativo-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.monitoreo-editor{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2)}
.monitoreo-editor > .boton{align-self:flex-start}
.riesgo-editor .cascada-casillas{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.eliminacion-editor{margin-top:var(--sp-2)}

/* ---- En la ficha ---- */
.pauta-tabla .pauta-etapa{display:block;width:fit-content;margin:var(--sp-1) 0 0;white-space:nowrap}
.pauta-acumulada{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-2);
  font-size:var(--fs-sm);color:var(--text-body)}
.pauta-acumulada p{margin:0}
.pauta-acumulada strong{color:var(--text-title)}
.pauta-acumulada span{color:var(--text-muted)}

ul.envase-conservacion > li,ul.envase-manejo > li,ul.dilucion-requisitos > li,ul.eliminacion-ficha > li{margin:0}

.riesgos-ficha{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.riesgo-linea{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-md);background:var(--cristal);border:1px solid var(--cristal-borde)}
.riesgo-linea[class*="grado-"]{
  background:color-mix(in srgb,var(--tinte) 52%,rgba(var(--cristal-rgb),.58));
  border-color:color-mix(in srgb,var(--filo) 30%,rgba(var(--cristal-rgb),.7))}
.riesgo-rotulo{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.riesgo-valor{font-family:var(--font-display);color:var(--text-title)}
.riesgo-detalle{margin:0;font-size:var(--fs-sm);color:var(--text-body)}

.medicamento-envase{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.apartado ul.eliminacion-ficha,ul.envase-conservacion,ul.envase-manejo,ul.dilucion-requisitos{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.apartado ul.eliminacion-ficha{margin-top:var(--sp-3)}
ul.envase-conservacion > li{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);
  color:var(--text-body)}
.envase-icono{color:var(--brand-primary);flex:none}
.antidoto-alternativo{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--border-subtle)}

/* ===========================================================================
   AJUSTES DEL EDITOR TRAS LA REVISIÓN DE ERNESTO (3-oct-2026)
   Respiro entre los bloques del editor, secciones dentro de los plegados,
   la tabla de farmacocinética con todas sus columnas, el antídoto, la
   frecuencia de un efecto adverso y el monitoreo como fase de cuidados.
   =========================================================================== */

/* ---- Separación vertical dentro de una cascada ----
   Lo que sale después de las casillas (la vía que sale sola, la lectura de
   la cantidad, la pista de la forma, los plegados y los botones) se pegaba al
   bloque de arriba. Todo lo que sigue a las casillas lleva ahora su propio
   aire, y los avisos seguidos se separan menos entre sí que del bloque. */
.cascada-fila > .cascada-casillas + *{margin-top:var(--sp-5)}
.cascada-fila > .cascada-deducido,
.cascada-fila > .presentacion-pista{margin-top:var(--sp-4)}
.cascada-fila > .cascada-deducido + .cascada-deducido{margin-top:var(--sp-2)}
.cascada-fila > .mas-detalles-campo{margin-top:var(--sp-5)}
.cascada-fila > .cascada-casillas + .cascada-deducido{margin-top:var(--sp-5)}
.cascada-fila > .cascada-verbos,.cascada-fila > .cascada-casillas ~ .cascada-verbos{margin-top:var(--sp-5)}
.cascada-casillas > .mas-detalles-campo,
.cascada-casillas > .otras-dosis{margin-top:var(--sp-3)}
.otras-dosis{padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.cascada-casillas > .otras-dosis{margin-top:var(--sp-4)}

/* ---- Las secciones dentro de un plegado ----
   Un solo cuadro «Más Detalles de la Dosis», dividido en secciones con su
   subtítulo y una raya fina entre ellas. */
.mas-detalles-cuerpo{gap:var(--sp-5)}
.mas-detalles-seccion + .mas-detalles-seccion,
.mas-detalles-bloque + .mas-detalles-bloque{padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.mas-detalles-titulo{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);font-family:var(--font-display);font-weight:var(--fw-bold)}
.mas-detalles-seccion > .campo-ayuda{margin:0}
.mas-detalles-cuidados{margin-top:var(--sp-1)}
.otra-dosis-detalle{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
  border-radius:var(--radius-md);background:var(--cristal);border:1px solid var(--cristal-borde)}
.otra-dosis-detalle + .otra-dosis-detalle{margin-top:var(--sp-2)}
.otra-dosis-detalle-nombre{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-title);
  font-size:var(--fs-sm)}

/* ---- Antídoto: los alternativos, bien separados del principal ---- */
.antidoto-editor > .mas-detalles-campo{margin-top:var(--sp-6);
  padding-top:var(--sp-5);border-top:1px solid var(--border-strong)}
.antidoto-editor > .mas-detalles-campo::before{content:"Otras Opciones";display:block;
  margin-bottom:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.antidoto-editor .alternativo-fila + .alternativo-fila{margin-top:var(--sp-3)}
.antidoto-editor .alternativo-fila + .boton,.antidoto-editor .alternativo-fila ~ .boton{margin-top:var(--sp-3)}

/* ---- Farmacocinética: la tabla con todas sus columnas ----
   Inicio, pico, duración, biodisponibilidad, vida media y eliminación. La
   eliminación lleva dos desplegables, uno sobre el otro. */
.cinetica-tabla .cinetica-eliminacion{min-width:170px}
.cinetica-tabla .cinetica-eliminacion .entrada + .entrada{margin-top:var(--sp-2)}
.cinetica-tabla .entrada input{min-width:96px}

/* ---- Efectos adversos: la frecuencia, en una línea ----
   «Frecuencia:» en negrita y la opción elegida a continuación. */
.adverso-bloque-frecuencia{margin-top:var(--sp-3)}
.adverso-bloque-frecuencia p{margin:0}
.adverso-frecuencia-rotulo{font-weight:var(--fw-bold);color:var(--brand-primary)}

/* ---- Cuidados: la fase de monitoreo ----
   Un tono más intenso que «Después», sin llegar a oscuro, como los demás. */
.azulejo.cuidados-monitoreo,.cuidados-fase.cuidados-monitoreo,
.volteable.cuidados-monitoreo,.volteada.cuidados-monitoreo .cara{
  background:var(--cuidados-monitoreo,color-mix(in srgb,var(--cuidados-despues) 78%,var(--brand-primary) 22%))}

/* ===========================================================================
   LAS ETAPAS DE LA DOSIS (3-oct-2026)
   Dosis de Carga, Mantenimiento y Titulación: sus bloques en el editor y su
   tabla única, con la etapa como primera columna, en la ficha.
   =========================================================================== */

/* ---- En el editor ---- */
.cascada-casillas > .pauta-etapa-interruptor,
.cascada-casillas > .etapa-bloque,
.cascada-casillas > .pauta-etapa-anadir{grid-column:1 / -1;max-width:none}
.pauta-etapa-interruptor{margin:0}
.pauta-etapa-interruptor .pauta-multiple-control{margin-bottom:0}
.etapa-bloque{margin:0;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);border-radius:var(--radius-md);
  background:var(--cristal);border:1px solid var(--cristal-borde)}
.etapa-bloque-mantenimiento{border-left:3px solid var(--brand-primary)}
.etapa-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.etapa-titulo{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-title)}
.etapa-rejilla{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.etapa-rejilla .campo{margin:0}
.etapa-rejilla .dosis-par{grid-template-columns:minmax(72px,1fr) minmax(88px,130px)}
.etapa-observaciones{grid-column:1 / -1}
.etapa-cuando .entrada + .entrada,.etapa-cuando .entrada + .dosis-par{margin-top:var(--sp-2)}
.pauta-etapa-anadir{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.pauta-etapa-anadir .campo-ayuda{margin:0}

/* ---- En la ficha ---- */
.etapas-pauta{display:flex;flex-direction:column;gap:var(--sp-2)}
.etapas-pauta + .etapas-pauta{margin-top:var(--sp-4)}
.etapas-titulo{padding-left:0}
.pauta-contexto{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0;
  font-size:var(--fs-sm);color:var(--text-body)}
.pauta-contexto-rotulo{font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em}
.pauta-contexto strong{color:var(--text-title);font-family:var(--font-display)}
/* Seis columnas en una tarjeta: los encabezados se parten y las observaciones
   tienen un ancho propio, que es donde va el texto largo. */
.etapas-dosis .pauta-tabla th{white-space:normal}
.etapas-dosis .pauta-tabla td[data-label="Observaciones"]{min-width:200px}
.etapas-dosis .pauta-tabla td:first-child strong{font-family:var(--font-display)}
.etapas-dosis .pauta-tabla tr.etapa-mantenimiento td{background:rgba(var(--cristal-rgb),.5)}
/* En el teléfono cada etapa es un bloque con sus rótulos: seis columnas no caben. */
@media (max-width:560px){
  .etapas-dosis thead{display:none}
  .etapas-dosis .pauta-tabla,.etapas-dosis tbody,.etapas-dosis tr,.etapas-dosis td{display:block;width:100%}
  .etapas-dosis tr{padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
  .etapas-dosis tr:last-child{border-bottom:0}
  .etapas-dosis .pauta-tabla td{display:flex;gap:var(--sp-3);border:0;padding:var(--sp-1) var(--sp-3)}
  .etapas-dosis .pauta-tabla td::before{content:attr(data-label);flex:0 0 38%;
    font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.04em}
  .etapas-dosis .pauta-tabla td[data-label="Observaciones"]{min-width:0}
}

/* ---------- LAS CÁPSULAS NO SE PARTEN (15-oct-2026, lo pidió Ernesto) ----------
   Una píldora con el borde redondo del todo (999px) que se parte en dos líneas
   se convierte en un estadio deforme. Dos remedios, según lo que lleve dentro:
     · Las que son SÓLO texto (rótulos, estados, cifras, sinónimos) no se
       parten nunca: si no caben, se recortan con puntos suspensivos.
     · Las que llevan algo más (icono, casilla, botón) pueden necesitar dos
       líneas en un teléfono: su esquina ya no es de 999px sino de 16px, que en
       una línea se ve igual de redonda y en dos queda como una tarjeta. */
.insignia,.sistema-cuenta,.termino-sinonimos li,.omnia-carpeta-cuenta,.cinetica-marca,
.vac-estado,.vac-sincro,.vac-leida,.galeria-ejemplo,.vo-lamina,.feria-valor,
.esquema-dosis-paso,.correo-chip,.reto-chip{
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.permiso,.opciones label,.pauta-marca,.noti-miembro,.galeria-pildora,.galeria-sello,
.vo-perfil-chip,.vx-mal,.omnia-adjunto-chapa,.omnia-mio-chapa,.reto-omnia-chapa,
.correo-adjuntos li,.ficha-recomendar,.ficha-permiso-pildora,.notis-filtro-btn{
  border-radius:16px}
/* Las mismas, donde una regla anterior pesa más, y las barras de botones en
   píldora que en el teléfono pasan a dos filas. */
.persona .permiso{border-radius:16px}
.editor-barra-ficha .editor-verbos,.toggle-circulos{border-radius:24px}