/* ─────────────────────────────────────────────────────────────────────────
   PrevIA brand v6 — apothecary editorial overlay
   ─────────────────────────────────────────────────────────────────────────
   Loads AFTER styles.css. Redefines core CSS variables so the entire SPA
   shifts to the v6 forest/sage/cream palette + Inria Serif headlines + soft
   motion. Single-file rollback: remove the <link> tag in index.html.

   Scope: applies globally to every SPA screen (auth, dashboard, onboarding,
   scanner, waiting, consult). VFX cinematográfico solo en scanner
   (data-screen-label="scanner"). Mobile-first responsive.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* ── Paleta v6 (override del cyan-purple v4) ── */
  /* !important REQUIRED: app-main.jsx:154-158 setea estos vars inline via
     setProperty desde tweaks.palette (default "cyan-purple"). Sin !important
     mi CSS rule pierde contra inline-style. Mismo patrón que --font-display. */
  --grad-from: #C4D6C5 !important;
  --grad-mid:  #8FA992 !important;
  --grad-to:   #5b6663 !important;
  --grad: linear-gradient(135deg, #2B3534 0%, #3a4644 55%, #5b6663 100%) !important;
  --grad-soft: linear-gradient(135deg, rgba(196,214,197,0.18) 0%, rgba(232,185,138,0.10) 100%) !important;

  /* Ink scale recalibrada a forest-deep */
  --ink-900: #111513;
  --ink-800: #1f2827;
  --ink-700: #2B3534;
  --ink-600: #3a4644;
  --ink-500: #5b6663;
  --ink-400: #8a9491;
  --ink-300: #b8bfbb;
  --ink-200: #d8dad4;
  --ink-100: #ECE5D5;
  --ink-50:  #F6F1E7;
  --paper:   #ffffff;

  /* Scanner dark palette → forest deep variant */
  --night-950: #0d1413;
  --night-900: #161e1d;
  --night-800: #1f2827;
  --night-700: #2B3534;

  /* Functional muted (no neon) */
  --ok:   #5a9d6a;
  --warn: #C18B5E;
  --bad:  #C44545;

  /* Typography editorial. !important required: app-main.jsx applies inline
     setProperty('--font-display'/'--font-text', tweakFont) via JS on mount;
     CSS rule loses to inline style without !important. The dev tweaks-panel
     "font" selector becomes inoperative for these two vars — acceptable
     because the tweaks panel is dev-only and we want serif/sans locked. */
  --font-display: 'Inria Serif', 'Cormorant Garamond', Georgia, serif !important;
  --font-text:    'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif !important;

  /* Shadows softened, sage glow */
  --sh-sm:  0 1px 2px rgba(43,53,52,.06), 0 1px 1px rgba(43,53,52,.04);
  --sh-md:  0 6px 24px -8px rgba(43,53,52,.15), 0 2px 6px rgba(43,53,52,.06);
  --sh-lg:  0 24px 60px -20px rgba(43,53,52,.22), 0 8px 24px -8px rgba(43,53,52,.12);
  --sh-glow: 0 0 0 1px rgba(196,214,197,.28), 0 20px 60px -20px rgba(43,53,52,.35);

  /* Glass cream (no longer translucent white) */
  --glass-bg: rgba(246,241,231,0.82);
  --glass-border: rgba(43,53,52,0.10);
  --glass-blur: 16px;

  /* v6 brand vars (canonical names para overlay-only selectors) */
  --c-deep:        #2B3534;
  --c-deep-2:      #1f2827;
  --c-cream:       #F6F1E7;
  --c-cream-2:     #ECE5D5;
  --c-ink:         #111513;
  --c-ink-2:       #2a302e;
  --c-mute:        #5b6663;
  --c-accent:      #C4D6C5;
  --c-accent-warm: #E8B98A;
  --c-glow:        rgba(196,214,197,0.6);
}

[data-theme="dark"]{
  --paper:   #2B3534;
  --ink-50:  #1f2827;
  --ink-100: #2a302e;
  --ink-200: #3a4644;
  --ink-300: #5b6663;
  --ink-400: #8a9491;
  --ink-500: #b8bfbb;
  --ink-600: #d8dad4;
  --ink-700: #ECE5D5;
  --ink-800: #F6F1E7;
  --ink-900: #ffffff;
  --glass-bg: rgba(43,53,52,0.62);
  --glass-border: rgba(246,241,231,0.08);
}

/* ── Body base + paper texture ─────────────────────────────────────────── */
body{
  background: var(--c-cream) !important;
  color: var(--c-ink);
  font-family: var(--font-text);
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(196,214,197,0.07) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(232,185,138,0.05) 0%, transparent 42%);
}

/* ── Typography editorial overhaul ─────────────────────────────────────── */
.h-display,
.h-1, .h-2, .h-3, .h-4,
h1, h2, h3{
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em;
}
.h-1{ letter-spacing: -0.07em !important; line-height: 1.02 !important; }
.h-2{ letter-spacing: -0.05em !important; line-height: 1.05 !important; }
.h-display em, .h-1 em, .h-2 em, .h-3 em, h1 em, h2 em{
  font-style: italic;
  font-weight: 300;
  color: var(--c-accent-warm);
}
.eyebrow{
  font-family: var(--font-text) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: rgba(43,53,52,0.55) !important;
}
.lead{
  color: var(--c-mute) !important;
  font-family: var(--font-text);
}

/* Gradient text → flat deep editorial (no rainbow on serif) */
.grad-text{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c-deep) !important;
}

/* ── Buttons editorial ─────────────────────────────────────────────────── */
.btn-primary{
  background: var(--c-deep) !important;
  color: var(--c-cream) !important;
  box-shadow: 0 4px 16px rgba(43,53,52,0.22), 0 1px 0 rgba(255,255,255,0.08) inset !important;
  border-radius: 999px !important;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s cubic-bezier(.2,.7,.2,1), background 0.2s ease !important;
}
.btn-primary:hover{
  background: var(--c-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(43,53,52,0.32), 0 1px 0 rgba(255,255,255,0.10) inset !important;
}
.btn-primary:active{ transform: translateY(0); }

.btn-ghost{
  background: rgba(246,241,231,0.5) !important;
  color: var(--c-deep) !important;
  border: 1px solid rgba(43,53,52,0.18) !important;
  border-radius: 999px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(.2,.7,.2,1) !important;
}
.btn-ghost:hover{
  background: var(--c-cream) !important;
  border-color: rgba(43,53,52,0.32) !important;
  transform: translateY(-1px);
}

.btn-dark{
  background: var(--c-deep) !important;
  color: var(--c-cream) !important;
}

/* ── Surfaces / cards softened ─────────────────────────────────────────── */
.card,
.glass,
[class*="card"]:not([class*="testimonial"]):not([class*="discard"]){
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

/* ── Inputs editorial ──────────────────────────────────────────────────── */
input, textarea, select{
  font-family: var(--font-text) !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(43,53,52,0.16) !important;
  color: var(--c-ink) !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(43,53,52,0.42) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--c-deep) !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196,214,197,0.38) !important;
}
/* Fecha de nacimiento en 3 campos (onboarding, 2026-10-26). Las reglas de arriba llevan !important y le ganan
   a los estilos en línea del bundle, así que el error y la lista sin elegir se pintan aquí, por atributo. */
.onb-fecha select[aria-invalid="true"], .onb-fecha input[aria-invalid="true"]{
  border-color: #dc2626 !important;
}
.onb-fecha select[aria-invalid="true"]:focus, .onb-fecha input[aria-invalid="true"]:focus{
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18) !important;
}
.onb-fecha select[data-vacio="1"]{
  color: rgba(43,53,52,0.42) !important;
}
.onb-fecha select option{
  color: var(--c-ink);
}

/* ── Live dot sage pulse (override del cyan flash) ─────────────────────── */
.live-dot{
  background: var(--c-accent) !important;
  box-shadow: 0 0 0 0 rgba(196,214,197,0.7);
  animation: v6-live-pulse 2.2s ease-in-out infinite;
}
@keyframes v6-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,214,197,0.65); }
  70%  { box-shadow: 0 0 0 10px rgba(196,214,197,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,214,197,0); }
}

/* ── Page-level screen transitions (cross-fade entrance) ───────────────── */
[data-screen-label]{
  animation: v6-screen-in 0.55s cubic-bezier(.2,.7,.2,1);
}
@keyframes v6-screen-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── SCANNER VFX (cinematic) ───────────────────────────────────────────── */
/* Solo cuando estás en scanner. 3 capas: (1) breathing radial halo,
   (2) scanning lines drift, (3) soft sage glow ring. */
[data-screen-label="scanner"]{
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #1f2827 0%, #0d1413 75%) !important;
  color: var(--c-cream) !important;
  min-height: 100vh;
  overflow: hidden;
}
[data-screen-label="scanner"]::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 38%, rgba(196,214,197,0.22) 0%, rgba(196,214,197,0.0) 45%),
    radial-gradient(circle at 50% 38%, rgba(232,185,138,0.10) 0%, transparent 65%);
  animation: v6-scanner-breathe 4.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes v6-scanner-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
[data-screen-label="scanner"]::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 80px,
      rgba(196,214,197,0.045) 80px, rgba(196,214,197,0.045) 81px);
  animation: v6-scanner-scan 7s linear infinite;
  mix-blend-mode: screen;
}
@keyframes v6-scanner-scan {
  from { background-position-y: 0; }
  to   { background-position-y: 80px; }
}
/* Scanner UI lifts above VFX layers */
[data-screen-label="scanner"] > *{ position: relative; z-index: 2; }

