/* ===========================================================================
   VACCINI · «ESQUEMA PERSONALIZADO» DE OMNIA  (ver js/vaccini-omnia.js)

   El botón que flota en Vaccini, el formulario de cristal, el telón con la
   constelación y la ventana del resultado. Todo con los tokens de la casa,
   así que claro y oscuro y las dos marcas salen solos. El único color nuevo
   es el AMARILLO de las citas (las estrellas de «regresar»), con su token en
   claro y en oscuro.

   LA ESTRELLA AMARILLA Y EL CONTRASTE. Un amarillo que se lea como amarillo
   no llega a 3:1 sobre blanco. Así que en claro va con un FILO ámbar oscuro,
   que es el que da el contraste de la forma (4,6:1 sobre blanco), y la cifra
   va en tinta muy oscura sobre el amarillo (más de 9:1). En oscuro el propio
   amarillo ya pasa de 10:1 sobre la superficie.

   Las animaciones sin fin sólo mueven `transform` y `opacity`, una por
   elemento (scripts/pruebas/animaciones-componibles.mjs).
   =========================================================================== */

:root{
  --vo-cita:#F5C542;
  --vo-cita-filo:#8A5E00;
  --vo-cita-cifra:#3A2800;
  --vo-cita-guia:#D9A441;
  --vo-cita-fondo:color-mix(in srgb,#F5C542 16%,var(--surface-card));
}
:root[data-tema="oscuro"]{
  --vo-cita:#F5C542;
  --vo-cita-filo:#FFE08A;
  --vo-cita-cifra:#2A1C00;
  --vo-cita-guia:#C9A13A;
  --vo-cita-fondo:color-mix(in srgb,#F5C542 12%,var(--surface-card));
}

/* ---------- El botón que flota ---------- */
.vo-orbe-capa{position:fixed;right:22px;bottom:24px;z-index:60;display:flex;align-items:center;
  flex-direction:row-reverse;gap:var(--sp-3);pointer-events:none;
  opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity .45s var(--ease-standard),transform .45s var(--ease-standard)}
.vo-orbe-capa.puesta{opacity:1;transform:none}
.vo-orbe{position:relative;width:60px;height:60px;padding:0;border:0;background:none;cursor:pointer;
  pointer-events:auto;border-radius:50%;
  filter:drop-shadow(0 6px 16px rgba(var(--cristal-rgb),.45));
  transition:transform .3s var(--ease-standard)}
.vo-orbe:hover{transform:scale(1.07)}
.vo-orbe:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.vo-orbe-logo{position:relative;width:100%;height:100%;object-fit:contain;display:block;
  animation:omnia-gira 24s linear infinite}
.vo-orbe-halo{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--celestia-viva) 38%,transparent) 0%,transparent 68%);
  opacity:.55;animation:vo-late 3.2s ease-in-out infinite}
@keyframes vo-late{0%,100%{transform:scale(.92);opacity:.4}50%{transform:scale(1.08);opacity:.75}}
.vo-orbe-rotulo{pointer-events:none;white-space:nowrap;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--text-title);background:rgba(var(--cristal-rgb),.9);border:1px solid var(--cristal-borde);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateX(8px);transition:opacity .3s var(--ease-standard),transform .3s var(--ease-standard)}
.vo-orbe-capa:hover .vo-orbe-rotulo,.vo-orbe-capa:focus-within .vo-orbe-rotulo,
.vo-orbe-capa.saluda .vo-orbe-rotulo{opacity:1;transform:none}
[data-marca="ascelyah"] .vo-orbe-logo{filter:none !important}

html.vo-abierto,html.vo-abierto body{overflow:hidden}
html.vo-abierto .vo-orbe-capa{opacity:0;pointer-events:none}

/* ---------- La ventana de cristal (formulario y resultado) ---------- */
.vo-fondo{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease-standard)}
.vo-fondo.activo{opacity:1;pointer-events:auto}
.vo-fondo[hidden]{display:none}
.vo-ventana{position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100svh - 48px);
  border-radius:var(--radius-xl);overflow:hidden;overflow:clip;   /* clip: ni un scrollIntoView la desplaza */
  background:rgba(var(--cristal-rgb),.94);border:1px solid var(--cristal-borde);
  backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:var(--shadow-xl);color:var(--text-body)}
