/* ===========================================================================
   VACCINI · «EL ESQUEMA», INTERACTIVO  (ver js/vaccini-esquema.js)

   Pensado PRIMERO PARA EL TELÉFONO: una columna, cada vacuna en su fila, el
   nombre arriba a lo ancho y debajo su ventana y su serie. En pantalla
   grande el nombre pasa a una columna a la izquierda y todo lo demás se
   alinea en la derecha, sobre la misma regla.

   Todo con los tokens de la casa: claro y oscuro, y las dos marcas, salen
   solos. La estrella (dosis) es del color de la marca; el sol (refuerzo),
   del ámbar de la casa. Se distinguen además por la FORMA.

   Las animaciones de entrada son de una sola vez y sólo mueven `transform`,
   `scale` y `opacity` (ver scripts/pruebas/animaciones-componibles.mjs), y se
   quedan en `backwards`: con `both`, el valor final de la animación taparía
   para siempre el de la regla -y con él, el efecto al pasar el ratón-.
   =========================================================================== */

:root{
  --vx-estrella: var(--brand-primary);          /* dosis: el azul de la marca */
  --vx-estrella-cifra: var(--text-onbrand);
  --vx-refuerzo: var(--rose-500);               /* refuerzo: el rosa del logotipo */
  --vx-refuerzo-cifra: var(--rose-900);          /* blanco sobre este rosa no llega a 3:1 */
  --vx-sol: var(--warning-500);                 /* el puerperio, en la regla del embarazo */
  --vx-ventana: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --vx-ventana-filo: color-mix(in srgb, var(--brand-primary) 48%, transparent);
  --vx-linea: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --vx-rejilla: color-mix(in srgb, var(--text-muted) 16%, transparent);
  --vx-icono: 26px;
  --vx-arriba: 15px;
}

.vx{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ---------- Los perfiles: una fila que se desliza de lado en el teléfono ---------- */
.vx-perfiles-caja{position:relative;margin:0 calc(var(--sp-2) * -1)}
.vx-perfiles{display:flex;gap:var(--sp-2);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;padding:2px var(--sp-2) var(--sp-1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.vx-perfiles::-webkit-scrollbar{display:none}
.vx-perfil{appearance:none;flex:none;scroll-snap-align:center;cursor:pointer;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap;
  min-height:36px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);
  border:1px solid var(--cristal-borde);background:rgba(var(--cristal-rgb),.5);
  color:var(--text-muted);
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard)}
.vx-perfil:hover{background:var(--cristal-vivo);color:var(--text-title)}
.vx-perfil.activo{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-onbrand)}
@media (min-width:900px){
  .vx-perfiles{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* ---------- Los iconos: estrella azul (dosis) y estrella rosa (refuerzo) ----------
   El dígito va en el centro calculado de la estrella (ver vxIcono) y con un
   tamaño que se lee: 10,5 unidades de 24, en negrita y con cifras tabulares. */
.vx-icono{width:var(--vx-icono);height:var(--vx-icono);display:block;overflow:visible;flex:none}
.vx-icono path{stroke:var(--surface-card);stroke-width:1.1;paint-order:stroke}
/* El 10,5 va también en VX_CIFRA (vaccini-esquema.js): si se cambia uno, el otro. */
.vx-icono text{font:800 10.5px/1 var(--font-ui);font-variant-numeric:tabular-nums;pointer-events:none}
.vx-dosis path{fill:var(--vx-estrella)}
.vx-dosis text{fill:var(--vx-estrella-cifra)}
.vx-refuerzo path{fill:var(--vx-refuerzo)}
.vx-refuerzo text{fill:var(--vx-refuerzo-cifra)}
.vx-icono.mini{width:15px;height:15px}

/* ---------- La leyenda, al pie de la gráfica ---------- */
.vx-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-xs);color:var(--text-muted)}
.vx-leyenda li{display:inline-flex;align-items:center;gap:6px}
.vx-pista-ayuda{font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- La gráfica: UNA tarjeta de cristal con todo el perfil ----------
   Una línea por vacuna sobre una regla común. Las filas van pegadas, sin
   hueco entre ellas, para que las rayas de la rejilla -que dibuja cada fila-
   se lean como una sola de arriba abajo. */
.vx-mapa{--col:92px;border-radius:var(--radius-xl);padding:var(--sp-4) var(--sp-3) var(--sp-3);
  background:var(--cristal);backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde)}