/* Scanner inputs flip to dark glass */
[data-screen-label="scanner"] input,
[data-screen-label="scanner"] textarea,
[data-screen-label="scanner"] select{
  background: rgba(43,53,52,0.55) !important;
  border-color: rgba(196,214,197,0.22) !important;
  color: var(--c-cream) !important;
  backdrop-filter: blur(8px);
}
[data-screen-label="scanner"] input::placeholder{
  color: rgba(246,241,231,0.42) !important;
}
[data-screen-label="scanner"] .btn-primary{
  background: var(--c-accent) !important;
  color: var(--c-deep) !important;
}
[data-screen-label="scanner"] .btn-ghost{
  background: rgba(43,53,52,0.4) !important;
  color: var(--c-cream) !important;
  border-color: rgba(196,214,197,0.3) !important;
}

/* ── .pill-grad override (era cyan/purple semi-transparente, ilegible) ──
   El pill "Buscando médico disponible" + similares usan esta clase. v6: glass
   cream sobre dark bg + glass deep sobre cream bg via data-screen-label. */
.pill-grad{
  background: linear-gradient(135deg, rgba(196,214,197,0.22), rgba(232,185,138,0.22)) !important;
  color: var(--c-deep) !important;
  border: 1px solid rgba(143,169,146,0.32) !important;
}
/* En screens con bg deep forest (waiting reskinned), cream para legibilidad */
[data-screen-label="waiting"] .pill-grad,
[data-screen-label="consult"] .pill-grad{
  background: rgba(246,241,231,0.18) !important;
  color: var(--c-cream) !important;
  border: 1px solid rgba(196,214,197,0.35) !important;
  backdrop-filter: blur(12px);
}

/* ── Consult videocall — kill navy/purple, use deep forest v6 ─────────── */
/* consult.jsx line 44 outer bg #0a0c1a + line 152 sidebar #0f1226. Override
   ambos via screen-scoped selectors a deep forest gradients. */