.vo-ventana-form{max-width:780px;transform:translateY(14px) scale(.98);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s var(--ease-standard)}
.vo-fondo.activo .vo-ventana-form{transform:none}
.vo-fondo.saliendo .vo-ventana-form{transform:scale(.96);opacity:0}
.vo-ventana-res{max-width:1000px}

.vo-cabeza{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border-subtle)}
.vo-cabeza-logo{width:40px;height:40px;flex:none;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(var(--cristal-rgb),.4))}
[data-marca="ascelyah"] .vo-cabeza-logo{filter:none !important}
.vo-cabeza-textos{flex:1;min-width:0;display:flex;flex-direction:column}
.vo-cabeza-nombre{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--brand-primary);
  letter-spacing:.04em;text-transform:uppercase}
.vo-cabeza h3{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);color:var(--text-title)}
.vo-cerrar{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--text-muted)}
.vo-cerrar:hover{background:var(--surface-tint);color:var(--text-title)}
.vo-cerrar:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.vo-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);scrollbar-width:thin}
.vo-intro{margin:0 0 var(--sp-2);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-body)}
.vo-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border-subtle);
  background:rgba(var(--cristal-rgb),.6)}
.vo-falta{flex:1 1 220px;margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--danger-500)}
.vo-falta:empty{display:none}
.vo-resultado .vo-falta{color:var(--text-muted);font-weight:var(--fw-regular,400)}
.vo-pie-botones{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end}

/* ---------- Los bloques del formulario ---------- */
.vo-bloque{padding:var(--sp-4) 0;border-top:1px solid var(--border-subtle)}
.vo-cuerpo > .vo-bloque:first-of-type,.vo-intro + .vo-bloque{border-top:0}
.vo-bloque-hijo{border-top:0;padding-top:0}
.vo-bloque-titulo{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-md);color:var(--text-title)}
.vo-ayuda{margin:0 0 var(--sp-3);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--text-muted)}
.vo-grupo{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.vo-grupo-rotulo,.vo-sub-rotulo{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-title)}
.vo-sub{margin:var(--sp-2) 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--surface-tint) 55%,transparent);border:1px solid var(--border-subtle)}
/* Sin `gap`: un plegable cerrado mide cero, pero el hueco de la rejilla se
   quedaría. El aire va en el margen del que viene detrás, y el cerrado no lo lleva. */
.vo-sub > * + *{margin-top:var(--sp-2)}
.vo-sub > .vo-plegable:not(.abierto){margin-top:0}
.vo-sub > :last-child .vo-grupo:last-child,.vo-sub > .vo-grupo:last-child{margin-bottom:0}
.vo-mi-carne,.vo-foto-cartilla{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.vo-edad-dicha{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--brand-primary)}
.vo-edad-dicha:empty,.vo-region-dice:empty{display:none}

.vo-pildoras{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vo-pildora{appearance:none;cursor:pointer;min-height:38px;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
  background:var(--surface-card);color:var(--text-body);
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.25;text-align:left;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),transform .15s var(--ease-standard)}
.vo-pildora:hover{border-color:var(--brand-primary);color:var(--text-title)}
.vo-pildora:active{transform:scale(.97)}
.vo-pildora:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.vo-pildora[aria-pressed="true"]{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-onbrand)}
.vo-pildora[aria-pressed="true"]::before{content:"";display:inline-block;width:.55em;height:.3em;
  margin:0 .5em .18em 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}

.vo-fila-campos{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.vo-campo{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 150px;min-width:0;margin-bottom:var(--sp-2)}
.vo-campo-rotulo{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-title)}
.vo-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)}
.vo-entrada:focus-within{border-color:var(--focus-ring);box-shadow:var(--shadow-focus)}
.vo-entrada input{flex:1;min-width:0;border:0;outline:none;background:none;padding:var(--sp-2) 0;
  font:inherit;font-size:var(--fs-sm);color:var(--text-title)}
.vo-sufijo{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}
.vo-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Lo que se despliega ----------
   Se abre y se cierra con la altura de su contenido (el truco de la rejilla:
   de 0fr a 1fr), y lo cerrado queda `inert`: ni se enfoca ni lo lee nadie. */