.vx-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-2) var(--sp-4);padding:0 var(--sp-1) var(--sp-3)}
.vx-cabeza h3{margin:0;font-family:var(--font-display);color:var(--text-title);
  font-size:var(--fs-h4);line-height:1.25}
.vx-cabeza-edad{margin:2px 0 0;font-size:var(--fs-xs);color:var(--text-muted)}
.vx-cabeza-cuenta{display:flex;gap:var(--sp-3);margin:0;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
.vx-cabeza-cuenta span{display:inline-flex;align-items:center;gap:4px}

.vx-grafica{display:flex;flex-direction:column}
.vx-fila{display:grid;grid-template-columns:var(--col) minmax(0,1fr);align-items:center;
  column-gap:var(--sp-2);min-height:42px;border-radius:10px}
.vx-fila[data-vacuna]{cursor:pointer;transition:background var(--dur-base) var(--ease-standard)}
.vx-fila[data-vacuna]:nth-child(even){background:rgba(var(--cristal-rgb),.4)}
.vx-fila[data-vacuna]:hover{background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}

/* La regla, arriba de todo y alineada con las pistas. */
.vx-regla-fila{min-height:26px;cursor:default;align-items:end;padding-bottom:4px}
.vx-regla-titulo{font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.05em;line-height:1.15;
  text-transform:uppercase;color:var(--brand-primary);padding-left:8px}
.vx-regla{position:relative;height:15px;margin:0 12px}
.vx-regla-marca{position:absolute;left:var(--en);transform:translateX(var(--aj,-50%));top:0;
  font-size:10px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vx-regla-marca.parto{font-weight:var(--fw-bold);color:var(--text-title)}
.callado{visibility:hidden}

/* El nombre: corto, en dos líneas como mucho, y la vía debajo. Toda la fila
   abre el detalle; el nombre es además el botón para el teclado. */
.vx-nombre{appearance:none;border:0;background:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;
  padding:5px 2px 5px 8px;border-radius:10px;min-height:42px}
.vx-nombre:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.vx-nombre-texto{font-family:var(--font-display);font-size:12.5px;font-weight:var(--fw-semibold);
  color:var(--text-title);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vx-fila[data-vacuna]:hover .vx-nombre-texto{color:var(--brand-primary)}
.vx-nombre-via{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;
  font-size:10px;font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:.02em}
/* La serie en miniatura junto al nombre. Las que además están en la regla van
   enteras; las que se cuentan desde la anterior, un punto más claras. */
.vx-composicion{display:inline-flex;align-items:center;gap:0}
.vx-composicion .vx-icono.mini{width:12px;height:12px}
.vx-composicion .vx-icono.mini path{stroke-width:0}
.vx-composicion .vx-icono.mini:not(.en-regla){opacity:.72}
.vx-composicion .vx-racimo-repite{font-size:10px;margin-left:2px}

/* La pista: la línea de una vacuna. */
.vx-pista{position:relative;height:42px;margin:0 12px}
.vx-pista::before{content:"";position:absolute;left:-12px;right:-12px;top:calc(50% - 1px);height:2px;
  background:var(--vx-rejilla)}
.vx-rejilla{position:absolute;left:var(--en);top:0;bottom:0;border-left:1px dashed var(--vx-rejilla)}
.vx-rejilla.parto{border-left:2px solid color-mix(in srgb,var(--text-muted) 40%,transparent)}
/* El corte de escala de Rezagados: una raya doble, que se lea como costura. */
.vx-rejilla.corte{border-left:3px double color-mix(in srgb,var(--text-muted) 55%,transparent)}
.vx-muestra-puerperio{display:inline-block;width:18px;height:12px;border-radius:3px;
  background:color-mix(in srgb,var(--vx-sol) 22%,transparent)}
.vx-muestra-corte{display:inline-block;width:3px;height:13px;border-left:3px double var(--text-muted)}
.vx-puerperio{position:absolute;left:var(--de);right:-12px;top:0;bottom:0;
  background:color-mix(in srgb,var(--vx-sol) 9%,transparent)}

.vx-ventana,.vx-extra{position:absolute;left:var(--de);width:calc(var(--a) - var(--de));
  top:calc(50% - 6px);height:12px;border-radius:var(--radius-pill);transform-origin:left center;
  cursor:pointer;outline:none}
.vx-ventana{background:var(--vx-ventana);border:1.5px solid var(--vx-ventana-filo)}
.vx-ventana.sigue{border-right:0;border-radius:var(--radius-pill) 0 0 var(--radius-pill);
  background:linear-gradient(90deg,var(--vx-ventana) 75%,transparent)}
.vx-ventana.sigue::after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left:8px solid var(--vx-ventana-filo);border-right:0}
.vx-ventana.viene{border-left:0;border-radius:0 var(--radius-pill) var(--radius-pill) 0}
.vx-extra{border:1.5px dashed var(--vx-ventana-filo);
  background:repeating-linear-gradient(135deg,var(--vx-ventana) 0 4px,transparent 4px 8px)}
.vx-ventana:focus-visible,.vx-extra:focus-visible{box-shadow:0 0 0 2px var(--focus-ring)}

/* El hilo: cuánto dura la serie, en los perfiles que van desde la 1ª dosis. */
.vx-hilo{position:absolute;left:var(--de);width:calc(var(--a) - var(--de));top:calc(50% - 1.5px);
  height:3px;border-radius:3px;background:var(--vx-ventana-filo)}

.vx-marca{position:absolute;left:var(--en);top:50%;transform:translate(-50%,-50%);
  appearance:none;border:0;background:none;padding:0;cursor:pointer;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;
  transition:scale var(--dur-base) var(--ease-standard)}
.vx-marca .vx-icono{width:23px;height:23px}
.vx-marca:hover,.vx-marca:focus-visible{scale:1.16}
.vx-marca:focus-visible{outline:2px solid var(--focus-ring);outline-offset:0}
.vx-marca.eco{opacity:.42}
.vx-repite,.vx-racimo-repite{font-size:11px;font-weight:var(--fw-bold);line-height:1;color:var(--text-muted)}
.vx-repite{position:absolute;right:-6px;top:-3px}

/* El racimo: las marcas seguidas cuando no se pueden colocar sin montarse. */
.vx-racimo{position:absolute;left:var(--en);top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:1px;max-width:100%;cursor:pointer;outline:none;
  padding:2px 7px 2px 3px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface-card) 82%,transparent);border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-xs)}