[data-screen-label="consult"] > div[style*="0a0c1a"],
[data-screen-label="consult"] > div:first-child{
  background: radial-gradient(ellipse at 50% 0%, #1f2827 0%, #0d1413 80%) !important;
}
[data-screen-label="consult"] .consult-sidebar,
[data-screen-label="consult"] aside[class*="sidebar"]{
  background: rgba(13,20,19,0.92) !important;
  border-left-color: rgba(196,214,197,0.10) !important;
  backdrop-filter: blur(12px);
}

/* ── Dashboard CTA "Iniciar nueva consulta" — sage editorial ───────────── */
/* styles.css defines this with hardcoded purple-pink gradient on dark navy.
   v6 overlay flips bg to cream glass + sage button + dark text. */
.dash-cta-card{
  background:
    radial-gradient(circle at 10% 0%, rgba(196,214,197,0.22) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(232,185,138,0.16) 0%, transparent 55%),
    linear-gradient(135deg, #F6F1E7 0%, #ECE5D5 55%, #E0D7C2 100%) !important;
  border: 1px solid rgba(43,53,52,0.10) !important;
  box-shadow:
    0 18px 50px -22px rgba(43,53,52,0.22),
    0 8px 22px -12px rgba(143,169,146,0.25) !important;
}
.dash-cta-glow-a{
  background: radial-gradient(circle, rgba(196,214,197,0.55) 0%, transparent 60%) !important;
}
.dash-cta-glow-b{
  background: radial-gradient(circle, rgba(232,185,138,0.42) 0%, transparent 60%) !important;
}
.dash-cta-eyebrow{
  color: rgba(43,53,52,0.65) !important;
  font-weight: 600 !important;
}
.dash-cta-title{
  color: var(--c-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  letter-spacing: -0.03em !important;
}
.dash-cta-meta{
  color: rgba(43,53,52,0.62) !important;
}
/* PRIMARY ACTION button → sage→forest gradient, lifts off cream bg */
.dash-cta-btn{
  background: linear-gradient(135deg, #C4D6C5 0%, #8FA992 50%, #5a7d62 100%) !important;
  color: var(--c-deep) !important;
  box-shadow:
    0 20px 48px -16px rgba(90,125,98,0.48),
    0 8px 18px -10px rgba(143,169,146,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.dash-cta-btn:hover{
  filter: brightness(1.04);
  box-shadow:
    0 24px 56px -16px rgba(90,125,98,0.58),
    0 10px 22px -10px rgba(143,169,146,0.65),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}
.dash-cta-btn-icon{
  background: rgba(43,53,52,0.18) !important;
  color: var(--c-deep) !important;
  border: 1px solid rgba(43,53,52,0.22) !important;
}
.dash-cta-btn-label,
.dash-cta-btn-arrow{
  color: var(--c-deep) !important;
}

/* ── Waiting room: deep forest immersive (matches scanner pattern) ─────── */
/* Waiting JSX inline overrides bg to deep forest gradient. Flip text colors
   from ink-900 (near-black) to cream so labels stay legible on dark bg. */
[data-screen-label="waiting"]{
  color: var(--c-cream) !important;
}
[data-screen-label="waiting"] .card,
[data-screen-label="waiting"] .waiting-net-card{
  background: rgba(13,20,19,0.55) !important;
  border-color: rgba(196,214,197,0.14) !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  color: var(--c-cream);
}
[data-screen-label="waiting"] .eyebrow,
[data-screen-label="waiting"] [style*="--ink-500"]{
  color: rgba(246,241,231,0.6) !important;
}
[data-screen-label="waiting"] .lead{
  color: rgba(246,241,231,0.78) !important;
}
[data-screen-label="waiting"] .mono{
  color: var(--c-cream) !important;
}
/* Force text colors inside waiting (overrides inline var(--ink-X) refs) */
[data-screen-label="waiting"] span[style*="ink-500"],
[data-screen-label="waiting"] div[style*="ink-500"]{
  color: rgba(246,241,231,0.55) !important;
}
[data-screen-label="waiting"] span[style*="ink-700"],
[data-screen-label="waiting"] div[style*="ink-700"]{
  color: rgba(246,241,231,0.82) !important;
}
[data-screen-label="waiting"] span[style*="ink-800"],
[data-screen-label="waiting"] div[style*="ink-800"]{
  color: rgba(246,241,231,0.92) !important;
}
[data-screen-label="waiting"] span[style*="ink-900"],
[data-screen-label="waiting"] div[style*="ink-900"]{
  color: var(--c-cream) !important;
}
/* MiniSummary cards inside waiting: dark glass instead of cream */
[data-screen-label="waiting"] div[style*="--ink-50"]{
  background: rgba(196,214,197,0.08) !important;
  color: var(--c-cream);
}
/* Stages timeline circles: keep gradient sage→terracota */
[data-screen-label="waiting"] [class="card"] > div{
  /* nothing — let inline styles drive */
}

/* ── Consult (videocall): deep forest backdrop ─────────────────────────── */
[data-screen-label="consult"]{
  background: var(--c-deep-2) !important;
  color: var(--c-cream);
}

/* ── Dashboard / Auth / Onboarding: clean cream paper ──────────────────── */
[data-screen-label="auth"],
[data-screen-label="dashboard"],
[data-screen-label="onboarding"]{
  background: var(--c-cream) !important;
  color: var(--c-ink);
}

/* ── Micro-interactions: focusable elements lift on hover ──────────────── */
button, a, [role="button"]{
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── LangToggle bottom-left pill → cream ───────────────────────────────── */
.lang-toggle, [class*="lang-toggle"]{
  background: rgba(43,53,52,0.85) !important;
  border-color: rgba(196,214,197,0.25) !important;
}

/* ── Mobile responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px){
  body{ background: var(--c-cream-2) !important; }
  input, textarea, select{
    min-height: 44px !important;
    font-size: 16px !important; /* iOS no-zoom on focus */
  }
  button, .btn-primary, .btn-ghost{
    min-height: 44px !important;
  }
  .h-1{ font-size: clamp(32px, 8vw, 56px) !important; }
  .h-2{ font-size: clamp(26px, 6.5vw, 44px) !important; }
  /* Scanner VFX más ligero en mobile (perf) */
  [data-screen-label="scanner"]::after{
    background-image:
      repeating-linear-gradient(0deg,
        transparent 0px, transparent 100px,
        rgba(196,214,197,0.035) 100px, rgba(196,214,197,0.035) 101px);
  }
}

/* ── Scanner 3D VFX orbital + particle drift (CSS only) ────────────────── */
.vfx-orbit{
  position: absolute;
  left: 50%; top: 38%;
  width: 760px; height: 760px;
  margin-left: -380px; margin-top: -380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.vfx-orbit--outer{
  border: 1px dashed rgba(196,214,197,0.18);
  animation: vfx-orbit3d 32s linear infinite;
  transform: rotateX(62deg) rotateZ(0deg);
}
.vfx-orbit--inner{
  width: 600px; height: 600px;
  margin-left: -300px; margin-top: -300px;
  border: 1px solid rgba(232,185,138,0.14);
  animation: vfx-orbit3d 22s linear infinite reverse;
  transform: rotateX(68deg) rotateZ(0deg);
}
.vfx-orbit--tilt{
  width: 880px; height: 880px;
  margin-left: -440px; margin-top: -440px;
  border: 1px solid rgba(196,214,197,0.10);
  animation: vfx-orbit-tilt 40s linear infinite;
  transform: rotateX(48deg) rotateY(8deg);
}
@keyframes vfx-orbit3d {
  from { transform: rotateX(62deg) rotateZ(0deg); }
  to   { transform: rotateX(62deg) rotateZ(360deg); }
}
@keyframes vfx-orbit-tilt {
  0%   { transform: rotateX(48deg) rotateY(8deg)  rotateZ(0deg); }
  50%  { transform: rotateX(52deg) rotateY(-8deg) rotateZ(180deg); }
  100% { transform: rotateX(48deg) rotateY(8deg)  rotateZ(360deg); }
}
.vfx-particles{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle 1px at 18% 22%, rgba(196,214,197,0.45), transparent 100%),
    radial-gradient(circle 1.5px at 28% 78%, rgba(232,185,138,0.32), transparent 100%),
    radial-gradient(circle 1px at 72% 18%, rgba(196,214,197,0.40), transparent 100%),
    radial-gradient(circle 2px at 82% 68%, rgba(232,185,138,0.28), transparent 100%),
    radial-gradient(circle 1px at 50% 88%, rgba(196,214,197,0.35), transparent 100%),
    radial-gradient(circle 1.5px at 12% 52%, rgba(232,185,138,0.30), transparent 100%),
    radial-gradient(circle 1px at 88% 42%, rgba(196,214,197,0.38), transparent 100%);
  background-size: 100% 100%;
  animation: vfx-particles-drift 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  filter: blur(0.4px);
}
@keyframes vfx-particles-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%  { transform: translate(-1.5%, 1.2%) scale(1.03); opacity: 1; }
  100% { transform: translate(2%, -0.8%) scale(0.98); opacity: 0.85; }
}

/* Scanner inputs/UI on top of VFX */
[data-screen-label="scanner"] > * { position: relative; z-index: 2; }

/* ── Reduce motion respect ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  [data-screen-label]{ animation: none !important; }
  [data-screen-label="scanner"]::before,
  [data-screen-label="scanner"]::after,
  [data-screen-label="waiting"]::before,
  .live-dot,
  .vfx-orbit, .vfx-particles{ animation: none !important; }
}

/* Mobile: shrink VFX rings to fit narrower viewport, disable particle drift */
@media (max-width: 768px){
  .vfx-orbit{ width: 460px; height: 460px; margin-left: -230px; margin-top: -230px; }
  .vfx-orbit--inner{ width: 360px; height: 360px; margin-left: -180px; margin-top: -180px; }
  .vfx-orbit--tilt{ width: 540px; height: 540px; margin-left: -270px; margin-top: -270px; }
  .vfx-particles{ display: none; }
}

/* ── SPA Legal mini-footer ────────────────────────────────────────────────
   Compulsorio LFPDPPP Art 17 + Lineamientos INAI Cap III §39 (Aviso de
   Privacidad accesible permanentemente desde el sitio, no solo onboarding).
   Mini-fila al final de cada screen excepto scanner/consult. */
.spa-legal-footer {
  position: relative;
  z-index: 1;
  padding: 18px 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--ink-500, #8b9094);
  background: transparent;
}
.spa-legal-footer a {
  color: var(--ink-600, #6b7176);
  text-decoration: none;
  transition: color 0.18s ease;
}
.spa-legal-footer a:hover,
.spa-legal-footer a:focus {
  color: var(--ink-900, #1a1d1f);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spa-legal-footer span[aria-hidden="true"] {
  color: var(--ink-300, #c5c8cb);
  user-select: none;
}

@media (max-width: 480px) {
  .spa-legal-footer { font-size: 11px; padding: 14px 16px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSULT PREP — Merged "Threshold to Consult" surface
   Sofía hero (left/top) + form panel (right/bottom).
   ═══════════════════════════════════════════════════════════════════════ */

.consult-prep {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 30% 30%, #1f2827 0%, #0a0d0c 70%);
  color: #fff;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.consult-prep-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.consult-prep-blob { position: absolute; pointer-events: none; filter: blur(80px); z-index: 1; }
.consult-prep-blob--warm { top: -25%; right: -10%; width: 720px; height: 720px; background: radial-gradient(circle, rgba(232,185,138,0.20), transparent 60%); }
.consult-prep-blob--cool { bottom: -30%; left: -15%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(143,169,146,0.18), transparent 60%); }
.consult-prep-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(196,214,197,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(196,214,197,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%);
}
.consult-prep-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 20px 32px;
  height: 80px;
}
.consult-prep-back {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.consult-prep-back:hover { background: rgba(255,255,255,0.12); transform: translateX(-2px); }
.consult-prep-step {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}

.consult-prep-sofia-stage {
  position: absolute;
  left: 32px; top: 96px;
  width: calc(58vw - 48px); height: calc(100vh - 128px);
  z-index: 5;
  pointer-events: none;
}
.consult-prep-sofia-hint {
  position: absolute;
  left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196,214,197,0.20);
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  font-weight: 500;
  z-index: 20;
  pointer-events: auto;
  max-width: calc(58vw - 80px);
}
.consult-prep-sofia-hint-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C4D6C5;
  box-shadow: 0 0 12px rgba(196,214,197,0.8);
  animation: consult-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes consult-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.consult-prep-panel {
  position: absolute;
  right: 0; top: 80px;
  width: 42vw;
  max-width: 520px;
  height: calc(100vh - 80px);
  z-index: 10;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 40px 32px 24px;
  overflow-y: auto;
  animation: consult-panel-in 0.6s cubic-bezier(.4,1.2,.5,1) both;
}
@keyframes consult-panel-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.consult-prep-panel-inner {
  width: 100%;
  /* auto vertical margins center the card when the panel is taller than the
     content, but collapse to 0 when content overflows — so the top (eyebrow +
     title) is never clipped above the scroll origin. align-items:center would
     clip it. Mirrors the mobile flex-start behavior. */
  margin-block: auto;
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 32px 30px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.consult-prep-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C4D6C5;
  font-weight: 700;
  margin-bottom: 12px;
}
.consult-prep-title {
  font-family: 'Inria Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #fff;
}
.consult-prep-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
  margin: 0 0 24px;
}
.consult-prep-field { margin-bottom: 18px; min-width: 0; position: relative; }
.consult-prep-field--half { flex: 1 1 0; min-width: 0; }
.consult-prep-field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

/* ── "Filled by Sofía" feedback ─────────────────────────────────────
   When intake-extract emits a field, the React state flips on the parent
   .consult-prep-field with .is-sofia-fresh for ~2.4s. We pulse a soft
   sage glow on the field and animate a small "✓ Sofía" tag chip into the
   label row to acknowledge the AI assist without taking over the UI. */
.consult-prep-field.is-sofia-fresh .consult-prep-textarea,
.consult-prep-field.is-sofia-fresh .consult-prep-chips,
.consult-prep-field.is-sofia-fresh .consult-prep-severity {
  animation: consult-sofia-pulse 2.4s cubic-bezier(.4, 0, .2, 1) 1;
}
@keyframes consult-sofia-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,214,197,0.0); }
  18%  { box-shadow: 0 0 0 6px rgba(196,214,197,0.20), 0 0 24px rgba(196,214,197,0.30); }
  100% { box-shadow: 0 0 0 0 rgba(196,214,197,0.0); }
}
.consult-prep-sofia-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(196,214,197,0.22), rgba(232,185,138,0.18));
  border: 1px solid rgba(196,214,197,0.45);
  color: #C4D6C5;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: middle;
  animation: consult-sofia-tag-in 0.35s cubic-bezier(.2,1.2,.5,1) both;
}
.consult-prep-sofia-tag-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #C4D6C5;
  box-shadow: 0 0 8px rgba(196,214,197,0.85);
  animation: consult-sofia-tag-pulse 1.4s ease-in-out infinite;
}
@keyframes consult-sofia-tag-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes consult-sofia-tag-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.5; transform: scale(0.78); }
}
.consult-prep-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.consult-prep-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 70px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.consult-prep-textarea:focus {
  border-color: rgba(196,214,197,0.55);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 0 0 3px rgba(196,214,197,0.10);
}
.consult-prep-textarea::placeholder { color: rgba(255,255,255,0.30); }
.consult-prep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.consult-prep-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
}
.consult-prep-chip:hover { border-color: rgba(196,214,197,0.40); color: #fff; }
.consult-prep-chip.is-active {
  background: linear-gradient(135deg, rgba(196,214,197,0.20), rgba(232,185,138,0.18));
  border-color: rgba(196,214,197,0.55);
  color: #fff;
  box-shadow: 0 0 16px rgba(196,214,197,0.18);
}
.consult-prep-severity { display: flex; align-items: center; gap: 10px; }
.consult-prep-severity-edge { font-size: 11px; color: rgba(255,255,255,0.40); }
.consult-prep-range { flex: 1; min-width: 0; accent-color: #C4D6C5; }
.consult-prep-severity-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: #C4D6C5;
  min-width: 20px;
  text-align: center;
}
.consult-prep-points {
  list-style: none; padding: 0; margin: 22px 0 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.consult-prep-points li {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
}
.consult-prep-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C4D6C5, #E8B98A);
  display: flex; align-items: center; justify-content: center;
  color: #1a1d1f;
  flex-shrink: 0;
}
.consult-prep-cta {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, #C4D6C5 0%, #B5C9B7 100%);
  color: #0d1413;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(196,214,197,0.25), inset 0 1px 0 rgba(255,255,255,0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.consult-prep-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(196,214,197,0.35), inset 0 1px 0 rgba(255,255,255,0.30);
}
.consult-prep-cta:active { transform: translateY(0); }
.consult-prep-privacy {
  margin-top: 12px;
  font-size: 10.5px;
  text-align: center;
  color: rgba(255,255,255,0.40);
  line-height: 1.5;
}
/* Skip-scan = SECONDARY CTA (sage outline). More prominent than the old
   underline link, deliberately lighter than the solid sage primary CTA so the
   hierarchy reads primary > secondary. Mirrors the app's secondary button. */
.consult-prep-skip {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  padding: 13px 20px;
  border-radius: 14px;
  background: rgba(196,214,197,0.12);
  border: 1px solid rgba(196,214,197,0.38);
  color: #C4D6C5;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.consult-prep-skip:hover {
  background: rgba(196,214,197,0.18);
  border-color: rgba(196,214,197,0.55);
  transform: translateY(-1px);
}
.consult-prep-skip:active { transform: translateY(0); }
/* Reason-required hint — small, discreet, warm tint. Click-triggered (shown
   only after the user taps a CTA with an empty motivo) on desktop AND mobile. */
.consult-prep-cta-hint {
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 11px;
  background: rgba(193,139,94,0.12);
  border: 1px solid rgba(193,139,94,0.28);
  color: #E8B98A;
  font-size: 12px;
  text-align: center;
  line-height: 1.45;
  font-weight: 500;
  animation: consult-hint-in 0.24s ease both;
}
@keyframes consult-hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  /* Sofía hero stage: full-width framed panel below the header (88px) with
     44vh height. Matches the actual Sofía widget coords so hint pill and
     form panel position correctly. The stage itself is just an anchor for
     the hint pill — Sofía's widget renders independently at the same coords. */
  .consult-prep-sofia-stage {
    position: absolute;
    left: 16px;
    top: 88px;
    width: calc(100vw - 32px);
    height: 44vh;
    transform: none;
  }
  .consult-prep-sofia-hint {
    left: 50%; bottom: -32px;
    transform: translateX(-50%);
    font-size: 11px;
    padding: 7px 14px;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 60 !important; /* Above Sofía's z-index 30 */
  }
  /* CRITICAL: override the desktop flex-center alignment so the form
     content starts at the TOP of the scroll container (not vertically
     centered, which hid the title above the visible fold on mobile). */
  .consult-prep-panel {
    position: absolute;
    left: 0; right: 0;
    top: calc(88px + 44vh + 56px);
    bottom: 0;
    width: 100vw; max-width: none;
    height: auto;
    padding: 0 14px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .consult-prep-panel-inner {
    padding: 18px 18px 18px;
    border-radius: 22px;
  }
  .consult-prep-eyebrow { font-size: 10px; margin-bottom: 8px; }
  .consult-prep-title { font-size: 22px; margin-bottom: 10px; }
  .consult-prep-sub { font-size: 13px; margin-bottom: 16px; }
  .consult-prep-field { margin-bottom: 14px; }
  .consult-prep-field-row { gap: 12px; }
  .consult-prep-textarea { min-height: 60px; font-size: 14px; }
  .consult-prep-chips { gap: 5px; }
  .consult-prep-chip { padding: 7px 10px; font-size: 11.5px; }
  .consult-prep-points { margin: 14px 0 16px; gap: 6px; }
  .consult-prep-points li { font-size: 11.5px; }
  .consult-prep-cta { padding: 14px 18px; font-size: 14.5px; }
  .consult-prep-privacy { font-size: 10px; margin-top: 10px; }
  .consult-prep-header { padding: 12px 14px; height: 60px; }
  .consult-prep-step { font-size: 10px; }
}

/* ── Mobile Sofía hero — big framed panel ─────────────────────────────
   Per user image #11/#12: Sofía should occupy almost full width with
   breathing room, ~50vh tall, soft sage frame.

   SPECIFICITY FIX: the desktop hero block in this file appears AFTER this
   one in source order with the same (0,0,5,1) specificity, so on mobile
   viewports the desktop rule was winning by source position alone.  Bumping
   the mobile selector to .sofia3d × 5  →  specificity (0,0,6,1)  guarantees
   it ALWAYS wins on mobile regardless of where the desktop rule lives. */

/* Error screen: hide the floating Sofía widget — it overlaps the error UI and looks broken. */
body.scanner-proc-error .sofia3d.sofia3d { display: none !important; }

@media (max-width: 900px) {
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d.sofia3d.sofia3d {
    /* position: absolute (NOT fixed) anchors Sofía to the document — when
       the user scrolls down, she scrolls AWAY instead of sticking to the
       viewport. Header has ~60px clearance + 28px breathing → top: 88px.
       Height reduced to 44vh so the hint pill below (at +24px) doesn't
       collide and remains visible. */
    position: absolute !important;
    top: 88px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100vw - 32px) !important;
    height: 44vh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    z-index: 30 !important;
  }
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__avatar-wrap {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow:
      0 40px 80px -22px rgba(0,0,0,0.60),
      0 16px 32px -12px rgba(0,0,0,0.45),
      inset 0 0 0 1px rgba(196,214,197,0.22),
      inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__live-stream,
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__hero-video-source,
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__pose-img,
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__avatar-canvas,
  body.sofia-hero-mode .sofia3d.sofia3d.sofia3d .sofia3d__hero-canvas {
    border-radius: 24px !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    mask-image: radial-gradient(ellipse 92% 95% at center, #000 75%, rgba(0,0,0,0.85) 92%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse 92% 95% at center, #000 75%, rgba(0,0,0,0.85) 92%, transparent 100%) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOFÍA HERO-MODE OVERRIDES — CRITICAL SPECIFICITY NOTES
   ───────────────────────────────────────────────────────────────────────
   The base sofia3d styles include `.sofia3d:not(.sofia3d--hero).sofia3d--dragged
   .sofia3d--dragged.sofia3d--dragged` at specificity (0,0,3,0) + !important
   (styles.css line 1731) which WINS over a single-class hero override even
   with !important. We use a quadruple-class selector to beat it cleanly:
     body.sofia-hero-mode .sofia3d.sofia3d.sofia3d.sofia3d  →  (0,0,5,1)
   Additionally we force transform: none + zero --drag-x/--drag-y so the
   persisted dragged position from localStorage doesn't teleport Sofía.
   ═══════════════════════════════════════════════════════════════════════ */

body.sofia-hero-mode .sofia3d.sofia3d.sofia3d.sofia3d {
  position: fixed !important;
  top: 96px !important;
  left: 32px !important;
  bottom: auto !important;
  right: auto !important;
  width: calc(58vw - 48px) !important;
  height: calc(100vh - 128px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 40 !important;
  /* Kill the persisted drag transform + force static placement.
     --drag-x/y reset to 0 in case the dragged rule still sneaks through. */
  transform: none !important;
  --drag-x: 0px !important;
  --drag-y: 0px !important;
  /* Disable the entrance animation so there's no scale-in flicker over the
     drag teleport — we want pure static. */
  animation: none !important;
  transition: opacity 0.4s ease !important;
  /* Disable drag interactions in hero mode */
  cursor: default !important;
  touch-action: auto !important;
}

/* Wrap fills the entire hero box. The base `.sofia3d--live .sofia3d__avatar-wrap`
   rule has `max-width: 220px !important; max-height: 300px !important` (specificity
   0,0,2,0) — we MUST unset those caps explicitly. width:100% alone is clamped by
   them. Specificity here is (0,0,4,1) so it wins the !important fight. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__avatar-wrap {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1f2827 0%, #0d1413 100%) !important;
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,0.65),
    0 24px 48px -12px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(196,214,197,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  cursor: default !important;
  /* Subtle entrance — opacity only, no transform (which would re-trigger drag rules). */
  animation: consult-sofia-fade-in 0.6s ease both !important;
}
@keyframes consult-sofia-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* All inner stage layers (canvas, poster img, fallback video, WebRTC video)
   fill the wrap completely. cover crops to fit instead of letterboxing. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__avatar-canvas,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__pose-img,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__hero-video-source,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__hero-canvas,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__live-stream {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 28px !important;
  transform: none !important;
}

/* Live Simli avatar (consult-prep "motivo de consulta"): crop the empty black
   headroom at the top of the Simli frame and raise Sofía's face. Higher % =
   face rises / more top cropped. Excludes the results screen. */
body.sofia-hero-mode:not(.scanner-results-hero) .sofia3d.sofia3d .sofia3d__live-stream {
  /* Show Sofía's COMPLETE face — contain never crops (forehead safe) and reads as
     more zoomed-out than cover. The square Simli frame letterboxes into the dark
     panel; the wrap's radial mask blends the side edges. */
  object-fit: contain !important;
  object-position: center !important;
}

/* Hide the teal letterbox bars around the contained avatar on BOTH the consult
   ("motivo de consulta") and results ("resultados y match") screens: paint the
   wrap near-black so any letterbox blends with Sofía's dark photo bg — no teal,
   no stretch/deform, full face preserved. Covers desktop and mobile. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__avatar-wrap {
  background: #050505 !important;
}

/* Make the hero panel SQUARE (1:1) to match Sofía's square Simli video, so the
   video fills it edge-to-edge with NO letterbox side bars (no crop, no deform).
   Sized to the smaller of the available height and the left-column width budget
   so it always fits. Desktop only — mobile keeps its own full-width 44vh panel. */
@media (min-width: 901px) {
  body.sofia-hero-mode:not(.scanner-results-hero) .sofia3d.sofia3d.sofia3d.sofia3d {
    aspect-ratio: 1 / 1 !important;
    height: min(calc(100vh - 128px), calc(58vw - 48px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* Results screen: hide the "Escaneo completo" status pill. It sits BEHIND the
   avatar and only its emerald-green top edge peeked above as a green strip. The
   main "Resultados & Match" header already confirms completion. visibility:hidden
   (not display:none) keeps its layout box so avatar/stage spacing is unchanged. */
body.scanner-results-hero .scanner-results-complete-row {
  visibility: hidden !important;
}

/* When the live WebRTC avatar isn't up (connecting, or WebRTC unavailable — e.g.
   iOS in-app browsers / content blockers), show a subtle "Cargando…" in the dark
   panel instead of a black box. NO static photo (user dislikes it). When live, the
   video covers and this is removed. Consult + results hero panels only. */
body.sofia-hero-mode .sofia3d:not(.sofia3d--live):not(.sofia3d--fallback):not(.sofia3d--idle-orb) .sofia3d__avatar-wrap::after {
  content: "Cargando\2026";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 214, 197, 0.6);
  font: 500 13px/1.4 var(--font-text, system-ui, sans-serif);
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 1;
  animation: sofia-loading-pulse 1.6s ease-in-out infinite;
}
@keyframes sofia-loading-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* Results screen: contain instead of cover so Sofia is fully visible.
   Applied to ALL visual layers (stream + static + canvas) so they align. */
body.scanner-results-hero .sofia3d.sofia3d .sofia3d__live-stream,
body.scanner-results-hero .sofia3d.sofia3d .sofia3d__hero-video-source,
body.scanner-results-hero .sofia3d.sofia3d .sofia3d__pose-img,
body.scanner-results-hero .sofia3d.sofia3d .sofia3d__avatar-canvas,
body.scanner-results-hero .sofia3d.sofia3d .sofia3d__hero-canvas {
  object-fit: contain !important;
  object-position: center top !important;
}

/* Soft radial mask on the active stream — feathers the edges so the avatar
   blends into the dark cinematic background instead of having a hard box. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__live-stream,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__hero-video-source {
  mask-image: radial-gradient(ellipse 80% 90% at center, #000 65%, rgba(0,0,0,0.7) 85%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at center, #000 65%, rgba(0,0,0,0.7) 85%, transparent 100%);
}

/* Hide ALL chrome that doesn't belong in the hero stage. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__orb,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__orb-btn,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__orb-caption,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__hint,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__voice-label,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__error,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__bubble,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__bubble-tail,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-header,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-title,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-close,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-body,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-hint,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-input,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__chat-panel,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__voice-ring,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__pulse,
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__live-badge,
/* Floating mic + speaker mute buttons that were still showing on top of
   Sofía's video — these live inside .sofia3d itself, NOT inside the wrap. */
body.sofia-hero-mode .sofia3d.sofia3d .sofia3d__btn,
body.sofia-hero-mode .sofia3d.sofia3d > button,
/* In-app browser fallback dialog (Instagram webview blocks WebRTC). */
body.sofia-hero-mode .sofia3d.sofia3d [role="dialog"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCANNER CINEMATIC — Sofía + tablet video as the scanning surface
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide Sofía's floating widget completely during the scanning phase.
   The cinematic video IS Sofía's presence here — having the widget on
   top would break the illusion of Sofía physically holding the tablet. */
body.scanner-cinematic-active .sofia3d {
  display: none !important;
}

.scanner-cinematic {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.scanner-cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Desktop: cover (no letterbox).  object-position center 45% gives the
     tablet center a slight upward lift on tall viewports so it stays in the
     viewable area when the freeze-zoom lands. */
  object-fit: cover;
  object-position: center 45%;
  background: #000;
  pointer-events: none;
  /* zoom from tablet center (TABLET_BOX center ≈ x 50.3%, y 58%) */
  transform-origin: 50% 58%;
  transition: transform 0.95s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Desktop freeze zoom — larger.  Mobile gets a smaller zoom (rule below)
   so the tablet doesn't push past the viewport edges. */
.scanner-cinematic.is-frozen .scanner-cinematic-video {
  transform: scale(1.40);
}
@media (max-width: 768px) {
  .scanner-cinematic-video {
    /* Mobile portrait: COVER so there are no black bars top/bottom.
       The video is wider than the viewport so the left/right edges of
       Sofía's surroundings get cropped, but the tablet (centered in the
       video composition) stays visible. object-position is irrelevant
       here because the horizontal overflow is symmetric center-cropped
       by default. */
    object-fit: cover;
    /* Anchor the freeze-zoom on the tablet center so the tablet area
       enlarges in place — avoids the tablet sliding off-screen during
       the scale transition. */
    transform-origin: 50.25% 57.9%;
  }
  .scanner-cinematic.is-frozen .scanner-cinematic-video {
    /* Slightly less aggressive zoom on mobile — the cover crop already
       fills the viewport; over-zooming pushes the bezel off-screen. */
    transform: scale(1.30);
  }
}
.scanner-cinematic-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 90%, rgba(0,0,0,0.7) 100%);
}

/* Tablet screen stage — visibility toggles via inline style (no React
   remount). Children (the scanner UI with its camera videoRef) stay
   mounted continuously across the freeze transition, preserving stream. */
.scanner-cinematic-tablet {
  z-index: 10;
  border-radius: 4px;
  overflow: hidden;
}
.scanner-cinematic-tablet.is-revealed {
  animation: scanner-tablet-bloom 0.6s cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes scanner-tablet-bloom {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0);   }
}

/* When the tablet stage is showing the actual scanner content, neutralize
   the inherited "scanning UI" wrapper styles so the children fit cleanly
   inside the tablet box.  The wrapper from FaceScanner expects to fill a
   viewport-sized area — we shrink it to the tablet bounds. */
.scanner-cinematic-tablet.is-revealed > * {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}
.scanner-cinematic-tablet.is-revealed header,
.scanner-cinematic-tablet.is-revealed aside,
.scanner-cinematic-tablet.is-revealed .vfx-orbit,
.scanner-cinematic-tablet.is-revealed .vfx-particles {
  display: none !important;
}
/* The FaceScanner inner div has a fixed minHeight:560 + flex centering that
   pushes the oval to viewport center. Override so it fills the tablet box. */
.scanner-cinematic-tablet.is-revealed > div > div {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}
/* The 280×360 oval container inside FaceScanner — scale it down to fit. */
.scanner-cinematic-tablet.is-revealed [style*="width:280px"],
.scanner-cinematic-tablet.is-revealed [style*="width: 280px"] {
  transform: scale(0.65) !important;
  transform-origin: center center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCANNER RESULTS — Sofía-hero STACKED layout (top-center banner)
   ───────────────────────────────────────────────────────────────────────
   The consult-prep surface uses sofia-hero-mode with a SPLIT layout
   (Sofía left, form panel right). The results surface needs the SAME
   hero treatment (mask, chrome hidden, large avatar) but STACKED — Sofía
   as a top banner above the metrics grid + network card + BVP waveform.

   We additionally apply `body.scanner-results-hero` and override only the
   position/size properties of the base hero-mode rule. Sextuple-class
   selector (.sofia3d × 6, specificity (0,0,7,1)) beats the existing
   quintuple mobile override (0,0,6,1) and the quadruple desktop override
   (0,0,5,1) at every breakpoint, so source order doesn't matter.
   ═══════════════════════════════════════════════════════════════════════ */

/* position: absolute (NOT fixed) anchors Sofía to the document, so she
   scrolls WITH the page instead of sticking to the viewport. Same lesson
   as the consult-prep mobile rule + memory [[feedback_lazy_uselocalstorage_contextual_guard]].
   Top coord is calibrated to land Sofía inside the stage anchor block
   (which sits right after the header in JSX). */
body.scanner-results-hero .sofia3d.sofia3d.sofia3d.sofia3d.sofia3d.sofia3d {
  position: absolute !important;
  /* Top calibrated for the new layout: 84px header + ~52px complete-row
     + 12px breathing = 148. The "Escaneo completo" pill now lives in its
     own centered row between header and Sofía. */
  top: 148px !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  /* Cinematic full-bleed banner — covers nearly the entire viewport width
     with soft mask fade on edges. */
  width: 95vw !important;
  height: min(44vh, 440px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 40 !important;
  transform: translateX(-50%) !important;
  --drag-x: 0px !important;
  --drag-y: 0px !important;
  animation: none !important;
  transition: opacity 0.4s ease !important;
  cursor: default !important;
  touch-action: auto !important;
}

@media (max-width: 900px) {
  body.scanner-results-hero .sofia3d.sofia3d.sofia3d.sofia3d.sofia3d.sofia3d {
    position: absolute !important;
    /* Mobile header is now narrower (only back+logo+SESSION, pill moved
       out). Worst case ~100px tall. + ~48 complete-row + 16 breathing
       = 164. Bump to 180 for safety on phones with SESSION wrap. */
    top: 180px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 94vw !important;
    height: min(32vh, 280px) !important;
  }
}

/* Centered row holding the "Escaneo completo" status pill. Sits in normal
   flow between header (above) and stage anchor (below). The pill itself
   uses the global .pill class so border/typography stay consistent. */
.scanner-results-complete-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 14px;
  z-index: 2;
}

/* Anchor block reserving vertical room for Sofía. Sits in normal flow
   AFTER the complete-row — its margin-top is just a small gap; the
   pill row + header above already push it down to ~140px from page top. */
.scanner-results-sofia-stage {
  position: relative;
  width: 100%;
  height: min(44vh, 440px);
  margin: 12px 0 28px;
  pointer-events: none;
}
@media (max-width: 900px) {
  .scanner-results-sofia-stage {
    height: min(32vh, 280px);
    margin: 16px 0 20px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PROCESSING SCREEN — hide Sofía orb completely.
   Same display:none pattern as scanner-cinematic-active. The ~5s spinner
   surface is focused on the rPPG pipeline stages ticking — Sofía's orb
   in the corner there looked out of place and broke the visual focus.
   ─────────────────────────────────────────────────────────────────────── */
body.scanner-processing-active .sofia3d {
  display: none !important;
}

/* Payment screen — the background video IS Sofía pointing. Having the
   floating widget Sofía on top of video Sofía = two Sofías visual chaos. */
body.payment-active .sofia3d {
  display: none !important;
}

/* Light-theme input used by PaymentMethodModal in Mi perfil. The payment
   screen uses its own `.payment-screen-input` since it sits over a dark
   video background. */
.input {
  background: #fff;
  border: 1px solid var(--ink-200, rgba(0,0,0,0.12));
  color: var(--ink-900, #0d1413);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-text, system-ui, sans-serif);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.input.mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.04em;
}
.input:focus {
  border-color: #8FA992;
  box-shadow: 0 0 0 3px rgba(143,169,146,0.18);
}
.input::placeholder {
  color: rgba(0,0,0,0.30);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAYMENT SCREEN — Sofía-pointing video freeze + card form panel
   ───────────────────────────────────────────────────────────────────────
   Higgsfield clip plays once then freezes on its final frame (timing is
   duration-relative). Desktop/tablet (>768px) get the landscape clip with
   the card panel RIGHT where Sofía points; phones (≤768px) get the vertical
   clip with the card CENTERED. Panel slides in ~0.8s before the freeze.
   ═══════════════════════════════════════════════════════════════════════ */

.payment-screen {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  background: #050a09;
  color: #fff;
  font-family: var(--font-text);
  /* overflow-x: hidden critical — prevents the horizontal scrollbar that
     showed up on narrow mobile when an interior element edged past 100vw. */
  overflow-x: hidden;
  overflow-y: auto;
}
.payment-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* ── Feet fix (desktop only, scoped) ──────────────────────────────────
   Wide windows (aspect > ~2.2) already crop Sofía's feet off the bottom via
   object-fit:cover — the intended framing, left untouched. On narrower
   DESKTOP windows (laptops/MacBook in 16:10 or 16:9) cover fills the height
   and her feet stay in frame. Lift the video from the top so the feet drop
   out of view, matching the knees-up framing wide screens get. Scoped so it
   never touches phones (min-width) nor the already-correct wide views
   (max-aspect-ratio) — their dimensions stay exactly as they were. The card
   panel scrolls internally (overflow-y:auto), so clipping the screen here is
   safe. */
@media (min-width: 1024px) and (max-aspect-ratio: 11 / 5) {
  .payment-screen { overflow: hidden; }
  .payment-screen-video {
    /* New desktop clip is framed waist-up (no feet), so the legacy feet-crop
       lift is disabled — lifting would clip Sofía's head. */
    transform: none;
  }
}
/* Veil — lifts contrast on the right (where the card sits) while leaving
   Sofía side mostly visible. Subtle vignette + right-side darker wash. */
.payment-screen-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,20,19,0.15) 0%, rgba(13,20,19,0.05) 35%, rgba(13,20,19,0.55) 65%, rgba(13,20,19,0.78) 100%),
    radial-gradient(circle at 30% 50%, transparent 25%, rgba(13,20,19,0.25) 80%);
}

.payment-screen-header {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
}
.payment-screen-back {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.payment-screen-back:hover { background: rgba(255,255,255,0.16); }
.payment-screen-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(196,214,197,0.14);
  border: 1px solid rgba(196,214,197,0.28);
  color: #C4D6C5;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.payment-screen-panel {
  position: absolute;
  right: 0;
  top: 80px;
  bottom: 0;
  width: 46vw;
  max-width: 520px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 40px 32px 16px;
  overflow-y: auto;
  /* Hidden until Sofía's finger is about to arrive — sync'd via the
     [data-revealed="true"] state set in payment.jsx at ~3.8s of video. */
  opacity: 0;
  transform: translateX(48px) scale(0.985);
  transition:
    opacity 0.65s cubic-bezier(.25,.85,.35,1),
    transform 0.75s cubic-bezier(.25,.85,.35,1);
  will-change: opacity, transform;
  pointer-events: none;
}
.payment-screen[data-revealed="true"] .payment-screen-panel {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.payment-screen-panel-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Naturally integrated: very low-opacity warm-tinted fill that lets the
     hospital corridor (warm white walls + sage benches) bleed through. Heavy
     blur softens detail behind so text stays readable. Border barely there
     so the card reads as polished glass mounted on the wall — NOT a popup. */
  background:
    linear-gradient(165deg, rgba(244, 240, 230, 0.06), rgba(196, 214, 197, 0.04)),
    rgba(13, 20, 19, 0.08);
  backdrop-filter: blur(32px) saturate(125%);
  -webkit-backdrop-filter: blur(32px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  padding: 28px 28px 26px;
  box-shadow:
    0 40px 90px -28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}

.payment-screen-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C4D6C5;
  font-weight: 700;
  margin-bottom: 10px;
}
.payment-screen-title {
  font-family: 'Inria Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: #fff;
}

.payment-screen-amount-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wrap lets the discount row (flex-basis:100%) drop to its own line
     inside the same box without touching the label|amount row. */
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(196,214,197,0.10), rgba(232,185,138,0.10));
  border: 1px solid rgba(196,214,197,0.22);
  margin-bottom: 18px;
}
.payment-screen-amount-label {
  font-size: 13px;
  font-weight: 600;
  /* Forest ink, not white: the amount-card sits on the LIGHTEST patch of the
     frosted panel (its own cream tint over the bright corridor walls), where
     white text washed out — user reported "gris muy clarito, no se lee". */
  color: #0A2C15;
  letter-spacing: -0.005em;
}
.payment-screen-amount-sub {
  font-size: 11.5px;
  color: rgba(10,44,21,0.75);
  margin-top: 3px;
}
.payment-screen-amount-value {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 22px;
  font-weight: 700;
  /* Forest ink on the light cream chip. The old solid-white + dark drop-shadow
     assumed a dark backdrop, but on the bright corridor video the frosted card
     reads light, so white blended out. Dark ink + faint light emboss lifts it
     off the milky glass. */
  color: #0A2C15;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Discount code row — lives INSIDE the amount card, below the label|amount
   row. UI-only for now (demo; not wired to Stripe). */
.payment-screen-discount {
  flex-basis: 100%;
  /* min-width:0 kills the flex-item auto minimum — without it Chromium floors
     the row at the input's intrinsic size-attr width (~236px) and the row
     overflows the amount card on phones. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(196,214,197,0.18);
}
/* ★ El sistema lee UN SOLO codigo (2026-09-09) y se dice ANTES de teclear el segundo: quien tenia
   el convenio de su empresa y probaba una promo veia subir el precio sin explicacion.
   La nota es HERMANA del label, no su hija: dentro del <label> pasaba a formar parte del nombre
   accesible del campo (el input va anidado, sin for/id) y el parrafo entero se volvia zona de clic.
   Baja a su propia linea con flex-basis:100% dentro de .payment-screen-amount-card, que ya es flex
   con wrap; el label y el importe siguen compartiendo la linea de arriba. */
.payment-screen-discount-note {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(10,44,21,0.62);
  margin-top: -2px;
}
.payment-screen-discount-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(10,44,21,0.72);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.payment-screen-discount-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(13,20,19,0.34);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.payment-screen-discount-input:focus {
  border-color: rgba(196,214,197,0.55);
  background: rgba(13,20,19,0.46);
}
.payment-screen-discount-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.payment-screen-saved {
  margin-bottom: 18px;
}
.payment-screen-saved-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}
.payment-screen-saved-brand {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #C4D6C5, #E8B98A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0d1413;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.payment-screen-saved-info { flex: 1; min-width: 0; }
.payment-screen-saved-last4 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.06em;
}
.payment-screen-saved-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.payment-screen-change-link {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.payment-screen-change-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.payment-screen-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.payment-screen-row3 {
  display: grid;
  /* minmax(0, 1fr) — CRITICAL. Default `1fr` resolves to `minmax(auto, 1fr)`
     which lets columns grow beyond 1fr when content's intrinsic min is
     larger. Input intrinsic = ~200px from default `size=20` + padding, so
     3 cols × 200px = 620px > panel inner (~408px) → overflow right + page
     horizontal scrollbar. `minmax(0, 1fr)` lets columns shrink below
     intrinsic so the grid stays inside the panel. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.payment-screen-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* min-width: 0 needed so flex/grid children shrink below their content's
     intrinsic min — without this, the inputs anchor a min-width that bursts
     the parent. */
  min-width: 0;
}
.payment-screen-field-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.payment-screen-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-text);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  /* Fill the grid/flex cell precisely; min-width:0 + box-sizing: border-box
     ensure padding + border DON'T add to the computed width and overflow. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.payment-screen-input.mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.04em;
}
.payment-screen-input:focus {
  border-color: rgba(196,214,197,0.55);
  background: rgba(255,255,255,0.10);
}
.payment-screen-input::placeholder {
  color: rgba(255,255,255,0.30);
}

.payment-screen-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  user-select: none;
}
.payment-screen-toggle input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: #8FA992;
  cursor: pointer;
}

.payment-screen-back-saved {
  background: transparent;
  border: none;
  color: #C4D6C5;
  font-size: 12px;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
}
.payment-screen-back-saved:hover { color: #fff; }

.payment-screen-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #C4D6C5, #8FA992);
  color: #0d1413;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow:
    0 18px 40px -10px rgba(143,169,146,0.55),
    inset 0 1px 0 rgba(255,255,255,0.30);
  transition: transform 0.2s, box-shadow 0.2s;
}
.payment-screen-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 48px -12px rgba(143,169,146,0.70),
    inset 0 1px 0 rgba(255,255,255,0.40);
}
.payment-screen-cta:active { transform: translateY(0); }
.payment-screen-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 12px 24px -6px rgba(143,169,146,0.20);
}
.payment-screen-error {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(220,60,60,0.14);
  color: #ff8a8a;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

.payment-screen-disclaimer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* Mobile / narrow viewport — drop the side panel layout, stack everything
   over the video. Video stays as a full-bleed backdrop, the form sits as
   a bottom-anchored sheet so the user can still see Sofía above it.
   CRITICAL: width MUST be explicit `auto` to override the desktop 46vw,
   otherwise the panel keeps its 46vw width and overflows past the viewport
   (the source of the horizontal scrollbar bug user reported). */
@media (max-width: 768px) {
  .payment-screen-header {
    padding: 14px 16px;
  }
  .payment-screen-secure span {
    display: none;
  }
  .payment-screen-secure {
    padding: 8px 10px;
  }
  .payment-screen-back {
    width: 36px; height: 36px;
  }
  .payment-screen-panel {
    /* Centered card overlay (user request). The mobile clip is vertical with
       Sofía in the upper third, so a vertically-centered card sits below her
       face over the open reception area she presents toward. */
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(92vw, 440px) !important;
    max-width: 92vw !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    /* Hidden: nudged down + scaled; slides up into place on reveal. The
       -50%,-50% keeps it centered (left/top:50% anchor the top-left corner). */
    transform: translate(-50%, calc(-50% + 28px)) scale(0.985);
  }
  .payment-screen[data-revealed="true"] .payment-screen-panel {
    transform: translate(-50%, -50%) scale(1);
  }
  .payment-screen-veil {
    /* Centered panel → shift the contrast wash from the right edge to a soft
       central/bottom vignette so the card reads over the vertical clip. */
    background:
      linear-gradient(180deg, rgba(13,20,19,0.12) 0%, rgba(13,20,19,0.04) 28%, rgba(13,20,19,0.50) 100%),
      radial-gradient(circle at 50% 60%, transparent 32%, rgba(13,20,19,0.34) 86%) !important;
  }
  .payment-screen-panel-inner {
    padding: 20px 18px 22px !important;
    border-radius: 20px !important;
    max-height: 76vh;
    overflow-y: auto;
    box-sizing: border-box;
    /* Slight bump on the warm tint for mobile — most phone OLED render
       glass overlays slightly darker than desktop LCD, lifting the fill
       keeps the apothecary cream-sage feel readable. */
    background:
      linear-gradient(165deg, rgba(244, 240, 230, 0.08), rgba(196, 214, 197, 0.05)),
      rgba(13, 20, 19, 0.10) !important;
  }
  .payment-screen-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
  }
  .payment-screen-title {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .payment-screen-amount-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .payment-screen-amount-label {
    font-size: 12.5px;
  }
  .payment-screen-amount-sub {
    font-size: 11px;
  }
  .payment-screen-amount-value {
    font-size: 22px;
  }
  .payment-screen-row3 {
    /* Tight 3-col still — phones >340px fit thanks to minmax(0). */
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap: 8px;
  }
  .payment-screen-input {
    /* Larger touch target on mobile — banking inputs should be tappable. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 13px;
    font-size: 15px; /* >=16px on iOS prevents zoom-on-focus; 15 still fine for short cells */
  }
  .payment-screen-field {
    min-width: 0;
  }
  .payment-screen-field-label {
    font-size: 10px;
  }
  .payment-screen-toggle {
    font-size: 13px;
    margin-top: 4px;
  }
  .payment-screen-saved-row {
    padding: 12px 14px;
    gap: 10px;
  }
  .payment-screen-saved-brand {
    width: 38px; height: 38px;
  }
  .payment-screen-cta {
    padding: 16px 18px;
    font-size: 15px;
    border-radius: 14px;
    margin-top: 4px;
  }
}

/* iOS prevent input zoom — font-size must be ≥16px on the field actually
   tapped. Card number field is the biggest culprit (long input). Bump it
   to 16px ONLY on iOS-detection-ish narrow viewports. */
@media (max-width: 600px) {
  .payment-screen-input {
    font-size: 16px;
  }
  .payment-screen-discount-input {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WAITING ROOM — Sofía-hero TV banner + split background zones
   ───────────────────────────────────────────────────────────────────────
   Same hero pattern as scanner-results-hero (full-bleed banner top-center,
   static / absolute / scrolls with document) but tuned for the waiting
   surface. Plus split background: top zone solid dark, bottom zone has
   the Higgsfield "Sofía walking through the waiting room" loop video.
   ═══════════════════════════════════════════════════════════════════════ */

body.waiting-room-hero .sofia3d.sofia3d.sofia3d.sofia3d.sofia3d.sofia3d {
  position: absolute !important;
  /* Top: 84px header + ~52px complete-row + 12px breathing = 148. */
  top: 148px !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  width: 95vw !important;
  height: min(44vh, 440px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 40 !important;
  transform: translateX(-50%) !important;
  --drag-x: 0px !important;
  --drag-y: 0px !important;
  animation: none !important;
  transition: opacity 0.4s ease !important;
  cursor: default !important;
  touch-action: auto !important;
}

@media (max-width: 900px) {
  body.waiting-room-hero .sofia3d.sofia3d.sofia3d.sofia3d.sofia3d.sofia3d {
    position: absolute !important;
    top: 180px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 94vw !important;
    height: min(32vh, 280px) !important;
  }
}

/* TOP ZONE — solid dark surface holding header + pill + Sofía banner +
   hint + timer + h1 + sub. Acts as a "stage" with depth via blob layers. */
.waiting-shell {
  background: #0d1413;
}
.waiting-top-zone {
  position: relative;
  background: radial-gradient(ellipse at 50% 30%, #1f2827 0%, #0d1413 75%);
  overflow: hidden;
  padding-bottom: 24px;
}
.waiting-top-zone-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 60%, rgba(143,169,146,0.06), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(232,185,138,0.04), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.waiting-top-zone-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.waiting-top-zone-blob--cool {
  top: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(196,214,197,0.20), transparent 60%);
  animation: float 8s ease-in-out infinite;
}
.waiting-top-zone-blob--warm {
  bottom: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(232,185,138,0.16), transparent 60%);
  animation: float 10s ease-in-out infinite reverse;
}

/* Centered row holding "Buscando médico disponible" status pill. */
.waiting-complete-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 14px;
  z-index: 2;
}

/* Sofía hero anchor block — reserves vertical room for the absolute-positioned
   widget, hint pill sits at the bottom of this stage. */
.waiting-sofia-stage {
  position: relative;
  width: 100%;
  height: min(44vh, 440px);
  margin: 12px 0 36px;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .waiting-sofia-stage {
    height: min(32vh, 280px);
    margin: 16px 0 28px;
  }
}

.waiting-sofia-hint {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(13, 20, 19, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(196, 214, 197, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 50;
  pointer-events: auto;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(196, 214, 197, 0.08) inset;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.waiting-sofia-hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C4D6C5;
  box-shadow: 0 0 12px rgba(196, 214, 197, 0.85);
  animation: consult-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .waiting-sofia-hint {
    font-size: 11.5px;
    padding: 9px 14px;
    white-space: normal;
    text-align: center;
    max-width: calc(100vw - 24px);
  }
}

/* BOTTOM ZONE — Higgsfield "Sofía walking" loop fills the area behind
   stages timeline + sidebar cards. Cards sit on top with their own
   white surface so legibility is preserved. */
.waiting-bottom-zone {
  position: relative;
  overflow: hidden;
  background: #0d1413;
  padding-top: 24px;
}
.waiting-bottom-zone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
/* Dark gradient veil over the video — softens for legibility of cards
   on top, also feathers the top edge so the transition from solid-top-zone
   to video-bottom-zone reads as a single page, not a hard cut. */
.waiting-bottom-zone-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,20,19,0.55) 0%, rgba(13,20,19,0.20) 24%, rgba(13,20,19,0.30) 60%, rgba(13,20,19,0.75) 100%),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(13,20,19,0.40) 100%);
  pointer-events: none;
  z-index: 1;
}

.scanner-results-sofia-hint {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(13, 20, 19, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(196, 214, 197, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 50;
  pointer-events: auto;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(196, 214, 197, 0.08) inset;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.scanner-results-sofia-hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C4D6C5;
  box-shadow: 0 0 12px rgba(196, 214, 197, 0.85);
  animation: consult-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .scanner-results-sofia-hint {
    font-size: 12px;
    padding: 9px 14px;
    white-space: normal;
    text-align: center;
    max-width: calc(100vw - 24px);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE-ONLY HERO CTAs (added 2026-05-22)
   ─────────────────────────────────────────────────────────────────────────
   Two mobile-only CTA blocks that lift the primary action to the top of the
   panel, so users don't have to scroll/hunt for the button on phones:

   1. .consult-prep-cta-top-slot  →  inside CameraIntroScreen panel, BEFORE
      the "Antes de la consulta" eyebrow. Disabled until motivo de consulta
      is non-empty; hint message appears underneath.

   2. .scanner-results-mobile-cta →  inside ScannerResults, BETWEEN Sofía's
      stage and the "Escaneo completo" eyebrow. Clicking calls onContinue
      same as the desktop button inside NetworkAvailability card.

   Desktop layout is unchanged: these slots default to display:none and only
   render at @media (max-width: 768px). The bottom desktop CTAs are hidden
   in the same media query so we never get two duplicate buttons.
   ───────────────────────────────────────────────────────────────────────── */

.consult-prep-cta-top-slot { display: none; }
.scanner-results-mobile-cta { display: none; }

@media (max-width: 768px) {
  /* ─── CameraIntroScreen — top CTA + disabled hint ─────────────────────── */
  .consult-prep-cta-top-slot {
    display: block;
    margin-bottom: 18px;
  }
  .consult-prep-cta--top {
    box-shadow: 0 14px 38px rgba(196,214,197,0.32), inset 0 1px 0 rgba(255,255,255,0.30);
  }
  .consult-prep-cta--top:disabled,
  .consult-prep-cta--top[aria-disabled="true"] {
    background: linear-gradient(135deg, rgba(196,214,197,0.28) 0%, rgba(181,201,183,0.28) 100%);
    color: rgba(255,255,255,0.55);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  .consult-prep-cta--top:disabled:hover,
  .consult-prep-cta--top[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: none;
  }
  .consult-prep-cta-hint {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(193,139,94,0.12);
    border: 1px solid rgba(193,139,94,0.28);
    color: #E8B98A;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.45;
    font-weight: 500;
  }
  .consult-prep-panel-inner > .consult-prep-cta:not(.consult-prep-cta--top),
  .consult-prep-panel-inner > .consult-prep-cta-hint {
    display: none;
  }
  /* The desktop "skip scan" link lives next to the bottom CTA; hide it on mobile
     — the top-slot skip link shows there instead (no duplicate). */
  .consult-prep-panel-inner > .consult-prep-skip {
    display: none !important;
  }

  /* ─── ScannerResults — top "Conectar con médico" CTA ──────────────────── */
  .scanner-results-mobile-cta {
    display: block;
    padding: 4px 16px 8px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .scanner-results-mobile-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #C4D6C5 0%, #B5C9B7 100%);
    color: #0d1413;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 14px 38px rgba(196,214,197,0.32), inset 0 1px 0 rgba(255,255,255,0.30);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--font-text);
  }
  .scanner-results-mobile-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(196,214,197,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
  }
  .scanner-results-mobile-cta-btn:active { transform: translateY(0); }
  .scanner-results-mobile-cta-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  .scanner-results-mobile-cta-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(196,214,197,0.85);
  }
  .scanner-results-mobile-cta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5a9d6a;
    box-shadow: 0 0 8px #5a9d6a;
    animation: pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .scanner-results-network-card-btn {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   EXIT CONFIRMATION MODAL — Waiting screen (added 2026-05-22)
   ─────────────────────────────────────────────────────────────────────────
   Appears when the user clicks the X in the waiting-room header. The consult
   fee is already paid by this stage, so we surface a deliberate confirmation
   instead of dumping them straight to dashboard.

   Aesthetic: dark glass card centered over a blurred backdrop, terracota
   accent (warning palette), sage Inria Serif title (editorial). Mirrors the
   brand language used across CameraIntroScreen + ScannerResults.
   ───────────────────────────────────────────────────────────────────────── */

.waiting-exit-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 14, 13, 0.72);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  animation: waiting-exit-backdrop-in 0.22s ease-out;
}

@keyframes waiting-exit-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.waiting-exit-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, rgba(20, 28, 26, 0.96), rgba(13, 20, 19, 0.96));
  border: 1px solid rgba(193, 139, 94, 0.28);
  border-radius: 22px;
  padding: 32px 28px 26px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(232, 185, 138, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  text-align: center;
  color: #fff;
  animation: waiting-exit-card-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes waiting-exit-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.waiting-exit-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(193, 139, 94, 0.22), rgba(193, 139, 94, 0.05) 70%);
  color: #E8B98A;
  border: 1px solid rgba(193, 139, 94, 0.30);
  box-shadow: 0 0 24px rgba(193, 139, 94, 0.18);
}

.waiting-exit-modal-title {
  font-family: var(--font-display, 'Inria Serif'), serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 12px;
}

.waiting-exit-modal-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 24px;
  font-family: var(--font-text, 'Inter'), sans-serif;
}

.waiting-exit-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waiting-exit-modal-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  font-family: var(--font-text, 'Inter'), sans-serif;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.waiting-exit-modal-btn--stay {
  background: linear-gradient(135deg, #C4D6C5 0%, #B5C9B7 100%);
  color: #0d1413;
  box-shadow: 0 10px 28px rgba(196, 214, 197, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.waiting-exit-modal-btn--stay:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(196, 214, 197, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.waiting-exit-modal-btn--stay:active { transform: translateY(0); }
.waiting-exit-modal-btn--stay:focus-visible {
  outline: 2px solid #E8B98A;
  outline-offset: 3px;
}

.waiting-exit-modal-btn--leave {
  background: rgba(193, 139, 94, 0.10);
  color: #E8B98A;
  border: 1px solid rgba(193, 139, 94, 0.36);
}
.waiting-exit-modal-btn--leave:hover {
  background: rgba(193, 139, 94, 0.18);
  border-color: rgba(193, 139, 94, 0.55);
}
.waiting-exit-modal-btn--leave:active { transform: translateY(0); }
.waiting-exit-modal-btn--leave:focus-visible {
  outline: 2px solid #E8B98A;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .waiting-exit-modal-backdrop { padding: 16px; }
  .waiting-exit-modal { padding: 26px 22px 22px; border-radius: 20px; }
  .waiting-exit-modal-icon { width: 56px; height: 56px; margin-bottom: 14px; }
  .waiting-exit-modal-title { font-size: 19px; }
  .waiting-exit-modal-body { font-size: 13.5px; margin-bottom: 20px; }
  .waiting-exit-modal-btn { padding: 13px 18px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SOFIA BRAIN MODE — neural network video replaces LiveAvatar
   in the waiting room. Timer overlaid on dark core.
   ═══════════════════════════════════════════════════════════════════ */
.waiting-brain-stage {
  position: relative;
  width: 100%;
  background: #0a0c0a;
  min-height: 460px;
  overflow: hidden;
}
/* Glowing energy ring as a halo centered around the countdown timer.
   Source clip is a centered ring on pure black; mix-blend screen drops the
   black so only the ring glows over the dark stage (no visible video box).
   Concentric with the absolutely-centered timer (shared stage center). */
.waiting-brain-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 40vw, 440px);
  height: clamp(320px, 40vw, 440px);
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  animation: waitingRingBreath 6s ease-in-out infinite;
}
@keyframes waitingRingBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.045); opacity: 1; }
}
@media (max-width: 600px) {
  .waiting-brain-stage { min-height: 380px; }
  .waiting-brain-video {
    width: clamp(300px, 84vw, 360px);
    height: clamp(300px, 84vw, 360px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-brain-video { animation: none; }
}

/* Spark overlay — CSS pseudo-particles that activate when Sofia speaks */
.waiting-brain-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,214,197,0) 30%, rgba(196,214,197,0.06) 60%, transparent 80%);
  mix-blend-mode: screen;
}
.waiting-brain-sparks.active {
  opacity: 1;
  animation: brainPulse 1.5s ease-in-out infinite;
}
.waiting-brain-sparks::before,
.waiting-brain-sparks::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.waiting-brain-sparks.active::before {
  background: radial-gradient(circle, rgba(232,185,138,0.25) 0%, transparent 70%);
  opacity: 1;
  animation: sparkFloat1 2s ease-in-out infinite;
}
.waiting-brain-sparks.active::after {
  background: radial-gradient(circle, rgba(196,214,197,0.2) 0%, transparent 70%);
  width: 280px;
  height: 280px;
  opacity: 1;
  animation: sparkFloat2 2.4s ease-in-out infinite 0.3s;
}

@keyframes brainPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes sparkFloat1 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-45%, -55%) scale(1.3); opacity: 1; }
}
@keyframes sparkFloat2 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-55%, -48%) scale(1.2); opacity: 0.9; }
}

/* Override hint positioning for brain mode (no longer absolute inside sofia-stage) */
.waiting-brain-stage + .waiting-hero-text .waiting-sofia-hint {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(13, 20, 19, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(196, 214, 197, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}


/* ── Sofía wake overlay ───────────────────────────────────────────────────────
   Shown over the avatar panel when the live session has gone to sleep
   (idle-orb: 3-min client idle collapse OR the Simli session ended server-side
   — max idle / max session length). One tap re-opens a fresh session. Replaces
   the dead black panel the user used to see. Hidden chrome rules for hero mode
   do NOT list this class on purpose — it must show in both widget and hero. */
.sofia3d__wake-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: radial-gradient(ellipse at 50% 42%, rgba(20, 28, 26, 0.55) 0%, rgba(8, 12, 11, 0.9) 78%);
  border-radius: inherit;
  cursor: pointer;
  text-align: center;
  padding: 14px;
  -webkit-tap-highlight-color: transparent;
}
.sofia3d__wake-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 214, 197, 0.65);
  position: relative;
  flex: 0 0 auto;
}
.sofia3d__wake-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #C4D6C5;
  opacity: 0.85;
}
.sofia3d__wake-ring::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(196, 214, 197, 0.3);
  animation: sofia-wake-pulse 2.2s ease-in-out infinite;
}
@keyframes sofia-wake-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.22); opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .sofia3d__wake-ring::after { animation: none; }
}
.sofia3d__wake-title {
  font: italic 400 14px/1.25 var(--font-display, 'Inria Serif', serif);
  color: #fff;
}
.sofia3d__wake-sub {
  font: 500 11px/1.4 var(--font-text, 'Inter', system-ui, sans-serif);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
}
body.sofia-hero-mode .sofia3d .sofia3d__wake-title { font-size: 21px; }
body.sofia-hero-mode .sofia3d .sofia3d__wake-sub { font-size: 13px; }

/* Sofía suspendida — en pantallas del escáner donde la sesión está gateada OFF
   (scanner-init / scanning / processing / proc-error / camera-error) el widget
   completo desaparece: ni panel de pausa, ni hint, ni controles. Mismo patrón
   que body.scanner-proc-error pero manejado desde el estado real del gate
   (streamingAllowed), así cubre TODAS las pantallas suspendidas, no solo el error. */
.sofia3d.sofia3d--suspended.sofia3d--suspended { display: none !important; }

/* Escaner: el SDK de NuraLogix le pone al <video> que inyecta un borde blanco de 1px
   (`element.style.border = "1px solid white"`, fijo en su codigo y sin opcion de apagarlo).
   El motor anterior no pintaba nada asi y esa linea desentona con la paleta v6: dentro de la
   tarjeta redondeada del escaner se ve como un recuadro. El provider tambien lo limpia por JS;
   esta regla existe para que no haya ni un frame de parpadeo antes de que corra. */
#mxcanvas > video { border: 0 !important; }