.vo-plegable{display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .28s var(--ease-standard)}
.vo-plegable:not(.abierto){grid-template-rows:0fr;opacity:0}
.vo-plegable-dentro{min-height:0;overflow:hidden}
.vo-plegable.abierto > .vo-plegable-dentro{overflow:visible}
.vo-plegable-linea{display:contents}
.vo-plegable-linea:not(.abierto){display:none}
.vo-plegable-linea > .vo-plegable-dentro{display:contents}

/* ---------- Vacunas previas ---------- */
.vo-previas-mandos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.vo-ver-todas{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.vo-previas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-2)}
.vo-previa{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:var(--sp-1) var(--sp-2);
  align-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--border-subtle)}
.vo-previa[hidden]{display:none}
.vo-previa-nombre{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title);line-height:1.2}
.vo-contador{display:inline-flex;align-items:center;gap:2px}
.vo-contador button{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-subtle);
  background:var(--surface-card);color:var(--brand-primary);font-size:18px;line-height:1;cursor:pointer}
.vo-contador button:hover{border-color:var(--brand-primary)}
.vo-contador button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.vo-contador output{min-width:24px;text-align:center;font-weight:var(--fw-bold);color:var(--text-title);
  font-variant-numeric:tabular-nums}
.vo-previa-fecha{grid-column:1 / -1}
.vo-previa-fecha input{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);
  background:var(--surface-sunken);color:var(--text-body);font:inherit;font-size:var(--fs-xs);padding:4px var(--sp-2)}

.vo-perfiles{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vo-perfil-chip{display:inline-block;line-height:1.4;padding:4px var(--sp-3);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--text-body);
  background:var(--surface-tint);border:1px solid var(--border-subtle)}
.vo-perfil-chip strong{color:var(--brand-primary);white-space:nowrap;margin-right:6px}

/* ---------- El telón y el cielo ---------- */
.vo-telon{position:fixed;inset:0;z-index:1002;background:var(--surface-page);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .45s var(--ease-standard)}
.vo-telon.puesto{opacity:1}
.vo-telon.fuera{opacity:0;transition-duration:.5s}
.vo-telon[hidden],.vo-cielo[hidden]{display:none}
.vo-cielo{position:fixed;inset:0;width:100%;height:100%;z-index:1004;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease-standard)}
.vo-cielo.puesto{opacity:1}
.vo-cielo.fuera{opacity:0;transition-duration:.5s}
.vo-telon-centro{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  text-align:center;padding:var(--sp-5);transition:opacity .4s var(--ease-standard),transform .5s var(--ease-standard)}
.vo-telon.yendose .vo-telon-centro{opacity:0;transform:scale(.94)}
.vo-telon-logo{position:relative;width:96px;height:96px;object-fit:contain;animation:omnia-gira 18s linear infinite}
[data-marca="ascelyah"] .vo-telon-logo{filter:none !important}
.vo-telon-halo{position:absolute;top:var(--sp-5);left:50%;width:180px;height:180px;margin:-42px 0 0 -90px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--celestia-viva) 40%,transparent) 0%,
    color-mix(in srgb,var(--brand-accent) 18%,transparent) 45%,transparent 70%);
  animation:vo-late 3.6s ease-in-out infinite}