.vx-racimo.derecha{left:auto;right:0}
.vx-racimo .vx-icono{width:19px;height:19px}
.vx-racimo-repite{margin-left:3px}
.vx-racimo-texto{margin-left:6px;font-size:10.5px;color:var(--text-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.vx-racimo:hover{border-color:var(--vx-ventana-filo)}
.vx-racimo:focus-visible{box-shadow:0 0 0 2px var(--focus-ring)}

.vx-pie{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-1) 0;border-top:1px solid var(--cristal-borde)}
.vx-pie .vx-pista-ayuda{margin:0}
.vx-muestra{display:inline-block;flex:none;width:18px;height:9px;border-radius:var(--radius-pill);
  background:var(--vx-ventana);border:1.5px solid var(--vx-ventana-filo);transform:translateY(1px)}
.vx-muestra.rayada{border-style:dashed;
  background:repeating-linear-gradient(135deg,var(--vx-ventana) 0 3px,transparent 3px 6px)}

.vx-observacion{margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  font-size:var(--fs-sm);line-height:var(--lh-base,1.5);color:var(--text-body);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde)}
.vx-referencia{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-muted)}

/* Los elementos de la TARJETA de detalle que comparten nombre con la gráfica. */
.vx-via{font-weight:var(--fw-bold);color:var(--brand-primary);font-size:var(--fs-xs);
  border:1px solid var(--vx-ventana-filo);border-radius:6px;padding:1px 7px}
.vx-viva{background:var(--warning-100);color:var(--warning-800,var(--warning-500));font-size:var(--fs-xs);
  border-radius:6px;padding:1px 7px;font-weight:var(--fw-semibold)}
.vx-chip-suave{font-size:var(--fs-xs);color:var(--text-body);background:rgba(var(--cristal-rgb),.6);
  border:1px solid var(--cristal-borde);border-radius:6px;padding:1px 7px}

@media (min-width:600px){
  .vx-mapa{--col:150px;padding:var(--sp-5) var(--sp-4) var(--sp-4)}
  .vx-nombre-texto{font-size:13.5px}
  .vx-fila{min-height:46px}
  .vx-pista{height:46px}
  .vx-marca .vx-icono{width:25px;height:25px}
}
@media (min-width:900px){
  .vx-mapa{--col:200px;padding:var(--sp-5)}
  .vx-nombre-texto{font-size:var(--fs-sm)}
  .vx-regla-titulo{font-size:10px}
}

/* ---------- La serie: ★ ── intervalo ── ☀ ---------- */
.vx-serie{min-width:0}
.vx-serie + .vx-serie{margin-top:var(--sp-1)}
.vx-serie-titulo{margin:0 0 2px;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted)}
/* El relleno de arriba no sobra: con `overflow-x:auto` también se recorta en
   vertical, y un intervalo de dos líneas asoma por encima de la fila. */