.vo-telon-titulo{margin:var(--sp-3) 0 0;font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.vo-telon-frase{margin:0;min-height:1.5em;font-size:var(--fs-sm);color:var(--text-muted);
  transition:opacity .26s var(--ease-standard),transform .26s var(--ease-standard)}
.vo-telon-frase.cambia{opacity:0;transform:translateY(4px)}
.vo-telon-cancelar{margin-top:var(--sp-4);padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.vo-telon.yendose .vo-telon-cancelar{pointer-events:none}

/* ---------- El resultado ---------- */
.vo-resultado{z-index:1003}
/* Mientras las estrellas vuelan, la ventana ya está en su sitio (hay que saber
   dónde caen sus estrellas) pero no se ve. Sin transformaciones: moverla
   descuadraría el aterrizaje. */
.vo-resultado.por-revelar{opacity:0;pointer-events:none;transition:none}
.vo-resultado.revelando .vo-ventana-res{animation:vo-revela .85s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes vo-revela{from{clip-path:circle(0% at 50% 34%)}to{clip-path:circle(150% at 50% 34%)}}

.vo-res-bajada{margin:0 0 var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted)}
.vo-resultado .vo-perfiles{margin-bottom:var(--sp-3)}
.vo-resumen{margin:0 0 var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-body)}
.vo-grafica-caja{padding:var(--sp-3);border-radius:var(--radius-lg);background:var(--surface-card);
  border:1px solid var(--border-subtle);margin-bottom:var(--sp-5)}
.vo-grafica{display:block;max-width:100%}
.vo-titulo-citas{margin:0 0 var(--sp-3);font-family:var(--font-display);font-size:var(--fs-md);color:var(--text-title)}

.vo-citas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.vo-cita{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--radius-lg);
  background:var(--vo-cita-fondo);border:1px solid color-mix(in srgb,var(--vo-cita-guia) 55%,var(--border-subtle));
  box-shadow:var(--shadow-xs)}
.vo-cita-cabeza{display:flex;align-items:center;gap:var(--sp-3)}
.vo-cita-cabeza > div{display:flex;flex-direction:column;min-width:0}
.vo-cita-cuando{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--brand-primary);text-transform:uppercase;letter-spacing:.04em}
.vo-cita-fecha{font-family:var(--font-display);font-size:1.3rem;line-height:1.15;color:var(--text-title)}
.vo-cita-dia{font-size:var(--fs-xs);color:var(--text-muted)}
.vo-cita-dosis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.vo-dosis{display:flex;gap:var(--sp-3);align-items:flex-start;padding-top:var(--sp-3);
  border-top:1px dashed color-mix(in srgb,var(--vo-cita-guia) 60%,transparent)}
.vo-dosis-texto{flex:1;min-width:0}
.vo-dosis-nombre{margin:0;font-size:var(--fs-sm);color:var(--text-title)}
.vo-dosis-nombre span{color:var(--text-muted);font-weight:var(--fw-semibold)}
.vo-atrasada{margin:2px 0 0;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--danger-500)}
/* En oscuro, el rojo de la casa sobre el ámbar tenue de la cita se queda en 3,4:1. */
:root[data-tema="oscuro"] .vo-atrasada,:root[data-tema="oscuro"] .vo-falta{color:color-mix(in srgb,var(--danger-500) 62%,#fff)}
.vo-dosis-datos{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:var(--sp-2) 0 0}
.vo-dosis-datos > div{display:flex;flex-direction:column}
.vo-dosis-lugar{flex-basis:100%}
.vo-dosis-datos dt{font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.vo-dosis-datos dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title)}
.vo-dosis-motivo,.vo-dosis-nota{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--text-body)}
.vo-dosis-nota{color:var(--text-muted)}
.vo-lamina{display:inline-block;margin-top:var(--sp-2);padding:1px 8px;border-radius:var(--radius-pill);
  font-size:10px;font-weight:var(--fw-bold);color:var(--brand-primary);border:1px solid var(--border-subtle);
  background:var(--surface-card)}

.vo-estrella{width:26px;height:26px;flex:none;overflow:visible}
.vo-estrella path{stroke-linejoin:round;paint-order:stroke}
.vo-estrella text{font-size:10.5px;font-weight:800;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.vo-estrella-cita{width:40px;height:40px}
.vo-estrella-cita path{fill:var(--vo-cita);stroke:var(--vo-cita-filo);stroke-width:1.3}
.vo-estrella-cita text{fill:var(--vo-cita-cifra)}
.vo-estrella-dosis path{fill:var(--vx-estrella,var(--brand-primary));stroke:var(--surface-card);stroke-width:1.1}
.vo-estrella-dosis text{fill:var(--vx-estrella-cifra,var(--text-onbrand))}
.vo-estrella-refuerzo path{fill:var(--vx-refuerzo,var(--rose-500));stroke:var(--surface-card);stroke-width:1.1}
.vo-estrella-refuerzo text{fill:var(--vx-refuerzo-cifra,var(--rose-900))}

.vo-apartado{margin:0 0 var(--sp-4);padding:var(--sp-4);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  background:var(--surface-card)}
.vo-apartado h4{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-md);color:var(--text-title)}
.vo-apartado ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--sp-2)}
.vo-apartado li{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-body)}
.vo-apartado li strong{color:var(--text-title)}
.vo-apartado .vo-lamina{margin:0 0 0 4px;vertical-align:1px}
.vo-contra{border-color:color-mix(in srgb,var(--danger-500) 45%,var(--border-subtle));
  background:color-mix(in srgb,var(--danger-500) 7%,var(--surface-card))}