.vx-pasos{list-style:none;margin:0;padding:8px 2px 2px;display:flex;align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
.vx-pasos::-webkit-scrollbar{display:none}
/* Una serie que no cabe se DESLIZA, y lo dice desvaneciéndose por el borde en
   vez de con una barra de desplazamiento: la marca `desborda` la pone el JS
   al medir, y `al-final` la quita cuando ya se ha llegado al último paso. */
.vx-pasos.desborda{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.vx-pasos.desborda.al-final{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
          mask-image:linear-gradient(90deg,transparent,#000 28px)}
.vx-paso{scroll-snap-align:start}
.vx-paso{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:46px;max-width:92px;cursor:pointer;border-radius:var(--radius-sm);outline:none}
.vx-paso:focus-visible{box-shadow:0 0 0 2px var(--focus-ring)}
.vx-paso-arriba{height:var(--vx-arriba);font-size:10px;font-weight:var(--fw-semibold);color:var(--text-muted);
  white-space:nowrap;line-height:var(--vx-arriba)}
.vx-paso .vx-icono{transition:scale var(--dur-base) var(--ease-standard)}
.vx-paso:hover .vx-icono{scale:1.12}
.vx-paso-cuando{font-size:11px;line-height:1.25;color:var(--text-body);text-align:center;
  overflow-wrap:anywhere;padding:0 2px}
.vx-paso-eco{opacity:.38;cursor:default}
.vx-paso-origen{cursor:help}
.vx-origen{width:var(--vx-icono);height:var(--vx-icono);display:grid;place-items:center}
.vx-origen::before{content:"";width:11px;height:11px;border-radius:50%;
  border:2px solid var(--vx-linea);background:var(--surface-card)}

.vx-tramo{flex:var(--peso,1) 1 0;min-width:62px;position:relative;align-self:stretch;
  min-height:calc(var(--vx-arriba) + var(--vx-icono) + 30px)}
.vx-tramo-linea{position:absolute;left:3px;right:7px;top:calc(var(--vx-arriba) + 2px + var(--vx-icono) / 2 - 1px);
  height:2px;border-radius:2px;background:var(--vx-linea)}
.vx-tramo-linea::after{content:"";position:absolute;right:-6px;top:-4px;
  border:5px solid transparent;border-left:6px solid var(--vx-linea);border-right:0}
.vx-tramo-rec{position:absolute;left:0;right:0;bottom:calc(100% - var(--vx-arriba) - var(--vx-icono) / 2 + 2px);
  text-align:center;font-size:11.5px;font-weight:var(--fw-bold);color:var(--text-title);
  line-height:1.2;padding:0 3px;overflow-wrap:break-word;hyphens:none}
.vx-tramo-min{position:absolute;left:0;right:0;top:calc(var(--vx-arriba) + var(--vx-icono) / 2 + 6px);
  text-align:center;font-size:10.5px;color:var(--text-muted);line-height:1.2;padding:0 4px}
.vx-tramo-repite .vx-tramo-linea{background:none;border-top:2px dashed var(--vx-linea);height:0}
.vx-tramo-mudo .vx-tramo-linea{background:none;border-top:2px dotted var(--vx-linea);height:0}
.vx-tramo-mudo .vx-tramo-min{font-style:italic}

/* La versión de la tarjeta, más grande: se lee de un vistazo. */
@media (max-width:520px){
  .vx-paso{min-width:42px}
  .vx-tramo{min-width:60px}
  .vx-tramo-rec{font-size:11px}
}

.vx-serie.grande{--vx-icono:34px;--vx-arriba:16px;margin-top:var(--sp-2)}
.vx-serie.grande .vx-paso{min-width:58px;max-width:110px}
.vx-serie.grande .vx-paso-cuando{font-size:var(--fs-xs)}
.vx-serie.grande .vx-tramo{min-width:74px}
.vx-serie.grande .vx-tramo-rec{font-size:var(--fs-xs)}

/* ---------- Inmunoglobulinas, plegadas ---------- */
.vx-inmuno{border-radius:var(--radius-xl);padding:var(--sp-3) var(--sp-4);
  background:rgba(var(--cristal-rgb),.5);border:1px solid var(--cristal-borde)}
.vx-inmuno summary{cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-semibold);
  color:var(--text-title);min-height:32px;display:flex;align-items:center}
.vx-inmuno ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);font-size:var(--fs-sm);color:var(--text-body)}
.vx-inmuno li{margin-bottom:6px}

/* ---------- La vacuna seleccionada ----------
   Tocar una fila la resalta en su sitio: las demás se apagan, su pista se
   abre para que quepan los números exactos, su banda se enciende y sus
   estrellas laten una vez, en orden. Todo son transiciones y animaciones de
   una sola vez, sobre `opacity`, `transform` y `scale` (y el alto de la pista,
   que es una transición, no un bucle). */
.vx-fila[data-vacuna]{transition:background var(--dur-base) var(--ease-standard),
  opacity var(--dur-slow) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.vx-grafica.con-eleccion .vx-fila[data-vacuna]:not(.elegida){opacity:.34}
.vx-fila[data-vacuna].elegida{background:color-mix(in srgb,var(--brand-primary) 9%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--vx-ventana-filo)}
.vx-pista{transition:height var(--dur-slow) var(--ease-standard)}
.vx-fila.elegida .vx-pista{height:76px}
.vx-ventana,.vx-extra,.vx-hilo{transition:background var(--dur-base) var(--ease-standard),
  border-color var(--dur-base) var(--ease-standard)}
.vx-fila.elegida .vx-ventana{background:color-mix(in srgb,var(--brand-primary) 30%,transparent);
  border-color:var(--brand-primary)}
.vx-fila.elegida .vx-ventana.sigue{background:linear-gradient(90deg,
  color-mix(in srgb,var(--brand-primary) 30%,transparent) 75%,transparent)}
.vx-fila.elegida .vx-ventana.sigue::after{border-left-color:var(--brand-primary)}
.vx-fila.elegida .vx-extra{border-color:var(--brand-primary)}
.vx-fila.elegida .vx-hilo{background:var(--brand-primary)}

/* Los números exactos: la edad de cada dosis encima y los extremos de la
   ventana debajo. Están siempre en la página, apagados; se encienden al elegir. */
.vx-dato{position:absolute;left:var(--en);transform:translate(var(--aj,-50%),4px);opacity:0;
  pointer-events:none;white-space:nowrap;font-size:10.5px;font-weight:var(--fw-bold);line-height:1.3;
  font-variant-numeric:tabular-nums;color:var(--text-title);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.vx-dato-abajo{top:calc(50% + 11px);padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--surface-card);border:1px solid var(--brand-primary)}
.vx-dato-arriba{bottom:calc(50% + 13px);color:var(--brand-primary)}
.vx-dato.tramo{color:var(--text-body);font-weight:var(--fw-semibold)}
.vx-dato.extra{border-style:dashed;color:var(--text-muted);font-weight:var(--fw-semibold)}
.vx-fila.elegida .vx-dato{opacity:1;transform:translate(var(--aj,-50%),0);transition-delay:140ms}
.vx-fila.elegida .vx-dato.callado{opacity:0}
/* La etiqueta que junta los extremos, para cuando no caben por separado. */
.vx-dato.resumen{display:none}
.vx-fila.usa-resumen .vx-dato.resumen{display:block}
.vx-fila.usa-resumen .vx-dato-abajo:not(.resumen){display:none}

/* «Ver Detalle»: aparece en la columna del nombre de la fila elegida. */
.vx-ver{display:none}
.vx-fila.elegida .vx-ver{display:inline-flex;align-self:flex-start;margin-top:4px;padding:2px 9px;
  border-radius:var(--radius-pill);font-size:10.5px;font-weight:var(--fw-bold);white-space:nowrap;
  color:var(--text-onbrand);background:var(--brand-primary);
  animation:vx-aparece calc(260ms * var(--v,1)) var(--ease-standard) backwards}
@keyframes vx-aparece{from{opacity:0;transform:translateY(4px)}}

/* El latido de las estrellas, una vez y en orden. */
@keyframes vx-late{0%{scale:.55;opacity:.4}55%{scale:1.28;opacity:1}100%{scale:1}}
.vx-fila.elegida .vx-marca{animation:vx-late calc(520ms * var(--v,1)) var(--ease-standard) backwards;
  animation-delay:calc(var(--k,0) * 90ms * var(--v,1))}

@media (prefers-reduced-motion:reduce){
  .vx-fila.elegida .vx-marca,.vx-fila.elegida .vx-ver{animation:none}
  .vx-dato,.vx-pista,.vx-fila[data-vacuna]{transition:none}
}

/* ---------- El globo de una marca ---------- */
.vx-globo{position:fixed;left:0;top:0;z-index:1100;max-width:min(300px,calc(100vw - 16px));
  padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.4;font-weight:var(--fw-semibold);
  color:var(--surface-card);background:var(--text-title);box-shadow:var(--shadow-lg);
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.vx-globo.visible{opacity:1;transform:none}
.vx-globo::after{content:"";position:absolute;left:var(--pico,50%);top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--text-title);border-bottom:0}
.vx-globo.abajo::after{top:auto;bottom:100%;border-top:0;border-bottom:6px solid var(--text-title)}

/* ---------- La tarjeta de la vacuna ---------- */
.vx-fondo{z-index:1000}
.vx-tarjeta{position:relative;max-width:640px;max-height:min(88vh,880px);display:flex;flex-direction:column;
  overflow:hidden;transform:translateY(18px) scale(.985);
  transition:transform var(--dur-slow) var(--ease-standard)}
.vx-fondo.activo .vx-tarjeta{transform:none}
.vx-tarjeta.arrastrando{transition:none}
.vx-tarjeta-asa{display:none}
.vx-tarjeta-cabecera{align-items:flex-start}
.vx-tarjeta-cabecera h3{font-size:var(--fs-h4);line-height:1.25;outline:none}
.vx-tarjeta-sobre{margin:0 0 2px;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-primary)}
.vx-tarjeta .modal-cerrar{min-width:40px;min-height:40px;margin:-6px -8px 0 0}
.vx-tarjeta-chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-2) 0 var(--sp-3)}
.vx-tarjeta-cuerpo{overflow-y:auto;overscroll-behavior:contain;min-height:0;
  margin:0 calc(var(--sp-5) * -1);padding:0 var(--sp-5) var(--sp-2)}