.vo-criterio{border-color:color-mix(in srgb,var(--warning-500) 50%,var(--border-subtle));
  background:color-mix(in srgb,var(--warning-500) 8%,var(--surface-card))}
.vo-descargo{margin-top:var(--sp-4)}

/* ---------- En el teléfono: la ventana ocupa la pantalla ---------- */
@media (max-width:720px){
  .vo-orbe-capa{right:14px;bottom:16px}
  .vo-orbe{width:48px;height:48px}
  .vo-orbe-rotulo{display:none}
  .vo-fondo{padding:0;align-items:stretch}
  /* Estirada por el flex del fondo (que va con inset:0), no con 100svh: así
     sigue a la ventana de verdad cuando la barra del navegador aparece o se va. */
  .vo-ventana{max-width:none;max-height:none;height:auto;align-self:stretch;border-radius:0;border:0}
  .vo-cabeza{padding:var(--sp-3) var(--sp-4)}
  .vo-cuerpo{padding:var(--sp-3) var(--sp-4) var(--sp-5)}
  .vo-pie{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom))}
  .vo-pie-botones{width:100%}
  .vo-pie{gap:var(--sp-2)}
  .vo-pie-botones .boton,.vo-pie-botones .boton-suave{flex:1 1 calc(50% - var(--sp-2));
    padding:var(--sp-2) var(--sp-3);min-height:40px;font-size:var(--fs-sm)}
  .vo-previas,.vo-citas{grid-template-columns:1fr}
  .vo-grafica-caja{padding:var(--sp-2)}
  .vo-telon-logo{width:78px;height:78px}
}
@media (prefers-reduced-motion:reduce){
  .vo-orbe-logo,.vo-orbe-halo,.vo-telon-logo,.vo-telon-halo{animation:none}
  .vo-plegable,.vo-ventana-form,.vo-fondo,.vo-telon,.vo-cielo{transition:none}
  .vo-resultado.revelando .vo-ventana-res{animation:none}
}

/* La cartilla leída con una foto, dentro de «Vacunas Previas». */
.vo-foto-cartilla{cursor:pointer}
.vo-cartilla:empty{display:none}
.vo-cartilla{margin-bottom:var(--sp-3)}
.vo-cartilla-lista{display:grid;gap:var(--sp-2);justify-items:stretch;padding:var(--sp-3);border-radius:var(--radius-md);
  background:var(--surface-tint);border:1px solid var(--border-subtle)}
.vo-cartilla-estado{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:var(--fs-sm);color:var(--text-title)}
.vo-cartilla-giro{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid var(--brand-primary);border-right-color:transparent;animation:vo-cartilla-gira .9s linear infinite}
@keyframes vo-cartilla-gira{to{transform:rotate(360deg)}}
.vo-dudosas{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.vo-dudosa{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-2);align-items:center;
  padding-top:var(--sp-2);border-top:1px solid var(--border-subtle)}
.vo-dudosa-leido{grid-column:1 / -1}
.vo-dudosa-leido{font-size:var(--fs-sm);color:var(--text-body);overflow-wrap:anywhere}
.vo-dudosa select,.vo-dudosa input{min-width:0;border:1px solid var(--border-subtle);border-radius:var(--radius-sm,8px);
  background:var(--surface-sunken);color:var(--text-body);font:inherit;font-size:var(--fs-xs);padding:4px var(--sp-2)}
@media (max-width:560px){
  .vo-dudosa{grid-template-columns:minmax(0,1fr) auto}
  .vo-dudosa select{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){ .vo-cartilla-giro{animation:none} }
.vo-cartilla-lista p{margin:0}
.vo-cartilla-lista > .vo-ver-todas{justify-self:start}