.vx-tarjeta-bloque{padding:var(--sp-4) 0;border-top:1px solid var(--border-subtle)}
.vx-tarjeta-bloque:first-child{border-top:0;padding-top:0}
.vx-tarjeta-bloque h4{margin:0 0 var(--sp-3);font-family:var(--font-display);font-size:var(--fs-body);
  color:var(--text-title)}
.vx-tarjeta-ayuda{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--text-muted)}
.vx-males{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vx-mal{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:42px;
  padding:8px 12px 8px 11px;border-radius:var(--radius-pill);text-align:left;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--brand-primary);
  border:1px solid var(--vx-ventana-filo);background:color-mix(in srgb,var(--brand-primary) 7%,transparent);
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.vx-mal svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.vx-mal .vx-mal-flecha{width:14px;height:14px;opacity:.7;transition:transform var(--dur-base) var(--ease-standard)}
.vx-mal:hover{background:color-mix(in srgb,var(--brand-primary) 14%,transparent);border-color:var(--brand-primary)}
.vx-mal:hover .vx-mal-flecha{transform:translateX(2px)}
.vx-mal:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vx-nada{font-size:var(--fs-sm);color:var(--text-muted)}
.vx-datos{display:grid;gap:var(--sp-3);margin:var(--sp-3) 0 0}
.vx-datos dt{font-size:10.5px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;
  color:var(--brand-primary)}
.vx-datos dd{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-body);line-height:1.45}
.vx-notas{margin:var(--sp-3) 0 0;padding-left:var(--sp-4);font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}
.vx-notas li{margin-bottom:5px}
.vx-otros{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vx-tarjeta .descargo{margin-top:var(--sp-3)}

/* En el teléfono, una hoja que sube desde abajo y se cierra arrastrándola. */
@media (max-width:720px){
  .vx-fondo{align-items:flex-end;padding:0}
  .vx-tarjeta{max-width:none;width:100%;max-height:90svh;border-radius:22px 22px 0 0;
    padding:var(--sp-2) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    border-bottom:0;transform:translateY(100%)}
  .vx-tarjeta-asa{display:block;width:44px;height:5px;border-radius:5px;margin:2px auto var(--sp-2);
    background:color-mix(in srgb,var(--text-muted) 40%,transparent);touch-action:none}
  .vx-tarjeta-cabecera{touch-action:none}
  .vx-tarjeta-cuerpo{margin:0 calc(var(--sp-4) * -1);padding:0 var(--sp-4) var(--sp-2)}
}

/* ---------- Las entradas, sólo al cambiar de perfil ---------- */
@keyframes vx-entra{from{opacity:0;transform:translateY(10px)}}
@keyframes vx-crece{from{transform:scaleX(0)}}
@keyframes vx-brota{from{opacity:0;scale:.3}}
.vx-animar .vx-fila[data-vacuna]{animation:vx-entra calc(420ms * var(--v,1)) var(--ease-standard) backwards;
  animation-delay:calc(var(--i,0) * 45ms * var(--v,1))}
.vx-animar .vx-ventana,.vx-animar .vx-extra,.vx-animar .vx-hilo{animation:vx-crece calc(620ms * var(--v,1)) var(--ease-standard) backwards;
  animation-delay:calc((var(--i,0) * 45ms + 140ms) * var(--v,1))}
.vx-animar .vx-marca .vx-icono,.vx-animar .vx-racimo .vx-icono{
  animation:vx-brota calc(380ms * var(--v,1)) var(--ease-standard) backwards;
  animation-delay:calc((var(--i,0) * 45ms + 300ms + var(--j,0) * 70ms) * var(--v,1))}

@media (prefers-reduced-motion:reduce){
  .vx-animar .vx-fila,.vx-animar .vx-ventana,.vx-animar .vx-extra,.vx-animar .vx-hilo,
  .vx-animar .vx-marca .vx-icono,.vx-animar .vx-racimo .vx-icono{animation:none}
  .vx-tarjeta,.vx-globo{transition:none}
}

/* Impresa, la pestaña no se imprime: el carné tiene su propio documento. */
@media print{ .vx-globo,.vx-fondo{display:none !important} }