/* folio/folio.css
   ──────────────────────────────────────────────────────────────────
   Design system A · Brass aged · Geist + Geist Mono
   Tokens, base reset, y todas las clases .fi-* del Dashboard "Hoy".
   ────────────────────────────────────────────────────────────────── */

/* ═════════════ TOKENS · LIGHT ═════════════ */
:root {
  /* superficies */
  --bg:        #F5F2EB;
  --surface:   #FBF9F4;
  --surface-2: #EDE7D8;
  --surface-3: #E5DCBE;
  --line:      #DDD5C0;
  --line-soft: #E8E2D1;

  /* tinta */
  --ink:       #1B1812;
  --ink-2:     #44402F;
  --ink-3:     #79735F;
  --ink-4:     #A39C84;

  /* acento brass */
  --accent:    #8A6722;
  --accent-2:  #6E5119;
  --accent-soft:    #F0E6CC;
  --accent-soft-2:  #E8DAB1;

  /* alias retro-compat */
  --brass:     var(--accent);
  --brass-2:   var(--accent-2);
  --brass-soft:var(--accent-soft);

  /* semánticos */
  --green:     #2E6A3B;
  --green-soft:#DDE9DC;
  --red:       #9B3A2A;
  --red-soft:  #EEDCD4;
  --amber:     #B0832A;
  --amber-soft:#EEDFB7;
  --slate:     #355B6E;
  --slate-soft:#DCE5E9;

  /* shadow atmosférica */
  --shadow-1:  0 1px 2px rgba(27,24,18,.04), 0 1px 1px rgba(27,24,18,.02);
  --shadow-2:  0 8px 24px rgba(27,24,18,.06), 0 2px 6px rgba(27,24,18,.04);
  --shadow-hero: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px rgba(138,103,34,.16), 0 2px 6px rgba(138,103,34,.10);

  /* radii (grid 4) */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ═════════════ MOTION TOKENS · folio motion language v2 ═════════════ */
  /* ── Easings semánticos (Material 3 + Apple HIG hybrid) ── */
  --ease-emphasized:        cubic-bezier(.32, .72, 0, 1);    /* dominante en SideArt — 138× pre-refactor */
  --ease-emphasized-in:     cubic-bezier(.4, 0, 1, 1);       /* exits (acelera al desaparecer) */
  --ease-emphasized-out:    cubic-bezier(0, 0, .2, 1);       /* entries (decelera al aparecer) */
  --ease-standard:          cubic-bezier(.2, 0, 0, 1);
  --ease-standard-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-decelerate:        cubic-bezier(0, 0, .2, 1);
  --ease-accelerate:        cubic-bezier(.3, 0, 1, 1);
  --ease-overshoot:         cubic-bezier(.34, 1.56, .64, 1); /* badge bounce, micro-pop */
  --ease-anticipate:        cubic-bezier(.68, -.55, .27, 1.55);

  /* ── Spring approximations vía CSS linear() ── */
  /* Chrome 113+, Safari 17.4+, Firefox 112+ (~95% global may 2026).      */
  /* Fallback en @supports al final del bloque por si el browser no soporta */
  --spring-soft:    linear(0, 0.009, 0.035 2.4%, 0.082, 0.149 5.7%, 0.236, 0.341 9.6%, 0.462, 0.598 13.9%, 0.756 16.8%, 0.879 19.7%, 0.971 22.6%, 1.04 25.6%, 1.088, 1.116, 1.124 31.1%, 1.117 33.9%, 1.099, 1.075 39.6%, 1.046 44.4%, 1.018 49.9%, 0.997, 0.984 59.2%, 0.974 65.6%, 0.971 71.4%, 0.974, 0.984 88.8%, 0.998 100%);
  --spring-bouncy:  linear(0, 0.018, 0.072, 0.162, 0.288, 0.444, 0.625 12.4%, 0.823, 1.005, 1.16, 1.282 21.2%, 1.367, 1.42, 1.443 27.4%, 1.443, 1.422, 1.385 33.3%, 1.293 37.4%, 1.205, 1.131, 1.075 47.4%, 1.039, 1.018 56%, 1.006, 1.001 71.5%, 1.001 100%);
  --spring-snap:    linear(0, 0.027 3.2%, 0.106 6.4%, 0.226 9.7%, 0.378 13.0%, 0.55 16.4%, 0.73 19.8%, 0.908 23.4%, 1.077 27.0%, 1.231 30.7%, 1.365 34.5%, 1.475 38.5%, 1.557 42.6%, 1.609 46.9%, 1.629 51.4%, 1.617 56.2%, 1.576 61.4%, 1.51 67.1%, 1.421 73.4%, 1.317 80.6%, 1.205 89.0%, 1.094 100%);

  /* ── Durations semánticos ── */
  --dur-instant:       80ms;    /* hover state, micro feedback */
  --dur-quick:         140ms;   /* button press, focus ring */
  --dur-snappy:        220ms;   /* dropdown, tooltip, popover */
  --dur-moderate:      320ms;   /* slide transition, card stagger */
  --dur-deliberate:    480ms;   /* modal, drawer */
  --dur-cinematic:     720ms;   /* hero entry, SideArt mount */
  --dur-storytelling:  1200ms;  /* SVG path draw, multi-beat reveal */

  /* ── Distancias para slide-in / translate ── */
  --motion-dist-xs: 4px;
  --motion-dist-sm: 8px;
  --motion-dist-md: 16px;
  --motion-dist-lg: 32px;

  /* ── Blur tokens para crossfade ── */
  --motion-blur-soft:  4px;
  --motion-blur-base:  6px;
  --motion-blur-deep:  12px;

  /* ── Z-index orchestration (fix war silencioso del SideArt) ── */
  --z-art-bg:       0;
  --z-art-content:  1;
  --z-art-slide:    2;
  --z-art-floating: 3;  /* WhatsApp card, toast, banner */
  --z-art-tooltip:  4;
  --z-art-nav:      5;
  --z-art-pause-ui: 6;

  /* ── Legacy aliases — mantienen el comportamiento del código pre-v2 ── */
  --ease-in:  cubic-bezier(.2, 0, 0, 1);                /* alias raw (preservado) */
  --ease-out: cubic-bezier(.4, 0, .6, 1);               /* alias raw (preservado) */
  --motion-ease-out:    var(--ease-standard-out);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-fast:        var(--dur-quick);
  --motion-base:        var(--dur-moderate);
  --motion-slow:        var(--dur-deliberate);
  --motion-deliberate:  var(--dur-cinematic);
}

/* CSS linear() fallback para browsers <Chrome 113 / Safari 17.4 (~5% global) */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-soft:   var(--ease-emphasized);
    --spring-bouncy: var(--ease-overshoot);
    --spring-snap:   var(--ease-emphasized-out);
  }
}

/* ═════════════ PREFERS-REDUCED-MOTION · política unificada ═════════════
 * Política Folio (v2):
 *   1. Global blando: animations decorativas no se desactivan completamente
 *      (sería UI rota), se acortan a --dur-quick y limitan iteraciones a 1.
 *   2. Decorativas infinitas (status dots, shimmers, pulses): OFF.
 *   3. Slide transitions: solo opacity (sin transform/blur/filter).
 *   4. SVG draws: estado final inmediato (stroke-dashoffset: 0).
 *   5. Dots progress: instantáneo (scaleX: 1).
 *   6. Floating overlays (toasts, banners, WhatsApp card): visibles sin
 *      transform (NO display:none — la información sigue ahí).
 *   7. Count-ups y phase sequences: skip-to-end (vía hooks JS, ver
 *      use-count-up.ts y use-phase-sequence.ts).
 * ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Global blando: cualquier animación se acorta + no loopea */
  *, *::before, *::after {
    animation-duration: var(--dur-quick) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-quick) !important;
  }
  /* Decorativas infinitas: OFF (no aportan información) */
  .au2-status-dot::before,
  .au2-live-dot,
  .au2-pill.is-pulsing,
  .au2-shimmer,
  .au2-ag2-status-dot,
  .au2-rea2-pulse-dot,
  .au2-cal2-now-dot,
  .au2-ia3-fab.is-pulse,
  .au2-ia-spark::after { animation: none !important; }
  /* Slide transitions: solo opacity (sin transform/blur/filter, sin scale) */
  .au2-slide,
  .au2-foot-cap-item {
    transition: opacity var(--dur-snappy) linear !important;
    transform: none !important;
    filter: none !important;
  }
  /* SVG draws: revelados sin animación */
  .au2-fin-chart .au2-line,
  .au2-fin3-line {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .au2-fin-chart .au2-area,
  .au2-fin-chart .au2-end-dot,
  .au2-fin-chart .au2-tt-dot,
  .au2-fin-tooltip { opacity: 1 !important; transform: none !important; }
  /* Dots progress fill: estado final inmediato (no animación) */
  .au2-dot-fill,
  .au2-dot.is-active::after {
    animation: none !important;
    transform: scaleX(1) translateX(0) !important;
  }
  /* Floating overlays visibles sin transform (info preservada) */
  .au2-cal-banner,
  .au2-card-cal ~ .au2-ph-toast,
  .au2-card-cal ~ .au2-ph-wa,
  .au2-cal2-banner,
  .au2-cal2-toast,
  .au2-cal2-wa,
  .au2-fin3-badge,
  .au2-fin3-tip,
  .au2-rea2-foot,
  .au2-ag2-foot,
  .au2-wiz-done {
    opacity: 1 !important;
    transform: none !important;
  }
  .au-submit.is-hint { animation: none !important; }
}

/* ═════════════ TOKENS · DARK ═════════════ */
[data-theme="dark"] {
  --bg:        #14130F;
  --surface:   #1B1A14;
  --surface-2: #232017;
  --surface-3: #2C2818;
  --line:      #2F2B1F;
  --line-soft: #252118;

  --ink:       #E8E2D2;
  --ink-2:     #B5AE99;
  --ink-3:     #847E69;
  --ink-4:     #5A5446;

  --accent:    #C29553;
  --accent-2:  #DDB070;
  --accent-soft:   rgba(194,149,83,.14);
  --accent-soft-2: rgba(194,149,83,.24);
  --brass-soft:    rgba(194,149,83,.14);

  --green:     #7FB58D;
  --green-soft:rgba(127,181,141,.14);
  --red:       #D27F6A;
  --red-soft:  rgba(210,127,106,.14);
  --amber:     #D4A258;
  --amber-soft:rgba(212,162,88,.14);
  --slate:     #8FA9B6;
  --slate-soft:rgba(143,169,182,.14);

  --shadow-1:  0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-2:  0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);
  --shadow-hero: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 30px rgba(0,0,0,.5), 0 2px 6px rgba(194,149,83,.10);
}

/* ═════════════ BASE ═════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 240ms var(--ease-in), color 240ms var(--ease-in);
}
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; padding: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* A11y (audit 2026-06): keyboard focus for link-buttons (.fi-btn on <a>), role=button,
   and custom interactive widgets that aren't native <button> — the rule above only
   covered native <button>. */
.fi-btn:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Screen-reader-only utility (audit 2026-06) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
input  { font: inherit; color: inherit; border: 0; background: transparent; }
input:focus { outline: none; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: -.005em; }
.muted { color: var(--ink-3); }
.fi-mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: -.005em; }

/* ═════════════ APP SHELL ═════════════ */
.fi-app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
.fi-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fi-content {
  flex: 1;
  padding: 32px 40px 96px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ═════════════ SIDEBAR ═════════════ */
.fi-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.fi-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.fi-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--accent); color: #FBF9F4;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.fi-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fi-brand-text b { font-size: 16px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); }
.fi-brand-text span { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fi-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.fi-search-ico { color: var(--ink-3); display: flex; }
.fi-search input { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); }
.fi-search input::placeholder { color: var(--ink-4); }
.fi-kbd {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; background: var(--surface);
}

/* min-height:0 + overflow-y: en cuentas internas el sidebar apila OrgSwitcher +
   badge + EspecialidadSwitcher arriba del nav; en laptops (768px de alto) el
   nav scrollea en vez de clipear los links de abajo. */
.fi-nav { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
.fi-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  cursor: default;
  text-decoration: none;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fi-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.fi-nav-item.is-active {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.fi-nav-ico { display: flex; color: var(--ink-3); }
.fi-nav-item.is-active .fi-nav-ico { color: var(--accent); }
.fi-nav-lbl { flex: 1; }
.fi-nav-badge {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  padding: 1px 6px; border-radius: 99px;
  background: var(--accent); color: #FBF9F4; font-weight: 500;
}

/* ── Selector de organización · users con más de una membresía ──────────── */
.fi-org-switcher {
  margin: 8px 12px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.fi-org-switcher-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-3);
}
.fi-org-switcher select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 12px; font-weight: 500; line-height: 1.3;
  cursor: pointer;
}
.fi-org-switcher select:disabled { opacity: 0.6; cursor: default; }
.fi-org-switcher select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.fi-org-switcher-err { font-size: 10.5px; color: var(--red); }

/* ── Selector de especialidad · solo cuentas internas (demo/QA) ──────────── */
.fi-esp-switcher {
  margin: 8px 12px 0;
  padding: 8px 10px;
  border: 1px dashed var(--accent-warm, #d8b766);
  border-radius: var(--r-md);
  background: var(--surface-soft, #fff7e0);
  display: flex; flex-direction: column; gap: 6px;
}
.fi-esp-switcher-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-3);
}
.fi-esp-switcher-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.fi-esp-pill {
  flex: 1 1 auto;
  padding: 4px 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface, #fff);
  color: var(--ink-2);
  font-size: 11px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fi-esp-pill:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.fi-esp-pill.is-active {
  background: var(--accent); border-color: var(--accent); color: #FBF9F4; font-weight: 600;
}
.fi-esp-pill:disabled { opacity: 0.6; cursor: default; }
.fi-esp-pill-real { opacity: 0.7; }

.fi-side-bottom {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.fi-gcal {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.fi-gcal-ico { display: flex; }
.fi-gcal-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fi-gcal-text b { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.fi-gcal-text span { font-size: 10.5px; color: var(--ink-3); }
.fi-gcal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.fi-side-links { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.fi-link {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  font-size: 11.5px; color: var(--ink-3);
}
.fi-link:hover { color: var(--ink); }

/* ═════════════ PAGE HEADER ═════════════ */
.fi-eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.fi-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 28px;
}
.fi-page-head h1 {
  margin: 6px 0 0;
  font-size: 38px; font-weight: 600; letter-spacing: -.02em; line-height: 1.06;
  color: var(--ink);
}
.fi-page-sub {
  margin: 8px 0 0;
  font-size: 13.5px; color: var(--ink-3);
}
.fi-page-sub b { font-weight: 600; color: var(--ink); }
.fi-page-sub .fi-sep { margin: 0 8px; color: var(--ink-4); }
.fi-page-actions { display: flex; gap: 8px; }

/* ═════════════ BUTTONS ═════════════ */
.fi-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; letter-spacing: -.005em;
  cursor: default; white-space: nowrap;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in),
              border-color 120ms var(--ease-in), box-shadow 120ms var(--ease-in),
              transform 120ms var(--ease-in);
  border: 1px solid transparent;
}
.fi-btn:hover { transform: translateY(-.5px); }
.fi-btn:active { transform: translateY(0); }
.fi-btn-primary {
  background: var(--accent); color: #FBF9F4;
  border-color: var(--accent-2);
}
.fi-btn-primary:hover { background: var(--accent-2); }
.fi-btn-primary-brass { /* identical to primary, kept distinct in case we tune */
  background: var(--accent); color: #FBF9F4; border-color: var(--accent-2);
}
.fi-btn-primary-brass:hover { background: var(--accent-2); }
.fi-btn-primary-ink {
  background: var(--ink); color: var(--surface);
}
.fi-btn-primary-ink:hover { background: var(--ink-2); }
.fi-btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.fi-btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-4); }
.fi-btn-ghost {
  color: var(--ink-3);
}
.fi-btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
/* Destructive action variant (audit 2026-06) — outlined red, distinct from secondary. */
.fi-btn-danger {
  background: var(--surface);
  border-color: var(--red-soft);
  color: var(--red);
}
.fi-btn-danger:hover { background: var(--red-soft); border-color: var(--red); }

/* ═════════════ KPIs ═════════════ */
.fi-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
}
.fi-kpi {
  background: var(--surface);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.fi-kpi-lbl {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fi-kpi-val {
  font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
  display: inline-flex; align-items: baseline; gap: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.fi-kpi-val small {
  font-size: 15px; font-weight: 500; color: var(--ink-3); margin-right: 2px;
}
.fi-kpi-val.is-text { font-size: 15px; font-weight: 600; line-height: 1.3; }
.fi-kpi-sub {
  font-size: 11.5px; color: var(--ink-3);
}
.fi-kpi.is-green .fi-kpi-val { color: var(--green); }

/* ═════════════ FICHA CLÍNICA · side panel (reemplaza Focus Mode) ═════════════ */
.fi-ficha-backdrop {
  position: fixed; inset: 0;
  background: rgba(27, 24, 18, 0.18);
  z-index: 45;
}
[data-theme="dark"] .fi-ficha-backdrop { background: rgba(0, 0, 0, 0.45); }

.fi-ficha {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: clamp(480px, 42%, 720px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(27, 24, 18, .14), -2px 0 8px rgba(27, 24, 18, .06);
  z-index: 50;
  display: flex; flex-direction: column;
  transform: translateX(0);
}
.fi-ficha.is-animating {
  animation: fi-ficha-in 280ms var(--ease-in);
}
[data-theme="dark"] .fi-ficha {
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55), -2px 0 8px rgba(0, 0, 0, .35);
}
@keyframes fi-ficha-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── Header ── */
.fi-ficha-head {
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 18px;
  flex-shrink: 0;
}
.fi-ficha-head-top {
  display: flex; align-items: center; gap: 10px;
}
.fi-ficha-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
  margin-right: 4px;
}
.fi-ficha-close:hover { background: var(--surface-2); color: var(--ink); }
.fi-ficha-head-top .fi-eyebrow { flex: 1; }

.fi-ficha-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink-3);
  padding: 3px 9px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.fi-ficha-state-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.fi-ficha-state-dot[data-state="atendiendo"] { background: var(--brass); }
.fi-ficha-state-dot[data-state="en_sala"]    { background: var(--amber); }
.fi-ficha-state-dot[data-state="confirmado"] { background: var(--green); }
.fi-ficha-state-dot[data-state="cerrado"]    { background: var(--green); }

.fi-ficha-identity {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
}
.fi-ficha-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid var(--line);
}
[data-theme="dark"] .fi-ficha-avatar { color: var(--accent); }
.fi-ficha-identity-body { min-width: 0; }
.fi-ficha-identity-body h2 {
  margin: 0;
  font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.fi-ficha-identity-body h2 .fi-t-flag { transform: translateY(-1px); }
.fi-ficha-meta {
  margin: 3px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-3);
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.fi-ficha-meta .fi-sep { color: var(--ink-4); }
.fi-ficha-motivo {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}


/* Notas importantes — manual del profesional. Aparece sólo si tiene contenido,
   o si está en modo edición. Si está vacío, mostramos un add-button minimal. */
.fi-ficha-importante {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--red) 8%, var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--red) 22%, transparent);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  transition: background 160ms var(--ease-in);
}
.fi-ficha-importante.is-editing {
  background: var(--surface-2);
  border-left-color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 25%, transparent);
  grid-template-columns: 16px 1fr;
}
.fi-ficha-importante > svg {
  color: var(--red);
  margin-top: 2px;
  flex-shrink: 0;
}
.fi-ficha-importante.is-editing > svg { color: var(--accent); }

.fi-ficha-importante-body { min-width: 0; }
.fi-ficha-importante-body b {
  display: block;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); font-weight: 600;
  margin-bottom: 2px;
}
.fi-ficha-importante-body p {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.fi-ficha-importante-edit-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 120ms var(--ease-in), background 120ms var(--ease-in),
              color 120ms var(--ease-in);
}
.fi-ficha-importante:hover .fi-ficha-importante-edit-btn { opacity: 1; }
.fi-ficha-importante-edit-btn:hover { background: var(--surface); color: var(--ink); }

/* Edit mode */
.fi-ficha-importante-edit {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.fi-ficha-importante-edit .fi-eyebrow {
  font-size: 9.5px; color: var(--ink-3);
}
.fi-ficha-importante-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font: inherit; font-size: 13px;
  color: var(--ink);
  resize: vertical;
  line-height: 1.5;
  min-height: 56px;
  transition: border-color 120ms var(--ease-in), box-shadow 120ms var(--ease-in);
}
.fi-ficha-importante-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.fi-ficha-importante-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}
.fi-ficha-importante-actions .fi-btn { padding: 6px 10px; font-size: 12px; }

/* Add button cuando no hay nota */
.fi-ficha-importante-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 11px; color: var(--ink-3);
  background: transparent;
  border: 1px dashed var(--line);
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in),
              background 120ms var(--ease-in);
}
.fi-ficha-importante-add:hover {
  color: var(--ink-2);
  border-color: var(--ink-4);
  background: var(--surface-2);
}
.fi-ficha-importante-add svg { color: currentColor; }

/* ── Tabs ── */
.fi-ficha-tabs {
  display: flex; gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  flex-shrink: 0;
}
.fi-ficha-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 14px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-3);
  border-radius: 0;
  transition: color 120ms var(--ease-in);
}
.fi-ficha-tab:hover { color: var(--ink-2); }
.fi-ficha-tab.is-active {
  color: var(--ink); font-weight: 600;
}
.fi-ficha-tab.is-active::after {
  content: '';
  position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.fi-ficha-tab.is-disabled { color: var(--ink-4); cursor: not-allowed; }
.fi-ficha-tab.is-disabled:hover { color: var(--ink-4); }
.fi-ficha-tab svg { color: currentColor; }
.fi-ficha-tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  margin-left: 2px;
}

/* ── Content area (scrolls) ── */
.fi-ficha-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.fi-ficha-body {
  padding: 24px 28px 32px;
}
.fi-ficha-body--placeholder {
  padding: 48px 28px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center;
  color: var(--ink-3);
}

/* ── Footer (sticky bottom) ── */
.fi-ficha-foot {
  border-top: 1px solid var(--line-soft);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  flex-shrink: 0;
}
.fi-ficha-foot-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.fi-ficha-foot-hint svg { color: var(--green); }
.fi-ficha-foot .fi-btn { padding: 9px 16px; font-size: 13px; }

/* ═════════════ FICHA · TAB HISTORIA CLÍNICA ═════════════ */
.fi-historia { padding: 24px 28px 40px; }

/* Resumen agregado en la cabecera */
.fi-historia-resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 28px;
}
.fi-historia-resumen-stat {
  background: var(--surface);
  padding: 14px 16px 13px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.fi-historia-resumen-stat .fi-eyebrow { font-size: 9.5px; }
.fi-historia-resumen-stat > b {
  font-size: 22px; font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.fi-historia-resumen-stat > b small {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}
.fi-historia-resumen-stat > small {
  font-size: 11px; color: var(--ink-3);
}
.fi-historia-resumen-stat > small.is-green { color: var(--green); }
.fi-historia-resumen-stat > small.is-red   { color: var(--red); }
.fi-historia-arrow {
  font-family: 'Geist Mono', monospace; font-size: 14px;
  color: var(--ink-4); margin: 0 1px;
}
.fi-historia-topvert {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 3px;
}
.fi-historia-vert-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  padding: 3px 7px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-2);
  font-weight: 500;
}
.fi-historia-vert-chip small { font-size: 9.5px; color: var(--ink-3); }
[data-theme="dark"] .fi-historia-vert-chip { color: var(--accent); }

/* ── Timeline de sesiones ── */
.fi-historia-timeline {
  display: flex; flex-direction: column;
  gap: 14px;
}

.fi-historia-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  position: relative;
}

/* Date rail (left side) */
.fi-historia-rail {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  padding-top: 16px;
  position: relative;
}
.fi-historia-date {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  line-height: 1;
}
.fi-historia-date-year {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-4); letter-spacing: .06em;
  line-height: 1;
}
.fi-historia-date-rel {
  position: absolute; top: 38px; right: 0;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: .04em; text-transform: lowercase;
}
.fi-historia-rail-line {
  position: absolute;
  right: -7px;
  top: 22px;
  bottom: -14px;
  width: 1px;
  background: var(--line);
}
.fi-historia-card:last-child .fi-historia-rail-line { display: none; }
.fi-historia-rail-dot {
  position: absolute;
  right: -10px; top: 18px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.fi-historia-rail-dot[data-inicial="true"] {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  width: 9px; height: 9px;
  right: -11px; top: 17px;
}

/* Card body */
.fi-historia-card-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px 14px;
  transition: border-color 160ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.fi-historia-card.is-open .fi-historia-card-body {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-1);
}
.fi-historia-card-head {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  align-items: center;
  gap: 14px;
  cursor: default;
}
.fi-historia-card-headline { min-width: 0; }
.fi-historia-card-title {
  display: inline-flex; align-items: center; gap: 7px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink);
}
.fi-historia-card-title b { font-weight: 600; }
.fi-historia-card-title .fi-sep { color: var(--ink-4); }
.fi-historia-card-dur { color: var(--ink-3); font-size: 12px; }
.fi-historia-card-meta {
  display: block;
  margin-top: 2px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .03em;
}

/* EVA visualization (mini bars) */
.fi-historia-eva { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-historia-eva .fi-eyebrow { font-size: 9px; }
.fi-historia-eva-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.fi-historia-eva-from { color: var(--red); font-size: 12px; font-weight: 500; }
.fi-historia-eva-to   { color: var(--green); font-size: 12px; font-weight: 500; }
.fi-historia-eva-bar {
  position: relative;
  width: 56px; height: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.fi-historia-eva-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  height: 100%;
  border-radius: 99px;
}
.fi-historia-eva-bar-fill[data-tone="from"] {
  background: color-mix(in oklab, var(--red) 35%, transparent);
}
.fi-historia-eva-bar-fill[data-tone="to"] {
  background: var(--green);
}
.fi-historia-eva-delta {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.fi-historia-eva-delta.is-down { color: var(--green); }
.fi-historia-eva-delta.is-up   { color: var(--red); }

.fi-historia-chev {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: transform 200ms var(--ease-in);
}
.fi-historia-chev[data-open="true"] { transform: rotate(180deg); color: var(--ink-2); }

/* Vertebras chips */
.fi-historia-verts {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 11px;
}
.fi-historia-vert {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
}

/* Expanded detail */
.fi-historia-detail {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.fi-historia-soap {
  display: flex; flex-direction: column; gap: 11px;
}
.fi-historia-soap-block {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  font-size: 12.5px;
}
.fi-historia-soap-lbl {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1px;
}
.fi-historia-soap-block p {
  margin: 0; color: var(--ink-2); line-height: 1.5;
  text-wrap: pretty;
}

.fi-historia-notas {
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.fi-historia-notas p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }

.fi-historia-pv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.fi-historia-pv > svg { margin-top: 2px; color: var(--ink-3); }
.fi-historia-pv b { display: block; color: var(--ink-2); font-weight: 600; font-size: 12px; }
.fi-historia-pv p { margin: 3px 0 0; color: var(--ink-3); font-style: italic; line-height: 1.5; }
.fi-historia-pv.is-ok    { background: var(--green-soft); border-color: transparent; }
.fi-historia-pv.is-ok > svg,
.fi-historia-pv.is-ok b  { color: var(--green); }
.fi-historia-pv.is-saved { background: var(--amber-soft); border-color: transparent; }
.fi-historia-pv.is-saved > svg,
.fi-historia-pv.is-saved b { color: var(--amber); }

/* ─── Empty state ─── */
.fi-historia-empty {
  padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.fi-historia-empty-glyph {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
[data-theme="dark"] .fi-historia-empty-glyph { color: var(--accent); }
.fi-historia-empty h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.fi-historia-empty p {
  margin: 0; max-width: 360px;
  font-size: 13px; color: var(--ink-3); line-height: 1.55;
  text-wrap: pretty;
}
.fi-historia-empty b { color: var(--ink-2); font-weight: 600; }

/* ═════════════ FICHA · TAB ATENCIÓN ═════════════ */
.fi-atencion {
  padding: 22px 28px 32px;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* Pre-atención (paciente no llegó) */
.fi-atencion-pre {
  padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.fi-atencion-pre-glyph {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
[data-theme="dark"] .fi-atencion-pre-glyph { color: var(--accent); }
.fi-atencion-pre h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.fi-atencion-pre p {
  margin: 0; max-width: 360px; font-size: 13px;
  color: var(--ink-3); line-height: 1.55; text-wrap: pretty;
}

/* ── Spine map compacto ── */
.fi-spine-c {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 14px 16px;
}
.fi-spine-c-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.fi-spine-c-legend {
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  font-size: 10px; color: var(--ink-3);
  font-family: 'Geist Mono', monospace; letter-spacing: .02em;
}
.fi-spine-c-legend-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.fi-spine-c-legend-dot {
  width: 9px; height: 9px; border-radius: 2px;
}

.fi-spine-c-body { display: flex; flex-direction: column; gap: 10px; }
.fi-spine-c-region {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}
.fi-spine-c-region-lbl {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fi-spine-c-row {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.fi-spine-c-vert {
  position: relative;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  font-weight: 500; letter-spacing: -.005em;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease-in), box-shadow 120ms var(--ease-in),
              border-color 120ms var(--ease-in);
  cursor: default;
}
.fi-spine-c-vert:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: var(--ink-4);
}
.fi-spine-c-vert.has-state {
  border-color: transparent;
}
.fi-spine-c-vert.is-selected {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(27,24,18,.12);
  border-color: transparent;
  z-index: 2;
}
.fi-spine-c-ghost-dot {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}
.fi-spine-c-ghost-dot[data-count="2"]::after,
.fi-spine-c-ghost-dot[data-count="3"]::after,
.fi-spine-c-ghost-dot[data-count="4"]::after {
  content: '';
  position: absolute; left: -6px; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* Vertebra picker popup */
.fi-spine-c-popup {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.fi-spine-c-popup-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.fi-spine-c-popup-head b {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  letter-spacing: 0; color: var(--ink);
  font-weight: 600;
}
.fi-spine-c-popup-ghost {
  flex: 1;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .03em;
  color: var(--accent-2);
}
[data-theme="dark"] .fi-spine-c-popup-ghost { color: var(--accent); }
.fi-spine-c-popup-ghost.is-empty { color: var(--ink-4); }
.fi-spine-c-popup-close {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.fi-spine-c-popup-close:hover { background: var(--surface-3); color: var(--ink); }

.fi-spine-c-popup-opts {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fi-spine-c-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2);
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fi-spine-c-opt:hover { background: var(--surface-2); border-color: var(--ink-4); }
.fi-spine-c-opt.is-active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.fi-spine-c-opt-dot {
  width: 10px; height: 10px; border-radius: 3px;
}

/* ── EVA selectors ── */
.fi-eva-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
}
.fi-eva-arrow {
  font-family: 'Geist Mono', monospace; font-size: 18px;
  color: var(--ink-4);
  padding-bottom: 9px;
}
.fi-eva { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fi-eva-row {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.fi-eva-cell {
  height: 26px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--ink-3);
  border-radius: 3px;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
  text-align: center;
}
.fi-eva-cell:hover { background: var(--surface); color: var(--ink-2); }
.fi-eva-cell.is-active {
  color: #FBF9F4;
  font-weight: 600;
}
.fi-eva-cell.is-active.is-red   { background: var(--red); }
.fi-eva-cell.is-active.is-green { background: var(--green); }

/* ── Notas con dictado ── */
.fi-notas { display: flex; flex-direction: column; gap: 8px; }
.fi-notas-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.fi-save {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.fi-save--saved svg { color: var(--green); }
.fi-save-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: fi-spin 700ms linear infinite;
}
@keyframes fi-spin { to { transform: rotate(360deg); } }

.fi-notas-textarea-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color 160ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.fi-notas-textarea-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fi-notas-textarea-wrap.is-dictando {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.fi-notas-textarea {
  width: 100%;
  min-height: 110px;
  padding: 11px 44px 11px 12px;
  background: transparent;
  font: inherit; font-size: 13px;
  color: var(--ink);
  resize: vertical;
  line-height: 1.55;
}
.fi-notas-textarea::placeholder { color: var(--ink-4); }
.fi-notas-mic {
  position: absolute;
  right: 8px; top: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in),
              transform 120ms var(--ease-in), box-shadow 200ms var(--ease-in);
}
.fi-notas-mic:hover {
  background: var(--surface); color: var(--ink-2);
  border-color: var(--ink-4);
}
.fi-notas-mic.is-active {
  background: var(--red); color: #FBF9F4;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft);
}
.fi-notas-mic-pulse {
  display: inline-flex; align-items: center; justify-content: center;
  animation: fi-mic-pulse 1.6s ease-in-out infinite;
}
@keyframes fi-mic-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.fi-notas-dictando {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  background: var(--red-soft);
  color: var(--red);
  border-radius: 99px;
  font-size: 11.5px;
  font-style: italic;
  align-self: flex-start;
}
.fi-notas-dictando-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  animation: fi-blink 1.6s ease-in-out infinite;
}

/* ═════════════ FICHA · TAB POST-VISITA ═════════════ */
.fi-pv {
  padding: 22px 28px 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: relative;
}

/* Header */
.fi-pv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.fi-pv-head h3 {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.fi-pv-head p {
  margin: 5px 0 0;
  font-size: 12.5px; color: var(--ink-3);
  line-height: 1.55; text-wrap: pretty;
}
.fi-pv-head b { color: var(--ink-2); font-weight: 600; }

.fi-pv-tel {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500;
  background: var(--green-soft); color: var(--green);
  text-decoration: none;
  transition: transform 120ms var(--ease-in);
}
.fi-pv-tel:hover { transform: translateY(-1px); }

/* Estado contextual */
.fi-pv-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.4;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.fi-pv-status > svg { color: var(--ink-3); flex-shrink: 0; }
.fi-pv-status b { color: var(--ink); font-weight: 600; margin-right: 2px; }
.fi-pv-status--enviada {
  background: var(--green-soft); border-color: transparent; color: var(--green);
}
.fi-pv-status--enviada > svg { color: var(--green); }
.fi-pv-status--enviada b { color: var(--green); }
.fi-pv-status--guardada {
  background: var(--amber-soft); border-color: transparent; color: var(--amber);
}
.fi-pv-status--guardada > svg { color: var(--amber); }
.fi-pv-status--guardada b { color: var(--amber); }

/* Memo editor */
.fi-pv-memo { display: flex; flex-direction: column; gap: 8px; }
.fi-pv-memo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.fi-pv-tpl-wrap { position: relative; }
.fi-pv-tpl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--r-sm);
  font-size: 11px; color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fi-pv-tpl-btn:hover { background: var(--surface-2); border-color: var(--ink-4); }
.fi-pv-tpl-btn svg { color: var(--ink-3); }

.fi-pv-tpl-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 5;
  display: flex; flex-direction: column; gap: 2px;
}
.fi-pv-tpl-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: var(--r-sm);
  text-align: left;
  transition: background 120ms var(--ease-in);
}
.fi-pv-tpl-item:hover { background: var(--surface-2); }
.fi-pv-tpl-item b { font-size: 12px; color: var(--ink); font-weight: 600; }
.fi-pv-tpl-item small {
  font-size: 11px; color: var(--ink-3); line-height: 1.45;
  text-wrap: pretty;
}

.fi-pv-memo-area {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 160ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.fi-pv-memo-area:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fi-pv-memo-area.is-dictando {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.fi-pv-memo-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 56px 12px 14px;
  background: transparent;
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  resize: vertical;
  line-height: 1.55;
}
.fi-pv-memo-textarea::placeholder { color: var(--ink-4); }

.fi-pv-mic {
  position: absolute; right: 10px; top: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent);
  color: #FBF9F4;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease-in), background 120ms var(--ease-in),
              box-shadow 200ms var(--ease-in);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 28%, transparent);
}
.fi-pv-mic:hover { transform: translateY(-1px); background: var(--accent-2); }
.fi-pv-mic.is-active {
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft), 0 2px 12px color-mix(in oklab, var(--red) 32%, transparent);
}
.fi-pv-mic-pulse {
  display: inline-flex; align-items: center; justify-content: center;
  animation: fi-mic-pulse 1.6s ease-in-out infinite;
}

.fi-pv-dictando {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 99px;
  background: var(--red-soft); color: var(--red);
  font-size: 11.5px; font-style: italic;
  align-self: flex-start;
}
.fi-pv-dictando-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  animation: fi-blink 1.6s ease-in-out infinite;
}

/* WhatsApp preview */
.fi-pv-preview {
  display: flex; flex-direction: column; gap: 8px;
}
.fi-pv-preview-head {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green);
}
.fi-pv-preview-head .fi-eyebrow { color: var(--ink-3); }

.fi-pv-preview-window {
  padding: 14px;
  background: #E5DDD0;
  border-radius: var(--r-md);
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.04) 1px, transparent 0);
  background-size: 16px 16px;
  border: 1px solid var(--line);
  min-height: 80px;
}
[data-theme="dark"] .fi-pv-preview-window {
  background: #1B2520;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 16px 16px;
}

.fi-pv-preview-bubble {
  position: relative;
  max-width: 86%;
  background: #DCF8C6;
  color: #2C2A21;
  padding: 8px 12px 6px;
  border-radius: 8px;
  border-top-right-radius: 2px;
  margin-left: auto;
  font-size: 13px; line-height: 1.45;
  text-wrap: pretty;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
[data-theme="dark"] .fi-pv-preview-bubble {
  background: #056162; color: #E5E2D6;
}
.fi-pv-preview-bubble p { margin: 0 0 2px; }
.fi-pv-preview-bubble p.fi-pv-preview-empty {
  color: #6B7066; font-style: italic;
}
[data-theme="dark"] .fi-pv-preview-bubble p.fi-pv-preview-empty { color: #98A192; }
.fi-pv-preview-sender {
  display: block;
  font-size: 10.5px; font-weight: 600;
  color: #4A8F3F;
  margin-bottom: 2px;
}
[data-theme="dark"] .fi-pv-preview-sender { color: #84C36E; }
.fi-pv-preview-time {
  display: block;
  text-align: right;
  font-size: 9.5px;
  color: rgba(0,0,0,.45);
  margin-top: 1px;
  font-family: 'Geist Mono', monospace;
}
[data-theme="dark"] .fi-pv-preview-time { color: rgba(255,255,255,.45); }

/* Actions */
.fi-pv-actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.fi-pv-actions .fi-btn { padding: 8px 14px; font-size: 13px; }
.fi-pv-actions .fi-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.fi-pv-action-wa { background: #25D366 !important; border-color: #1FB957 !important; }
.fi-pv-action-wa:hover { background: #1FB957 !important; }
.fi-pv-action-wa:disabled { background: var(--ink-4) !important; border-color: var(--ink-4) !important; }

/* Toast feedback */
.fi-pv-toast {
  position: absolute;
  bottom: 84px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  background: var(--ink); color: var(--surface);
  border-radius: 99px;
  font-size: 12px;
  box-shadow: var(--shadow-2);
  z-index: 5;
}
.fi-pv-toast svg { color: var(--green); }

/* ═════════════ TURNO BLOCK ═════════════ */
.fi-list { display: flex; flex-direction: column; gap: 28px; }
.fi-block { display: flex; flex-direction: column; gap: 10px; }
.fi-block-head {
  display: flex; align-items: center; gap: 12px;
}
.fi-block-lbl {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.fi-block-hours {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.fi-block-line { flex: 1; border-top: 1px dashed var(--line); }
.fi-block-count {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.fi-block-rows { display: flex; flex-direction: column; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ═════════════ TURNO ROW ═════════════ */
.fi-turno {
  position: relative;
  display: grid;
  grid-template-columns: 16px 64px 14px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 12px;
  background: var(--surface);
  transition: background 200ms var(--ease-in), border-color 200ms var(--ease-in),
              box-shadow 200ms var(--ease-in), opacity 200ms var(--ease-in),
              transform 150ms var(--ease-in);
  cursor: default;
}
.fi-turno:hover { background: var(--surface-2); }

.fi-list.is-dense .fi-turno { padding: 9px 16px 9px 10px; gap: 12px; }
.fi-list.is-dense .fi-t-time b { font-size: 14px; }
.fi-list.is-dense .fi-turno.is-atendiendo { padding: 16px 20px 18px 12px; }

.fi-drag {
  color: var(--ink-4); opacity: 0; display: flex;
  transition: opacity 120ms var(--ease-in);
}
.fi-turno:hover .fi-drag { opacity: 1; }
.fi-turno.is-dragging .fi-drag { opacity: 1; color: var(--accent); }

.fi-turno.is-dragging {
  opacity: .4; transform: scale(1.005); box-shadow: var(--shadow-2);
}
.fi-turno.is-drop-target {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.fi-t-time {
  position: relative;
  font-family: 'Geist Mono', monospace;
  font-size: 14px; color: var(--ink); font-weight: 500;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 6px;
}
.fi-t-time b { font-weight: 500; }
.fi-t-gcal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.fi-t-dot-wrap { position: relative; width: 14px; height: 14px; }
.fi-t-dot {
  position: absolute; inset: 3px; border-radius: 50%;
  background: var(--ink-4);
}
.fi-t-dot-pulse {
  position: absolute; inset: 3px; border-radius: 50%;
  background: var(--accent);
  animation: fi-pulse 1.8s ease-in-out infinite;
}
@keyframes fi-pulse {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(2.2); opacity: 0;   }
}

.fi-t-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-t-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fi-t-name {
  font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fi-t-meta {
  font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.fi-t-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fi-t-actions { display: flex; align-items: center; gap: 6px; }
.fi-t-done { color: var(--green); display: flex; }

.fi-t-price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.fi-t-price-num {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  color: var(--ink); letter-spacing: -.01em;
}
.fi-t-price-num.is-pending { color: var(--ink-3); }
.fi-t-price-method {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ink-4); letter-spacing: .04em; text-transform: lowercase;
}

/* PILLS / CHIPS */
.fi-pill {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.fi-pill--new   { color: var(--accent-2); background: var(--accent-soft); border-color: transparent; }
.fi-pill--vip   { color: var(--slate);    background: var(--slate-soft);  border-color: transparent; }
.fi-pill--mute  { color: var(--ink-3);    background: var(--surface-2);   border-color: var(--line-soft); }
.fi-pill--next  { color: var(--ink);      background: var(--surface);     border: 1px solid var(--ink); }

.fi-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--amber-soft); color: var(--amber);
}

/* ─── Atendiendo hero treatment ─── */
.fi-turno.is-atendiendo {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft-2) 100%);
  padding: 22px 20px 22px 12px;
  box-shadow: var(--shadow-hero);
  position: relative;
}
[data-theme="dark"] .fi-turno.is-atendiendo {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-soft-2) 100%);
}
.fi-turno.is-atendiendo::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.fi-turno.is-atendiendo .fi-t-time b { font-size: 16px; color: var(--ink); }
.fi-turno.is-atendiendo .fi-t-name { font-size: 17px; }
.fi-turno.is-atendiendo .fi-drag { opacity: 0; }
.fi-t-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-2);
  padding: 2px 8px; border-radius: 99px;
  background: rgba(255,255,255,.5);
}
[data-theme="dark"] .fi-t-live { background: rgba(0,0,0,.25); }
.fi-t-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  animation: fi-blink 1.6s ease-in-out infinite;
}
@keyframes fi-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.fi-t-live .fi-mono { letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ─── Next highlight (NO atendiendo) ─── */
.fi-turno.is-next { background: var(--surface-2); }
.fi-turno.is-next .fi-t-name { color: var(--ink); }
.fi-turno.is-next .fi-pill--next { border-color: var(--ink); }

/* ─── Safety flag (warn) · solo si el profesional marca una nota importante ─── */
.fi-t-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  flex-shrink: 0;
}
.fi-t-flag--warn {
  color: var(--red);
  background: var(--red-soft);
}

/* ═════════════ TURNOS CERRADOS · sección final colapsable ═════════════ */
.fi-cerrados {
  margin-top: 12px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.fi-cerrados-head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 4px;
  cursor: default;
  user-select: none;
  border-radius: var(--r-sm);
  transition: background 120ms var(--ease-in);
}
.fi-cerrados-head:hover { background: var(--surface-2); }
.fi-cerrados-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--ink-3);
  transition: transform 200ms var(--ease-in);
}
.fi-cerrados-chev[data-open="false"] { transform: rotate(-90deg); }
.fi-cerrados-meta {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.fi-cerrados-meta .fi-mono { color: var(--ink-2); font-weight: 500; }
.fi-cerrados-dot { color: var(--ink-4); }

.fi-cerrados-rows {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.fi-cerrado-row {
  display: grid;
  grid-template-columns: 64px 14px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 16px;
  background: var(--surface);
  transition: background 160ms var(--ease-in);
}
.fi-cerrado-row:hover { background: var(--surface-2); }
.fi-cerrado-row .fi-t-name { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.fi-cerrado-row .fi-t-meta { font-size: 12px; color: var(--ink-3); }

.fi-cerrado-amount {
  font-family: 'Geist Mono', monospace; font-size: 12.5px;
  color: var(--ink-2); letter-spacing: -.01em;
}
.fi-cerrado-cta { display: flex; align-items: center; }
.fi-cerrado-cta .fi-btn { padding: 5px 8px; font-size: 11.5px; opacity: .65; }
.fi-cerrado-row:hover .fi-cerrado-cta .fi-btn { opacity: 1; }

.fi-t-pv {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .04em; text-transform: lowercase;
  color: var(--ink-3);
  padding: 1px 6px; border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.fi-t-pv--ok   { color: var(--green); background: var(--green-soft); border-color: transparent; }
.fi-t-pv--mute { color: var(--ink-4); }

/* ═════════════ EMPTY STATE ═════════════ */
.fi-empty {
  padding: 72px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.fi-empty-glyph {
  width: 88px; height: 88px; border-radius: var(--r-lg);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 8px;
}
.fi-empty h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.fi-empty p { font-size: 13.5px; color: var(--ink-3); margin: 0; max-width: 380px; line-height: 1.55; }
.fi-empty p a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.fi-empty-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ═════════════ JORNADA CERRADA ═════════════ */
.fi-cerrada { padding: 24px 0; }
.fi-cerrada-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
}
.fi-cerrada-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 100% 0%, var(--green-soft) 0%, transparent 60%);
  pointer-events: none;
}
.fi-cerrada-card > * { position: relative; }
.fi-cerrada-card h2 {
  font-size: 28px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: 0;
  line-height: 1.15;
}
.fi-cerrada-card p { font-size: 13.5px; color: var(--ink-3); margin: 0; max-width: 520px; line-height: 1.55; }
.fi-cerrada-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 48px;
  margin: 12px 0 16px;
}
.fi-cerrada-stats div { display: flex; flex-direction: column; gap: 4px; }
.fi-cerrada-stats b {
  font-size: 26px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fi-cerrada-stats b small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.fi-cerrada-card .fi-btn { align-self: flex-start; }

/* ═════════════ PATIENT PEEK ═════════════ */
.fi-peek {
  position: fixed; right: 32px; top: 32px; bottom: 32px;
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 50;
  animation: fi-peek-in 240ms var(--ease-in);
}
@keyframes fi-peek-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fi-peek header { display: flex; align-items: center; justify-content: space-between; }
.fi-peek-close {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.fi-peek-close svg { transform: rotate(45deg); }
.fi-peek-close:hover { background: var(--surface-2); color: var(--ink); }
.fi-peek-id { display: flex; align-items: center; gap: 12px; }
.fi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2);
  border: 1px solid var(--line);
}
.fi-peek-id b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.fi-peek-id span { font-size: 12px; color: var(--ink-3); }
.fi-peek-motivo p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 0; }
.fi-peek-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-peek-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* ═════════════ FAB (walk-in) ═════════════ */
.fi-fab {
  position: fixed; right: 32px; bottom: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--ink); color: var(--surface);
  border-radius: 99px;
  font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  box-shadow: var(--shadow-2);
  z-index: 40;
  cursor: default;
  transition: transform 120ms var(--ease-in), box-shadow 120ms var(--ease-in);
}
.fi-fab:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), 0 0 0 4px var(--accent-soft); }

/* ═════════════ WALK-IN MODAL ═════════════ */
.fi-wi-backdrop {
  position: fixed; inset: 0;
  background: rgba(27, 24, 18, 0.32);
  z-index: 90;
}
[data-theme="dark"] .fi-wi-backdrop { background: rgba(0, 0, 0, 0.55); }

.fi-wi-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(27, 24, 18, .22), 0 4px 12px rgba(27, 24, 18, .08);
  z-index: 95;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .fi-wi-modal {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .35);
}

.fi-wi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.fi-wi-head h2 {
  margin: 4px 0 0;
  font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
}
.fi-wi-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fi-wi-close:hover { background: var(--surface-2); color: var(--ink); }

/* ─── Choose · primer paso ─── */
.fi-wi-choose {
  padding: 24px 24px 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.fi-wi-choose-hint {
  margin: 0;
  font-size: 13.5px; color: var(--ink-3);
  text-wrap: pretty;
}
.fi-wi-choose-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fi-wi-choose-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  cursor: default;
  transition: transform 120ms var(--ease-in), border-color 160ms var(--ease-in),
              background 160ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.fi-wi-choose-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
  box-shadow: var(--shadow-1);
}
.fi-wi-choose-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: 6px;
}
[data-theme="dark"] .fi-wi-choose-icon { color: var(--accent); }
.fi-wi-choose-card b {
  font-size: 14.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -.005em;
}
.fi-wi-choose-card small {
  font-size: 12px; color: var(--ink-3); line-height: 1.45;
  text-wrap: pretty;
}

/* ─── Tab bar (pick / new) ─── */
.fi-wi-tabbar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 20px;
  flex-shrink: 0;
}
.fi-wi-tab {
  position: relative;
  padding: 12px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  transition: color 120ms var(--ease-in);
}
.fi-wi-tab:hover { color: var(--ink-2); }
.fi-wi-tab.is-active {
  color: var(--ink); font-weight: 600;
}
.fi-wi-tab.is-active::after {
  content: '';
  position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* ─── Search ─── */
.fi-wi-search {
  display: flex; flex-direction: column;
  padding: 18px 20px 20px;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}
.fi-wi-search-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 160ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.fi-wi-search-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.fi-wi-search-input svg { color: var(--ink-3); flex-shrink: 0; }
.fi-wi-search-input input {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--ink);
  background: transparent;
}
.fi-wi-search-input input::placeholder { color: var(--ink-4); }

.fi-wi-search-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.fi-wi-pac {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid transparent;
  text-align: left;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fi-wi-pac:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.fi-wi-pac-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--line);
}
[data-theme="dark"] .fi-wi-pac-avatar { color: var(--accent); }
.fi-wi-pac-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fi-wi-pac-body b {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fi-wi-pac-body small {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fi-wi-pac-body .fi-sep { color: var(--ink-4); margin: 0 4px; }
.fi-wi-pac-motivo { color: var(--ink-4) !important; font-style: italic; }
.fi-wi-pac-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-3);
  opacity: 0;
  transition: opacity 120ms var(--ease-in);
}
.fi-wi-pac:hover .fi-wi-pac-cta { opacity: 1; color: var(--accent-2); }
[data-theme="dark"] .fi-wi-pac:hover .fi-wi-pac-cta { color: var(--accent); }

.fi-wi-empty {
  padding: 28px 16px;
  text-align: center;
}
.fi-wi-empty p { margin: 0; font-size: 13px; color: var(--ink-2); }
.fi-wi-empty p b { font-weight: 600; }
.fi-wi-empty small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* ─── Form nuevo paciente ─── */
.fi-wi-form {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.fi-wi-form-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 10px;
}
.fi-wi-field { display: flex; flex-direction: column; gap: 5px; }
.fi-wi-field > span {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fi-wi-field > span em { color: var(--red); font-style: normal; margin-left: 1px; }
.fi-wi-field input,
.fi-wi-field textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  transition: border-color 120ms var(--ease-in), box-shadow 120ms var(--ease-in);
}
.fi-wi-field textarea { resize: vertical; min-height: 70px; }
.fi-wi-field input::placeholder,
.fi-wi-field textarea::placeholder { color: var(--ink-4); }
.fi-wi-field input:focus,
.fi-wi-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fi-wi-form-submit {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: #FBF9F4;
  border: 1px solid var(--accent-2);
  font-size: 13px; font-weight: 500;
  transition: background 120ms var(--ease-in), transform 120ms var(--ease-in);
}
.fi-wi-form-submit:hover:not(:disabled) {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.fi-wi-form-submit:disabled {
  background: var(--ink-4); border-color: var(--ink-4);
  opacity: .55; cursor: not-allowed;
}

/* ─── Step 2: servicio ─── */
.fi-wi-step2 {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  gap: 20px;
}
.fi-wi-step2-head {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.fi-wi-step2-head h3 {
  margin: 4px 0 0;
  font-size: 17px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}
.fi-wi-step2-head p {
  margin: 3px 0 0;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
  text-wrap: pretty;
}
.fi-wi-back {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fi-wi-back:hover { background: var(--surface); color: var(--ink); }

.fi-wi-svc-block { display: flex; flex-direction: column; gap: 8px; }
.fi-wi-svc-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.fi-wi-svc {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: left;
  transition: border-color 160ms var(--ease-in), background 160ms var(--ease-in);
}
.fi-wi-svc:hover { background: var(--surface-2); border-color: var(--ink-4); }
.fi-wi-svc.is-active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.fi-wi-svc b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fi-wi-svc small {
  font-size: 11.5px; color: var(--ink-3);
}
.fi-wi-svc small .fi-sep { margin: 0 6px; color: var(--ink-4); }
.fi-wi-svc-check {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #FBF9F4;
  display: inline-flex; align-items: center; justify-content: center;
}

.fi-wi-confirm {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.fi-wi-confirm-hint {
  margin: 0;
  font-size: 12px; color: var(--ink-3);
  line-height: 1.5; text-wrap: pretty;
}
.fi-wi-confirm-hint b { color: var(--ink-2); font-weight: 600; }
.fi-wi-confirm-btn {
  align-self: flex-end;
  padding: 10px 18px; font-size: 13.5px;
}

/* ═════════════ DARK MODE FINE-TUNES ═════════════ */
[data-theme="dark"] .fi-empty p a { color: var(--accent-2); border-color: var(--accent-2); }
[data-theme="dark"] .fi-btn-primary { color: var(--ink); }
[data-theme="dark"] .fi-btn-primary-brass { color: var(--ink); }
[data-theme="dark"] .fi-mark { color: var(--ink); }

/* ═════════════ CALENDARIO ═════════════ */
.cal-content { max-width: none; padding: 28px 32px 60px; }

.cal-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cal-head-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 18px;
}
.cal-head-top h1 {
  margin: 6px 0 0;
  font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink);
}
.cal-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cal-tab {
  padding: 6px 14px; border-radius: 5px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  cursor: default;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-tab:hover { color: var(--ink); }
.cal-tab.is-active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(27,24,18,.06);
}

.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.cal-nav-l { display: inline-flex; align-items: center; gap: 8px; }
/* Lado derecho del nav: filtros + entry point "Agendar" (cluster agenda). */
.cal-nav-r { display: inline-flex; align-items: center; gap: 12px; }
.cal-nav-btn, .cal-nav-today {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); cursor: default;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-nav-btn { width: 30px; padding: 0; }
.cal-nav-btn:hover, .cal-nav-today:hover { background: var(--surface-2); border-color: var(--ink-4); }
.cal-nav-today { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.cal-range {
  margin-left: 12px;
  font-family: 'Geist Mono', monospace; font-size: 12.5px;
  color: var(--ink-2); letter-spacing: -.005em;
}
.cal-filters { display: inline-flex; align-items: center; gap: 4px; }
.cal-chip {
  padding: 5px 10px; border-radius: var(--r-sm);
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--line-soft);
  cursor: default;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-chip:hover { color: var(--ink); border-color: var(--ink-4); }
.cal-chip.is-on {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.cal-chip-pedidos {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--amber); border-color: var(--amber);
}
.cal-chip-pedidos:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.cal-chip-pedidos.is-on {
  background: var(--amber); color: var(--surface); border-color: var(--amber);
}
.cal-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 14px;
  padding: 0 4px; border-radius: 9px;
  background: var(--surface); color: var(--amber);
  font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 600;
  letter-spacing: 0;
  margin-left: 1px;
}
.cal-chip-pedidos.is-on .cal-chip-count {
  background: rgba(255,255,255,0.25); color: var(--surface);
}

/* ─── Vista Semana ─── */
.cal-semana { margin-top: 22px; }
.cal-day-headers {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}
.cal-time-spacer { border-right: 1px solid var(--line-soft); }
.cal-day-head {
  padding: 12px 10px 10px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.cal-day-head:last-child { border-right: none; }
.cal-day-head.is-cerrado { background: var(--surface-2); opacity: 0.75; }
.cal-day-head.is-hoy {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
}
.cal-day-head.is-hoy::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.cal-day-name {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .08em;
}
.cal-day-head.is-hoy .cal-day-name { color: var(--accent-2); }
.cal-day-num {
  font-size: 22px; font-weight: 600; letter-spacing: -.018em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cal-day-head.is-cerrado .cal-day-num { color: var(--ink-3); }
.cal-day-sub { font-size: 11px; color: var(--ink-3); }

/* ─── Vista Mes (PR E) ─── */
.cal-range-mes { text-transform: capitalize; }
.cal-mes { margin-top: 22px; }
.cal-mes-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}
.cal-mes-dow {
  padding: 10px 12px;
  border-right: 1px solid var(--line-soft);
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase;
}
.cal-mes-dow:last-child { border-right: none; }
.cal-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.cal-mes-cell {
  position: relative;
  min-height: 112px;
  padding: 8px 8px 6px;
  border-right: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.cal-mes-cell:nth-child(7n) { border-right: none; }
.cal-mes-cell:nth-child(-n + 7) { border-top: none; }
.cal-mes-cell.is-out { background: var(--surface-2); }
.cal-mes-cell.is-hoy {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
}
.cal-mes-cell-head {
  display: flex; align-items: center; justify-content: space-between;
}
.cal-mes-num {
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cal-mes-cell.is-out .cal-mes-num { color: var(--ink-3); font-weight: 500; }
.cal-mes-cell.is-hoy .cal-mes-num { color: var(--accent-2); }
.cal-mes-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 9px;
  background: var(--green-soft); color: var(--green);
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
}
.cal-mes-events {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-mes-event {
  display: flex; align-items: baseline; gap: 5px;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--green-soft);
  font-size: 11px; color: var(--green);
  overflow: hidden; white-space: nowrap;
}
.cal-mes-event-h { flex: none; font-size: 10px; opacity: 0.9; }
.cal-mes-event-n { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.cal-mes-more {
  font-size: 10.5px; color: var(--ink-3); padding: 1px 6px;
  font-family: 'Geist Mono', monospace;
}

.cal-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.cal-time-axis {
  position: relative;
  border-right: 1px solid var(--line-soft);
}
.cal-time-tick {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: flex-end; padding-right: 8px;
  transform: translateY(-50%);
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: -.005em;
}
.cal-time-tick:first-child { transform: none; }
.cal-time-axis > div:last-child { display: none; } /* hide tail tick */

.cal-day-col {
  position: relative;
  border-right: 1px solid var(--line-soft);
  cursor: default;
}
.cal-day-col:last-child { border-right: none; }
.cal-day-col.is-hoy { background: rgba(0,0,0,0); }
[data-theme="light"] .cal-day-col.is-hoy {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 8%);
}
[data-theme="dark"] .cal-day-col.is-hoy {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 8%);
}
.cal-day-col.is-cerrado { background: var(--surface-2); opacity: 0.6; }

.cal-gridline {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--line-soft);
}
.cal-gridline-half {
  border-top: 1px dashed var(--line-soft);
  opacity: 0.5;
}

.cal-almuerzo {
  position: absolute; left: 0; right: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 8px,
      var(--line-soft) 8px, var(--line-soft) 9px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cal-almuerzo-lbl {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface); padding: 2px 8px; border-radius: 3px;
}

.cal-cerrado-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}

.cal-bloqueo {
  position: absolute; left: 4px; right: 4px;
  background:
    repeating-linear-gradient(135deg,
      var(--slate-soft) 0, var(--slate-soft) 6px,
      transparent 6px, transparent 9px);
  border: 1px dashed var(--slate);
  border-radius: 4px;
  padding: 4px 6px;
  overflow: hidden;
  z-index: 1;
}
.cal-bloqueo-inner {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--slate); font-weight: 500;
}

/* ─── Modo asignar (T11): banner + preview floating ─── */
.cal-assign-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-md);
  animation: cal-tray-in 160ms var(--ease-out);
}
.cal-assign-banner-l {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; min-width: 0;
}
.cal-assign-banner-l b {
  font-weight: 600;
}
.cal-assign-banner-cancel {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--surface);
  cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 500;
  transition: background 120ms var(--ease-in);
}
.cal-assign-banner-cancel:hover { background: rgba(255,255,255,0.1); }

.cal-assign-preview {
  position: absolute; left: 4px; right: 4px;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  border: 2px dashed var(--amber);
  padding: 5px 8px 4px;
  z-index: 5;
  pointer-events: none;
  animation: cal-slot-in 100ms var(--ease-out);
}
.cal-assign-preview-head {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-assign-preview-head svg { color: var(--amber); flex-shrink: 0; }
.cal-assign-preview-meta {
  font-size: 10.5px; margin-top: 1px;
  color: var(--amber); font-weight: 500;
}

/* ─── Tray de pedidos sin fecha (T10) ─── */
.cal-tray {
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--amber);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 160ms var(--ease-in);
}
.cal-tray.is-expanded {
  box-shadow: 0 6px 18px rgba(177, 116, 36, 0.10);
}
.cal-tray-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--amber-soft);
  border: none; cursor: pointer;
  text-align: left;
  transition: background 120ms var(--ease-in);
}
.cal-tray-trigger:hover {
  background: var(--amber-soft);
  filter: brightness(0.98);
}
.cal-tray-trigger-l {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.cal-tray-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--surface); color: var(--amber);
  flex-shrink: 0;
}
.cal-tray-lbl {
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
  flex-shrink: 0;
}
.cal-tray-hint {
  font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.cal-tray-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--ink-3);
  transition: transform 160ms var(--ease-in);
}
.cal-tray-chev.is-open { transform: rotate(180deg); }
.cal-tray-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  animation: cal-tray-in 160ms var(--ease-out);
}
@keyframes cal-tray-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cal-tray-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer; text-align: left;
  transition: background 120ms var(--ease-in);
}
.cal-tray-item:last-child { border-bottom: none; }
.cal-tray-item:hover { background: var(--surface-2); }
.cal-tray-item-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--amber-soft); color: var(--amber);
  font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; flex-shrink: 0;
}
.cal-tray-item-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.cal-tray-item-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
}
.cal-tray-item-canal {
  font-family: 'Geist Mono', monospace; font-size: 9px;
  font-weight: 500; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--amber-soft); color: var(--amber);
}
.cal-tray-item-motivo {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-tray-item-cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 500;
  flex-shrink: 0;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-tray-item:hover .cal-tray-item-cta {
  background: var(--ink); color: var(--surface);
}

/* ─── Pedidos pendientes (ghost cards, T9) ─── */
.cal-pedido {
  position: absolute;
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--amber);
  background:
    repeating-linear-gradient(135deg,
      var(--amber-soft) 0, var(--amber-soft) 8px,
      transparent 8px, transparent 11px);
  padding: 5px 8px 4px;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
  transition: transform 120ms var(--ease-in), box-shadow 120ms var(--ease-in), background 120ms var(--ease-in);
  display: flex; flex-direction: column;
  color: var(--amber);
}
.cal-pedido:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(177, 116, 36, 0.18);
  background: var(--amber-soft);
  z-index: 5;
}
.cal-pedido-head {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 1px;
}
.cal-pedido-eyebrow {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Geist Mono', monospace; font-size: 9px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--amber); font-weight: 500;
  opacity: 0.95;
}
.cal-pedido-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); line-height: 1.2; min-width: 0;
}
.cal-pedido-name > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
.cal-pedido-name > svg { flex-shrink: 0; color: var(--amber); }
.cal-pedido-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; opacity: 0.95;
  margin-top: 1px;
  color: var(--amber);
}
.cal-pedido-meta .fi-mono { font-size: 10px; flex-shrink: 0; }
.cal-pedido-canal {
  flex-shrink: 0;
  font-family: 'Geist Mono', monospace; font-size: 9px;
  font-weight: 500; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 3px;
  background: var(--surface); color: var(--amber);
  border: 1px solid var(--amber);
}
.cal-pedido.is-narrow {
  padding: 3px 4px;
  align-items: center; justify-content: center;
}
.cal-pedido-narrow {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--amber);
}
.cal-pedido-init {
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
}

.cal-turno {
  position: absolute; left: 4px; right: 4px;
  border-radius: var(--r-sm);
  padding: 5px 8px 4px;
  overflow: hidden;
  z-index: 2;
  cursor: default;
  transition: transform 120ms var(--ease-in), box-shadow 120ms var(--ease-in);
}
.cal-turno:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  z-index: 3;
}
.cal-turno.is-atendiendo {
  box-shadow: 0 0 0 1.5px var(--accent), 0 6px 14px rgba(138,103,34,.18);
  z-index: 4;
}
.cal-turno.is-cancelado .cal-turno-name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.cal-turno-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-turno-meta {
  font-size: 10.5px; opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.cal-turno-meta .fi-mono { font-size: 10px; flex-shrink: 0; }
.cal-turno-gcal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--surface);
  flex-shrink: 0;
  opacity: 0.95;
}
.cal-turno-initials {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 3px;
}
.cal-turno-initials .cal-turno-gcal {
  width: 11px; height: 11px;
}
.cal-turno.is-narrow {
  padding: 4px 5px 3px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
}
.cal-turno.is-narrow .cal-turno-meta {
  font-size: 9.5px; margin-top: 0;
  line-height: 1.1;
}
.cal-turno.is-narrow .cal-turno-meta .fi-mono { font-size: 9.5px; }
.cal-bloqueo.is-narrow {
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.cal-bloqueo-narrow {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--slate); opacity: 0.85;
}
.cal-bloqueo-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cal-turno-pulse {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: fi-pulse 1.8s ease-in-out infinite;
}

.cal-hover-slot {
  position: absolute; left: 4px; right: 4px;
  height: 26px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; color: var(--accent-2);
  pointer-events: none; z-index: 5;
  transform: translateY(0);
  animation: cal-slot-in 120ms var(--ease-in);
}
@keyframes cal-slot-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cal-hover-slot b { font-weight: 600; margin-left: 2px; }

.cal-ahora {
  position: absolute; left: -3px; right: 0;
  z-index: 6; pointer-events: none;
  transform: translateY(-1px);
  display: flex; align-items: center;
}
.cal-ahora-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.cal-ahora-line {
  flex: 1; height: 1.5px;
  background: var(--accent);
}

/* ─── Vista Mes ─── */
.cal-mes { margin-top: 22px; }
.cal-mes-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}
.cal-mes-day-h {
  padding: 12px 14px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .1em;
  border-right: 1px solid var(--line-soft);
}
.cal-mes-day-h:last-child { border-right: none; }
.cal-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 110px);
  background: var(--line);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.cal-mes-cell {
  background: var(--surface);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: background 120ms var(--ease-in);
}
.cal-mes-cell:hover { background: var(--surface-2); }
.cal-mes-cell.is-clickable { cursor: pointer; }
.cal-mes-cell.is-clickable:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.cal-mes-cell.is-other { background: var(--bg); }
.cal-mes-cell.is-other .cal-mes-num { color: var(--ink-4); }
.cal-mes-cell.is-cerrado { background: var(--surface-2); }
.cal-mes-cell.is-cerrado .cal-mes-num { color: var(--ink-3); }
.cal-mes-cell.is-feriado { background: var(--red-soft); }
.cal-mes-cell.is-hoy {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.cal-mes-cell-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.cal-mes-num {
  font-size: 18px; font-weight: 600; letter-spacing: -.012em; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cal-mes-cell.is-hoy .cal-mes-num { color: var(--accent-2); }
.cal-mes-count {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ink-3); letter-spacing: .04em;
}
.cal-mes-tag {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--red); letter-spacing: .04em; text-transform: uppercase;
}
.cal-mes-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-mes-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
}
.cal-mes-cell.is-hoy .cal-mes-dot { background: var(--accent); }
.cal-mes-bar {
  margin-top: auto;
  height: 3px; border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.cal-mes-bar-fill {
  height: 100%; background: var(--ink-3);
  border-radius: 2px;
  transition: width 240ms var(--ease-in);
}
.cal-mes-cell.is-hoy .cal-mes-bar-fill { background: var(--accent); }
.cal-mes-cerrado {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase;
}

/* ─── Popover Agendar (T5) ─── */
.cal-pop {
  position: fixed;
  width: 320px;
  max-height: min(480px, calc(100vh - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(27, 24, 18, 0.04),
    0 8px 24px rgba(27, 24, 18, 0.10),
    0 24px 48px rgba(27, 24, 18, 0.08);
  z-index: 50;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cal-pop-in 140ms var(--ease-out);
}
@keyframes cal-pop-in {
  from { opacity: 0; transform: translateX(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
.cal-pop-left { animation-name: cal-pop-in-left; }
@keyframes cal-pop-in-left {
  from { opacity: 0; transform: translateX(4px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0)   scale(1);    }
}
.cal-pop-below { animation-name: cal-pop-in-below; }
@keyframes cal-pop-in-below {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.cal-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.cal-pop-head-info {
  display: flex; flex-direction: column; gap: 2px;
}
.cal-pop-head-when {
  font-size: 10.5px; font-family: 'Geist Mono', monospace;
  color: var(--ink-3); letter-spacing: .04em;
  text-transform: lowercase;
}
.cal-pop-head-time {
  font-size: 18px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
}
.cal-pop-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-3); cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-pop-close:hover { background: var(--surface-2); color: var(--ink); }

.cal-pop-body {
  padding: 10px;
  overflow-y: auto;
}

/* ─── Choose: 3 opciones ─── */
.cal-pop-choose {
  display: flex; flex-direction: column; gap: 2px;
}
.cal-pop-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  color: var(--ink); cursor: pointer;
  text-align: left;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-pop-opt:hover {
  background: var(--surface-2);
  border-color: var(--line-soft);
}
.cal-pop-opt:focus-visible {
  outline: none;
  background: var(--accent-soft);
  border-color: var(--accent);
}
.cal-pop-opt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
  flex-shrink: 0;
}
.cal-pop-opt.is-block .cal-pop-opt-ico {
  background: var(--slate-soft); color: var(--slate);
}
.cal-pop-opt-body {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.cal-pop-opt-body b {
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--ink);
}
.cal-pop-opt-body small {
  font-size: 11px; color: var(--ink-3);
}
.cal-pop-opt > svg:last-child {
  color: var(--ink-4);
  flex-shrink: 0;
}
.cal-pop-sep {
  height: 1px; background: var(--line-soft);
  margin: 6px 4px;
}

/* ─── Step shell (existente / nuevo / bloquear) ─── */
.cal-pop-step {
  display: flex; flex-direction: column; gap: 12px;
}
.cal-pop-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 6px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  font-size: 11px; color: var(--ink-3); cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-pop-back:hover { background: var(--surface-2); color: var(--ink); }
.cal-pop-back svg { transform: rotate(180deg); }

/* ── Búsqueda existente ── */
.cal-pop-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--ink-3);
}
.cal-pop-search:focus-within {
  border-color: var(--accent); background: var(--surface);
}
.cal-pop-search input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-size: 12.5px; color: var(--ink); font-family: 'Geist', sans-serif;
}
.cal-pop-search input::placeholder { color: var(--ink-4); }

.cal-pop-pac-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto;
}
.cal-pop-pac {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  text-align: left; cursor: pointer;
  transition: background 120ms var(--ease-in);
}
.cal-pop-pac:hover { background: var(--surface-2); }
.cal-pop-pac-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; flex-shrink: 0;
}
.cal-pop-pac-body {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
}
.cal-pop-pac-body b {
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-pop-pac-body small {
  font-size: 10.5px; color: var(--ink-3);
}
.cal-pop-empty {
  padding: 16px 8px; font-size: 11.5px; color: var(--ink-3);
  text-align: center;
}

/* ── Summary tras pick ── */
.cal-pop-summary {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.cal-pop-summary b {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.cal-pop-summary small {
  font-size: 11px; color: var(--ink-3);
}

/* ── Fields ── */
.cal-pop-field {
  display: flex; flex-direction: column; gap: 5px;
}
.cal-pop-field > span {
  font-size: 10.5px; font-weight: 500;
  color: var(--ink-2); letter-spacing: .005em;
}
.cal-pop-field > span em {
  font-style: normal; color: var(--ink-4); font-weight: 400;
}
.cal-pop-field input,
.cal-pop-field textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 12.5px;
  color: var(--ink); outline: none;
  transition: border-color 120ms var(--ease-in);
}
.cal-pop-field input::placeholder,
.cal-pop-field textarea::placeholder { color: var(--ink-4); }
.cal-pop-field input:focus,
.cal-pop-field textarea:focus { border-color: var(--accent); }

/* ── Servicio picker ── */
.cal-pop-svc {
  display: flex; flex-direction: column; gap: 6px;
}
.cal-pop-svc-list {
  display: flex; flex-direction: column; gap: 4px;
}
.cal-pop-svc-opt {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-soft);
  cursor: pointer; text-align: left;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-pop-svc-opt:hover { background: var(--surface-2); }
.cal-pop-svc-opt.is-active {
  background: var(--accent-soft); border-color: var(--accent);
}
.cal-pop-svc-opt b {
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.cal-pop-svc-opt small {
  font-size: 10.5px; color: var(--ink-3);
}
.cal-pop-svc-opt.is-active b { color: var(--accent-2); }

/* ── Confirm CTA ── */
.cal-pop-confirm {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--surface);
  border: none; cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: -.005em;
  transition: background 120ms var(--ease-in), opacity 120ms var(--ease-in);
}
.cal-pop-confirm:hover { background: var(--ink-2); }
.cal-pop-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
.cal-pop-confirm-block { background: var(--slate); }
.cal-pop-confirm-block:hover { background: var(--ink-2); }

/* ── Bloquear: presets + duración ── */
.cal-pop-bloq-presets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.cal-pop-preset {
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink-2); cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 500;
  text-align: center;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-pop-preset:hover { background: var(--surface); border-color: var(--line); }
.cal-pop-preset.is-active {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.cal-pop-dur { margin-top: 2px; }
.cal-pop-dur-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.cal-pop-dur-opt {
  padding: 6px 4px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink-2); cursor: pointer;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  text-align: center;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cal-pop-dur-opt:hover { background: var(--surface); border-color: var(--line); }
.cal-pop-dur-opt.is-active {
  background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent);
}

/* ─── Multi-selección (T6) ─── */
.cal-selection {
  position: absolute; left: 4px; right: 4px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  z-index: 4;
  pointer-events: none;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 6px;
  animation: cal-sel-in 100ms var(--ease-out);
}
@keyframes cal-sel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cal-selection.is-ghost {
  background: var(--accent-soft);
  opacity: 0.7;
}
.cal-selection.is-final {
  background: var(--accent-soft);
  box-shadow: 0 4px 12px rgba(138, 103, 34, 0.15);
}
.cal-selection-dur {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--accent-2); font-weight: 600;
  background: var(--surface);
  padding: 2px 5px; border-radius: 3px;
  letter-spacing: .02em;
}

.cal-sel-toolbar {
  position: fixed;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow:
    0 1px 2px rgba(27, 24, 18, 0.04),
    0 8px 20px rgba(27, 24, 18, 0.12);
  z-index: 49;
  padding: 10px;
  animation: cal-pop-in 140ms var(--ease-out);
}
.cal-sel-toolbar-head {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.cal-sel-toolbar-eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.cal-sel-toolbar-range {
  font-size: 13px; color: var(--ink); font-weight: 500;
  letter-spacing: -.005em;
}
.cal-sel-toolbar-dur {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--accent-2); font-weight: 600;
}
.cal-sel-toolbar-warn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 10.5px; font-weight: 500;
  margin-bottom: 8px;
}
.cal-sel-toolbar-actions {
  display: flex; flex-direction: column; gap: 4px;
}
.cal-sel-toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 500;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-sel-toolbar-btn:hover { background: var(--surface-2); border-color: var(--ink-4); color: var(--ink); }
.cal-sel-toolbar-btn.is-primary {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.cal-sel-toolbar-btn.is-primary:hover { background: var(--ink-2); }

/* ═══ UTILIDADES COMPARTIDAS (ex Focus Mode): fm-mono / fm-save / fm-modal-check ═══ */
.fm-mono { font-family: 'Geist Mono', monospace; letter-spacing: -.005em; }

.fm-save {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink-3);
}
.fm-save--saved { color: var(--green); }
.fm-save--saving { color: var(--accent-2); }
.fm-save-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  border-top-color: transparent;
  animation: fm-spin 700ms linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }

.fm-modal-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2); cursor: default;
}
.fm-modal-check input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fm-modal-check input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent-2);
}
.fm-modal-check input[type="checkbox"]:checked::after {
  content: ''; display: block;
  width: 9px; height: 5px;
  border-left: 1.5px solid #FBF9F4;
  border-bottom: 1.5px solid #FBF9F4;
  transform: rotate(-45deg) translateY(-1px);
}

/* ═════════════════════════ PACIENTE FULL PAGE ═════════════════════════ */
.pc-content { max-width: none; padding: 28px 40px 80px; }

/* HEADER */
.pc-head { padding-bottom: 20px; }
.pc-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-3); text-decoration: none;
  padding: 4px 8px 4px 4px; border-radius: var(--r-sm);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.pc-back:hover { background: var(--surface-2); color: var(--ink); }

.pc-id-row {
  display: flex; align-items: center; gap: 20px;
  margin-top: 16px;
}
.pc-avatar {
  width: 56px; height: 56px; font-size: 17px;
}
.pc-id-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pc-id-body h1 {
  font-size: 28px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink); margin: 0;
}
.pc-id-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3);
  flex-wrap: wrap;
}
.pc-actions { display: flex; gap: 8px; }

/* TABS */
.pc-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 24px;
  padding-bottom: 0;
}
.pc-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13.5px; color: var(--ink-3); font-weight: 500;
  cursor: default;
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.pc-tab:hover { color: var(--ink); }
.pc-tab.is-active {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--accent);
}
.pc-tab-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  opacity: 0.6;
}

/* MODULE BADGE — señaliza que esta tab cambia por profesión */
.pc-module-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  margin-bottom: 18px;
}
.pc-module-badge > svg { color: var(--accent); }
.pc-module-badge > span:nth-child(2) {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.pc-module-hint {
  font-size: 11px; color: var(--ink-3);
  padding-left: 8px; border-left: 1px solid var(--line-soft);
  margin-left: 2px;
}

/* TAB CONTENT GRID */
.pc-plan-tab { display: flex; flex-direction: column; gap: 24px; }
.pc-plan-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  min-height: 600px;
}
.pc-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
}

/* CARD */
.pc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.pc-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.pc-card-text {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0;
}
.pc-link {
  font-size: 12px; color: var(--ink-3);
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 0; cursor: default;
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.pc-link:hover { color: var(--ink); border-color: var(--ink-4); }

/* SPINE WRAPPER */
.pc-spine-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.pc-spine-head { display: flex; flex-direction: column; gap: 6px; }
.pc-spine-head p { margin: 0; font-size: 12px; color: var(--ink-3); }
.pc-spine-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 8px;
}
.pc-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--ink-3);
}
.pc-legend-swatch {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}

.pc-spine-body {
  position: relative; flex: 1;
  display: flex; justify-content: center;
  min-height: 540px;
}
.pc-spine-svg {
  width: 220px; height: 100%; max-height: 580px;
  display: block;
}
.pc-spine-region-labels {
  position: absolute; left: 8px; top: 0; bottom: 0;
  pointer-events: none;
}
.pc-spine-region-labels > span {
  position: absolute; left: 0;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

.pc-spine-tip {
  position: absolute;
  padding: 8px 10px;
  background: var(--ink); color: var(--surface);
  border-radius: 6px;
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none; z-index: 10;
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  animation: pc-tip-in 100ms var(--ease-in);
}
@keyframes pc-tip-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pc-spine-tip b {
  font-family: 'Geist Mono', monospace; font-weight: 600;
}
.pc-spine-tip .muted { color: rgba(251,249,244,.55); font-size: 10.5px; }
[data-theme="dark"] .pc-spine-tip {
  background: var(--surface-3); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
}
[data-theme="dark"] .pc-spine-tip .muted { color: var(--ink-3); }

.pc-spine-popover {
  position: absolute;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--shadow-2);
  min-width: 200px; z-index: 12;
  animation: pc-pop-in 160ms var(--ease-in);
}
@keyframes pc-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pc-spine-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.pc-spine-popover-head b {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink);
}
.pc-spine-popover-close {
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.pc-spine-popover-close:hover { background: var(--surface-2); color: var(--ink); }
.pc-spine-popover-opts { display: flex; flex-direction: column; gap: 2px; }
.pc-spine-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2);
  cursor: default;
  transition: background 100ms var(--ease-in);
}
.pc-spine-opt:hover { background: var(--surface-2); color: var(--ink); }
.pc-spine-opt.is-active {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.pc-spine-opt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* SOAP STACKED */
.pc-soap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.pc-soap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.pc-soap-section { display: flex; flex-direction: column; gap: 4px; }
.pc-soap-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 2px;
}
.pc-soap-section-head b {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}
.pc-soap-section-hint { font-size: 11.5px; color: var(--ink-3); }
/* C9 · guía SOAP por especialidad — andamiaje visual sobre el textarea. */
.pc-soap-guia {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px; padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
}
.pc-soap-guia-prompt {
  margin: 0; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2); font-weight: 500;
}
.pc-soap-guia-list {
  margin: 0; padding-left: 16px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}
.pc-soap-guia-list li { padding-left: 2px; }
.pc-soap-textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 14px;
  line-height: 1.55; color: var(--ink);
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.pc-soap-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.pc-soap-textarea::placeholder { color: var(--ink-4); }

/* PLAN DE TRATAMIENTO */
.pc-plan .pc-plan-progress { display: flex; flex-direction: column; gap: 8px; }
.pc-plan-progress-row {
  display: flex; align-items: baseline; gap: 10px;
}
.pc-plan-num {
  font-size: 32px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pc-plan-num small {
  font-size: 16px; color: var(--ink-3); font-weight: 500; margin-left: 4px;
}
.pc-plan-num-lbl { font-size: 13px; color: var(--ink-3); }
.pc-plan-pct {
  margin-left: auto;
  font-family: 'Geist Mono', monospace; font-size: 13px;
  color: var(--accent-2); letter-spacing: -.005em;
}
.pc-plan-bar {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.pc-plan-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width 400ms var(--ease-in);
}
.pc-plan-bar-segs {
  position: absolute; inset: 0;
  display: flex; gap: 2px;
  padding: 0 1px;
  pointer-events: none;
}
.pc-plan-seg { flex: 1; }
.pc-plan-seg.is-done { box-shadow: inset 0 0 0 1px var(--accent-2); }
.pc-plan-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 6px; border-top: 1px solid var(--line-soft);
}
.pc-plan-meta div { display: flex; flex-direction: column; gap: 3px; }
.pc-plan-meta span { font-size: 11px; }
.pc-plan-meta b {
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}

/* HISTORIAL */
.pc-historial-list {
  display: flex; flex-direction: column;
  padding: 4px 0;
}
.pc-historial-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 14px;
  padding-bottom: 14px;
}
.pc-historial-row:last-child { padding-bottom: 0; }
.pc-historial-marker {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.pc-historial-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  margin-top: 4px;
  flex-shrink: 0;
}
.pc-historial-line {
  width: 1px; flex: 1; min-height: 24px;
  background: var(--line);
  margin-top: 2px;
}
.pc-historial-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink);
}
.pc-historial-head b { font-weight: 600; color: var(--ink); }
.pc-historial-sep { color: var(--ink-4); }
.pc-historial-dur {
  margin-left: auto;
  color: var(--ink-3); font-size: 11px;
}
.pc-historial-cambio {
  font-size: 13px; color: var(--ink-2); margin: 4px 0 0; line-height: 1.5;
}
.pc-historial-vertebras {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
}
.pc-historial-vert {
  background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
  font-size: 10.5px; color: var(--ink-2); border: 1px solid var(--line-soft);
}

/* INFORMACION TAB */
.pc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.pc-info-notes { grid-column: 1 / -1; }
.pc-dl {
  display: grid; grid-template-columns: 140px 1fr;
  row-gap: 10px; column-gap: 16px;
  margin: 0;
}
.pc-dl dt {
  font-size: 11.5px; color: var(--ink-3);
  font-family: 'Geist Mono', monospace; letter-spacing: .04em;
  text-transform: uppercase;
  align-self: center;
}
.pc-dl dd {
  font-size: 13.5px; color: var(--ink); margin: 0;
  letter-spacing: -.005em;
}
.pc-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* SESIONES TAB */
.pc-sesiones { display: flex; flex-direction: column; gap: 16px; }
.pc-sesiones-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.pc-sesiones-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pc-sesion-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 120ms var(--ease-in);
}
.pc-sesion-row:last-child { border-bottom: 0; }
.pc-sesion-row:hover { background: var(--surface-2); }
.pc-sesion-date { display: flex; flex-direction: column; }
.pc-sesion-date b { font-size: 14px; color: var(--ink); letter-spacing: -.005em; }
.pc-sesion-date span { font-size: 11px; }
.pc-sesion-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-sesion-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-sesion-title b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pc-sesion-body p { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.pc-sesion-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* ═════════════════════════ RESERVAS ═════════════════════════ */
.rs-content { max-width: 1080px; padding: 32px 32px 80px; }

/* HEAD */
.rs-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.rs-head h1 {
  margin: 6px 0 0;
  font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink);
}
.rs-head-sub { font-size: 13.5px; color: var(--ink-3); margin: 8px 0 0; }
.rs-auto {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: default;
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.rs-auto.is-on { border-color: var(--accent); background: var(--accent-soft); }
.rs-auto-text { display: flex; flex-direction: column; gap: 2px; }
.rs-auto-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.rs-auto-info {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10px; font-weight: 600;
  border: 1px solid var(--line-soft);
}
.rs-auto-sub { font-size: 11px; color: var(--ink-3); }
.rs-switch {
  width: 36px; height: 20px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative; cursor: default;
  transition: background 200ms var(--ease-in), border-color 120ms var(--ease-in);
  flex-shrink: 0;
}
.rs-switch-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); transition: transform 200ms var(--ease-in), background 200ms var(--ease-in);
}
.rs-auto.is-on .rs-switch { background: var(--accent); border-color: var(--accent-2); }
.rs-auto.is-on .rs-switch-thumb { transform: translateX(16px); background: #FBF9F4; }

/* TABS */
.rs-tabs {
  display: flex; gap: 4px;
  margin: 18px 0 18px;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
}
.rs-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-size: 13px; color: var(--ink-3); font-weight: 500;
  cursor: default;
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.rs-tab:hover { color: var(--ink); }
.rs-tab.is-active {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--accent);
}
.rs-tab-count {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  padding: 1px 6px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.rs-tab.is-active .rs-tab-count {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.rs-tab-count.is-primary {
  background: var(--accent); color: #FBF9F4; border-color: var(--accent-2);
}

/* LIST */
.rs-list { display: flex; flex-direction: column; gap: 14px; }

/* CARD */
.rs-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.rs-card:hover { border-color: var(--ink-4); }
.rs-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.rs-card-id {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.rs-avatar {
  width: 40px; height: 40px; font-size: 13px;
}
.rs-card-id-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rs-card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-card-name {
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}
.rs-canal {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px 2px 5px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.rs-canal > svg { color: var(--ink-2); }
.rs-card-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3);
}
.rs-sep { color: var(--ink-4); }

.rs-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.rs-estado-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* SLOT row */
.rs-card-slot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.rs-card-slot-info, .rs-card-slot-warn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
}
.rs-card-slot-info b { color: var(--ink); font-weight: 600; }
.rs-card-slot-info s { color: var(--ink-3); }
.rs-card-slot-warn { color: var(--amber); }
.rs-card-servicio {
  font-size: 12px; color: var(--ink-3);
}
.rs-card-servicio .fm-mono { color: var(--ink-2); }

/* MOTIVO */
.rs-card-motivo {
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  padding: 0 4px;
}

/* ACTIONS */
.rs-card-actions {
  display: flex; align-items: center; gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.rs-actions-grow { flex: 1; }

/* MODAL */
.rs-modal { width: 520px; max-width: calc(100vw - 40px); }
.rs-modal-summary {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.rs-modal-summary h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.rs-modal-meta { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }
.rs-modal-meta .fm-mono { color: var(--ink-2); }

.rs-modal-slot { display: flex; flex-direction: column; gap: 8px; }
.rs-slot-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rs-slot-card-l {
  display: flex; align-items: center; gap: 12px;
}
.rs-slot-card-l > svg { color: var(--accent); }
.rs-slot-card-l b { font-size: 14px; font-weight: 600; color: var(--ink); }
.rs-slot-time { font-size: 12px; color: var(--ink-3); display: block; margin-top: 2px; }
.rs-slot-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--green); letter-spacing: .04em;
}

.rs-modal-section { display: flex; flex-direction: column; gap: 10px; }
.rs-modal-msg { display: flex; flex-direction: column; gap: 8px; }
.rs-modal-msg-head {
  display: flex; align-items: center; justify-content: space-between;
}
.rs-modal-msg-hint { font-size: 11px; color: var(--ink-3); }
.rs-modal-textarea {
  width: 100%; resize: vertical;
  min-height: 100px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 13.5px;
  line-height: 1.55; color: var(--ink);
  transition: border-color 120ms var(--ease-in);
}
.rs-modal-textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.rs-modal-tel {
  font-size: 11px; color: var(--ink-3);
  padding-left: 14px;
}

.rs-form-row {
  display: grid; grid-template-columns: 1fr 140px;
  gap: 10px;
}
.rs-form-row label {
  display: flex; flex-direction: column; gap: 4px;
}
.rs-form-row label > span {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase;
}
.rs-input {
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: 13px;
  color: var(--ink);
  color-scheme: light dark;
}
.rs-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
[data-theme="dark"] .rs-input { color-scheme: dark; }

/* ═════════════════════════ ONBOARDING ═════════════════════════ */
.onb-app {
  min-height: 100vh;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.onb-app-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
}
.onb-app-brand {
  display: flex; align-items: center; gap: 8px;
}
.onb-brand-name {
  font-size: 16px; font-weight: 600; letter-spacing: -.04em; color: var(--ink);
}
.onb-skip-to-panel {
  font-size: 12px; color: var(--ink-3);
  padding: 6px 10px; border-radius: var(--r-sm);
  background: transparent; border: 0; cursor: default;
  transition: color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.onb-skip-to-panel:hover { color: var(--ink); background: var(--surface-2); }
.onb-app-main {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 64px 24px 80px;
}

/* STEP CONTAINER */
.onb-step {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 36px;
}
.onb-step-head { display: flex; flex-direction: column; gap: 10px; }
.onb-step-num {
  font-size: 11px; color: var(--ink-3); letter-spacing: .12em;
  text-transform: uppercase;
}
.onb-step-head h1 {
  font-size: 36px; font-weight: 600; letter-spacing: -.022em;
  line-height: 1.06; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.onb-step-sub {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  margin: 0; max-width: 460px;
}
.onb-step-body { display: flex; flex-direction: column; gap: 24px; }
.onb-step-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.onb-foot-grow { flex: 1; }
.onb-skip {
  font-size: 12.5px; color: var(--ink-3);
  background: transparent; border: 0; padding: 8px 10px;
  cursor: default;
  transition: color 120ms var(--ease-in);
}
.onb-skip:hover { color: var(--ink); }

/* FORM */
.onb-form { display: flex; flex-direction: column; gap: 18px; }
.onb-form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.onb-field {
  display: flex; flex-direction: column; gap: 6px;
}
.onb-field > span:first-child {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.onb-field > span small {
  text-transform: none; letter-spacing: 0; color: var(--ink-4);
  margin-left: 4px;
}
.onb-field input, .onb-field select, .onb-field textarea {
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: 14.5px;
  color: var(--ink);
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.onb-field input::placeholder { color: var(--ink-4); }
.onb-field input:focus, .onb-field select:focus {
  outline: none; border-color: var(--accent);
}
.onb-field.is-err input { border-color: var(--red); background: var(--red-soft); }
.onb-err {
  font-size: 11.5px; color: var(--red); margin-top: 2px;
}
.onb-hint {
  font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
}
.onb-input-prefix {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
.onb-input-prefix:focus-within { border-color: var(--accent); }
.onb-input-prefix > span {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  background: var(--bg);
  border-right: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: 13px;
}
.onb-input-prefix input { border: 0; flex: 1; }

.onb-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 16px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-3);
  cursor: default;
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.onb-dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.onb-dropzone svg { color: var(--ink-4); }
.onb-dropzone b { color: var(--ink); font-weight: 600; }
.onb-dropzone .onb-hint { margin: 4px 0 0; font-size: 11px; }

/* GOOGLE BTN + DIVIDER */
.onb-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: default;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.onb-btn-google:hover { background: var(--surface-2); border-color: var(--ink-4); }
.onb-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--ink-3);
}
.onb-divider::before, .onb-divider::after {
  content: ''; flex: 1; border-top: 1px solid var(--line-soft);
}

/* ACENTOS */
.onb-acentos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.onb-acento {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  text-align: left; cursor: default;
  transition: border-color 160ms var(--ease-in), transform 120ms var(--ease-in), box-shadow 160ms var(--ease-in);
}
.onb-acento:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.onb-acento.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-acento-preview {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
  height: 96px;
}
.onb-acento-chart {
  display: flex; align-items: flex-end; gap: 3px;
  flex: 1; height: 100%;
}
.onb-chart-bar {
  flex: 1; min-height: 8%;
  border-radius: 2px 2px 0 0;
  transition: height 240ms var(--ease-in);
}
.onb-acento-cta {
  align-self: flex-start;
  font-size: 11px; font-weight: 500; color: #FBF9F4;
  padding: 5px 10px; border-radius: 4px;
}
.onb-acento-meta {
  display: flex; align-items: center; gap: 10px;
}
.onb-acento-swatch {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
}
.onb-acento-meta > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.onb-acento-meta b { font-size: 13px; color: var(--ink); }
.onb-acento-meta span { font-size: 11.5px; color: var(--ink-3); }
.onb-acento-check {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--surface);
}

/* DIAS / FRANJAS */
.onb-dias {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.onb-dia {
  width: 44px; height: 38px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  cursor: default;
  transition: all 120ms var(--ease-in);
}
.onb-dia:hover { color: var(--ink); border-color: var(--ink-4); }
.onb-dia.is-on {
  background: var(--accent); color: #FBF9F4; border-color: var(--accent-2);
  font-weight: 600;
}
.onb-franjas { display: flex; flex-direction: column; gap: 8px; }
.onb-franja {
  display: flex; align-items: center; gap: 10px;
}
.onb-franja input[type="time"] {
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; font-family: 'Geist Mono', monospace;
  color: var(--ink); width: 110px;
  color-scheme: light;
}
[data-theme="dark"] .onb-franja input[type="time"] { color-scheme: dark; }
.onb-franja input[type="time"]:focus { outline: none; border-color: var(--accent); }
.onb-franja-remove {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center;
}
.onb-franja-remove:hover { background: var(--surface-2); color: var(--ink); }

.onb-link-add {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 6px 4px;
  font-size: 12.5px; color: var(--accent-2);
  background: transparent; border: 0; cursor: default;
  transition: color 120ms var(--ease-in);
}
.onb-link-add:hover { color: var(--accent); }

/* SERVICIOS */
.onb-servicios { display: flex; flex-direction: column; gap: 8px; }
.onb-servicio-row {
  display: grid;
  grid-template-columns: 1fr 110px 130px 32px;
  gap: 8px; align-items: stretch;
}
.onb-serv-name {
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink);
}
.onb-serv-name:focus { outline: none; border-color: var(--accent); }
.onb-serv-num {
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0 10px;
}
.onb-serv-num:focus-within { border-color: var(--accent); }
.onb-serv-num input {
  flex: 1; min-width: 0;
  padding: 10px 4px;
  background: transparent; border: 0;
  font: inherit; font-size: 13.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.onb-serv-num span { color: var(--ink-3); font-size: 12px; }
.onb-serv-remove {
  width: 32px; border-radius: var(--r-sm);
  color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
}
.onb-serv-remove:hover { background: var(--surface-2); color: var(--red); }

/* INTEGRATIONS (Google / MP) */
.onb-integration { display: flex; flex-direction: column; gap: 18px; }
.onb-oauth-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: default; text-align: left;
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in), transform 120ms var(--ease-in);
}
.onb-oauth-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.onb-oauth-ico {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.onb-oauth-body { flex: 1; min-width: 0; }
.onb-oauth-body b {
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
  display: block;
}
.onb-oauth-body p { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.5; }
.onb-oauth-arrow { color: var(--ink-3); }
.onb-fine { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   ONBOARDING PREMIUM · split layout, preview drawer, step transitions,
   step-9 reveal, save indicator, validation chrome.
   ════════════════════════════════════════════════════════════════════════ */

/* STEP 1 · layout split con SideArt — mismo del /login para continuidad
   visual entre las dos puertas de entrada del producto. */
.onb-step1-app {
  /* Hereda .au-app: grid 1.05fr 1fr + min-height 100vh. SideArt vive en la
     columna izquierda con su propio carousel. El form va en la derecha. */
}
.onb-step1-main {
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--bg);
  min-height: 100vh;
}
.onb-step1-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
}
.onb-step1-pane {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.onb-step1-pane > .onb-anim {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 32px 80px;
  overflow-y: auto;
}
.onb-step1-pane .onb-step {
  width: 100%; max-width: 420px;
}
.onb-step1-pane .onb-step-head h1 {
  font-size: 30px; line-height: 1.08;
}
@media (max-width: 920px) {
  .onb-step1-pane > .onb-anim {
    padding: 32px 20px 64px;
  }
}

/* Step transitions: slide-X (16px) + fade, respeta prefers-reduced-motion */
.onb-anim { animation: onb-step-in var(--motion-base) var(--motion-ease-out) both; }
.onb-anim-forward { animation-name: onb-step-in-forward; }
.onb-anim-back    { animation-name: onb-step-in-back; }
@keyframes onb-step-in-forward {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes onb-step-in-back {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes onb-step-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-anim, .onb-anim-forward, .onb-anim-back {
    animation: onb-step-fade 80ms var(--motion-ease-out) both;
  }
  @keyframes onb-step-fade { from { opacity: 0; } to { opacity: 1; } }
}
@keyframes onb-spin { to { transform: rotate(360deg); } }

/* SPLIT LAYOUT: form izq + sticky preview der (desktop ≥1024px) */
.onb-shell { width: 100%; max-width: 560px; }
.onb-shell-form { width: 100%; }
.onb-shell-preview { display: none; }
@media (min-width: 1024px) {
  .onb-shell-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px; align-items: flex-start;
    width: 100%; max-width: 980px;
  }
  .onb-shell-split .onb-shell-form { max-width: 560px; }
  .onb-shell-split .onb-shell-preview {
    display: block; position: sticky; top: 32px;
    align-self: start;
  }
}
.onb-preview-sticky {
  display: flex; flex-direction: column; gap: 10px;
}
.onb-preview-label {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.onb-preview-fine {
  font-size: 11.5px; color: var(--ink-3); margin: 4px 2px 0;
  line-height: 1.55;
}

/* MOBILE: floating preview button + drawer */
.onb-preview-fab {
  position: fixed; right: 16px; bottom: 88px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--ink); color: var(--surface);
  border: 0; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.08);
  transition: transform 160ms var(--motion-ease-out), background 160ms var(--motion-ease-out);
}
.onb-preview-fab:hover { transform: translateY(-1px); }
.onb-preview-fab.is-open { background: var(--accent); }
@media (min-width: 1024px) {
  .onb-preview-fab { display: none; }
}
.onb-preview-drawer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.onb-preview-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  animation: onb-fade-in 200ms var(--motion-ease-out) both;
}
.onb-preview-drawer-inner {
  position: relative; z-index: 1;
  margin-top: auto;
  background: var(--surface);
  padding: 20px 18px 28px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,.18);
  animation: onb-slide-up 280ms var(--motion-ease-out) both;
  max-height: 86vh; overflow-y: auto;
}
.onb-preview-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.onb-preview-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2); border: 0;
}
.onb-preview-close:hover { background: var(--line); color: var(--ink); }
@keyframes onb-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes onb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Footer hint: ↵ continuar (solo desktop) */
.onb-foot-kbd {
  display: none;
  margin-left: 6px; padding: 1px 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.18); border-radius: 4px;
}
.fi-btn-primary .onb-foot-kbd { color: rgba(255,255,255,.75); }
@media (min-width: 768px) {
  .onb-foot-kbd { display: inline-flex; align-items: center; }
}

/* Bio counter */
.onb-counter {
  align-self: flex-end;
  margin-top: 4px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  color: var(--ink-4); letter-spacing: .04em;
}
.onb-counter.is-over { color: var(--red); }

/* Banner error inline (Step 1) */
.onb-banner-err {
  padding: 10px 14px; margin: 6px 0 0;
  background: var(--red-soft);
  border: 1px solid color-mix(in oklab, var(--red) 30%, transparent);
  border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--red); line-height: 1.5;
}

/* Trial card (Step 8) */
.onb-trial-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.onb-trial-row { display: flex; gap: 14px; align-items: flex-start; }
.onb-trial-ico {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  flex-shrink: 0;
}
.onb-trial-row b {
  display: block;
  font-size: 14px; color: var(--ink); font-weight: 600;
  letter-spacing: -.005em;
}
.onb-trial-row p {
  margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 9 · THE MOMENT — reveal coreografiado
   ════════════════════════════════════════════════════════════════════════ */
.onb-moment {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding: 16px 8px 40px;
  width: 100%; max-width: 600px;
}
.onb-moment-mark {
  margin-bottom: 6px;
  opacity: 0;
  animation: onb-moment-mark var(--motion-deliberate) var(--motion-ease-out) both;
}
.onb-moment-head {
  margin: 0; font-size: 38px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.04; color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  animation: onb-moment-up 520ms var(--motion-ease-out) 400ms both;
}
.onb-moment-sub {
  margin: 0; font-size: 15px; color: var(--ink-2);
  line-height: 1.55; max-width: 480px;
  opacity: 0;
  animation: onb-moment-up 520ms var(--motion-ease-out) 520ms both;
}
.onb-moment-card {
  width: 100%; max-width: 520px; margin-top: 8px;
  opacity: 0;
  animation: onb-moment-card 720ms var(--motion-ease-out) 800ms both;
}
.onb-moment-link {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 520px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  opacity: 0;
  animation: onb-moment-up 360ms var(--motion-ease-out) 1280ms both;
}
.onb-moment-link-label { font-size: 10.5px; }
.onb-moment-link-row {
  display: flex; align-items: center; gap: 10px;
}
.onb-moment-url {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.onb-moment-copy {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.onb-moment-copy.is-copied {
  background: var(--accent); color: #FBF9F4; border-color: var(--accent);
}
.onb-moment-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%; max-width: 520px; margin-top: 4px;
}
.onb-moment-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-size: 14px;
  opacity: 0;
}
.onb-anim-cta-1 { animation: onb-moment-up 360ms var(--motion-ease-out) 1400ms both; }
.onb-anim-cta-2 { animation: onb-moment-up 360ms var(--motion-ease-out) 1480ms both; }
.onb-anim-cta-3 { animation: onb-moment-up 360ms var(--motion-ease-out) 1560ms both; }

/* Avatar idle pulse en la card del moment (sutil, cada 4s) */
.onb-moment-card .fpc-card .avatar-pulse,
.onb-moment-card .fpc-card img,
.onb-moment-card .fpc-card [role="img"] {
  animation: onb-avatar-pulse 4s var(--motion-ease-in-out) 2400ms infinite;
}
@keyframes onb-avatar-pulse {
  0%, 70%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.06); }
  80%           { transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px color-mix(in oklab, var(--accent, #8A6722) 28%, transparent); }
}

@keyframes onb-moment-mark {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes onb-moment-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes onb-moment-card {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .onb-moment-mark, .onb-moment-head, .onb-moment-sub,
  .onb-moment-card, .onb-moment-link,
  .onb-moment-cta {
    animation: onb-step-fade 120ms var(--motion-ease-out) both !important;
    transform: none !important;
  }
  .onb-moment-card .fpc-card img,
  .onb-moment-card .fpc-card [role="img"] {
    animation: none !important;
  }
}

/* Mobile: footer sticky + ctas stacked */
@media (max-width: 767px) {
  .onb-step-foot {
    position: sticky; bottom: 0; z-index: 10;
    margin: 0 -16px -8px;
    padding: 12px 16px;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--line-soft);
  }
  .onb-moment-ctas { flex-direction: column; }
  .onb-moment-cta { width: 100%; justify-content: center; }
  .onb-moment-head { font-size: 30px; }
  .onb-app-main { padding: 32px 16px 32px; }
}

/* STEP 9 · LISTO */
.onb-listo {
  align-items: center; text-align: center; gap: 22px;
}
.onb-listo-mark { margin-bottom: 4px; }
.onb-listo h1 {
  font-size: 40px; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.04; margin: 0; color: var(--ink);
}
.onb-listo-sub {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  max-width: 460px; margin: 0;
}
.onb-listo-link, .onb-listo-qr {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 440px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.onb-listo-link-row {
  display: flex; align-items: center; gap: 10px;
}
.onb-listo-url {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--ink); letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onb-listo-qr { align-items: center; }
.onb-qr {
  background: var(--surface);
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.onb-listo-cta { margin-top: 4px; padding: 12px 22px; font-size: 14px; }

/* BANNER FALTA PASO CRÍTICO */
.onb-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.onb-banner-ico {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #FBF9F4;
  flex-shrink: 0;
}
.onb-banner-text { flex: 1; font-size: 13px; color: var(--ink-2); }
.onb-banner-text b { color: var(--ink); font-weight: 600; }
.onb-banner-close {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.onb-banner-close:hover { background: rgba(0,0,0,.05); color: var(--ink); }

/* POST-ONBOARDING EMPTY STATE (Dashboard primer abierto) */
.onb-first-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.onb-first-glyph {
  width: 80px; height: 80px; border-radius: var(--r-md);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 4px;
}
.onb-first-empty h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.onb-first-empty p {
  font-size: 14px; color: var(--ink-3); margin: 0; max-width: 420px;
}
.onb-first-actions { display: flex; gap: 8px; margin-top: 12px; }

/* SETUP WIDGET (sidebar pendiente) */
.onb-setup-widget {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 12px;
}
.onb-setup-widget header {
  display: flex; align-items: center; justify-content: space-between;
}
.onb-setup-progress {
  font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.onb-setup-progress b { color: var(--ink); font-weight: 600; }
.onb-setup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.onb-setup-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2);
}
.onb-setup-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.onb-setup-cta {
  margin-left: auto;
  width: 24px; height: 24px; border-radius: 4px;
  color: var(--ink-3);
}
.onb-setup-cta:hover { background: var(--surface-2); color: var(--ink); }

/* ═════════════════════════ FINANZAS ═════════════════════════ */
.fn-content { max-width: 1200px; padding: 28px 32px 80px; }

/* HEAD */
.fn-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 24px;
}
.fn-head h1 {
  margin: 6px 0 0;
  font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink);
}
.fn-head-sub { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }

.fn-period {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.fn-period-btn {
  display: inline-block;
  padding: 6px 12px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; text-decoration: none;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fn-period-btn:hover { color: var(--ink); }
.fn-period-btn.is-active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(27,24,18,.06);
}

/* KPIs */
.fn-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 22px;
}
.fn-kpi {
  background: var(--surface);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.fn-kpi.is-primary {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 80%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.fn-kpi-val {
  font-size: 30px; font-weight: 600; letter-spacing: -.022em;
  color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.fn-kpi-val small {
  font-size: 16px; font-weight: 500; color: var(--ink-3); margin-right: 2px;
}
.fn-kpi-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.fn-kpi-sub { font-size: 11.5px; color: var(--ink-3); }
.fn-kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: -.005em;
}
.fn-kpi-delta.is-pos { color: var(--green); background: var(--green-soft); }
.fn-kpi-delta.is-neg { color: var(--red);   background: var(--red-soft); }

/* CHARTS GRID */
.fn-charts-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 18px; margin-bottom: 24px;
}
.fn-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.fn-chart-card header {
  display: flex; align-items: baseline; justify-content: space-between;
}
.fn-chart-sub { font-size: 11px; color: var(--green); letter-spacing: -.005em; }
.fn-chart-sub.muted { color: var(--ink-3); }

.fn-chart {
  width: 100%; height: 200px;
}

/* Donut */
.fn-donut-wrap {
  display: flex; align-items: center; gap: 20px;
}
.fn-donut { width: 180px; height: 180px; flex-shrink: 0; }
.fn-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fn-legend-row {
  display: grid;
  grid-template-columns: 10px 1fr auto 36px;
  gap: 10px; align-items: center;
  padding: 4px 0;
}
.fn-legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.fn-legend-name { font-size: 12.5px; color: var(--ink); }
.fn-legend-monto { font-size: 12px; color: var(--ink-2); }
.fn-legend-pct {
  font-size: 11px; color: var(--ink-3); text-align: right;
}

/* TABLA */
.fn-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fn-table-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.fn-table-tools { display: flex; align-items: center; gap: 8px; }
.fn-table-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  width: 220px;
}
.fn-table-search > svg { color: var(--ink-3); flex-shrink: 0; }
.fn-table-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  font: inherit; font-size: 12.5px; color: var(--ink);
}
.fn-table-search input::placeholder { color: var(--ink-4); }

.fn-table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fn-table thead th {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: 10px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.fn-table thead th.ta-r { text-align: right; }
.fn-table tbody tr { transition: background 120ms var(--ease-in); }
.fn-table tbody tr:hover { background: var(--surface-2); }
.fn-table tbody tr.is-pendiente td { background: rgba(176,131,42,.04); }
.fn-table tbody td {
  padding: 11px 22px;
  font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.fn-table tbody tr:last-child td { border-bottom: none; }
.fn-table td.muted { color: var(--ink-3); }
.fn-table td.ta-r { text-align: right; }
.fn-table td b { font-weight: 600; color: var(--ink); }

.fn-metodo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .04em;
}
.fn-metodo-dot { width: 6px; height: 6px; border-radius: 50%; }

.fn-monto { font-size: 13px; color: var(--ink); letter-spacing: -.005em; }
.fn-monto.is-pendiente { color: var(--amber); }

.fn-table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}
.fn-table-foot .muted { color: var(--ink-3); }

/* ═════════════════════════ PACIENTES DIRECTORIO ═════════════════════════ */
.pd-content { max-width: 1280px; padding: 28px 32px 100px; }

/* HEAD */
.pd-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 24px;
}
.pd-head h1 {
  margin: 6px 0 0;
  font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink);
}
.pd-head-sub { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.pd-head-actions { display: flex; gap: 8px; }

/* REACTIVAR WIDGET */
.pd-reactivar {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.pd-reactivar header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.pd-reactivar header > div .fi-eyebrow { color: var(--amber); }
.pd-reactivar header h3 {
  font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em; margin: 4px 0 0;
}
.pd-reactivar-list { display: flex; flex-direction: column; gap: 6px; }
.pd-reactivar-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid rgba(176,131,42,.25);
}
.pd-reactivar-row .fi-avatar.pd-avatar {
  width: 32px; height: 32px; font-size: 12px;
}
.pd-reactivar-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-reactivar-body b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.pd-reactivar-body .muted { font-size: 12px; color: var(--ink-3); }
.pd-reactivar-meta {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}

/* TOOLBAR */
.pd-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .pd-toolbar {
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
  }
  .pd-toolbar .pd-filtros {
    grid-column: 1 / -1;
    order: 2;
  }
}
.pd-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
  transition: border-color 120ms var(--ease-in);
}
.pd-search:focus-within { border-color: var(--accent); }
.pd-search > svg { color: var(--ink-3); flex-shrink: 0; }
.pd-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  font: inherit; font-size: 13px; color: var(--ink);
}
.pd-search input::placeholder { color: var(--ink-4); }
.pd-search .fi-kbd { font-size: 10px; }

.pd-filtros {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.pd-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-3); font-weight: 500;
  cursor: default;
  transition: all 120ms var(--ease-in);
}
.pd-filtro:hover { color: var(--ink); background: var(--surface-2); }
.pd-filtro.is-active {
  background: var(--ink); color: var(--surface); font-weight: 600;
  border-color: var(--ink);
}
.pd-filtro-count {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px;
}
.pd-filtro.is-active .pd-filtro-count {
  background: rgba(255,255,255,.15); color: var(--surface);
}
.pd-add { flex-shrink: 0; }

/* TABLE */
.pd-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table thead th {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  white-space: nowrap;
}
.pd-table thead th.ta-r { text-align: right; }
.pd-th-check { width: 36px; padding-left: 18px !important; padding-right: 4px !important; }
.pd-table tbody tr {
  cursor: default;
  transition: background 120ms var(--ease-in);
}
.pd-table tbody tr:hover { background: var(--surface-2); }
.pd-table tbody tr.is-selected { background: var(--accent-soft); }
.pd-table tbody td {
  padding: 12px 14px;
  font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.pd-table tbody td:first-child { padding-left: 18px; padding-right: 4px; }

/* check */
.pd-check {
  position: relative;
  display: inline-block;
  width: 16px; height: 16px;
  cursor: default;
}
.pd-check input { position: absolute; opacity: 0; inset: 0; cursor: default; }
.pd-check-box {
  display: block;
  width: 16px; height: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.pd-check input:checked + .pd-check-box {
  background: var(--accent); border-color: var(--accent-2);
}
.pd-check input:checked + .pd-check-box::after {
  content: ''; position: absolute; left: 4px; top: 2px;
  width: 6px; height: 9px;
  border-right: 1.5px solid #FBF9F4;
  border-bottom: 1.5px solid #FBF9F4;
  transform: rotate(45deg);
}

.pd-paciente {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.pd-avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.pd-paciente-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-paciente-body b {
  font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}
.pd-paciente-body .fm-mono { font-size: 11.5px; color: var(--ink-3); }

.pd-motivo {
  color: var(--ink-2); max-width: 260px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-ultima {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--ink-2); letter-spacing: -.005em;
}
.pd-ultima.is-riesgo { color: var(--red); }
.pd-dias { font-size: 11px; }

.pd-proximo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--green); letter-spacing: -.005em;
}
.pd-proximo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

.pd-cta-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink-3);
  padding: 3px 8px; border-radius: 4px;
  border: 1px dashed var(--line);
  background: transparent;
  cursor: default;
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.pd-cta-mini:hover { color: var(--ink); border-color: var(--ink-4); border-style: solid; }

.pd-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
}
.pd-estado-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* BULK BAR */
.pd-bulk {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--ink); color: var(--surface);
  border-radius: 99px;
  box-shadow: var(--shadow-2);
  z-index: 60;
  animation: pd-bulk-in 200ms var(--ease-in);
}
@keyframes pd-bulk-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pd-bulk-l {
  display: flex; align-items: center; gap: 10px;
  padding-right: 14px; border-right: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
}
.pd-bulk-l b { font-weight: 600; }
.pd-bulk-clear {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-bulk-clear:hover { background: rgba(255,255,255,.16); }
.pd-bulk-r { display: flex; gap: 6px; }
.pd-bulk-r .fi-btn {
  background: rgba(255,255,255,.10);
  color: var(--surface);
  border-color: transparent;
  font-size: 12px;
}
.pd-bulk-r .fi-btn:hover { background: rgba(255,255,255,.18); }
.pd-bulk-r .fi-btn-ghost { background: transparent; }
.pd-bulk-r .fi-btn-ghost:hover { background: rgba(255,255,255,.10); color: var(--surface); }

/* ═════════════════════════ CONFIGURACIÓN ═════════════════════════ */
.cfg-content { max-width: 1180px; padding: 28px 32px 80px; }

.cfg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.cfg-head h1 {
  margin: 6px 0 0;
  font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.06;
  color: var(--ink);
}
.cfg-save-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.cfg-save-msg {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .04em; color: var(--ink-3);
  padding: 0 8px;
}
.cfg-save-msg--saved { color: var(--green); }
.cfg-save-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); animation: fi-blink 1.6s ease-in-out infinite;
}
.cfg-save-bar.is-dirty .cfg-save-msg { color: var(--amber); }

.cfg-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .cfg-grid { grid-template-columns: 1fr; }
}

/* SIDE NAV */
.cfg-sidenav {
  position: sticky; top: 28px;
  align-self: start;
  display: flex; flex-direction: column; gap: 1px;
}
.cfg-sidenav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-3); font-weight: 500;
  cursor: default; text-align: left;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cfg-sidenav-item:hover { background: var(--surface-2); color: var(--ink); }
.cfg-sidenav-item.is-active {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.cfg-sidenav-ico { color: var(--ink-3); display: flex; }
.cfg-sidenav-item.is-active .cfg-sidenav-ico { color: var(--accent); }

/* PANE */
.cfg-pane { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.cfg-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cfg-section > header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.cfg-section > header h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); margin: 0;
}
.cfg-section > header p {
  font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.5;
  max-width: 520px;
}
.cfg-section-body { display: flex; flex-direction: column; }

/* ROW */
.cfg-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.cfg-section-body > .cfg-row:last-child { border-bottom: 0; }
.cfg-row.is-vertical { grid-template-columns: 1fr; gap: 8px; align-items: start; }
.cfg-row-label { display: flex; flex-direction: column; gap: 2px; }
.cfg-row-label > span:first-child {
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.cfg-row-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.cfg-row-control { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1100px) {
  .cfg-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }
}

/* INPUTS */
.cfg-input,
.cfg-row-control input[type="text"],
.cfg-row-control input[type="email"],
.cfg-row-control input[type="tel"],
.cfg-row-control input[type="number"],
.cfg-row-control select,
.cfg-row-control textarea {
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  width: 100%;
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.cfg-input:focus,
.cfg-row-control input:focus,
.cfg-row-control select:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.cfg-input-fixed { max-width: 320px; }
.cfg-grid-2 {
  display: grid; grid-template-columns: 1fr 200px; gap: 8px;
}
.cfg-input-prefix {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 120ms var(--ease-in);
}
.cfg-input-prefix:focus-within { border-color: var(--accent); }
.cfg-input-prefix > span {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  background: var(--surface-2);
  border-right: 1px solid var(--line-soft);
  color: var(--ink-2); font-size: 12.5px;
}
.cfg-input-prefix input {
  flex: 1; padding: 9px 12px;
  background: transparent !important; border: 0 !important;
}

.cfg-upload {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--bg); border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2);
  cursor: default;
}
.cfg-upload:hover { border-color: var(--accent); color: var(--ink); }

.cfg-radio-group { display: inline-flex; gap: 4px; }
.cfg-radio-btn {
  padding: 8px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); font-weight: 500;
  cursor: default;
}
.cfg-radio-btn:hover { color: var(--ink); border-color: var(--ink-4); }
.cfg-radio-btn.is-on {
  background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600;
}

/* Theme toggle (X5) — segmented light/dark control reusing cfg-radio-btn.
   Adds icon+label layout and a real pointer cursor (it IS interactive, unlike
   the slot-duration group above). Selected state inherits .is-on tokens. */
.cfg-theme-opt {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer;
}
.cfg-theme-opt svg { flex-shrink: 0; }

.cfg-switch {
  width: 36px; height: 20px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative; cursor: default;
  transition: background 200ms var(--ease-in), border-color 120ms var(--ease-in);
  flex-shrink: 0;
}
.cfg-switch-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink);
  transition: transform 200ms var(--ease-in), background 200ms var(--ease-in);
}
.cfg-switch.is-on { background: var(--accent); border-color: var(--accent-2); }
.cfg-switch.is-on .cfg-switch-thumb { transform: translateX(16px); background: #FBF9F4; }

.cfg-link {
  background: transparent; border: 0; padding: 0;
  font-size: 12.5px; color: var(--ink-3);
  border-bottom: 1px solid transparent;
  cursor: default;
}
.cfg-link:hover { color: var(--ink); border-color: var(--ink-4); }
.cfg-link-add { color: var(--accent-2); font-weight: 500; }

.cfg-btn-danger { color: var(--red); }
.cfg-btn-danger:hover { background: var(--red-soft); color: var(--red); }

/* Cuenta: sesiones activas */
.cfg-sesiones { display: flex; flex-direction: column; gap: 6px; }
.cfg-sesion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.cfg-sesion > div { display: flex; flex-direction: column; gap: 1px; }
.cfg-sesion b { font-size: 13px; color: var(--ink); }
.cfg-sesion .muted { font-size: 11.5px; color: var(--ink-3); }
.cfg-tag-now {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  padding: 2px 8px; border-radius: 99px;
  background: var(--green-soft); color: var(--green);
  letter-spacing: .04em;
}

/* Public link */
.cfg-public-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  max-width: 440px;
}
.cfg-public-link code {
  flex: 1; font-size: 13.5px; color: var(--ink); letter-spacing: -.005em;
}

/* Horarios */
.cfg-horarios { display: flex; flex-direction: column; }
.cfg-dia {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 20px; align-items: start;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.cfg-dia:last-child { border-bottom: 0; }
@media (max-width: 1100px) {
  .cfg-dia { grid-template-columns: 1fr; gap: 8px; }
}
.cfg-dia.is-off b { color: var(--ink-3); }
.cfg-dia-head { display: flex; align-items: center; gap: 12px; }
.cfg-dia-head b { font-size: 14px; color: var(--ink); }
.cfg-dia-franjas {
  display: flex; flex-direction: column; gap: 6px;
}
.cfg-franja {
  display: inline-flex; align-items: center; gap: 8px;
}
.cfg-franja input[type="time"] {
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-family: 'Geist Mono', monospace; font-size: 12.5px;
  color: var(--ink);
  width: 110px;
  color-scheme: light;
}
[data-theme="dark"] .cfg-franja input[type="time"] { color-scheme: dark; }
.cfg-franja input[type="time"]:focus { outline: none; border-color: var(--accent); }
.cfg-franja-x {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-franja-x:hover { background: var(--surface-2); color: var(--red); }

/* Servicios table */
.cfg-section header button.fi-btn { white-space: nowrap; }
.cfg-table { width: 100%; border-collapse: collapse; }
.cfg-table thead th {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.cfg-table tbody tr.is-off { opacity: 0.5; }
.cfg-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.cfg-table tbody tr:last-child td { border-bottom: 0; }
.cfg-table-input {
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit; font-size: 13px;
  color: var(--ink);
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.cfg-table-input:hover { border-color: var(--line-soft); }
.cfg-table-input:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
}
.cfg-table-num {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: transparent; border: 1px solid transparent;
  border-radius: 5px;
  width: 96px;
  font-variant-numeric: tabular-nums;
  transition: border-color 120ms var(--ease-in);
}
.cfg-table-num:hover { border-color: var(--line-soft); }
.cfg-table-num:focus-within { border-color: var(--accent); background: var(--bg); }
.cfg-table-num input {
  flex: 1; min-width: 0;
  padding: 6px 2px;
  background: transparent; border: 0;
  font: inherit; font-size: 13px; color: var(--ink);
}
.cfg-table-num .muted { font-size: 11.5px; }
.cfg-table-x {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-table-x:hover { background: var(--red-soft); color: var(--red); }

/* Integraciones */
.cfg-integration {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.cfg-integration:last-child { border-bottom: 0; }
.cfg-int-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-mp-ico {
  width: 100%; height: 100%; border-radius: var(--r-sm);
  background: #009EE3; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.cfg-int-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cfg-int-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-int-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.cfg-int-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .04em;
}
.cfg-int-status.is-ok   { color: var(--green); }
.cfg-int-status.is-warn { color: var(--amber); }
.cfg-int-status.is-soon { color: var(--ink-3); }
.cfg-int-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.cfg-int-status.is-ok .cfg-int-dot {
  animation: fi-blink 2.4s ease-in-out infinite;
}
.cfg-int-body p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; max-width: 520px; }
.cfg-int-action {
  display: flex; align-items: center; gap: 10px;
}
.cfg-int-account {
  font-size: 11px; color: var(--ink-3);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-int-action button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Plan */
.cfg-plan-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.cfg-plan-card-l { display: flex; flex-direction: column; gap: 4px; }
.cfg-plan-card-l h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); margin: 4px 0 4px;
}
.cfg-plan-card-l p { font-size: 13px; color: var(--ink-3); margin: 0; }
.cfg-plan-card-l p b { color: var(--ink); font-weight: 600; }
.cfg-plan-card-r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.cfg-pay-method {
  display: flex; align-items: center; gap: 14px;
}
.cfg-pay-card {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.cfg-pay-card .muted { font-size: 11.5px; }

.cfg-billing {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.cfg-billing > div { display: flex; flex-direction: column; gap: 2px; }
.cfg-billing b { font-size: 13.5px; color: var(--ink); }
.cfg-billing .muted { font-size: 11.5px; color: var(--ink-3); }

/* ═════════════════════════ AUTH (Login / Signup / Forgot) ═════════════════════════ */
.au-app {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  background: var(--bg);
}
@media (max-width: 920px) {
  .au-app { grid-template-columns: 1fr; }
  .au-art { display: none !important; }
}

/* ── Side art (left) ── */
.au-art {
  position: relative;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 36px 56px 56px;
  display: flex; flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.au-art::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, var(--accent-soft) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.7;
}
.au-art > * { position: relative; z-index: 1; }

.au-art-head {
  display: flex; align-items: center; justify-content: space-between;
}
.au-art-brand {
  display: flex; align-items: center; gap: 10px;
}
.au-art-brand span {
  font-size: 17px; font-weight: 600; letter-spacing: -.04em; color: var(--ink);
}
.au-art-meta {
  font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em;
}

/* ─── Carousel ─── */
.au-carousel {
  position: relative;
  flex: 1;
  margin: 32px 0 20px;
  display: flex; align-items: center;
  min-height: 0;
}
.au-carousel-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    opacity  500ms var(--ease-in),
    transform 500ms var(--ease-in);
}
.au-carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.au-carousel-slide .au-art-demo { width: 100%; }

.au-carousel-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
}
.au-carousel-caption {
  position: relative;
  flex: 1; min-width: 0;
  min-height: 30px;
}
.au-carousel-cap {
  position: absolute; top: 0; left: 0; right: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity  400ms var(--ease-in),
    transform 400ms var(--ease-in);
}
.au-carousel-cap.is-active {
  opacity: 1; transform: translateY(0);
}
.au-carousel-dots {
  display: flex; gap: 6px;
  align-items: center;
}
.au-carousel-dot {
  width: 20px; height: 3px; border-radius: 2px;
  background: var(--line);
  cursor: default;
  transition: background 240ms var(--ease-in), width 240ms var(--ease-in);
  border: 0; padding: 0;
}
.au-carousel-dot:hover { background: var(--ink-4); }
.au-carousel-dot.is-active {
  background: var(--accent);
  width: 32px;
}

.au-art-headline { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.au-art-headline h1 {
  font-size: 44px; font-weight: 600; letter-spacing: -.022em; line-height: 1.04;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.au-art-headline p {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0;
  max-width: 420px;
}

/* Demo embebido — fragmento de Dashboard "Hoy" */
.au-art-demo {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.au-art-demo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.au-art-demo-count { font-size: 11px; color: var(--ink-3); letter-spacing: -.005em; }
.au-art-demo-rows { display: flex; flex-direction: column; }
.au-art-row {
  display: grid;
  grid-template-columns: 38px 8px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 12.5px; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.au-art-row:last-child { border-bottom: 0; }
.au-art-row .fm-mono { font-size: 11.5px; color: var(--ink-2); }
.au-art-row b { font-weight: 600; }
.au-art-row .muted { color: var(--ink-3); font-size: 11.5px; }
.au-art-row--past .fm-mono,
.au-art-row--past b,
.au-art-row--past .muted { color: var(--ink-3); }
.au-art-row--ghost { opacity: 0.7; }
.au-art-row--ghost-2 { opacity: 0.45; }
.au-art-row--active {
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 10px 6px;
  margin: 3px -4px;
  border-bottom: 0;
  box-shadow: inset 2px 0 0 var(--accent);
}
.au-art-row--active + .au-art-row { border-top: 1px solid var(--line-soft); padding-top: 11px; }
.au-art-row--active b { color: var(--ink); }
.au-art-row--active .muted { color: var(--accent-2); }
.au-art-dot { width: 8px; height: 8px; border-radius: 50%; }
.au-art-dot--pulse { box-shadow: 0 0 0 3px var(--accent-soft); }

.au-art-badge {
  font-family: 'Geist Mono', monospace; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.au-art-badge--green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.au-art-badge--next { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.au-art-badge--mute { color: var(--ink-4); }

.au-art-timer {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(255,255,255,.55);
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--accent-2);
  letter-spacing: -.005em;
}
[data-theme="dark"] .au-art-timer { background: rgba(0,0,0,.30); }
.au-art-timer-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: fi-blink 1.6s ease-in-out infinite;
}

.au-art-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
}

.au-art-foot {
  height: 0;
}

/* ─── Carousel · Finanzas ─── */
.au-art-demo--fin .au-fin-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.au-art-demo--fin .au-fin-kpis > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--bg);
}
.au-art-demo--fin .au-fin-kpis b {
  font-size: 19px; font-weight: 600; color: var(--ink);
  letter-spacing: -.012em; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.au-art-demo--fin .au-fin-kpis b small {
  font-size: 11px; font-weight: 500; color: var(--ink-3); margin-right: 2px;
}
.au-fin-chart { width: 100%; height: auto; display: block; }

/* ─── Carousel · Pacientes ─── */
.au-pac-rows { display: flex; flex-direction: column; gap: 8px; }
.au-pac-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.au-pac-row:last-child { border-bottom: 0; }
.au-pac-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.au-pac-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.au-pac-body b {
  font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}
.au-pac-body .muted { font-size: 11px; color: var(--ink-3); }
.au-pac-tags { display: flex; gap: 4px; }
.au-pac-prox {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3); letter-spacing: -.005em;
}
.au-pac-prox-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--green);
}

/* ─── Carousel · Reservas ─── */
.au-rs-cards { display: flex; flex-direction: column; gap: 8px; }
.au-rs-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.au-rs-card--ghost {
  opacity: 0.5;
}
.au-rs-card-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
}
.au-rs-card-head b { font-size: 12.5px; font-weight: 600; color: var(--ink); display: block; }
.au-rs-card-head .muted { font-size: 11px; color: var(--ink-3); }
.au-rs-card-slot {
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 4px;
  font-size: 11px; color: var(--ink-2); letter-spacing: -.005em;
}
.au-rs-card-actions {
  display: flex; gap: 6px;
}
.au-rs-btn-ghost,
.au-rs-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 1;
  padding: 6px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 500;
  justify-content: center;
}
.au-rs-btn-ghost { color: var(--ink-3); border: 1px solid var(--line); }
.au-rs-btn-primary {
  background: var(--accent); color: #FBF9F4;
  border: 1px solid var(--accent-2);
}

/* ── Form pane (right) ── */
.au-main {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 32px;
}
.au-form-pane {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 22px;
}
.au-form-inner { display: flex; flex-direction: column; gap: 20px; }
.au-form-switch {
  padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-3); text-align: center;
}
.au-form-switch p { margin: 0; }

.au-form-head { display: flex; flex-direction: column; gap: 6px; }
.au-form-head h2 {
  font-size: 26px; font-weight: 600; letter-spacing: -.018em; line-height: 1.1;
  color: var(--ink); margin: 0;
}
.au-form-head p { font-size: 13.5px; color: var(--ink-3); margin: 0; }

.au-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: default;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.au-btn-google:hover { background: var(--surface-2); border-color: var(--ink-4); }

.au-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--ink-3);
}
.au-divider::before, .au-divider::after {
  content: ''; flex: 1; border-top: 1px solid var(--line-soft);
}

.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-field { display: flex; flex-direction: column; gap: 6px; }
.au-field > span:first-child {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.au-field-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.au-field input {
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: 14px; color: var(--ink);
  transition: border-color 120ms var(--ease-in);
}
.au-field input::placeholder { color: var(--ink-4); }
.au-field input:focus { outline: none; border-color: var(--accent); }
.au-field.is-err input { border-color: var(--red); background: var(--red-soft); }

.au-pw { position: relative; }
.au-pw input { padding-right: 40px; width: 100%; }
.au-pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 4px;
  color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center;
}
.au-pw-toggle:hover { color: var(--ink); background: var(--surface-2); }

.au-pw-meter {
  display: flex; align-items: center; gap: 10px;
}
.au-pw-meter-bars {
  display: flex; gap: 3px; flex: 1;
}
.au-pw-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--line-soft);
  transition: background 200ms var(--ease-in);
}
.au-pw-bar.is-on { background: var(--accent); }
.au-pw-bar.is-on.s-1 { background: var(--red); }
.au-pw-bar.is-on.s-2 { background: var(--amber); }
.au-pw-bar.is-on.s-3 { background: var(--accent); }
.au-pw-bar.is-on.s-4 { background: var(--green); }
.au-pw-label {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .04em; color: var(--ink-3);
  min-width: 60px; text-align: right;
}

.au-err {
  font-size: 12px; color: var(--red);
  background: var(--red-soft);
  padding: 8px 12px; border-radius: var(--r-sm);
  margin: 0;
}

.au-fine { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }

.au-submit {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 4px;
  position: relative;
  isolation: isolate;
}
.au-submit::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-sm) + 3px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklab, var(--accent) 32%, transparent) 0%,
    transparent 70%
  );
  z-index: -1;
  filter: blur(8px);
}
.au-submit.is-hint::after {
  animation: au-submit-glow 1200ms var(--ease-emphasized);
}
@keyframes au-submit-glow {
  0%   { opacity: 0;    transform: scale(0.94); }
  35%  { opacity: 0.65; transform: scale(1.04); }
  100% { opacity: 0;    transform: scale(1.08); }
}

.au-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-2); font: inherit; font-size: inherit;
  border-bottom: 1px solid transparent;
  cursor: default;
  transition: border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.au-link:hover { color: var(--accent); border-color: var(--accent); }
.au-link--ghost { color: var(--ink-3); font-size: 11px; font-family: 'Geist', sans-serif; }
.au-link--ghost:hover { color: var(--ink); border-color: var(--ink-4); }
.au-link--block { display: inline-block; margin-top: 6px; }

/* Forgot · sent state */
.au-sent {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
}
.au-sent-glyph {
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.au-sent h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.au-sent p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.au-sent p b { color: var(--ink); font-weight: 600; }

/* ═════════════ SCROLLBAR ═════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); border: 2px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }


/* ═════════════════════════════════════════════════════════════════════
   AUTH · SIDE PANEL v2 · panel vivo
   Sustituye el carrusel previo. Las clases viejas .au-art-* / .au-carousel-*
   quedan obsoletas pero no hacen daño.
   ═════════════════════════════════════════════════════════════════════ */

/* Hard-hide el carrusel viejo si quedara renderizado por error */
.au-art > .au-carousel,
.au-art > .au-art-head,
.au-art > .au-art-meta { display: none; }

/* ── Shell ─────────────────────────────────────── */
.au2-art {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  min-height: 100%;
}

/* Background layer: grid + glow */
.au2-art-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.au2-art-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--slide-tint, var(--accent)) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--slide-tint, var(--accent)) 7%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 85%);
  opacity: 0.7;
  transition: background-image 720ms var(--ease-standard-out);
}
.au2-art-glow {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 520px; height: 360px;
  /* C12: el background reacciona al --slide-tint, animado en 720ms */
  background: radial-gradient(ellipse, color-mix(in oklab, var(--slide-tint, var(--accent)) 14%, transparent) 0%, transparent 70%);
  opacity: 0.6;
  filter: blur(8px);
  transition: background 720ms var(--ease-standard-out);
}

/* ──────────────────────────────────────────────────────────────────────
   C12 · Background tints reactivos al slide activo. El SideArt aplica
   un className `au2-art--tint-{id}` que define la --slide-tint del
   slide actual. La interpolación entre tints es fluida (transition en
   background del glow y grid). NO se anima la variable misma — se anima
   el color RESOLVED gracias a la transition CSS.
   ────────────────────────────────────────────────────────────────────── */
.au2-art--tint-agenda     { --slide-tint: var(--accent); }
.au2-art--tint-calendario { --slide-tint: color-mix(in oklab, var(--accent) 70%, var(--green) 30%); }
.au2-art--tint-finanzas   { --slide-tint: color-mix(in oklab, var(--accent) 75%, var(--amber) 25%); }
.au2-art--tint-reagenda   { --slide-tint: color-mix(in oklab, var(--accent) 68%, var(--slate) 32%); }
.au2-art--tint-ia         { --slide-tint: color-mix(in oklab, var(--accent) 62%, #B888E4 38%); }

.au2-art > *:not(.au2-art-bg) { position: relative; z-index: 1; }

/* ── Header ────────────────────────────────────── */
.au2-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.au2-head-brand {
  display: flex; align-items: center; gap: 10px;
}
.au2-logo {
  font-size: 16px; font-weight: 600; letter-spacing: -.04em;
  color: var(--ink);
}
.au2-head-meta {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: color-mix(in oklab, var(--accent) 60%, var(--ink-3));
  letter-spacing: 0.02em;
}
.au2-head-status {
  display: inline-flex; align-items: stretch; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.au2-head-ver,
.au2-head-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
}
.au2-head-ver {
  color: var(--ink-3);
  border-right: 1px solid var(--line-soft);
  background: var(--bg);
}
.au2-status-dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--green) 22%, transparent);
}
.au2-status-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: au2-ring 1.8s ease-out infinite;
}
@keyframes au2-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0;   }
}

/* ── Stage ─────────────────────────────────────── */
.au2-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;            /* C8: previene bleed durante crossfade x:±24 */
  container-type: inline-size; /* hook para container queries futuras */
}

.au2-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* C15: removed permanent will-change. FM v2 controla animations via
     inline styles (rAF tweens, no CSS transitions). will-change permanente
     desperdiciaba GPU memory en los 4 slides inactivos sin beneficio.
     Si en perf audit mobile resulta jank → mover will-change a JS
     conditional vía style={{ willChange: isAnimating ? "..." : "auto" }}. */
  transform: translateY(12px);
  transition:
    opacity 320ms var(--ease-emphasized),
    transform 320ms var(--ease-emphasized);
}
.au2-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}
.au2-slide:not(.is-active):not(.was-active) {
  transform: translateY(12px);
}
.au2-slide-inner {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex; flex-direction: column;
  gap: 18px;
  align-items: stretch;
  text-align: left;
}

/* ── Foreground card · base ──────────────────────── */
.au2-fg {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: 12px;
  box-shadow: 0 8px 32px color-mix(in oklab, var(--accent) 8%, transparent);
  overflow: hidden;
  z-index: 2;
}
[data-theme="dark"] .au2-fg {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Mid layer · ghost UI cropeada ────────────────── */
.au2-mid {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-emphasized) 100ms;
}
.au2-slide.is-active .au2-mid { opacity: 1; }

/* Ghost sidebar (slide 1) */
.au2-mid-sidebar {
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 6px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 32px color-mix(in oklab, var(--accent) 8%, transparent);
}
.au2-ghost-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px 6px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.au2-ghost-line {
  display: block;
  height: 4px; border-radius: 2px;
  background: var(--surface-2);
}
.au2-ghost-line--short { width: 60%; }
.au2-ghost-init {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.au2-ghost-init.is-current {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}
.au2-ghost-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--red);
  color: #fbf9f4;
  font-size: 8.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* Cropped tabs (slide 3) */
.au2-mid-tabs {
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 32px color-mix(in oklab, var(--accent) 8%, transparent);
  z-index: 3;
}
.au2-mid-tab {
  padding: 5px 10px;
  border-radius: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.au2-mid-tab.is-active {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.au2-mid-tab--ghost { opacity: 0.4; }

/* ── Card head (común) ──────────────────────────── */
.au2-card-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.au2-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -.005em;
}
.au2-card-head-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.au2-card-head-name {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}
.au2-card-head-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -.005em;
}
.au2-card-head-meta--mono {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.au2-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 16%, transparent);
  animation: au2-blink 1.8s ease-in-out infinite;
}
@keyframes au2-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.au2-timer {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 14%, transparent);
}
.au2-timer-val {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

/* ── Pills (común) ──────────────────────────────── */
.au2-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  background: var(--surface);
}
.au2-pill--pend {
  color: var(--amber);
  border-color: color-mix(in oklab, var(--amber) 28%, transparent);
  background: color-mix(in oklab, var(--amber) 8%, var(--surface));
}
.au2-pill.is-pulsing {
  animation: au2-pill-pulse 2s ease-in-out infinite;
}
@keyframes au2-pill-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.au2-eyebrow {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}

/* ───────────────────────────────────────────────────
   SLIDE 1 · Agenda
   ─────────────────────────────────────────────────── */
.au2-timeline {
  padding: 6px 0 8px;
}
.au2-slot {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  position: relative;
  isolation: isolate;
}
.au2-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  opacity: 0;
  transition: opacity 500ms var(--ease-emphasized);
  pointer-events: none;
  z-index: -1;
}
.au2-timeline.is-lit .au2-slot.is-active::before { opacity: 1; }
.au2-slot + .au2-slot { border-top: 1px solid var(--line-soft); }
.au2-slot-time {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: -.005em;
}
.au2-slot-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.au2-slot-name {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.au2-slot-motivo {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.au2-slot-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
  background: var(--surface);
}
.au2-slot-tag--active {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
}
.au2-slot-tag--done {
  background: color-mix(in oklab, var(--green) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 22%, transparent);
  color: var(--green);
}
.au2-slot-tag--next {
  background: var(--surface);
  border-color: var(--ink-2);
  color: var(--ink);
}
.au2-slot-tag--mute { opacity: 0.55; }

.au2-slot.is-active {
  /* el bg + box-shadow ahora viven en ::before, gated por .is-lit */
}
.au2-slot.is-active .au2-slot-time,
.au2-slot.is-active .au2-slot-motivo {
  transition: color 500ms var(--ease-emphasized);
}
.au2-timeline.is-lit .au2-slot.is-active .au2-slot-time { color: var(--accent); font-weight: 500; }
.au2-timeline.is-lit .au2-slot.is-active .au2-slot-motivo {
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-2));
}
.au2-slot.is-idle .au2-slot-name { color: var(--ink-2); }
.au2-slot.is-idle .au2-slot-time,
.au2-slot.is-idle .au2-slot-motivo { opacity: 0.7; }
.au2-slot.is-done .au2-slot-name { color: var(--ink-3); }
.au2-slot.is-done .au2-slot-time,
.au2-slot.is-done .au2-slot-motivo { color: var(--ink-3); }

.au2-slot-progress {
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.au2-slot-progress-bar {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}
.au2-timeline.is-lit .au2-slot.is-active .au2-slot-progress-bar {
  animation: au2-slot-fill 1200ms var(--ease-emphasized) forwards;
}
@keyframes au2-slot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(0.6); }
}

/* Entry stagger · 60ms */
.au2-slide.is-active .au2-card-1 .au2-slot {
  animation: au2-row-in 320ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-card-1 .au2-slot:nth-child(1) { animation-delay: 0ms; }
.au2-slide.is-active .au2-card-1 .au2-slot:nth-child(2) { animation-delay: 60ms; }
.au2-slide.is-active .au2-card-1 .au2-slot:nth-child(3) { animation-delay: 120ms; }
.au2-slide.is-active .au2-card-1 .au2-slot:nth-child(4) { animation-delay: 180ms; }
.au2-slide.is-active .au2-card-1 .au2-slot:nth-child(5) { animation-delay: 240ms; }
@keyframes au2-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────────
   SLIDE 2 · Pacientes (legacy)
   ─────────────────────────────────────────────────── */
.au2-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-4);
}
.au2-search-placeholder {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-4);
  letter-spacing: -.005em;
}
.au2-kbd {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
}

.au2-pac-list {
  position: relative;
  padding: 4px 0 6px;
}
.au2-pac {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 12px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 0;
  transition: background 300ms var(--ease-emphasized);
}
.au2-pac.is-active {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.au2-pac-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -.005em;
}
.au2-pac-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.au2-pac-name {
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.au2-pac-motivo {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.au2-pac-next {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Cursor de colaboración */
.au2-cursor {
  position: absolute;
  left: 14px;
  top: 18px;
  display: inline-flex;
  align-items: flex-start;
  pointer-events: none;
  z-index: 3;
  transition: transform 1.1s var(--ease-emphasized);
  will-change: transform;
}
.au2-cursor svg {
  color: var(--accent);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.au2-cursor-label {
  margin-top: 8px;
  margin-left: -1px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: #fbf9f4;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* Entry stagger · 40ms */
.au2-slide.is-active .au2-card-2 .au2-pac {
  animation: au2-row-in 400ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-card-2 .au2-pac:nth-child(1) { animation-delay: 40ms; }
.au2-slide.is-active .au2-card-2 .au2-pac:nth-child(2) { animation-delay: 80ms; }
.au2-slide.is-active .au2-card-2 .au2-pac:nth-child(3) { animation-delay: 120ms; }
.au2-slide.is-active .au2-card-2 .au2-pac:nth-child(4) { animation-delay: 160ms; }
.au2-slide.is-active .au2-card-2 .au2-pac:nth-child(5) { animation-delay: 200ms; }

/* ───────────────────────────────────────────────────
   SLIDE 3 · Finanzas
   ─────────────────────────────────────────────────── */
.au2-card-head--fin {
  grid-template-columns: 1fr auto;
}
.au2-fin-title {
  display: flex; flex-direction: column; gap: 2px;
}
.au2-fin-period {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.au2-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--green) 10%, var(--surface));
  color: var(--green);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in oklab, var(--green) 22%, transparent);
}

.au2-fin-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.au2-kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px;
  border-right: 1px solid var(--line-soft);
}
.au2-kpi:last-child { border-right: 0; }
.au2-kpi-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-kpi-value {
  font-family: 'Geist Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0;
}
.au2-kpi-prefix {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 1px;
}

.au2-fin-chart-wrap {
  position: relative;
  padding: 10px 14px 14px;
}
.au2-fin-chart {
  width: 100%;
  height: 80px;
  display: block;
}
.au2-fin-chart .au2-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* Transición entre slides (snappier) */
.au2-slide {
  transition:
    opacity 320ms var(--ease-emphasized),
    transform 320ms var(--ease-emphasized);
}

.au2-slide.is-active .au2-card-3 .au2-fin-chart .au2-line {
  animation: au2-draw 1000ms var(--ease-emphasized) 400ms forwards;
}
@keyframes au2-draw {
  to { stroke-dashoffset: 0; }
}
.au2-fin-chart .au2-area { opacity: 0; }
.au2-slide.is-active .au2-card-3 .au2-fin-chart .au2-area {
  animation: au2-fade-in 400ms var(--ease-emphasized) 1100ms forwards;
}
@keyframes au2-fade-in {
  to { opacity: 1; }
}
.au2-fin-chart .au2-end-dot {
  opacity: 0;
  transform: scale(0);
}
.au2-slide.is-active .au2-card-3 .au2-fin-chart .au2-end-dot {
  animation: au2-pop 500ms var(--ease-emphasized) 1400ms forwards;
}
@keyframes au2-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
.au2-fin-chart .au2-tt-dot {
  opacity: 0;
}
.au2-slide.is-active .au2-card-3 .au2-fin-chart .au2-tt-dot {
  animation: au2-fade-in 300ms var(--ease-emphasized) 1200ms forwards;
}

.au2-fin-tooltip {
  position: absolute;
  width: 120px;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.au2-fin-tooltip b {
  font-weight: 600;
  color: var(--surface);
}
.au2-fin-tooltip .au2-tt-meta {
  opacity: 0.65;
}
.au2-fin-tooltip::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px; height: 7px;
  background: var(--ink);
  transform: translateY(-50%) rotate(45deg);
}
.au2-slide.is-active .au2-card-3 .au2-fin-tooltip {
  animation: au2-tooltip-in 400ms var(--ease-emphasized) 1900ms forwards;
}

/* Cursor SVG · llega desde la derecha en 300ms a T1900ms */
.au2-fin-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(24px, -4px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  will-change: transform, opacity;
}
.au2-fin-cursor svg { display: block; }
.au2-slide.is-active .au2-card-3 .au2-fin-cursor {
  animation: au2-cursor-in 320ms var(--ease-emphasized) 1900ms forwards;
}
@keyframes au2-cursor-in {
  from { opacity: 0; transform: translate(24px, -4px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes au2-tooltip-in {
  to { opacity: 1; transform: translateY(0); }
}

/* KPI entry */
/* KPI entry (count-up 900ms a partir de T200ms) */
.au2-slide.is-active .au2-card-3 .au2-kpi {
  animation: au2-row-in 350ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-card-3 .au2-kpi:nth-child(1) { animation-delay: 200ms; }
.au2-slide.is-active .au2-card-3 .au2-kpi:nth-child(2) { animation-delay: 260ms; }
.au2-slide.is-active .au2-card-3 .au2-kpi:nth-child(3) { animation-delay: 320ms; }

/* ───────────────────────────────────────────────────
   SLIDE 4 · Reservas
   ─────────────────────────────────────────────────── */
.au2-card-4 {
  padding: 0;
  display: flex; flex-direction: column;
}
.au2-card-4 .au2-card-head {
  border-bottom: 1px solid var(--line-soft);
}

.au2-rsv-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex; justify-content: center; align-items: flex-start;
}
.au2-rsv-ghost {
  position: absolute;
  top: 0;
  width: calc(100% - 24px);
  height: 100%;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: 12px;
  box-shadow: 0 4px 18px color-mix(in oklab, var(--accent) 5%, transparent);
}
.au2-rsv-ghost--1 { transform: translate(6px, 6px); opacity: 0.55; }
.au2-rsv-ghost--2 { transform: translate(12px, 12px); opacity: 0.32; }
.au2-rsv-ghost--3 { transform: translate(18px, 18px); opacity: 0.18; }

.au2-rsv-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 12px 14px 0;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.au2-rsv-slot-row {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  font-weight: 500;
}
.au2-rsv-slot-row svg { color: var(--ink-3); }
.au2-rsv-slot-sep { color: var(--ink-4); }
.au2-rsv-slot-amount {
  color: var(--ink);
  font-weight: 500;
}

.au2-rsv-actions {
  display: flex; gap: 8px;
  padding: 12px 14px 14px;
}
.au2-rsv-btn-ghost,
.au2-rsv-btn-primary {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: default;
  transition: background 120ms cubic-bezier(.2, 0, 0, 1),
              transform 120ms cubic-bezier(.2, 0, 0, 1),
              border-color 120ms;
}
.au2-rsv-btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.au2-rsv-btn-ghost:hover { background: var(--surface-2); }
.au2-rsv-btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: #fbf9f4;
  border: 1px solid var(--accent-2);
}
.au2-shimmer {
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 50%,
    transparent 100%
  );
  transform: translateX(0);
  pointer-events: none;
}
.au2-slide.is-active .au2-card-4 .au2-shimmer {
  animation: au2-shimmer 6s var(--ease-emphasized) infinite;
}
@keyframes au2-shimmer {
  0%   { transform: translateX(0); }
  8%   { transform: translateX(350%); }
  100% { transform: translateX(350%); }
}

/* Toast */
.au2-toast {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.au2-toast-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--green) 70%, var(--ink));
  color: var(--surface);
  flex-shrink: 0;
}
.au2-toast-body {
  display: flex; flex-direction: column; gap: 1px;
}
.au2-toast-body b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--surface);
  letter-spacing: -.005em;
}
.au2-toast-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: color-mix(in oklab, var(--surface) 65%, transparent);
  letter-spacing: 0.02em;
}
.au2-slide.is-active .au2-card-4 ~ .au2-toast,
.au2-slide.is-active .au2-toast {
  animation: au2-toast 4s var(--ease-emphasized) forwards;
}
@keyframes au2-toast {
  0%   { opacity: 0; transform: translateY(-12px); }
  10%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Reservas card entry */
.au2-slide.is-active .au2-card-4 {
  animation: au2-card-in 400ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-rsv-ghost--1 { animation: au2-card-in 400ms var(--ease-emphasized) 60ms backwards; }
.au2-slide.is-active .au2-rsv-ghost--2 { animation: au2-card-in 400ms var(--ease-emphasized) 120ms backwards; }
.au2-slide.is-active .au2-rsv-ghost--3 { animation: au2-card-in 400ms var(--ease-emphasized) 180ms backwards; }
@keyframes au2-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; }
}

/* ── Foot (caption + dots) ──────────────────────── */
.au2-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  flex-shrink: 0;
}
.au2-foot-cap {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 44px;
}
.au2-foot-cap-item {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 400ms var(--ease-emphasized) 80ms,
    transform 400ms var(--ease-emphasized) 80ms;
}
.au2-foot-cap-item.is-active {
  opacity: 1;
  transform: translateY(0);
}
.au2-foot-cap-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}
.au2-foot-cap-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--ink);
}

.au2-foot-dots {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.au2-dot {
  position: relative;
  width: 24px; height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
  cursor: pointer;
  transition:
    width 320ms var(--ease-emphasized),
    background 200ms var(--ease-emphasized),
    transform 200ms var(--ease-emphasized);
  border: 0; padding: 0;
}
.au2-dot:hover { background: var(--ink-4); transform: translateY(-1px); }
.au2-dot.is-active {
  width: 44px;
  background: color-mix(in oklab, var(--accent) 22%, var(--line));
}

/* C8: progress fill via ::after, duration controlada por --slide-dur inline.
   El componente fuerza remount via `key={c.id-idx-active}` cuando cambia el
   slide → la animation re-arranca de 0%. */
.au2-dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: au2-dot-fill var(--slide-dur, 6500ms) linear forwards;
}
.au2-art.is-paused .au2-dot.is-active::after,
.au2-art.is-hidden .au2-dot.is-active::after {
  animation-play-state: paused;
}
@keyframes au2-dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* C8: pause indicator overlay top-right del SideArt. Glass effect sutil,
   no compite con el contenido del slide. */
.au2-pause-indicator {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: var(--z-art-pause-ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  pointer-events: none;
}
.au2-pause-indicator svg { color: var(--ink-2); flex-shrink: 0; }

/* ── Pause on hover ──────────────────────────────── */
/* Solo pausamos animaciones decorativas/infinitas.
   Las entradas (au2-row-in, au2-card-in) DEBEN completarse. */
.au2-art.is-paused .au2-live-dot,
.au2-art.is-hidden .au2-live-dot,
.au2-art.is-paused .au2-status-dot::before,
.au2-art.is-hidden .au2-status-dot::before,
.au2-art.is-paused .au2-pill.is-pulsing,
.au2-art.is-hidden .au2-pill.is-pulsing,
.au2-art.is-paused .au2-shimmer,
.au2-art.is-hidden .au2-shimmer,
.au2-art.is-paused .au2-toast,
.au2-art.is-hidden .au2-toast,
.au2-art.is-paused .au2-slot-progress-bar,
.au2-art.is-hidden .au2-slot-progress-bar,
.au2-art.is-paused .au2-dot-fill,
.au2-art.is-hidden .au2-dot-fill,
.au2-art.is-paused .au2-cursor,
.au2-art.is-hidden .au2-cursor,
.au2-art.is-paused .au2-ia-spark::after,
.au2-art.is-hidden .au2-ia-spark::after {
  animation-play-state: paused !important;
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 920px) {
  .au2-art { display: none !important; }
}

/* ── Reduced motion ─────────────────────────────── */
/* (Política reduced-motion del SideArt unificada en el bloque global de :root, línea ~136) */


/* ═════════════════════════════════════════════════════════════════════
   AUTH · SIDE PANEL v2 · TASK 2 SHELL
   Eyebrow + título + subtítulo dentro de cada slide.
   Flechas sutiles. 5 slides. Placeholders para tasks 4, 6, 7.
   ═════════════════════════════════════════════════════════════════════ */

/* Slide head (eyebrow + title + sub) */
.au2-slide-head {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
}
.au2-slide-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 65%, var(--ink-3));
}
.au2-slide-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.au2-slide-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  letter-spacing: -.005em;
  max-width: 380px;
}
.au2-slide-mockup {
  position: relative;
  width: 100%;
}

/* Plus badge — gold border, no chillón */
.au2-plus-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 16%, var(--surface)) 100%
  );
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 6%, transparent);
}
.au2-plus-badge--title {
  font-size: 11px;
  padding: 3px 9px;
  position: relative;
  top: -2px;
}

/* Nav arrows */
.au2-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 240ms cubic-bezier(.2, 0, 0, 1),
    background 160ms,
    color 160ms,
    transform 240ms cubic-bezier(.2, 0, 0, 1);
  z-index: 4;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 8%, transparent);
}
.au2-art:hover .au2-nav { opacity: 0.55; }
.au2-art:hover .au2-nav:hover { opacity: 1; color: var(--ink); background: var(--surface); transform: translateY(-50%) scale(1.05); }
.au2-nav--prev { left: -2px; }
.au2-nav--next { right: -2px; }

/* Foot counter */
.au2-foot-counter {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.au2-counter-val {
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.au2-counter-sep { color: var(--ink-4); }
.au2-counter-total { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ─── Placeholder cards (Tasks 4 · 6 · 7) ──────────────────────────── */
.au2-card-ph {
  padding: 0;
  display: flex; flex-direction: column;
}
.au2-card-head--cal,
.au2-card-head--ia {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.au2-card-head--cal {
  grid-template-columns: 1fr auto;
}
.au2-cal-title {
  display: flex; flex-direction: column; gap: 2px;
}

.au2-pill--paid {
  color: var(--green);
  background: color-mix(in oklab, var(--green) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 22%, transparent);
}

/* Slide 2 placeholder · mini week calendar */
.au2-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px 12px 12px;
  gap: 6px;
}
.au2-cal-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 4px 2px 6px;
  border-radius: 6px;
}
.au2-cal-col.is-today {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}
.au2-cal-day {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-cal-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.au2-cal-col.is-today .au2-cal-num { color: var(--accent); font-weight: 600; }
.au2-cal-stack {
  width: 100%;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 36px;
}
.au2-cal-slot {
  height: 6px;
  border-radius: 2px;
  background: var(--surface-2);
}
.au2-cal-slot.is-paid {
  background: color-mix(in oklab, var(--green) 55%, var(--surface-2));
}
.au2-cal-slot.is-pending {
  background: color-mix(in oklab, var(--amber) 55%, var(--surface-2));
}
.au2-cal-slot.is-idle {
  background: var(--surface-2);
  opacity: 0.55;
}

/* Floating toast + WA on slide 2 */
.au2-ph-toast,
.au2-ph-wa {
  position: absolute;
  z-index: 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 10%, transparent);
  pointer-events: none;
}
.au2-ph-toast {
  top: -8px;
  right: -12px;
}
.au2-ph-toast .au2-toast-glyph {
  width: 16px; height: 16px;
  background: var(--green);
  color: #fbf9f4;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-ph-toast .au2-toast-body {
  display: flex; flex-direction: column; gap: 1px;
}
.au2-ph-toast .au2-toast-body b {
  font-size: 11px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
}
.au2-ph-toast .au2-toast-meta {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--ink-3); letter-spacing: 0.02em;
}

.au2-ph-wa {
  left: -14px;
  bottom: -10px;
  max-width: 220px;
}
.au2-wa-icon {
  width: 22px; height: 22px; border-radius: 6px;
  background: color-mix(in oklab, #25D366 80%, var(--ink));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.au2-wa-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.au2-wa-from {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-wa-text {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Slide 4 placeholder · 3-step wizard */
.au2-steps {
  display: flex; flex-direction: column;
  padding: 6px 4px 10px;
}
.au2-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  position: relative;
}
.au2-step + .au2-step { border-top: 1px solid var(--line-soft); }
.au2-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.au2-step.is-done .au2-step-num {
  background: color-mix(in oklab, var(--green) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 35%, transparent);
  color: var(--green);
}
.au2-step.is-active .au2-step-num {
  background: var(--accent);
  border-color: var(--accent-2);
  color: #fbf9f4;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
}
.au2-step.is-next .au2-step-num { opacity: 0.7; }
.au2-step.is-idle .au2-step-num { opacity: 0.45; }
.au2-step.is-next, .au2-step.is-idle { opacity: 0.85; }
.au2-step.is-next .au2-step-label,
.au2-step.is-idle .au2-step-label { color: var(--ink-2); }
.au2-step-num,
.au2-step-label,
.au2-step-meta,
.au2-step-arrow {
  transition: all 350ms var(--ease-emphasized);
}

.au2-wiz-done {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 12px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--green) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--green) 28%, transparent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: -.005em;
  animation: au2-wiz-done-in 400ms var(--ease-emphasized) backwards;
}
@keyframes au2-wiz-done-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-wiz-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fbf9f4;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Payment link toast · Reagenda step 5 */
.au2-wiz-paylink {
  position: absolute;
  bottom: -42px;
  right: -16px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 480ms cubic-bezier(.18, .89, .32, 1.18);
  z-index: 6;
  pointer-events: none;
  max-width: 290px;
}
.au2-wiz-paylink.is-on {
  opacity: 1;
  transform: translateY(0);
}
.au2-wiz-paylink-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #25D366;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-wiz-paylink-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.au2-wiz-paylink-body b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--surface);
  letter-spacing: -.005em;
}
.au2-wiz-paylink-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: color-mix(in oklab, var(--surface) 65%, transparent);
  letter-spacing: 0.02em;
}
.au2-wiz-paylink-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

/* Sparkle one-shot · 1.4s al entrar el slide */
.au2-ia-spark {
  position: relative;
  overflow: visible;
}
.au2-slide.is-active .au2-ia-spark::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 35%, transparent) 0%, transparent 70%);
  opacity: 0;
  animation: au2-ia-glow 1400ms var(--ease-emphasized) 200ms 1 forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes au2-ia-glow {
  0%   { opacity: 0;   transform: scale(0.7); }
  35%  { opacity: 1;   transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.6); }
}
.au2-step-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.au2-step-label {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.au2-step.is-idle .au2-step-label { color: var(--ink-2); }
.au2-step-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.au2-step-arrow {
  color: var(--ink-4);
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
}
.au2-step.is-active .au2-step-arrow { color: var(--accent); }

/* Slide 5 placeholder · IA chat ─────────────────────────────────── */
.au2-card-ia {
  display: flex; flex-direction: column;
}
.au2-ia-spark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent) 18%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 6%, var(--surface)) 100%
  );
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.au2-card-head--ia .au2-cal-title { min-width: 0; }

.au2-chat {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px 14px 8px;
  min-height: 180px;
}
.au2-chat-msg {
  display: flex; align-items: flex-end; gap: 8px;
  animation: au2-msg-in 360ms var(--ease-emphasized) backwards;
}
.au2-chat-msg--user { justify-content: flex-end; }
.au2-chat-msg--ai   { justify-content: flex-start; }
@keyframes au2-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.au2-chat-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 24%, var(--surface)), color-mix(in oklab, var(--accent) 10%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.au2-chat-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.au2-chat-bubble--user {
  background: var(--accent);
  color: #fbf9f4;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.au2-chat-bubble--ai {
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
  max-width: 86%;
}

.au2-chat-thinking {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 10px 12px;
}
.au2-chat-thinking span {
  width: 5px; height: 5px;
  background: var(--ink-3);
  border-radius: 50%;
  animation: au2-think 1100ms var(--ease-emphasized) infinite;
}
.au2-chat-thinking span:nth-child(2) { animation-delay: 120ms; }
.au2-chat-thinking span:nth-child(3) { animation-delay: 240ms; }
@keyframes au2-think {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

.au2-chat-stat-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 2px 0 4px;
}
.au2-chat-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  animation: au2-stat-in 320ms var(--ease-emphasized) backwards;
}
@keyframes au2-stat-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.au2-chat-stat-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.au2-chat-stat-value {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.au2-chat-stat.is-compare .au2-chat-stat-value { color: var(--ink-3); }
.au2-chat-stat.is-accent {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.au2-chat-stat.is-accent .au2-chat-stat-value { color: var(--accent); }
.au2-chat-stat.is-accent .au2-chat-stat-label { color: color-mix(in oklab, var(--accent) 70%, var(--ink-3)); }

.au2-chat-summary {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
  letter-spacing: -.005em;
  animation: au2-msg-in 360ms var(--ease-emphasized) backwards;
}
.au2-chat-summary b {
  color: var(--accent);
  font-weight: 600;
}

/* Chat input */
.au2-chat-input {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 12px 12px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.au2-chat-input-spark {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.au2-chat-input-text {
  flex: 1; min-width: 0;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: -.005em;
  display: inline-flex; align-items: center;
}
.au2-chat-input-placeholder { color: var(--ink-4); }
.au2-chat-caret {
  display: inline-block;
  width: 1.5px; height: 13px;
  background: var(--accent);
  margin-left: 2px;
  animation: au2-caret 800ms steps(1, end) infinite;
  vertical-align: text-bottom;
}
@keyframes au2-caret {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.au2-chat-input-kbd {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}

/* ─── IA chat extension · voice + action cards + summary pill ─── */
.au2-chat-bubble--voice {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px;
  padding: 7px 11px 8px;
}
.au2-chat-mic {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
}

.au2-action-card {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: -.005em;
  line-height: 1.35;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  animation: au2-msg-in 360ms var(--ease-emphasized) backwards;
}
.au2-action-card + .au2-action-card {
  margin-top: 5px;
}
.au2-action-card b {
  color: var(--ink);
  font-weight: 600;
}
.au2-action-card--reagenda {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 22%, transparent);
}
.au2-action-card--wa {
  background: color-mix(in oklab, #25D366 8%, var(--surface));
  border-color: color-mix(in oklab, #25D366 28%, transparent);
}
.au2-action-check {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  color: #fbf9f4;
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-action-card--wa .au2-action-check {
  background: #25D366;
}

/* Summary pill compacta de la primera conversación */
.au2-chat-summary-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: -.005em;
  align-self: center;
  animation: au2-msg-in 360ms var(--ease-emphasized) backwards;
}
.au2-chat-summary-pill .au2-action-check {
  width: 12px; height: 12px;
}
.au2-chat-summary-time {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
  margin-left: 2px;
}

/* Spark/mic icon en input */
.au2-chat-input-spark--mic {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}

/* Placeholder tag */
.au2-ph-tag {
  position: absolute;
  bottom: -22px;
  left: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 2px 6px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  opacity: 0.7;
}

/* Centrar slides v2 con margen extra para flechas */
.au2-stage { padding: 0 12px; }

/* Card entry stagger para los placeholders */
.au2-slide.is-active .au2-card-ph {
  animation: au2-card-in 400ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-ph-toast {
  animation: au2-card-in 400ms var(--ease-emphasized) 180ms backwards;
}
.au2-slide.is-active .au2-ph-wa {
  animation: au2-card-in 400ms var(--ease-emphasized) 280ms backwards;
}
.au2-slide.is-active .au2-step {
  animation: au2-row-in 320ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-step:nth-child(1) { animation-delay: 40ms; }
.au2-slide.is-active .au2-step:nth-child(2) { animation-delay: 100ms; }
.au2-slide.is-active .au2-step:nth-child(3) { animation-delay: 160ms; }
.au2-slide.is-active .au2-ia-card {
  animation: au2-row-in 320ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-ia-card:nth-child(1) { animation-delay: 0ms; }
.au2-slide.is-active .au2-ia-card:nth-child(2) { animation-delay: 120ms; }
.au2-slide.is-active .au2-ia-card:nth-child(3) { animation-delay: 240ms; }

/* Plus pill pulse · 3 pulsos sincronizados con cada card */
.au2-slide.is-active .au2-plus-badge {
  animation: au2-plus-pulse 360ms var(--ease-emphasized) 3;
}
@keyframes au2-plus-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 6%, transparent); }
  50%      { box-shadow:
              inset 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent),
              0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
}
/* ═════════════════════════════════════════════════════════════════════
   AUTH · TASK 4 · CALENDARIO SEMANAL DETALLADO
   Reemplaza el placeholder. Vista 7 columnas, chips por turno,
   leyenda, toast pago + WA recordatorio que alternan cada 3s.
   ═════════════════════════════════════════════════════════════════════ */

.au2-card-cal {
  padding: 0;
  display: flex; flex-direction: column;
}
.au2-card-cal .au2-card-head--cal {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.au2-pill--paid svg { stroke: currentColor; }

.au2-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 10px 12px 6px;
}
.au2-week-col {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 2px 6px;
  border-radius: 6px;
  min-width: 0;
}
.au2-week-col.is-today {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.au2-week-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding-bottom: 4px;
}
.au2-week-d {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-week-n {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.au2-week-col.is-today .au2-week-d { color: var(--accent); }
.au2-week-col.is-today .au2-week-n { color: var(--accent); font-weight: 600; }

.au2-week-list {
  display: flex; flex-direction: column;
  gap: 3px;
  min-height: 56px;
}
.au2-week-empty {
  display: block;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-4);
  padding: 4px 0;
  opacity: 0.4;
}
.au2-week-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 3px 2px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid transparent;
  position: relative;
  transition: transform 200ms cubic-bezier(.2,0,0,1);
}
.au2-week-chip:hover {
  transform: translateY(-1px);
}
.au2-week-chip-time {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  line-height: 1;
}
.au2-week-chip-who {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.au2-week-chip.is-paid {
  background: color-mix(in oklab, var(--green) 14%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 28%, transparent);
}
.au2-week-chip.is-paid .au2-week-chip-who { color: var(--green); }
.au2-week-chip.is-pending {
  background: color-mix(in oklab, var(--amber) 14%, var(--surface));
  border-color: color-mix(in oklab, var(--amber) 28%, transparent);
}
.au2-week-chip.is-pending .au2-week-chip-who { color: var(--amber); }
.au2-week-chip.is-idle {
  background: var(--surface-2);
  border-color: var(--line-soft);
}
.au2-week-chip.is-idle .au2-week-chip-who { color: var(--ink-3); }
.au2-week-chip.is-live {
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent) 28%, transparent),
    0 4px 10px color-mix(in oklab, var(--accent) 22%, transparent);
  animation: au2-chip-pulse 2s ease-in-out infinite;
}
@keyframes au2-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 28%, transparent),
                          0 4px 10px color-mix(in oklab, var(--accent) 22%, transparent); }
  50%      { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 38%, transparent),
                          0 4px 14px color-mix(in oklab, var(--accent) 30%, transparent); }
}
.au2-week-chip-auto {
  position: absolute;
  top: -3px; right: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink-4);
  color: var(--ink-3);
  font-size: 8px;
  font-weight: 600;
  line-height: 9px;
  text-align: center;
  letter-spacing: 0;
}

.au2-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--line-soft);
}
.au2-cal-legend {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.au2-cal-legend .au2-cal-dot { margin-left: 4px; }
.au2-cal-legend .au2-cal-dot:first-child { margin-left: 0; }
.au2-cal-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.au2-cal-dot.is-paid    { background: var(--green); }
.au2-cal-dot.is-pending { background: var(--amber); }
.au2-cal-dot.is-idle    { background: var(--ink-4); }
.au2-cal-auto {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}

/* Toast / WA controlled by .is-on (calendario) */
.au2-card-cal ~ .au2-ph-toast,
.au2-card-cal ~ .au2-ph-wa {
  opacity: 0;
  transition:
    opacity 320ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
  animation: none !important;
}
.au2-card-cal ~ .au2-ph-toast {
  transform: translateX(20px);
}
.au2-card-cal ~ .au2-ph-toast.is-on {
  opacity: 1;
  transform: translateX(0);
}
.au2-card-cal ~ .au2-ph-wa {
  transform: scale(0.96);
  transform-origin: bottom right;
}
.au2-card-cal ~ .au2-ph-wa.is-on {
  opacity: 1;
  transform: scale(1);
}

.au2-card-cal ~ .au2-ph-wa .au2-wa-icon {
  background: #25D366;
  color: #fff;
}

/* Card head meta now inline includes amount and paid count */
.au2-cal-amount {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 600;
  font-family: 'Geist Mono', monospace;
}
.au2-cal-paid-inline {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--green) 10%, var(--surface));
  color: var(--green);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  border: 1px solid color-mix(in oklab, var(--green) 22%, transparent);
  transition: background 600ms var(--ease-emphasized),
              color 600ms;
}

/* Chip smooth state transitions */
.au2-week-chip {
  transition:
    background-color 450ms var(--ease-emphasized),
    border-color 450ms var(--ease-emphasized),
    color 450ms var(--ease-emphasized),
    transform 200ms cubic-bezier(.2, 0, 0, 1);
}
.au2-week-chip.is-new {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
}
.au2-week-chip.is-new .au2-week-chip-who { color: var(--accent); }

/* Story chip — entrada pop-in suave */
.au2-week-chip.is-story {
  animation: au2-chip-pop 450ms var(--ease-emphasized) backwards;
}
@keyframes au2-chip-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.au2-week-chip.is-story::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 6px;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: au2-chip-halo 1s var(--ease-emphasized) 200ms;
  pointer-events: none;
}
@keyframes au2-chip-halo {
  0%   { opacity: 0.7; transform: scale(0.9); }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* Banner step 1: nueva reserva online (spring suave, queda hasta salida) */
.au2-cal-banner {
  position: absolute;
  top: -22px;
  left: 50%;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 9px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 500ms cubic-bezier(.18, .89, .32, 1.18);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
.au2-cal-banner.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.au2-cal-banner-glyph {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fbf9f4;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.au2-cal-banner-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.au2-cal-banner-body b {
  font-size: 11.5px; font-weight: 600; color: var(--surface);
  letter-spacing: -.005em;
}
.au2-cal-banner-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: color-mix(in oklab, var(--surface) 70%, transparent);
  letter-spacing: 0.02em;
}

/* Override placeholder default position for v2 toast (no más right negativo, tapaba card) */
.au2-card-cal ~ .au2-ph-toast {
  top: 40px;
  right: -28px;
}
.au2-card-cal ~ .au2-ph-wa {
  right: -22px;
  bottom: -36px;
  left: auto;
  max-width: 240px;
}
   Context strip (modalidad, sala, última visita, tags) + quick actions
   ═════════════════════════════════════════════════════════════════════ */

.au2-ctx {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 9px 14px 10px;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.au2-ctx-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.au2-ctx-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.au2-ctx-item svg { color: var(--ink-3); }
.au2-ctx-sep { color: var(--ink-4); font-size: 10px; }
.au2-ctx-tags {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.au2-ctx-tag {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.au2-ctx-tag--paid {
  color: var(--green);
  background: color-mix(in oklab, var(--green) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 22%, transparent);
}

/* Quick actions row */
.au2-quick {
  display: flex; gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line-soft);
}
.au2-quick-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: default;
  transition: background 120ms cubic-bezier(.2,0,0,1),
              color 120ms cubic-bezier(.2,0,0,1),
              border-color 120ms cubic-bezier(.2,0,0,1);
}
.au2-quick-btn:hover {
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 22%, transparent);
}
.au2-quick-btn svg { color: var(--ink-3); }
.au2-quick-btn:hover svg { color: var(--accent); }
.au2-quick-kbd {
  margin-left: 2px;
  padding: 1px 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}


/* ═════════════════════════════════════════════════════════════════════
   AUTH · TASK G · AGENDA NARRATIVA
   Cursor que viaja · drawer historia · pill "modo anotación"
   ═════════════════════════════════════════════════════════════════════ */

/* Quick-button presionado/encendido */
.au2-quick-btn.is-press {
  background: color-mix(in oklab, var(--accent) 16%, var(--surface)) !important;
  border-color: color-mix(in oklab, var(--accent) 36%, transparent) !important;
  color: var(--accent) !important;
  transform: scale(0.97);
  transition: transform 140ms var(--ease-emphasized);
}
.au2-quick-btn.is-on {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface)) !important;
  border-color: color-mix(in oklab, var(--accent) 26%, transparent) !important;
  color: var(--ink) !important;
}
.au2-quick-btn.is-press svg,
.au2-quick-btn.is-on svg { color: var(--accent) !important; }

/* Cursor narrativo · viaja entre acciones */
.au2-ag-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
  left: 78%;
  bottom: -20px;
  transition:
    left 700ms var(--ease-emphasized),
    bottom 700ms var(--ease-emphasized),
    opacity 220ms var(--ease-emphasized);
  will-change: left, bottom, opacity;
}
.au2-ag-cursor.is-on { opacity: 1; }
.au2-ag-cursor.is-at-ficha {
  left: 75%;
  bottom: 22px;
}
.au2-ag-cursor.is-at-note {
  left: 26%;
  bottom: 22px;
}

/* Active row · expansion inline cuando step >= 4 muestra historia */
.au2-slot.is-expanded {
  padding-bottom: 12px;
}
.au2-slot-history {
  margin: 6px 0 0;
  padding: 6px 8px;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 3px;
  border-left: 2px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: 0;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  animation: au2-history-in 380ms var(--ease-emphasized) backwards;
}
@keyframes au2-history-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-slot-history li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.au2-slot-history-when {
  flex-shrink: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.02em;
  width: 34px;
}

/* Focus mode · cuando ficha está abierta, comprimir contexto + filas idle */
.au2-card-1.is-focused .au2-ctx {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-width: 0;
  transition:
    max-height 420ms var(--ease-emphasized),
    padding 420ms var(--ease-emphasized),
    opacity 280ms var(--ease-emphasized);
}
.au2-card-1 .au2-ctx {
  max-height: 80px;
  transition:
    max-height 420ms var(--ease-emphasized),
    padding 420ms var(--ease-emphasized),
    opacity 280ms var(--ease-emphasized);
}

/* Filas no-activas se compactan cuando ficha abierta */
.au2-card-1.is-focused .au2-slot:not(.is-active) {
  padding-top: 7px;
  padding-bottom: 7px;
  transition: padding 320ms var(--ease-emphasized);
}
.au2-card-1.is-focused .au2-slot:not(.is-active) .au2-slot-motivo {
  opacity: 0.5;
}
.au2-card-1 .au2-slot {
  transition: padding 320ms var(--ease-emphasized);
}
/* Drawer del slide agenda (au2). El selector base se había perdido — quedaba
 * una llave de cierre huérfana y las declaraciones sueltas (descartadas). */
.au2-ag-drawer {
  position: absolute;
  right: 10px;
  top: 100px;
  width: 168px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: 10px;
  box-shadow:
    -8px 0 24px color-mix(in oklab, var(--accent) 14%, transparent),
    0 12px 28px rgba(0,0,0,0.08);
  padding: 9px 11px 10px;
  display: flex; flex-direction: column; gap: 7px;
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 480ms var(--ease-emphasized);
  pointer-events: none;
  z-index: 5;
}
.au2-ag-drawer.is-on {
  opacity: 1;
  transform: translateX(0);
}
.au2-ag-drawer-head {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.au2-ag-drawer-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.au2-ag-drawer-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.au2-ag-drawer-list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.au2-ag-drawer-list li::before { content: none; }
.au2-ag-drawer-when {
  flex-shrink: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  width: 32px;
  padding-top: 1px;
}

/* Pill "modo anotación" — reemplaza al timer cuando step >= 7 */
.au2-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--accent);
  animation: au2-row-in 360ms var(--ease-emphasized) backwards;
  white-space: nowrap;
}
.au2-mode-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  animation: au2-blink 1.6s ease-in-out infinite;
}
@keyframes au2-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}


/* ═════════════════════════════════════════════════════════════════════
   AUTH · TASK H · FINANZAS NARRATIVA
   Ghost line (abril) + mayo + end-halo + tooltip ABOVE + badge
   ═════════════════════════════════════════════════════════════════════ */

/* Period tab pulse cuando step >= 1 */
.au2-mid-tabs.is-clicked .au2-mid-tab.is-active {
  animation: au2-tab-click 380ms var(--ease-emphasized);
}
@keyframes au2-tab-click {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Ghost line · abril (dashed, faded) */
.au2-line-ghost {
  stroke-dasharray: 3 3;
  stroke-dashoffset: 100;
  opacity: 0;
  transition:
    stroke-dashoffset 800ms var(--ease-emphasized),
    opacity 400ms var(--ease-emphasized);
}
.au2-card-3.step-1 .au2-line-ghost,
.au2-card-3.step-2 .au2-line-ghost,
.au2-card-3.step-3 .au2-line-ghost,
.au2-card-3.step-4 .au2-line-ghost,
.au2-card-3.step-5 .au2-line-ghost,
.au2-card-3.step-6 .au2-line-ghost {
  stroke-dashoffset: 0;
  opacity: 0.55;
}

/* Override line/area/end-dot animation triggers · usamos step en vez de slide.is-active */
.au2-card-3 .au2-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: none !important;
  transition: stroke-dashoffset 900ms var(--ease-emphasized);
}
.au2-card-3.step-2 .au2-line,
.au2-card-3.step-3 .au2-line,
.au2-card-3.step-4 .au2-line,
.au2-card-3.step-5 .au2-line,
.au2-card-3.step-6 .au2-line {
  stroke-dashoffset: 0;
}

.au2-card-3 .au2-area {
  opacity: 0;
  animation: none !important;
  transition: opacity 500ms var(--ease-emphasized);
}
.au2-card-3.step-2 .au2-area,
.au2-card-3.step-3 .au2-area,
.au2-card-3.step-4 .au2-area,
.au2-card-3.step-5 .au2-area,
.au2-card-3.step-6 .au2-area {
  opacity: 1;
}

.au2-card-3 .au2-end-dot {
  opacity: 0;
  transform: scale(0);
  animation: none !important;
  transition:
    opacity 400ms var(--ease-emphasized),
    transform 500ms cubic-bezier(.18, .89, .32, 1.18);
}
.au2-card-3.step-3 .au2-end-dot,
.au2-card-3.step-4 .au2-end-dot,
.au2-card-3.step-5 .au2-end-dot,
.au2-card-3.step-6 .au2-end-dot {
  opacity: 1;
  transform: scale(1);
}

/* Halo pulsing en end-dot */
.au2-end-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: au2-end-halo-pulse 1800ms var(--ease-emphasized) infinite;
}
@keyframes au2-end-halo-pulse {
  0%   { transform: scale(1);   opacity: 0.7; stroke-width: 2; }
  100% { transform: scale(2.4); opacity: 0;   stroke-width: 0.6; }
}

/* Line labels (abril / mayo) */
.au2-line-label {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 400ms var(--ease-emphasized);
  pointer-events: none;
}
.au2-card-3.step-1 .au2-line-label--apr,
.au2-card-3.step-2 .au2-line-label--apr,
.au2-card-3.step-3 .au2-line-label--apr,
.au2-card-3.step-4 .au2-line-label--apr,
.au2-card-3.step-5 .au2-line-label--apr,
.au2-card-3.step-6 .au2-line-label--apr { opacity: 0.55; }
.au2-card-3.step-2 .au2-line-label--may,
.au2-card-3.step-3 .au2-line-label--may,
.au2-card-3.step-4 .au2-line-label--may,
.au2-card-3.step-5 .au2-line-label--may,
.au2-card-3.step-6 .au2-line-label--may { opacity: 1; }
.au2-line-label--apr {
  color: var(--ink-3);
  right: 18px;
  top: 70%;
}
.au2-line-label--may {
  color: var(--accent);
  right: 18px;
  top: 4%;
  font-weight: 600;
}

/* Tooltip · ABOVE the chart con flecha hacia abajo apuntando al end-dot */
.au2-fin-tooltip {
  position: absolute;
  top: -10px;
  right: 4px;
  left: auto;
  width: auto;
  padding: 5px 9px;
  display: inline-flex; flex-direction: column;
  gap: 1px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 7px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--ease-emphasized),
    transform 400ms var(--ease-emphasized);
  z-index: 4;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  animation: none !important;
}
.au2-fin-tooltip.is-on {
  opacity: 1;
  transform: translateY(0);
}
.au2-fin-tooltip b {
  color: var(--surface);
  font-weight: 600;
}
.au2-fin-tooltip .au2-tt-meta {
  color: color-mix(in oklab, var(--surface) 65%, transparent);
  font-size: 8.5px;
}
.au2-fin-tooltip::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 12px;
  left: auto;
  top: auto;
  width: 7px; height: 7px;
  background: var(--ink);
  transform: rotate(45deg);
}

/* Delta pill pulse cuando step >= 5 */
.au2-delta.is-pulse {
  animation: au2-delta-pulse 700ms var(--ease-emphasized) 2;
}
@keyframes au2-delta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 0%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--green) 22%, transparent); }
}

/* KPI sub-meta · "vs abril" */
.au2-kpi-vs {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 2px;
  opacity: 0;
  transition: opacity 400ms var(--ease-emphasized);
}
.au2-card-3.step-1 .au2-kpi-vs,
.au2-card-3.step-2 .au2-kpi-vs,
.au2-card-3.step-3 .au2-kpi-vs,
.au2-card-3.step-4 .au2-kpi-vs,
.au2-card-3.step-5 .au2-kpi-vs,
.au2-card-3.step-6 .au2-kpi-vs { opacity: 1; }

/* Badge "Mejor mes" desde abajo */
.au2-fin-badge {
  position: absolute;
  bottom: -14px;
  left: 50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  font-size: 11px;
  letter-spacing: -.005em;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 500ms cubic-bezier(.18, .89, .32, 1.18);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
.au2-fin-badge.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.au2-fin-badge b {
  color: var(--surface);
  font-weight: 600;
}
.au2-fin-badge-glyph {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fbf9f4;
  display: inline-flex; align-items: center; justify-content: center;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 1 v2 · Agenda calma · "Tu día ya está ordenado"
   Una sola card. Hero countdown · 4 turnos · footer chip.
   ═════════════════════════════════════════════════════════════════ */
.au2-ag2 {
  padding: 0;
  display: flex; flex-direction: column;
}

/* Header strip · fecha + status pill */
.au2-ag2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-ag2-date {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-ag2-date-time {
  color: var(--ink);
  font-weight: 500;
}
.au2-ag2-sep { color: var(--ink-4); }

.au2-ag2-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--green) 9%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--green) 26%, transparent);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-ag2-status.is-on { opacity: 1; transform: translateY(0); }
.au2-ag2-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 18%, transparent);
}

/* Hero · countdown + next patient. Brass-tinted strip, alto presupuesto visual */
.au2-ag2-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 9px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 9%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 4%, var(--surface)) 100%);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 14%, transparent);
  position: relative;
}
.au2-ag2-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--accent) 22%, transparent) 35%,
    color-mix(in oklab, var(--accent) 22%, transparent) 65%,
    transparent);
}
.au2-ag2-hero-l {
  display: flex; flex-direction: column;
  gap: 2px;
}
.au2-ag2-hero-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 75%, var(--ink-3));
}
.au2-ag2-hero-count {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: 'Geist Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.au2-ag2-hero-colon {
  color: color-mix(in oklab, var(--accent) 60%, var(--ink-3));
  margin: 0 -2px;
}
.au2-ag2-hero-r {
  display: flex; flex-direction: column;
  gap: 1px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  min-width: 0;
}
.au2-ag2-hero-time {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}
.au2-ag2-hero-who {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au2-ag2-hero-motivo {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* List · 4 turnos */
.au2-ag2-list {
  list-style: none;
  margin: 0;
  padding: 2px 4px;
}
.au2-ag2-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 22px 1fr auto;
  align-items: center;
  column-gap: 9px;
  padding: 5px 10px;
  border-radius: 6px;
}
.au2-ag2-row + .au2-ag2-row::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 1px;
  background: var(--line-soft);
}
.au2-ag2-row-time {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.au2-ag2-row-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--accent) 80%, var(--ink-2));
}
.au2-ag2-row-body {
  display: flex; flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.au2-ag2-row-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.au2-ag2-row-motivo {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Check pill · animado por step */
.au2-ag2-row-check {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid transparent;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 260ms var(--ease-emphasized),
    transform 260ms var(--ease-emphasized),
    background 260ms ease,
    color 260ms ease,
    border-color 260ms ease;
}
.au2-ag2-row-check svg { display: block; }
.au2-ag2-row.is-checked .au2-ag2-row-check {
  opacity: 1;
  transform: scale(1);
  background: color-mix(in oklab, var(--green) 11%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 26%, transparent);
  color: var(--green);
}

/* Entry stagger (reusa au2-row-in que ya está definido en slide 1 viejo) */
.au2-slide.is-active .au2-ag2 .au2-ag2-row {
  animation: au2-row-in 320ms var(--ease-emphasized) backwards;
}
.au2-slide.is-active .au2-ag2 .au2-ag2-row:nth-child(1) { animation-delay: 100ms; }
.au2-slide.is-active .au2-ag2 .au2-ag2-row:nth-child(2) { animation-delay: 160ms; }
.au2-slide.is-active .au2-ag2 .au2-ag2-row:nth-child(3) { animation-delay: 220ms; }
.au2-slide.is-active .au2-ag2 .au2-ag2-row:nth-child(4) { animation-delay: 280ms; }

/* Hero entry · subtle scale */
.au2-slide.is-active .au2-ag2-hero {
  animation: au2-ag2-hero-in 480ms var(--ease-emphasized) backwards;
  animation-delay: 60ms;
}
@keyframes au2-ag2-hero-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer chip · "Folio armó tu día" */
.au2-ag2-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
  border-top: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 380ms var(--ease-emphasized),
    transform 380ms var(--ease-emphasized);
}
.au2-ag2-foot.is-on { opacity: 1; transform: translateY(0); }
.au2-ag2-foot-glyph {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 16%, var(--surface));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.au2-ag2-foot-text {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--ink-3);
  line-height: 1.35;
}
.au2-ag2-foot-text b {
  color: var(--ink-2);
  font-weight: 500;
}

/* Pause / reduced motion */
.au2-art.is-paused .au2-ag2-row,
.au2-art.is-hidden .au2-ag2-row,
.au2-art.is-paused .au2-ag2-hero,
.au2-art.is-hidden .au2-ag2-hero {
  animation: none !important;
}
.au2-art.is-paused .au2-ag2-row-check,
.au2-art.is-hidden .au2-ag2-row-check,
.au2-art.is-paused .au2-ag2-status,
.au2-art.is-hidden .au2-ag2-status,
.au2-art.is-paused .au2-ag2-foot,
.au2-art.is-hidden .au2-ag2-foot {
  /* mantienen su estado actual (controlado por React .is-on/.is-checked) */
}
@media (prefers-reduced-motion: reduce) {
  .au2-ag2 .au2-ag2-row,
  .au2-ag2-hero { animation: none !important; }
  .au2-ag2-status,
  .au2-ag2-foot,
  .au2-ag2-row-check {
    transition: none !important;
  }
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 2 v2 · "Mientras atendés, la app trabaja por vos"
   Single-actor-per-phase. Banner → Toast → WhatsApp, secuenciales.
   ═════════════════════════════════════════════════════════════════ */

/* Card head v2 · sustituye au2-card-head--cal */
.au2-cal2-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-cal2-now {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.au2-cal2-now-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  animation: au2-cal2-now-pulse 2s ease-in-out infinite;
}
@keyframes au2-cal2-now-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 10%, transparent); }
}
.au2-cal2-now-time {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
}
.au2-cal2-now-meta {
  text-transform: lowercase;
  letter-spacing: 0;
}

.au2-cal2-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
}
.au2-cal2-amount {
  display: inline-flex; align-items: baseline; gap: 1px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: color 320ms var(--ease-emphasized);
}
.au2-cal2-amount-sym { color: var(--ink-3); font-weight: 400; }
.au2-cal2-amount.is-bumped {
  color: var(--green);
}
.au2-cal2-amount.is-bumped .au2-cal2-amount-sym { color: color-mix(in oklab, var(--green) 70%, var(--ink-3)); }
.au2-cal2-amount.is-bumped .au2-cal2-amount-val {
  animation: au2-cal2-bump 420ms var(--ease-emphasized);
}
@keyframes au2-cal2-bump {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.au2-cal2-paid {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition:
    background 320ms var(--ease-emphasized),
    border-color 320ms var(--ease-emphasized),
    color 320ms var(--ease-emphasized);
}
.au2-cal2-paid.is-bumped {
  background: var(--green-soft);
  border-color: color-mix(in oklab, var(--green) 26%, transparent);
  color: var(--green);
}
.au2-cal2-paid-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--green) 18%, var(--surface));
  color: var(--green);
  transition: background 320ms ease;
}
.au2-cal2-paid.is-bumped .au2-cal2-paid-glyph {
  background: var(--green);
  color: #fff;
  animation: au2-cal2-tick 480ms var(--ease-emphasized);
}
@keyframes au2-cal2-tick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.au2-cal2-paid-num { color: inherit; }
.au2-cal2-paid-sep { color: color-mix(in oklab, currentColor 50%, transparent); margin: 0 1px; }
.au2-cal2-paid-tot { color: inherit; }

/* Week grid · target column resaltada cuando llega la reserva */
.au2-cal2-week {
  padding: 9px 11px 6px;
}
.au2-week-col.is-target {
  background: color-mix(in oklab, var(--accent) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
  border-radius: 6px;
  transition:
    background 360ms var(--ease-emphasized),
    box-shadow 360ms var(--ease-emphasized);
}

/* Footer override · más compacto */
.au2-cal2-foot {
  padding: 7px 12px;
  border-top: 1px solid var(--line-soft);
}

/* ─── BANNER · phase 1 only ────────────────────────────────────
   Posicionado sobre la columna Fri 23 (5/7), con tail apuntando
   hacia abajo al chip MA que aparece en simultáneo. Conexión causal. */
.au2-cal2-banner {
  position: absolute;
  top: -10px;
  left: 64%;
  transform: translate(-50%, -6px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 8px;
  box-shadow:
    0 8px 24px color-mix(in oklab, var(--ink) 28%, transparent),
    0 0 0 1px color-mix(in oklab, var(--accent) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
  white-space: nowrap;
}
.au2-cal2-banner.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.au2-cal2-banner-glyph {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-cal2-banner-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.au2-cal2-banner-body b {
  font-size: 11px;
  font-weight: 600;
  color: var(--surface);
  letter-spacing: -0.005em;
}
.au2-cal2-banner-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: color-mix(in oklab, var(--surface) 70%, var(--ink-3));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Tail · línea + flecha hacia abajo conectando con el chip Fri 23 */
.au2-cal2-banner-tail {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 70%, transparent) 0%,
    color-mix(in oklab, var(--accent) 30%, transparent) 100%);
  pointer-events: none;
}
.au2-cal2-banner-tail::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  transform: translateX(-50%) rotate(45deg);
  width: 5px; height: 5px;
  border-right: 1.4px solid color-mix(in oklab, var(--accent) 50%, transparent);
  border-bottom: 1.4px solid color-mix(in oklab, var(--accent) 50%, transparent);
}
.au2-cal2-banner.is-on .au2-cal2-banner-tail {
  animation: au2-cal2-tail-draw 520ms var(--ease-emphasized) 80ms backwards;
}
@keyframes au2-cal2-tail-draw {
  from { height: 0; opacity: 0; }
  to   { height: 28px; opacity: 1; }
}

/* ─── TOAST PAGO · phase 2 only ────────────────────────────────
   Top-right, slide in from right. Reemplaza al banner. */
.au2-cal2-toast {
  position: absolute;
  top: -6px;
  right: -10px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--green) 26%, transparent);
  border-radius: 8px;
  box-shadow:
    0 8px 24px color-mix(in oklab, var(--green) 18%, transparent),
    0 0 0 4px color-mix(in oklab, var(--green) 6%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transform: translateX(14px) scale(0.96);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
  white-space: nowrap;
}
.au2-cal2-toast.is-on {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.au2-cal2-toast-glyph {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-cal2-toast-body {
  display: flex; flex-direction: column; gap: 1px;
}
.au2-cal2-toast-body b {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.au2-cal2-toast-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ─── WHATSAPP · phase 3+ · cierre satisfactorio ───────────────
   Bottom-right, scale + fade. Persiste hasta fin de slide.
   Posicionado más abajo para no chocar con el footer "automatizado". */
.au2-cal2-wa {
  position: absolute;
  right: -10px;
  bottom: -52px;
  display: inline-flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px 9px 10px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, #25D366 38%, transparent);
  border-radius: 10px;
  box-shadow:
    0 12px 32px color-mix(in oklab, #25D366 20%, transparent),
    0 0 0 4px color-mix(in oklab, #25D366 8%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 460ms var(--ease-emphasized),
    transform 460ms var(--ease-emphasized);
}
.au2-cal2-wa.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.au2-cal2-wa-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.au2-cal2-wa-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.au2-cal2-wa-from {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, #1B6E3A 70%, var(--ink-3));
}
.au2-cal2-wa-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

/* Override legacy slide-2 floating actor animations · sólo afecta a la card vieja */
/* (no aplica a au2-cal2 que usa nuevas clases) */

/* Hide reduced-motion / paused properly */
.au2-art.is-paused .au2-cal2-banner,
.au2-art.is-hidden .au2-cal2-banner,
.au2-art.is-paused .au2-cal2-toast,
.au2-art.is-hidden .au2-cal2-toast,
.au2-art.is-paused .au2-cal2-wa,
.au2-art.is-hidden .au2-cal2-wa {
  /* mantienen su estado actual controlado por React (.is-on) */
  animation: none !important;
}
.au2-art.is-paused .au2-cal2-now-dot,
.au2-art.is-hidden .au2-cal2-now-dot {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .au2-cal2-banner,
  .au2-cal2-toast,
  .au2-cal2-wa,
  .au2-cal2-amount,
  .au2-cal2-paid,
  .au2-cal2-paid-glyph,
  .au2-cal2-banner-tail,
  .au2-cal2-now-dot {
    animation: none !important;
    transition: none !important;
  }
}


/* Phase 3 · ocultar el badge "automatizado" porque la card de WhatsApp
   ES la prueba de automatización. Evita el overlap visual con el WA card. */
.au2-cal2 .au2-cal-auto {
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-cal2.is-phase-wa .au2-cal-auto {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 3 v2 · "Tu mes en una mirada"
   Mini-launch reveal · KPIs stagger → chart story → tooltip
   conectado al end-dot → deltas (proof) → badge bounce (celebration).
   ═════════════════════════════════════════════════════════════════ */
.au2-fin2 {
  padding: 0;
  display: flex; flex-direction: column;
}

/* Header slim · sin tabs · sólo período + comparación */
.au2-fin2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-fin2-period {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.au2-fin2-period svg {
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}
.au2-fin2-trailing {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: lowercase;
}

/* KPIs · 3 cols con divider sutil */
.au2-fin2-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 12px 10px;
  gap: 0;
  border-bottom: 1px solid var(--line-soft);
}
.au2-fin2-kpi {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-fin2-kpi:first-child { padding-left: 0; }
.au2-fin2-kpi:last-child {
  border-right: 0;
  padding-right: 0;
}
.au2-fin2.kpi-1 .au2-fin2-kpi-1,
.au2-fin2.kpi-2 .au2-fin2-kpi-2,
.au2-fin2.kpi-3 .au2-fin2-kpi-3 {
  opacity: 1;
  transform: translateY(0);
}

.au2-fin2-kpi-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-fin2-kpi-value {
  display: inline-flex; align-items: baseline;
  gap: 1px;
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.au2-fin2-kpi-sym {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-3);
}
.au2-fin2-kpi-num { color: var(--ink); }

/* Delta + vs row · hidden por defecto, revelado en phase 5 (stagger 100ms) */
.au2-fin2-kpi-delta {
  display: inline-flex; align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--green);
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-fin2-kpi-delta svg { color: currentColor; }
.au2-fin2-kpi-delta-pct {
  color: var(--green);
  font-weight: 600;
}
.au2-fin2-kpi-delta-vs {
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 0;
}

.au2-fin2.phase-5 .au2-fin2-kpi:nth-child(1) .au2-fin2-kpi-delta,
.au2-fin2.phase-6 .au2-fin2-kpi:nth-child(1) .au2-fin2-kpi-delta {
  opacity: 1; transform: translateY(0);
  transition-delay: 0ms;
}
.au2-fin2.phase-5 .au2-fin2-kpi:nth-child(2) .au2-fin2-kpi-delta,
.au2-fin2.phase-6 .au2-fin2-kpi:nth-child(2) .au2-fin2-kpi-delta {
  opacity: 1; transform: translateY(0);
  transition-delay: 100ms;
}
.au2-fin2.phase-5 .au2-fin2-kpi:nth-child(3) .au2-fin2-kpi-delta,
.au2-fin2.phase-6 .au2-fin2-kpi:nth-child(3) .au2-fin2-kpi-delta {
  opacity: 1; transform: translateY(0);
  transition-delay: 200ms;
}

/* Chart wrap · más padding para acomodar tooltip y labels arriba */
.au2-fin2-chart-wrap {
  position: relative;
  padding: 14px 12px 12px;
}
.au2-fin2-chart {
  display: block;
  width: 100%;
  height: 76px;
}

/* Chart lines · gated por phase */
.au2-fin2-line-apr {
  stroke-dasharray: 3 3;
  stroke-dashoffset: 100;
  opacity: 0;
  transition:
    stroke-dashoffset 650ms var(--ease-emphasized),
    opacity 400ms var(--ease-emphasized);
}
.au2-fin2.phase-1 .au2-fin2-line-apr,
.au2-fin2.phase-2 .au2-fin2-line-apr,
.au2-fin2.phase-3 .au2-fin2-line-apr,
.au2-fin2.phase-4 .au2-fin2-line-apr,
.au2-fin2.phase-5 .au2-fin2-line-apr,
.au2-fin2.phase-6 .au2-fin2-line-apr {
  stroke-dashoffset: 0;
  opacity: 0.5;
}
.au2-fin2-line-may {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 800ms var(--ease-emphasized);
}
.au2-fin2.phase-2 .au2-fin2-line-may,
.au2-fin2.phase-3 .au2-fin2-line-may,
.au2-fin2.phase-4 .au2-fin2-line-may,
.au2-fin2.phase-5 .au2-fin2-line-may,
.au2-fin2.phase-6 .au2-fin2-line-may {
  stroke-dashoffset: 0;
}
.au2-fin2-area {
  opacity: 0;
  transition: opacity 500ms var(--ease-emphasized) 200ms;
}
.au2-fin2.phase-2 .au2-fin2-area,
.au2-fin2.phase-3 .au2-fin2-area,
.au2-fin2.phase-4 .au2-fin2-area,
.au2-fin2.phase-5 .au2-fin2-area,
.au2-fin2.phase-6 .au2-fin2-area { opacity: 1; }

/* End-dot · pops + halo */
.au2-fin2-dot {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 320ms var(--ease-emphasized),
    transform 460ms cubic-bezier(.18, .89, .32, 1.28);
}
.au2-fin2.phase-3 .au2-fin2-dot,
.au2-fin2.phase-4 .au2-fin2-dot,
.au2-fin2.phase-5 .au2-fin2-dot,
.au2-fin2.phase-6 .au2-fin2-dot {
  opacity: 1;
  transform: scale(1);
}
.au2-fin2-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: au2-fin2-halo 1900ms var(--ease-emphasized) infinite;
}
@keyframes au2-fin2-halo {
  0%   { transform: scale(1);   opacity: 0.7; stroke-width: 2; }
  100% { transform: scale(2.6); opacity: 0;   stroke-width: 0.4; }
}

/* Line labels (abril/mayo) inline near end of chart */
.au2-fin2-lbl {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-emphasized);
}
.au2-fin2-lbl-apr {
  color: var(--ink-3);
  right: 18px;
  top: 80%;
  transform: translateY(-50%);
}
.au2-fin2-lbl-may {
  color: var(--accent);
  right: 18px;
  top: 22%;
  transform: translateY(-50%);
}
.au2-fin2.phase-1 .au2-fin2-lbl-apr,
.au2-fin2.phase-2 .au2-fin2-lbl-apr,
.au2-fin2.phase-3 .au2-fin2-lbl-apr,
.au2-fin2.phase-4 .au2-fin2-lbl-apr,
.au2-fin2.phase-5 .au2-fin2-lbl-apr,
.au2-fin2.phase-6 .au2-fin2-lbl-apr { opacity: 0.55; }
.au2-fin2.phase-2 .au2-fin2-lbl-may,
.au2-fin2.phase-3 .au2-fin2-lbl-may,
.au2-fin2.phase-4 .au2-fin2-lbl-may,
.au2-fin2.phase-5 .au2-fin2-lbl-may,
.au2-fin2.phase-6 .au2-fin2-lbl-may { opacity: 1; }

/* Tooltip CONECTADO al end-dot · phase 4
   Estructura: leader line vertical + card encima.
   Posicionado con left:% (calculado por React desde lastX/W). */
.au2-fin2-tip {
  position: absolute;
  top: 14px;
  /* left set inline */
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms var(--ease-emphasized);
}
.au2-fin2-tip.is-on { opacity: 1; }
.au2-fin2-tip-leader {
  display: block;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 60%, transparent) 0%,
    color-mix(in oklab, var(--accent) 25%, transparent) 100%);
  transition: height 480ms var(--ease-emphasized) 80ms;
}
.au2-fin2-tip.is-on .au2-fin2-tip-leader {
  height: 22px;
}
.au2-fin2-tip-card {
  display: flex; flex-direction: column;
  gap: 1px;
  padding: 5px 9px 6px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 6px;
  box-shadow:
    0 8px 20px color-mix(in oklab, var(--ink) 28%, transparent),
    0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent);
  transform: translateY(4px);
  transition: transform 360ms var(--ease-emphasized);
  white-space: nowrap;
}
.au2-fin2-tip.is-on .au2-fin2-tip-card {
  transform: translateY(0);
}
.au2-fin2-tip-card b {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--surface);
}
.au2-fin2-tip-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--surface) 65%, transparent);
}

/* Badge "Mejor mes del año" · bounce desde abajo · phase 6 */
.au2-fin2-badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translate(-50%, 12px) scale(0.92);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px;
  background: var(--accent);
  color: var(--surface);
  border-radius: 999px;
  box-shadow:
    0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent),
    0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent);
  font-size: 11.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
.au2-fin2-badge.is-on {
  opacity: 1;
  animation: au2-fin2-badge-bounce 620ms cubic-bezier(.18, 1.2, .42, 1) forwards;
}
@keyframes au2-fin2-badge-bounce {
  0%   { transform: translate(-50%, 14px) scale(0.92); opacity: 0; }
  55%  { transform: translate(-50%, -3px) scale(1.06); opacity: 1; }
  82%  { transform: translate(-50%, 1px)  scale(0.98); }
  100% { transform: translate(-50%, 0)    scale(1); }
}
.au2-fin2-badge b {
  color: var(--surface);
  font-weight: 600;
}
.au2-fin2-badge-glyph {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 22%, var(--accent));
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .au2-fin2-kpi,
  .au2-fin2-kpi-delta,
  .au2-fin2-line-apr,
  .au2-fin2-line-may,
  .au2-fin2-area,
  .au2-fin2-dot,
  .au2-fin2-lbl,
  .au2-fin2-tip,
  .au2-fin2-tip-leader,
  .au2-fin2-tip-card,
  .au2-fin2-badge {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    height: 22px;
  }
  .au2-fin2-tip-leader { height: 22px; }
}

/* Pause animations al pausar carrusel */
.au2-art.is-paused .au2-fin2-halo,
.au2-art.is-hidden .au2-fin2-halo,
.au2-art.is-paused .au2-fin2-badge.is-on,
.au2-art.is-hidden .au2-fin2-badge.is-on {
  animation-play-state: paused;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 4 v2 · "La IA propone. Vos confirmás."
   Consult anchor + 3 actores secuenciales + cursor con click visible
   ═════════════════════════════════════════════════════════════════ */
.au2-rea2 {
  padding: 0;
  display: flex; flex-direction: column;
}

/* Consult anchor strip · ancla a "en consulta con María G." */
.au2-rea2-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-rea2-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.au2-rea2-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  animation: au2-rea2-pulse 2s ease-in-out infinite;
}
@keyframes au2-rea2-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 10%, transparent); }
}
.au2-rea2-who {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
}
.au2-rea2-who-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.au2-rea2-who-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.2;
}
.au2-rea2-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--amber) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--amber) 28%, transparent);
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Steps list */
.au2-rea2-steps {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.au2-rea2-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  transition:
    background 320ms var(--ease-emphasized),
    border-color 320ms var(--ease-emphasized);
}
.au2-rea2-step.is-active {
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 18%, transparent);
}
.au2-rea2-step.is-done {
  background: color-mix(in oklab, var(--green) 6%, var(--surface));
  border-color: color-mix(in oklab, var(--green) 18%, transparent);
}
.au2-rea2-step-n {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
  transition:
    background 320ms var(--ease-emphasized),
    border-color 320ms var(--ease-emphasized),
    color 320ms var(--ease-emphasized);
}
.au2-rea2-step.is-active .au2-rea2-step-n {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 36%, transparent);
  color: var(--accent);
}
.au2-rea2-step.is-done .au2-rea2-step-n {
  background: var(--green);
  border-color: var(--green);
  color: var(--surface);
  animation: au2-rea2-check-in 380ms cubic-bezier(.18, 1.1, .42, 1.0);
}
@keyframes au2-rea2-check-in {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.au2-rea2-step-body {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.au2-rea2-step-actor {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-rea2-step.is-active .au2-rea2-step-actor {
  color: color-mix(in oklab, var(--accent) 75%, var(--ink-3));
}
.au2-rea2-step.is-done .au2-rea2-step-actor {
  color: color-mix(in oklab, var(--green) 70%, var(--ink-3));
}
.au2-rea2-step-actor-glyph {
  width: 14px; height: 14px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.au2-rea2-step-wa {
  background: #25D366;
  color: #fff;
  border-radius: 50%;
}
.au2-rea2-step-content {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  min-height: 16px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-rea2-step.is-active .au2-rea2-step-content,
.au2-rea2-step.is-done .au2-rea2-step-content {
  opacity: 1;
  transform: translateY(0);
}
.au2-rea2-mono {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.au2-rea2-step-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

/* Confirm button + cursor */
.au2-rea2-btn-wrap {
  position: relative;
  display: inline-flex;
  margin-top: 2px;
  min-height: 22px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 360ms var(--ease-emphasized),
    transform 360ms var(--ease-emphasized);
}
.au2-rea2-step.is-active .au2-rea2-btn-wrap,
.au2-rea2-step.is-done .au2-rea2-btn-wrap {
  opacity: 1;
  transform: translateY(0);
}
.au2-rea2-btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--surface);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: default;
  transition: transform 200ms var(--ease-emphasized), background 200ms ease;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent-2) 80%, var(--ink));
}
.au2-rea2-step.is-done .au2-rea2-btn {
  background: var(--green);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--green) 80%, var(--ink));
}
/* Click ripple · pseudo elemento que sale del botón cuando phase 3 */
.au2-rea2-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 75% 50%,
    color-mix(in oklab, var(--surface) 80%, transparent) 0%,
    transparent 60%);
}
.au2-rea2.phase-3 .au2-rea2-btn {
  animation: au2-rea2-btn-press 900ms var(--ease-emphasized) forwards;
}
.au2-rea2.phase-3 .au2-rea2-btn::after {
  animation: au2-rea2-ripple 700ms cubic-bezier(.2, 0, 0, 1) 480ms forwards;
}
@keyframes au2-rea2-btn-press {
  0%, 55% { transform: scale(1); background: var(--accent); }
  62%     { transform: scale(0.94); background: var(--accent-2); }
  78%     { transform: scale(1.02); background: var(--accent-2); }
  100%    { transform: scale(1); background: var(--accent); }
}
@keyframes au2-rea2-ripple {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Cursor · navega de bottom-right hacia el botón con un arco */
.au2-rea2-cursor {
  position: absolute;
  bottom: -22px;
  right: -14px;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) rotate(-10deg);
  z-index: 6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}
.au2-rea2.phase-3 .au2-rea2-cursor {
  animation: au2-rea2-cursor-path 1000ms var(--ease-emphasized) forwards;
}
@keyframes au2-rea2-cursor-path {
  0%   { opacity: 0; transform: translate(20px, 26px) rotate(-12deg); }
  15%  { opacity: 1; transform: translate(20px, 26px) rotate(-12deg); }
  55%  { opacity: 1; transform: translate(-58px, 4px) rotate(-2deg); }
  60%  { opacity: 1; transform: translate(-58px, 6px) rotate(-2deg) scale(0.88); }
  75%  { opacity: 1; transform: translate(-58px, 4px) rotate(-2deg) scale(1); }
  90%  { opacity: 1; transform: translate(-58px, 4px) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-58px, 4px) rotate(-2deg); }
}

/* Bottom banner · sube al final con bounce */
.au2-rea2-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 10px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--green) 8%, var(--surface)) 0%,
    color-mix(in oklab, var(--green) 4%, var(--surface)) 100%);
  border-top: 1px solid color-mix(in oklab, var(--green) 20%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 460ms var(--ease-emphasized),
    transform 460ms cubic-bezier(.18, 1.2, .42, 1);
}
.au2-rea2-foot.is-on {
  opacity: 1;
  transform: translateY(0);
}
.au2-rea2-foot-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-rea2-foot-text {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
}
.au2-rea2-foot-text b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.au2-rea2-foot-text span {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--green) 60%, var(--ink-3));
}

/* Reduced motion / paused */
@media (prefers-reduced-motion: reduce) {
  .au2-rea2-step,
  .au2-rea2-step-n,
  .au2-rea2-step-content,
  .au2-rea2-btn-wrap,
  .au2-rea2-btn,
  .au2-rea2-cursor,
  .au2-rea2-foot {
    animation: none !important;
    transition: none !important;
  }
}
.au2-art.is-paused .au2-rea2-cursor,
.au2-art.is-hidden .au2-rea2-cursor,
.au2-art.is-paused .au2-rea2-btn,
.au2-art.is-hidden .au2-rea2-btn,
.au2-art.is-paused .au2-rea2-pulse-dot,
.au2-art.is-hidden .au2-rea2-pulse-dot {
  animation-play-state: paused;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 5 v2 · "Tu copiloto clínico" · próximamente
   Cierre cualitativo del carousel. Vende expectativa con calma.
   ═════════════════════════════════════════════════════════════════ */
.au2-ia2 {
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
  /* asegurar que el feed no se desborde */
  max-height: 100%;
}

/* Badge "Próximamente" · top-right del mockup, FUERA del feed */
.au2-ia2-soon {
  position: absolute;
  top: -10px;
  right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px;
  background: #F0E6CC; /* brass-100 */
  border: 1px solid #D9C087; /* brass-300 */
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #574014; /* brass-800 */
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 14%, transparent);
  opacity: 0;
  transform: translateY(4px);
  z-index: 5;
}
.au2-slide.is-active .au2-ia2 .au2-ia2-soon {
  animation: au2-ia2-soon-in 360ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes au2-ia2-soon-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-ia2-soon-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: au2-ia2-soon-pulse 1600ms cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes au2-ia2-soon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Card header · ✦ copiloto · durante tu jornada */
.au2-ia2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-ia2-head-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.au2-ia2-spark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--accent);
}
.au2-ia2-head-r {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* Feed · 3 entradas verticales */
.au2-ia2-feed {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 7px 12px 6px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.au2-ia2-entry {
  display: flex; flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2.phase-1 .au2-ia2-e1,
.au2-ia2.phase-2 .au2-ia2-e1,
.au2-ia2.phase-3 .au2-ia2-e1,
.au2-ia2.phase-4 .au2-ia2-e1,
.au2-ia2.phase-5 .au2-ia2-e1,
.au2-ia2.phase-6 .au2-ia2-e1,
.au2-ia2.phase-7 .au2-ia2-e1,
.au2-ia2.phase-8 .au2-ia2-e1 { opacity: 1; transform: translateY(0); }
.au2-ia2.phase-3 .au2-ia2-e2,
.au2-ia2.phase-4 .au2-ia2-e2,
.au2-ia2.phase-5 .au2-ia2-e2,
.au2-ia2.phase-6 .au2-ia2-e2,
.au2-ia2.phase-7 .au2-ia2-e2,
.au2-ia2.phase-8 .au2-ia2-e2 { opacity: 1; transform: translateY(0); }
.au2-ia2.phase-4 .au2-ia2-e3,
.au2-ia2.phase-5 .au2-ia2-e3,
.au2-ia2.phase-6 .au2-ia2-e3,
.au2-ia2.phase-7 .au2-ia2-e3,
.au2-ia2.phase-8 .au2-ia2-e3 { opacity: 1; transform: translateY(0); }

/* Timestamp común */
.au2-ia2-time {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1;
}

/* ── Entry 1 · resumen pre-sesión ── */
.au2-ia2-e1 .au2-ia2-pill {
  display: inline-flex; align-self: flex-start;
  padding: 2px 8px;
  background: #FAF6E8;
  color: #6E5119;
  border-radius: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-top: -1px;
}
.au2-ia2-who {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 2px;
}
.au2-ia2-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.au2-ia2-who-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.au2-ia2-bullets {
  list-style: none;
  margin: 1px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.au2-ia2-bullets li {
  position: relative;
  padding-left: 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 220ms cubic-bezier(.22, 1, .36, 1),
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2-bullets li::before {
  content: '';
  position: absolute;
  left: 3px; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #B89556; /* brass-400 */
}
.au2-ia2.phase-2 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-3 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-4 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-5 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-6 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-7 .au2-ia2-bullets li:nth-child(1),
.au2-ia2.phase-8 .au2-ia2-bullets li:nth-child(1) {
  opacity: 1; transform: translateX(0);
  transition-delay: 0ms;
}
.au2-ia2.phase-2 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-3 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-4 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-5 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-6 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-7 .au2-ia2-bullets li:nth-child(2),
.au2-ia2.phase-8 .au2-ia2-bullets li:nth-child(2) {
  opacity: 1; transform: translateX(0);
  transition-delay: 90ms;
}
.au2-ia2.phase-2 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-3 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-4 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-5 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-6 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-7 .au2-ia2-bullets li:nth-child(3),
.au2-ia2.phase-8 .au2-ia2-bullets li:nth-child(3) {
  opacity: 1; transform: translateX(0);
  transition-delay: 180ms;
}

/* ── Entry 2 · recordatorio proactivo (card amber-ligera) ── */
.au2-ia2-amber {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 9px 6px 10px;
  background: #FAF6E8; /* brass-50 */
  border: 1px solid #E8DAB1; /* brass-200 */
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin-top: 1px;
}
.au2-ia2-amber-glyph {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: #B0832A; /* amber */
  margin-top: 2px;
}

/* ── Entry 3 · pregunta + respuesta IA ── */
.au2-ia2-user-row {
  display: flex; justify-content: flex-end;
  margin-top: 1px;
}
.au2-ia2-user-bubble {
  display: inline-block;
  padding: 6px 11px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  border-radius: 14px 14px 4px 14px;
  max-width: 220px;
  opacity: 0;
  transform: translateX(8px) scale(0.96);
  transition:
    opacity 320ms cubic-bezier(.22, 1, .36, 1),
    transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2.phase-4 .au2-ia2-user-bubble,
.au2-ia2.phase-5 .au2-ia2-user-bubble,
.au2-ia2.phase-6 .au2-ia2-user-bubble,
.au2-ia2.phase-7 .au2-ia2-user-bubble,
.au2-ia2.phase-8 .au2-ia2-user-bubble {
  opacity: 1; transform: translateX(0) scale(1);
}

.au2-ia2-ai-row {
  display: flex; justify-content: flex-start;
  margin-top: 4px;
}
.au2-ia2-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px 14px 14px 4px;
  opacity: 0;
  transform: translateY(4px);
  animation: au2-ia2-typing-in 200ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes au2-ia2-typing-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-ia2-typing span {
  width: 4px; height: 4px; border-radius: 50%;
  background: #B89556; /* brass-400 */
  animation: au2-ia2-typing-bounce 600ms cubic-bezier(.4, 0, .2, 1) infinite;
}
.au2-ia2-typing span:nth-child(2) { animation-delay: 150ms; }
.au2-ia2-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes au2-ia2-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-3px); }
}

.au2-ia2-ai-bubble {
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px 14px 14px 4px;
  max-width: 270px;
  display: flex; flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px);
  animation: au2-ia2-ai-in 320ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes au2-ia2-ai-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-ia2-table {
  display: flex; flex-direction: column;
  gap: 1px;
}
.au2-ia2-tr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  padding: 2px 0;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 280ms cubic-bezier(.22, 1, .36, 1),
    transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2.phase-6 .au2-ia2-tr-1,
.au2-ia2.phase-7 .au2-ia2-tr-1,
.au2-ia2.phase-8 .au2-ia2-tr-1 {
  opacity: 1; transform: translateY(0);
  transition-delay: 80ms;
}
.au2-ia2.phase-6 .au2-ia2-tr-2,
.au2-ia2.phase-7 .au2-ia2-tr-2,
.au2-ia2.phase-8 .au2-ia2-tr-2 {
  opacity: 1; transform: translateY(0);
  transition-delay: 190ms;
}
.au2-ia2.phase-6 .au2-ia2-tr-3,
.au2-ia2.phase-7 .au2-ia2-tr-3,
.au2-ia2.phase-8 .au2-ia2-tr-3 {
  opacity: 1; transform: translateY(0);
  transition-delay: 300ms;
}
.au2-ia2-td-label {
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.au2-ia2-td-val {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
.au2-ia2-diff {
  color: #6E5119; /* brass-700 */
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  margin-right: -4px;
  background: transparent;
  transition: background 200ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2.phase-6 .au2-ia2-tr-3 .au2-ia2-diff {
  animation: au2-ia2-diff-flash 600ms cubic-bezier(.22, 1, .36, 1) 380ms forwards;
}
@keyframes au2-ia2-diff-flash {
  0%   { background: transparent; }
  35%  { background: #F0E6CC; }
  100% { background: transparent; }
}

.au2-ia2-conclude {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 240ms cubic-bezier(.22, 1, .36, 1),
    transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2-conclude.is-on {
  opacity: 1; transform: translateY(0);
}
.au2-ia2-conclude b {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  color: #6E5119; /* brass-700 */
  font-variant-numeric: tabular-nums;
}

/* ── Input inferior · disabled visualmente ── */
.au2-ia2-input {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 12px 10px;
  padding: 6px 11px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 280ms cubic-bezier(.22, 1, .36, 1),
    transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia2.phase-8 .au2-ia2-input {
  opacity: 1; transform: translateY(0);
}
.au2-ia2-input-mic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.au2-ia2-input-placeholder {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  position: relative;
}
.au2-ia2-input-caret {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--ink-3);
  margin-left: 2px;
  vertical-align: -1px;
  opacity: 0;
}
.au2-ia2.phase-8 .au2-ia2-input-caret {
  animation: au2-ia2-caret-blink 600ms cubic-bezier(.4, 0, .2, 1) 0ms 2;
}
@keyframes au2-ia2-caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.au2-ia2-input-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  flex-shrink: 0;
}

/* ── Pause / reduced motion ── */
.au2-art.is-paused .au2-ia2-soon-dot,
.au2-art.is-hidden .au2-ia2-soon-dot,
.au2-art.is-paused .au2-ia2-typing span,
.au2-art.is-hidden .au2-ia2-typing span,
.au2-art.is-paused .au2-ia2-input-caret,
.au2-art.is-hidden .au2-ia2-input-caret {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .au2-ia2-soon,
  .au2-ia2-soon-dot,
  .au2-ia2-entry,
  .au2-ia2-bullets li,
  .au2-ia2-user-bubble,
  .au2-ia2-typing,
  .au2-ia2-typing span,
  .au2-ia2-ai-bubble,
  .au2-ia2-tr,
  .au2-ia2-diff,
  .au2-ia2-conclude,
  .au2-ia2-input,
  .au2-ia2-input-caret {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 5 v3 · "Tu copiloto clínico" · próximamente
   Escena en 2 actos: agenda con tip → finanzas con chat.
   ═════════════════════════════════════════════════════════════════ */

/* Badge "Próximamente" · ARRIBA de la card, no recortado */
.au2-ia3-soon {
  position: absolute;
  top: -16px;
  right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  background: #F0E6CC;
  border: 1px solid #D9C087;
  border-radius: 999px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #574014;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 14%, transparent);
  opacity: 0;
  transform: translateY(4px);
  z-index: 6;
  white-space: nowrap;
}
.au2-slide.is-active .au2-ia3-soon {
  animation: au2-ia3-soon-in 360ms cubic-bezier(.22, 1, .36, 1) 200ms forwards;
}
@keyframes au2-ia3-soon-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-ia3-soon-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: au2-ia3-soon-pulse 1600ms cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes au2-ia3-soon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Card root */
.au2-ia3 {
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Stage · ambos scenes apilados, transición por opacity+scale */
.au2-ia3-stage {
  position: relative;
  width: 100%;
  height: 280px;
}
.au2-ia3-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* C11: cross-fade reducido de 580ms → 500ms para slide IA comprimido */
  transition:
    opacity 500ms var(--ease-standard-out),
    transform 500ms var(--ease-standard-out);
  will-change: opacity, transform;
}
/* Act 1 visible mientras phase < 2 */
.au2-ia3-scene-agenda {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
.au2-ia3.phase-2 .au2-ia3-scene-agenda,
.au2-ia3.phase-3 .au2-ia3-scene-agenda,
.au2-ia3.phase-4 .au2-ia3-scene-agenda,
.au2-ia3.phase-5 .au2-ia3-scene-agenda,
.au2-ia3.phase-6 .au2-ia3-scene-agenda,
.au2-ia3.phase-7 .au2-ia3-scene-agenda,
.au2-ia3.phase-8 .au2-ia3-scene-agenda,
.au2-ia3.phase-9 .au2-ia3-scene-agenda,
.au2-ia3.phase-10 .au2-ia3-scene-agenda {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  z-index: 1;
}
/* Act 2 oculto inicialmente */
.au2-ia3-scene-finanzas {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  z-index: 1;
}
.au2-ia3.phase-2 .au2-ia3-scene-finanzas,
.au2-ia3.phase-3 .au2-ia3-scene-finanzas,
.au2-ia3.phase-4 .au2-ia3-scene-finanzas,
.au2-ia3.phase-5 .au2-ia3-scene-finanzas,
.au2-ia3.phase-6 .au2-ia3-scene-finanzas,
.au2-ia3.phase-7 .au2-ia3-scene-finanzas,
.au2-ia3.phase-8 .au2-ia3-scene-finanzas,
.au2-ia3.phase-9 .au2-ia3-scene-finanzas,
.au2-ia3.phase-10 .au2-ia3-scene-finanzas {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Header común de cada scene */
.au2-ia3-mock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-ia3-mock-title {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: lowercase;
}
.au2-ia3-mock-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ─── Act 1 · turnos del día ─── */
.au2-ia3-turnos {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  display: flex; flex-direction: column;
  gap: 1px;
}
.au2-ia3-tu {
  display: grid;
  grid-template-columns: 42px 22px 1fr auto;
  align-items: center;
  column-gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 320ms cubic-bezier(.22, 1, .36, 1);
}
.au2-ia3-tu.is-done {
  opacity: 0.5;
}
.au2-ia3-tu.is-highlighted {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
}
.au2-ia3-tu-time {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.au2-ia3-tu-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.au2-ia3-tu.is-next .au2-ia3-tu-avatar {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  color: var(--accent);
}
.au2-ia3-tu-body {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
}
.au2-ia3-tu-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au2-ia3-tu-motivo {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--ink-3);
}
.au2-ia3-tu-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
}
.au2-ia3-tu.is-next .au2-ia3-tu-tag {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
}
.au2-ia3-tu.is-done .au2-ia3-tu-tag {
  color: var(--green);
  background: color-mix(in oklab, var(--green) 12%, var(--surface));
}

/* Tip pop-up sobre Lucía */
.au2-ia3-tip {
  position: absolute;
  top: 92px;
  right: 12px;
  width: 240px;
  padding: 9px 11px 10px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow:
    0 14px 36px color-mix(in oklab, var(--accent) 22%, transparent),
    0 0 0 4px color-mix(in oklab, var(--accent) 6%, transparent);
  opacity: 0;
  transform: translate(8px, -4px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity 380ms cubic-bezier(.22, 1, .36, 1),
    transform 380ms cubic-bezier(.22, 1, .36, 1);
  z-index: 5;
}
.au2-ia3-tip.is-on {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.au2-ia3-tip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--surface);
  border-left: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.au2-ia3-tip-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.au2-ia3-tip-spark {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.au2-ia3-tip-time {
  margin-left: auto;
  color: var(--ink-3);
}
.au2-ia3-tip-block {
  display: flex; flex-direction: column;
  gap: 2px;
}
.au2-ia3-tip-block + .au2-ia3-tip-block {
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px dashed var(--line-soft);
}
.au2-ia3-tip-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-3));
}
.au2-ia3-tip-block p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.au2-ia3-tip-block-cta p {
  color: var(--ink);
  font-weight: 500;
}

/* ─── Act 2 · finanzas + chat ─── */
.au2-ia3-fin {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.au2-ia3-fin-kpi {
  display: flex; flex-direction: column;
  gap: 1px;
}
.au2-ia3-fin-kpi-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-ia3-fin-kpi-val {
  font-family: 'Geist Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.au2-ia3-fin-kpi-sym {
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-3);
}
.au2-ia3-fin-kpi-delta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--green);
  font-weight: 500;
}
.au2-ia3-fin-chart {
  width: 100%;
  height: 56px;
  display: block;
}

/* FAB · floating action button bottom-right */
.au2-ia3-fab {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 8px 20px color-mix(in oklab, var(--accent) 32%, transparent),
    0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.34, 1.56, .64, 1),
    background 220ms ease;
  z-index: 6;
}
.au2-ia3-fab.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.au2-ia3-fab.is-pulse {
  /* C11: pulse comprimido de 1400ms → 900ms para slide IA 7s */
  animation: au2-ia3-fab-pulse 900ms var(--ease-emphasized);
}
@keyframes au2-ia3-fab-pulse {
  0%, 100% { box-shadow: 0 8px 20px color-mix(in oklab, var(--accent) 32%, transparent),
                          0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent); }
  50%      { box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 38%, transparent),
                          0 0 0 10px color-mix(in oklab, var(--accent) 6%, transparent); }
}
.au2-ia3-fab.is-active {
  background: var(--accent-2);
  transform: translateY(0) scale(0.94);
}

/* Chat panel · sube desde abajo */
.au2-ia3-chat {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  box-shadow: 0 -10px 24px color-mix(in oklab, var(--ink) 8%, transparent);
  display: flex; flex-direction: column;
  max-height: 88%;
  transform: translateY(100%);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  z-index: 5;
}
.au2-ia3-chat.is-on {
  transform: translateY(0);
}
.au2-ia3-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 4%, var(--surface)) 0%,
    var(--surface) 100%);
}
.au2-ia3-chat-head-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.au2-ia3-chat-spark {
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.au2-ia3-chat-head-r {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex; align-items: center; gap: 5px;
}
.au2-ia3-chat-head-r::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.au2-ia3-chat-msgs {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 9px 12px 8px;
  min-height: 80px;
}
.au2-ia3-msg {
  display: flex;
  max-width: 88%;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  animation: au2-ia3-msg-in 320ms cubic-bezier(.22, 1, .36, 1) backwards;
}
@keyframes au2-ia3-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au2-ia3-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  padding: 5px 11px;
  border-radius: 12px 12px 4px 12px;
}
.au2-ia3-msg-ai {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--ink);
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 12px 12px 12px 4px;
  max-width: 92%;
}

/* Typing indicator */
.au2-ia3-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px !important;
}
.au2-ia3-typing span {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: au2-ia3-typing 600ms cubic-bezier(.4, 0, .2, 1) infinite;
}
.au2-ia3-typing span:nth-child(2) { animation-delay: 150ms; }
.au2-ia3-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes au2-ia3-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

/* AI bullets · cascada con opacity por .is-on */
.au2-ia3-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 5px;
}
.au2-ia3-bullets li {
  /* C11: FM controla entrada de cada li (spring stagger 220ms en variants).
     Sin transition CSS de fallback — FM monta con initial=hidden y anima a show.
     El estilo base es identidad (sin opacity/transform en CSS). */
  display: flex; align-items: flex-start; gap: 7px;
}
.au2-ia3-bullets li.is-on {
  opacity: 1;
  transform: translateY(0);
}
.au2-ia3-bullet-dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
}
.au2-ia3-bullets b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* Chat input · disabled visualmente */
.au2-ia3-chat-input {
  display: flex; align-items: center; gap: 8px;
  margin: 0 10px 10px;
  padding: 6px 10px 6px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.au2-ia3-chat-input-mic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.au2-ia3-chat-input-ph {
  flex: 1;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.au2-ia3-chat-input-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  flex-shrink: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .au2-ia3-scene,
  .au2-ia3-tip,
  .au2-ia3-fab,
  .au2-ia3-chat,
  .au2-ia3-msg,
  .au2-ia3-bullets li,
  .au2-ia3-soon,
  .au2-ia3-soon-dot,
  .au2-ia3-typing span {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.au2-art.is-paused .au2-ia3-soon-dot,
.au2-art.is-hidden .au2-ia3-soon-dot,
.au2-art.is-paused .au2-ia3-typing span,
.au2-art.is-hidden .au2-ia3-typing span,
.au2-art.is-paused .au2-ia3-fab.is-pulse,
.au2-art.is-hidden .au2-ia3-fab.is-pulse {
  animation-play-state: paused;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 5 v3 · Finanzas snippet · usa los patrones REALES de fn-*
   ═════════════════════════════════════════════════════════════════ */
.au2-ia3-fin-real {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
}

/* KPI strip · 2 cards, divider de 1px brass como el real */
.au2-ia3-fin-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.au2-ia3-fin-kpi {
  background: var(--surface);
  padding: 7px 9px 6px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.au2-ia3-fin-kpi.is-primary {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 12%, var(--surface)) 0%,
    var(--surface) 80%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.au2-ia3-fin-kpi-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-ia3-fin-kpi-val {
  display: inline-flex; align-items: baseline;
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.au2-ia3-fin-kpi-val small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-right: 1px;
}
.au2-ia3-fin-kpi-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
  margin-top: 1px;
}
.au2-ia3-fin-kpi-sub {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  color: var(--ink-3);
}
.au2-ia3-fin-kpi-delta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: -0.005em;
}
.au2-ia3-fin-kpi-delta.is-pos {
  color: var(--green);
  background: var(--green-soft);
}
.au2-ia3-fin-kpi-delta.is-neg {
  color: var(--red);
  background: var(--red-soft);
}

/* Chart card · réplica del fn-chart-card real */
.au2-ia3-fin-chartcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px 6px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.au2-ia3-fin-chartcard-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.au2-ia3-fin-chartcard-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.au2-ia3-fin-chartcard-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: -0.005em;
  color: var(--green);
  font-weight: 500;
}
.au2-ia3-fin-chartcard-svg {
  width: 100%;
  height: 110px;
  display: block;
}


/* ═════════════════════════════════════════════════════════════════
   SLIDE 3 v3 · "Tu mes en una mirada"
   Snippet REAL de finanzas · KPI strip + chart card con ejes.
   ═════════════════════════════════════════════════════════════════ */
.au2-fin3 {
  padding: 0;
  display: flex; flex-direction: column;
}

/* Header slim · período + sub */
.au2-fin3-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.au2-fin3-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.au2-fin3-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* KPI STRIP · réplica de fn-kpis con dividers brass entre cards */
.au2-fin3-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.au2-fin3-kpi {
  background: var(--surface);
  padding: 8px 10px 7px;
  display: flex; flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.au2-fin3-kpi.is-primary {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%,
    var(--surface) 80%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.au2-fin3.kpi-1 .au2-fin3-kpi-1,
.au2-fin3.kpi-2 .au2-fin3-kpi-2,
.au2-fin3.kpi-3 .au2-fin3-kpi-3 {
  opacity: 1; transform: translateY(0);
}
.au2-fin3-kpi-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.au2-fin3-kpi-val {
  display: inline-flex; align-items: baseline;
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.au2-fin3-kpi-val small {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-right: 1px;
}
.au2-fin3-kpi-val small + small,
.au2-fin3-kpi-val :last-child {
  margin-left: 1px;
  margin-right: 0;
}
.au2-fin3-kpi-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
}
.au2-fin3-kpi-sub {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.au2-fin3-kpi-delta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: -0.005em;
  font-weight: 500;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.au2-fin3-kpi-delta.is-pos {
  color: var(--green);
  background: var(--green-soft);
}
.au2-fin3.phase-5 .au2-fin3-kpi:nth-child(1) .au2-fin3-kpi-delta,
.au2-fin3.phase-6 .au2-fin3-kpi:nth-child(1) .au2-fin3-kpi-delta {
  opacity: 1; transform: translateY(0); transition-delay: 0ms;
}
.au2-fin3.phase-5 .au2-fin3-kpi:nth-child(2) .au2-fin3-kpi-delta,
.au2-fin3.phase-6 .au2-fin3-kpi:nth-child(2) .au2-fin3-kpi-delta {
  opacity: 1; transform: translateY(0); transition-delay: 100ms;
}
.au2-fin3.phase-5 .au2-fin3-kpi:nth-child(3) .au2-fin3-kpi-delta,
.au2-fin3.phase-6 .au2-fin3-kpi:nth-child(3) .au2-fin3-kpi-delta {
  opacity: 1; transform: translateY(0); transition-delay: 200ms;
}

/* CHART CARD · réplica de fn-chart-card real */
.au2-fin3-chartcard {
  background: var(--surface);
  padding: 9px 12px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.au2-fin3-chartcard-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.au2-fin3-chartcard-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.au2-fin3-chartcard-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: -0.005em;
  color: var(--green);
  font-weight: 500;
}
.au2-fin3-chart-wrap {
  position: relative;
}
.au2-fin3-chart {
  width: 100%;
  height: 110px;
  display: block;
  overflow: visible;
}

/* Línea + área · gated por phase */
.au2-fin3-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 900ms cubic-bezier(.22, 1, .36, 1);
}
.au2-fin3.phase-2 .au2-fin3-line,
.au2-fin3.phase-3 .au2-fin3-line,
.au2-fin3.phase-4 .au2-fin3-line,
.au2-fin3.phase-5 .au2-fin3-line,
.au2-fin3.phase-6 .au2-fin3-line {
  stroke-dashoffset: 0;
}
.au2-fin3-area {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(.22, 1, .36, 1) 300ms;
}
.au2-fin3.phase-2 .au2-fin3-area,
.au2-fin3.phase-3 .au2-fin3-area,
.au2-fin3.phase-4 .au2-fin3-area,
.au2-fin3.phase-5 .au2-fin3-area,
.au2-fin3.phase-6 .au2-fin3-area { opacity: 1; }

/* Dots regulares · aparecen junto con la línea (escalonados) */
.au2-fin3-dot-small {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 220ms cubic-bezier(.22, 1, .36, 1),
    transform 320ms cubic-bezier(.18, .89, .32, 1.18);
}
.au2-fin3.phase-2 .au2-fin3-dot-small,
.au2-fin3.phase-3 .au2-fin3-dot-small,
.au2-fin3.phase-4 .au2-fin3-dot-small,
.au2-fin3.phase-5 .au2-fin3-dot-small,
.au2-fin3.phase-6 .au2-fin3-dot-small {
  opacity: 1; transform: scale(1);
  transition-delay: 700ms;
}

/* HOY dot · pop + halo */
.au2-fin3-dot-hoy,
.au2-fin3-dot-hoy-inner {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 320ms cubic-bezier(.22, 1, .36, 1),
    transform 460ms cubic-bezier(.18, .89, .32, 1.28);
}
.au2-fin3.phase-3 .au2-fin3-dot-hoy,
.au2-fin3.phase-4 .au2-fin3-dot-hoy,
.au2-fin3.phase-5 .au2-fin3-dot-hoy,
.au2-fin3.phase-6 .au2-fin3-dot-hoy,
.au2-fin3.phase-3 .au2-fin3-dot-hoy-inner,
.au2-fin3.phase-4 .au2-fin3-dot-hoy-inner,
.au2-fin3.phase-5 .au2-fin3-dot-hoy-inner,
.au2-fin3.phase-6 .au2-fin3-dot-hoy-inner {
  opacity: 1; transform: scale(1);
}
.au2-fin3-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: au2-fin3-halo 1900ms var(--ease-emphasized) infinite;
}
@keyframes au2-fin3-halo {
  0%   { transform: scale(1);   opacity: 0.7; stroke-width: 2; }
  100% { transform: scale(2.4); opacity: 0;   stroke-width: 0.4; }
}

/* HOY vertical line · fade in con la entrada del dot */
.au2-fin3-hoy-line {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
}
.au2-fin3.phase-3 .au2-fin3-hoy-line,
.au2-fin3.phase-4 .au2-fin3-hoy-line,
.au2-fin3.phase-5 .au2-fin3-hoy-line,
.au2-fin3.phase-6 .au2-fin3-hoy-line {
  opacity: 0.45;
}
.au2-fin3-hoy-label {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
}
.au2-fin3.phase-3 .au2-fin3-hoy-label,
.au2-fin3.phase-4 .au2-fin3-hoy-label,
.au2-fin3.phase-5 .au2-fin3-hoy-label,
.au2-fin3.phase-6 .au2-fin3-hoy-label {
  opacity: 1;
}

/* Tooltip · POR ENCIMA de la card · sibling del article (no clippeado) */
.au2-fin3-tip {
  position: absolute;
  top: -36px;
  /* right: set inline */
  display: flex; flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 360ms cubic-bezier(.22, 1, .36, 1);
  z-index: 5;
}
.au2-fin3-tip.is-on {
  opacity: 1;
  transform: translateY(0);
}
.au2-fin3-tip-card {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 10px 6px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 6px;
  box-shadow:
    0 10px 24px color-mix(in oklab, var(--ink) 30%, transparent),
    0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
  white-space: nowrap;
}
.au2-fin3-tip-card b {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--surface);
}
.au2-fin3-tip-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--surface) 65%, transparent);
}
/* Arrow · pequeño triángulo en bottom-right de la card apuntando al HOY */
.au2-fin3-tip-arrow {
  position: relative;
  width: 8px; height: 5px;
  margin-right: 10px;
  margin-top: -1px;
  background: var(--ink);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 2px 4px color-mix(in oklab, var(--ink) 20%, transparent));
}

/* Badge celebration · bounce desde abajo de la card */
.au2-fin3-badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translate(-50%, 12px) scale(0.92);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px;
  background: var(--accent);
  color: var(--surface);
  border-radius: 999px;
  box-shadow:
    0 12px 28px color-mix(in oklab, var(--accent) 30%, transparent),
    0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent);
  font-size: 11.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
.au2-fin3-badge.is-on {
  opacity: 1;
  animation: au2-fin3-badge-bounce 620ms cubic-bezier(.18, 1.2, .42, 1) forwards;
}
@keyframes au2-fin3-badge-bounce {
  0%   { transform: translate(-50%, 14px) scale(0.92); opacity: 0; }
  55%  { transform: translate(-50%, -3px) scale(1.06); opacity: 1; }
  82%  { transform: translate(-50%, 1px)  scale(0.98); }
  100% { transform: translate(-50%, 0)    scale(1); }
}
.au2-fin3-badge b { color: var(--surface); font-weight: 600; }
.au2-fin3-badge-glyph {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 22%, var(--accent));
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Pause / reduced motion */
.au2-art.is-paused .au2-fin3-halo,
.au2-art.is-hidden .au2-fin3-halo,
.au2-art.is-paused .au2-fin3-badge.is-on,
.au2-art.is-hidden .au2-fin3-badge.is-on {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .au2-fin3-kpi,
  .au2-fin3-kpi-delta,
  .au2-fin3-line,
  .au2-fin3-area,
  .au2-fin3-dot-small,
  .au2-fin3-dot-hoy,
  .au2-fin3-dot-hoy-inner,
  .au2-fin3-hoy-line,
  .au2-fin3-hoy-label,
  .au2-fin3-tip,
  .au2-fin3-tip-card,
  .au2-fin3-tip-arrow,
  .au2-fin3-badge {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ─── CalPedidoModal (T12) ─── */
.cpm-backdrop {
  position: fixed; inset: 0;
  background: rgba(27, 24, 18, 0.45);
  z-index: 60;
  animation: cpm-fade 140ms var(--ease-out);
}
.cpm-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(27, 24, 18, 0.05),
    0 12px 32px rgba(27, 24, 18, 0.15),
    0 32px 64px rgba(27, 24, 18, 0.10);
  z-index: 61;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cpm-pop 180ms var(--ease-out);
}
@keyframes cpm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpm-pop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cpm-close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-3); cursor: pointer; z-index: 1;
  transition: background 120ms var(--ease-in);
}
.cpm-close:hover { background: var(--surface-2); color: var(--ink); }
.cpm-step {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px 22px;
  overflow-y: auto;
}
.cpm-step-head {
  display: flex; align-items: center; justify-content: space-between;
}
.cpm-back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 6px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  font-size: 11.5px; color: var(--ink-3); cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cpm-back:hover { background: var(--surface-2); color: var(--ink); }
.cpm-back svg { transform: rotate(180deg); }
.cpm-summary { display: flex; align-items: center; gap: 12px; }
.cpm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; flex-shrink: 0;
}
.cpm-summary-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.cpm-summary-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
}
.cpm-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  font-weight: 500; letter-spacing: .03em;
  text-transform: lowercase;
}
.cpm-pill-mute { background: var(--surface-2); color: var(--ink-3); }
.cpm-summary-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
}
.cpm-slot-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.cpm-slot-card svg { color: var(--accent); flex-shrink: 0; }
.cpm-slot-info {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.cpm-slot-info b { font-size: 13px; font-weight: 600; color: var(--ink); }
.cpm-slot-info span { font-size: 11px; color: var(--ink-3); }
.cpm-slot-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--green); font-weight: 500;
  padding: 3px 7px; border-radius: 10px;
  background: var(--green-soft);
}
.cpm-motivo {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.cpm-motivo p {
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
}
.cpm-field {
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.cpm-field > span:first-child {
  font-size: 11px; color: var(--ink-2); font-weight: 500;
}
.cpm-field > span:first-child em {
  font-style: normal; color: var(--ink-4); font-weight: 400;
}
.cpm-field-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.cpm-field-hint { font-size: 10.5px; color: var(--ink-4); font-style: italic; }
.cpm-field input,
.cpm-field select,
.cpm-field textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 13px;
  color: var(--ink); outline: none;
  transition: border-color 120ms var(--ease-in);
}
.cpm-field textarea { line-height: 1.55; resize: vertical; min-height: 100px; }
.cpm-field input:focus,
.cpm-field select:focus,
.cpm-field textarea:focus { border-color: var(--accent); }
.cpm-field-tel {
  font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .005em;
}
.cpm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cpm-rechazar-hint {
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
  padding: 10px 12px;
  background: var(--red-soft);
  border-radius: var(--r-sm);
}
.cpm-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px; padding-top: 14px;
}
.cpm-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cpm-btn-ghost {
  background: transparent; color: var(--ink-2);
  border-color: var(--line);
}
.cpm-btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-4); color: var(--ink); }
.cpm-btn-primary { background: var(--ink); color: var(--surface); }
.cpm-btn-primary:hover { background: var(--ink-2); }
.cpm-btn-danger { background: var(--red); color: var(--surface); }
.cpm-btn-danger:hover { filter: brightness(1.06); }
.cpm-choose-actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.cpm-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 500;
  transition: background 120ms var(--ease-in), border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.cpm-action:hover { background: var(--surface-2); border-color: var(--ink-4); }
.cpm-action-confirm { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cpm-action-confirm:hover { background: var(--ink-2); }
.cpm-action-confirm svg { color: var(--surface); }
.cpm-action-reject { color: var(--red); }
.cpm-action-reject:hover { background: var(--red-soft); border-color: var(--red); }
.cpm-action-resched { color: var(--accent-2); }
.cpm-action-resched:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ─── VistaBandeja (T14) ─── */
.cal-bandeja { margin-top: 22px; }
.cal-bandeja-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.cal-bandeja-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: transparent; border: none;
  color: var(--ink-3); cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: -.005em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.cal-bandeja-tab:hover { color: var(--ink); }
.cal-bandeja-tab.is-active {
  color: var(--ink); border-bottom-color: var(--ink);
}
.cal-bandeja-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px;
  padding: 0 5px; border-radius: 9px;
  background: var(--surface-2); color: var(--ink-3);
  font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 600;
}
.cal-bandeja-tab.is-active .cal-bandeja-tab-count {
  background: var(--ink); color: var(--surface);
}
.cal-bandeja-tab-count.is-primary {
  background: var(--amber); color: var(--surface);
}

.cal-bandeja-list {
  display: flex; flex-direction: column; gap: 10px;
}
.cal-bandeja-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 120ms var(--ease-in), box-shadow 120ms var(--ease-in);
}
.cal-bandeja-card:hover {
  border-color: var(--ink-4);
  box-shadow: 0 4px 12px rgba(27,24,18,0.04);
}
.cal-bandeja-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.cal-bandeja-card-id {
  display: flex; align-items: flex-start; gap: 11px;
  flex: 1; min-width: 0;
}
.cal-bandeja-card-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; flex-shrink: 0;
}
.cal-bandeja-card-id-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.cal-bandeja-card-name-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cal-bandeja-card-name-row b {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
}
.cal-bandeja-card-canal {
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  font-weight: 500; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 8px;
  background: var(--amber-soft); color: var(--amber);
}
.cal-bandeja-card-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
}
.cal-bandeja-card-sep { color: var(--ink-4); }
.cal-bandeja-card-mute { color: var(--ink-4); }
.cal-bandeja-card-estado {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  padding: 4px 8px; border-radius: 10px;
  background: var(--surface-2);
}
.cal-bandeja-card-estado-dot {
  width: 6px; height: 6px; border-radius: 50%;
}

.cal-bandeja-card-slot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.cal-bandeja-card-slot-info,
.cal-bandeja-card-slot-warn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
}
.cal-bandeja-card-slot-warn { color: var(--amber); }
.cal-bandeja-card-slot-info b { font-weight: 600; color: var(--ink); }
.cal-bandeja-card-servicio {
  font-size: 11.5px; color: var(--ink-3);
  flex-shrink: 0;
}

.cal-bandeja-card-motivo {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
}

.cal-bandeja-card-actions {
  display: flex; align-items: center; gap: 6px;
}
.cal-bandeja-card-actions-grow { flex: 1; }

.cal-bandeja-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.cal-bandeja-empty-glyph {
  color: var(--ink-4);
  margin-bottom: 4px;
}
.cal-bandeja-empty h3 {
  margin: 0;
  font-size: 16px; font-weight: 500; color: var(--ink);
  letter-spacing: -.01em;
}
.cal-bandeja-empty p {
  margin: 0; max-width: 360px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* Tab "Bandeja" especial en CalHeader */
.cal-tab-bandeja {
  display: inline-flex; align-items: center; gap: 5px;
}
.cal-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 14px;
  padding: 0 4px; border-radius: 9px;
  background: var(--amber); color: var(--surface);
  font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 600;
}

/* ─── CalRichTooltip (T18) ─── */
.cal-tip {
  position: fixed;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow:
    0 1px 2px rgba(27, 24, 18, 0.04),
    0 10px 28px rgba(27, 24, 18, 0.14);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 55;
  pointer-events: none;
  transition: opacity 100ms var(--ease-out);
}
.cal-tip-head {
  display: flex; align-items: center; gap: 10px;
}
.cal-tip-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; flex-shrink: 0;
}
.cal-tip-id { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cal-tip-id b {
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-tip-id span { font-size: 10.5px; color: var(--ink-3); }
.cal-tip-estado {
  font-family: 'Geist Mono', monospace; font-size: 9px;
  font-weight: 500; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 8px;
  flex-shrink: 0;
}
.cal-tip-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-2);
}
.cal-tip-slot svg { color: var(--accent); flex-shrink: 0; }
.cal-tip-slot b { color: var(--ink); font-weight: 600; }
.cal-tip-row {
  display: flex; flex-direction: column; gap: 4px;
}
.cal-tip-row p {
  margin: 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2);
}
.cal-tip-row.cal-tip-warn {
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--red-soft);
}
.cal-tip-warn .fi-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--red); font-weight: 600;
}
.cal-tip-warn p { color: var(--ink); }
.cal-tip-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cal-tip-tag {
  font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: 9px;
  background: var(--surface-2); color: var(--ink-2);
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · Design language v3 tokens (additive over brass-aged v2)
   See: docs/specs/2026-05-21-design-language-recommendation.md §3.2-3.3.
   This block is APPENDED, never replacing existing :root values, so the
   brass-aged identity of /hoy + onboarding + login surfaces is untouched
   until consuming components opt in via the new --accent-ink / --fpc-*
   tokens. The defensive close brace above this comment terminates any
   pre-existing open rule (cascade-recovers if already closed upstream).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Accent · Warm (brass identity layer · used for ornament/highlight) ─── */
  --accent-warm:         #8A6722;
  --accent-warm-2:       #6E5119;
  --accent-warm-soft:    #F0E6CC;
  --accent-warm-soft-2:  #E8DAB1;
  --accent-warm-glow:    rgba(138, 103, 34, 0.18);

  /* ─── Accent · Ink (NEW · clinical functional layer · primary CTAs in Clínico mood) ─── */
  --accent-ink:          #2A4365;
  --accent-ink-2:        #1F3148;
  --accent-ink-soft:     #DFE5EF;
  --accent-ink-soft-2:   #C9D2E0;
  --accent-ink-glow:     rgba(42, 67, 101, 0.22);

  /* ─── Spacing scale (4 px grid) ─── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Radii additions ─── */
  --r-xs:   3px;
  --r-2xl:  20px;
  --r-3xl:  24px;
  --r-pill: 9999px;

  /* ─── Shadow additions ─── */
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 18px 40px rgba(20, 17, 11, 0.08),
    0 3px 10px rgba(138, 103, 34, 0.06);
  --shadow-focus-warm: 0 0 0 3px var(--accent-warm-glow);
  --shadow-focus-ink:  0 0 0 3px var(--accent-ink-glow);

  /* ─── Type families ─── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Geist', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* ─── Type scale (px) ─── */
  --fs-xs:      11px;
  --fs-sm:      12.5px;
  --fs-body:    14px;
  --fs-md:      15px;
  --fs-lg:      18px;
  --fs-xl:      22px;
  --fs-2xl:     28px;
  --fs-3xl:     34px;
  --fs-4xl:     44px;
  --fs-display: 56px;

  /* ─── Letter-spacing scale ─── */
  --track-tight-2: -0.028em;
  --track-tight-1: -0.018em;
  --track-tight-0: -0.01em;
  --track-normal:  0;
  --track-loose-1: 0.04em;
  --track-loose-2: 0.10em;
  --track-loose-3: 0.14em;

  /* ─── PublicCard mood-overlay scaffold (consumed in F4 by .fpc-* classes) ─── */
  --fpc-accent:           var(--accent-warm);
  --fpc-accent-soft:      var(--accent-warm-soft);
  --fpc-accent-blend:     var(--accent-warm);
  --fpc-bg:               var(--surface);
  --fpc-bg-tint-amount:   0.06;
  --fpc-bg-tint-style:    linear;
  --fpc-name-family:      var(--font-sans);
  --fpc-name-weight:      600;
  --fpc-name-tracking:    -0.018em;
  --fpc-name-size-full:   34px;
  --fpc-name-size-prev:   22px;
  --fpc-bio-style:        normal;
  --fpc-radius:           20px;
  --fpc-decoration:       none;
  --fpc-decoration-color: var(--fpc-accent);
  --fpc-hero-py-full:     36px;
  --fpc-hero-py-prev:     24px;

  /* ─── Card-specific motion semantics (additive to motion language v2) ─── */
  --fpc-stagger:            80ms;
  --fpc-stagger-musical-1:  0ms;
  --fpc-stagger-musical-2:  90ms;
  --fpc-stagger-musical-3:  200ms;
  --fpc-stagger-musical-4:  340ms;
  --fpc-stagger-musical-5:  480ms;
  --fpc-stagger-musical-6:  620ms;
  --fpc-stagger-musical-7:  760ms;
  --fpc-stagger-musical-8:  860ms;

  --fpc-hero-blur-from:  6px;
  --fpc-hero-blur-to:    0px;
  --fpc-hero-y-from:     12px;
  --fpc-hero-y-to:       0px;
}

[data-theme="dark"] {
  /* ─── Atelier dark-mode equivalents ─── */
  --accent-warm:        #C29553;
  --accent-warm-2:      #DDB070;
  --accent-warm-soft:   rgba(194, 149, 83, 0.14);
  --accent-warm-soft-2: rgba(194, 149, 83, 0.24);
  --accent-warm-glow:   rgba(194, 149, 83, 0.30);

  --accent-ink:         #6E89AE;
  --accent-ink-2:       #88A0C3;
  --accent-ink-soft:    rgba(110, 137, 174, 0.16);
  --accent-ink-soft-2:  rgba(110, 137, 174, 0.28);
  --accent-ink-glow:    rgba(110, 137, 174, 0.32);

  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 3px 10px rgba(194, 149, 83, 0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · Decoration primitives
   Consumed by <EditorialRule />, <BrassCornerMark />, <DateBadge /> in
   components/public-card/decoration.tsx. Mood-specific tint via the
   --fpc-decoration-color override on the card root in F5.
   ════════════════════════════════════════════════════════════════════════ */

.fpc-rule {
  display: block;
  height: 1px;
  width: 24px;
  background: var(--fpc-decoration-color, var(--ink-3));
  margin-bottom: 10px;
  opacity: 0.6;
}

.fpc-corner-mark {
  display: inline-block;
  color: var(--fpc-decoration-color, var(--accent-warm));
  opacity: 0.7;
}

.fpc-date-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-loose-2);
  color: var(--ink-3);
  padding: 3px 9px;
  border: 1px solid var(--fpc-decoration-color, var(--accent-warm));
  border-radius: var(--r-pill);
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · LogoUpload dropzone
   Consumed by <LogoUpload> in components/public-card/logo-upload.tsx.
   Two named motion beats: fpc-logo-drop-enter (overshoot stamp on success)
   and fpc-logo-drop-error (3-cycle shake on validation/upload failure).
   ════════════════════════════════════════════════════════════════════════ */

.fpc-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 196px;
  padding: 24px;
  border: 1.5px dashed var(--ink-4);
  border-radius: var(--r-xl);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--dur-quick) var(--ease-standard-out),
    background var(--dur-quick) var(--ease-standard-out);
  outline: none;
}
.fpc-dropzone:hover { border-color: var(--accent-warm); }
.fpc-dropzone:focus-visible { box-shadow: var(--shadow-focus-warm); }

.fpc-dropzone.is-drag-over {
  border-color: var(--accent-warm);
  background: var(--accent-warm-soft);
}

.fpc-dropzone.is-error {
  border-color: var(--red);
  animation: fpc-logo-drop-error var(--dur-snappy) var(--ease-anticipate);
}

.fpc-dropzone-preview {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--r-md);
  opacity: 0;
  transform: scale(0.92);
  animation: fpc-logo-drop-enter var(--dur-moderate) var(--ease-overshoot) forwards;
}
/* M62 · headshot del profesional: preview redondo recortado (vs logo cuadrado). */
.fpc-dropzone-preview--round {
  object-fit: cover;
  border-radius: 50%;
}

.fpc-dropzone-headline {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-md);
}

.fpc-dropzone-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 2px;
}

.fpc-dropzone-error {
  color: var(--red);
  font-size: var(--fs-sm);
  text-align: center;
}

.fpc-dropzone-remove {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
.fpc-dropzone-remove:hover {
  color: var(--ink);
  background: var(--surface-2);
}

@keyframes fpc-logo-drop-enter {
  to {
    opacity: 1;
    transform: scale(1.00);
  }
}

@keyframes fpc-logo-drop-error {
  0%   { transform: translateX(0);    }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX( 6px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX( 3px); }
  100% { transform: translateX(0);    }
}

@media (prefers-reduced-motion: reduce) {
  .fpc-dropzone-preview,
  .fpc-dropzone.is-error {
    animation: none !important;
  }
  .fpc-dropzone-preview {
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · PublicCard · baseline (Layer A · editorial-default)
   F5 layers mood-specific overrides on top via [data-card-mood="..."].
   ════════════════════════════════════════════════════════════════════════ */

.fpc-card {
  position: relative;
  background: var(--fpc-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--fpc-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  color: var(--ink);
}
.fpc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fpc-accent) calc(var(--fpc-bg-tint-amount) * 100%), transparent) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.fpc-variant-full    { max-width: 560px; width: 100%; }
.fpc-variant-preview { max-width: 360px; width: 100%; }
.fpc-variant-editing { max-width: 360px; width: 100%; }

.fpc-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: var(--fpc-hero-py-full) 28px calc(var(--fpc-hero-py-full) - 12px);
  border-bottom: 1px solid color-mix(in srgb, var(--fpc-accent) 8%, transparent);
}
.fpc-variant-preview .fpc-hero,
.fpc-variant-editing .fpc-hero {
  padding: var(--fpc-hero-py-prev) 20px calc(var(--fpc-hero-py-prev) - 8px);
}

.fpc-logo {
  object-fit: contain;
  border-radius: var(--r-md);
  background: transparent;
}

.fpc-hero-text {
  min-width: 0;
  padding-top: 4px;
}

.fpc-name {
  margin: 0;
  font-family: var(--fpc-name-family, var(--font-sans));
  font-weight: var(--fpc-name-weight, 600);
  letter-spacing: var(--fpc-name-tracking, var(--track-tight-1));
  font-size: var(--fpc-name-size-full);
  line-height: 1.06;
  color: var(--ink);
  word-break: break-word;
}
.fpc-variant-preview .fpc-name,
.fpc-variant-editing .fpc-name {
  font-size: var(--fpc-name-size-prev);
  line-height: 1.18;
}

.fpc-meta {
  margin: 6px 0 0;
  font-size: var(--fs-body);
  color: var(--ink-3);
  letter-spacing: var(--track-tight-0);
  line-height: 1.3;
}

.fpc-bio {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 16px 28px 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
}
.fpc-variant-preview .fpc-bio,
.fpc-variant-editing .fpc-bio { padding: 14px 20px 0; font-size: 13px; }
.fpc-bio.is-placeholder { color: var(--ink-4); font-style: italic; }

.fpc-contact {
  position: relative;
  z-index: 1;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
  color: var(--ink-2);
}
.fpc-variant-preview .fpc-contact,
.fpc-variant-editing .fpc-contact { padding: 14px 20px; font-size: 13px; }

.fpc-services {
  position: relative;
  z-index: 1;
  padding: 18px 28px 24px;
}
.fpc-variant-preview .fpc-services,
.fpc-variant-editing .fpc-services { padding: 14px 20px 18px; }

.fpc-services-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-loose-2);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 12px;
}

.fpc-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fpc-services li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: baseline;
  font-size: var(--fs-md);
  color: var(--ink);
}
.fpc-variant-preview .fpc-services li,
.fpc-variant-editing .fpc-services li { font-size: 13px; }
.fpc-srv-name  { font-weight: 500; }
.fpc-srv-dur   { color: var(--ink-3); }
.fpc-srv-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  grid-column: 3;
  justify-self: end;
}
.fpc-services-more {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.fpc-footer {
  position: relative;
  z-index: 1;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--line-soft);
}
.fpc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--fpc-accent);
  color: #FBF9F4;
  border: 0;
  border-radius: var(--r-lg);
  padding: 14px 20px;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition:
    transform var(--dur-quick) var(--ease-standard-out),
    box-shadow var(--dur-quick) var(--ease-standard-out);
}
.fpc-cta:hover {
  transform: translateY(-0.5px);
  box-shadow: var(--shadow-2);
}
.fpc-cta:active {
  transform: translateY(0.5px);
  transition-duration: var(--dur-instant);
}

.fpc-link-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  word-break: break-all;
}

.fpc-corner-slot,
.fpc-date-slot {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
}

/* ─── Entry choreography (mood-agnostic baseline, musical stagger) ─── */

.fpc-card {
  animation: fpc-enter-hero var(--dur-cinematic) var(--ease-emphasized-out) both;
}
.fpc-hero {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-2);
}
.fpc-bio {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-4);
}
.fpc-contact {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-5);
}
.fpc-services {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-6);
}
.fpc-footer .fpc-cta {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-7);
}
.fpc-link-footer {
  animation: fpc-enter-musical var(--dur-moderate) var(--ease-emphasized-out) both;
  animation-delay: var(--fpc-stagger-musical-8);
}

@keyframes fpc-enter-hero {
  from {
    opacity: 0;
    transform: translateY(var(--fpc-hero-y-from));
    filter: blur(var(--fpc-hero-blur-from));
  }
  to {
    opacity: 1;
    transform: translateY(var(--fpc-hero-y-to));
    filter: blur(var(--fpc-hero-blur-to));
  }
}
@keyframes fpc-enter-musical {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
  .fpc-card,
  .fpc-hero,
  .fpc-bio,
  .fpc-contact,
  .fpc-services,
  .fpc-footer .fpc-cta,
  .fpc-link-footer {
    animation-duration: var(--dur-quick) !important;
    animation-delay: 0ms !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ─── Editorial mood (default) — overrides applied via [data-card-mood] ─── */
/*  The other three moods (calido, clinico, boutique) ship in F5.            */

[data-card-mood="editorial"] {
  --fpc-bg-tint-amount: 0.06;
  --fpc-bg-tint-style:  radial;
  --fpc-name-family:    var(--font-display);
  --fpc-name-weight:    400;
  --fpc-name-tracking:  -0.018em;
  --fpc-bio-style:      quote-with-rule;
  --fpc-radius:         20px;
  --fpc-decoration:     sub-line;
  --fpc-decoration-color: var(--accent-warm);
  --fpc-hero-py-full:   40px;
}
[data-card-mood="editorial"].fpc-card::before {
  background: radial-gradient(at 0% 0%,
    color-mix(in srgb, var(--fpc-accent) calc(var(--fpc-bg-tint-amount) * 100%), transparent) 0%,
    transparent 60%);
  inset: 0 0 50% 0;
}
[data-card-mood="editorial"] .fpc-bio {
  border-left: 1px solid var(--fpc-accent);
  padding-left: 18px;
  font-style: italic;
  font-family: var(--font-display);
  margin: 16px 28px 0;
  padding-top: 0;
}
[data-card-mood="editorial"].fpc-variant-preview .fpc-bio,
[data-card-mood="editorial"].fpc-variant-editing .fpc-bio {
  margin: 14px 20px 0;
}

/* ─── Cálido mood — "Cercano y humano" ─── */

[data-card-mood="calido"] {
  --fpc-bg-tint-amount: 0.10;
  --fpc-bg-tint-style:  linear;
  --fpc-name-family:    var(--font-display);
  --fpc-name-weight:    500;
  --fpc-name-tracking:  -0.014em;
  --fpc-bio-style:      italic-serif;
  --fpc-radius:         16px;
  --fpc-decoration:     corner-mark;
  --fpc-decoration-color: var(--accent-warm);
  --fpc-hero-py-full:   36px;
}
[data-card-mood="calido"] .fpc-bio {
  font-family: var(--font-display);
  font-style: italic;
  margin: 16px 28px 0;
  padding-top: 0;
}
[data-card-mood="calido"].fpc-variant-preview .fpc-bio,
[data-card-mood="calido"].fpc-variant-editing .fpc-bio {
  margin: 14px 20px 0;
}

/* ─── Clínico mood — "Preciso y profesional" ─── */

[data-card-mood="clinico"] {
  --fpc-bg-tint-amount: 0;
  --fpc-bg-tint-style:  flat;
  --fpc-name-family:    var(--font-sans);
  --fpc-name-weight:    700;
  --fpc-name-tracking:  -0.022em;
  --fpc-bio-style:      plain;
  --fpc-radius:         10px;
  --fpc-decoration:     sub-line;
  --fpc-decoration-color: var(--accent-ink);
  --fpc-hero-py-full:   28px;
}
[data-card-mood="clinico"].fpc-card::before { display: none; }
[data-card-mood="clinico"] .fpc-cta {
  background: var(--accent-ink);
  color: #FBF9F4;
}
[data-card-mood="clinico"] .fpc-services-label,
[data-card-mood="clinico"] .fpc-link-footer {
  letter-spacing: var(--track-loose-3);
  text-transform: uppercase;
}
/* Uniform stagger override — overrides the musical baseline. */
[data-card-mood="clinico"] .fpc-hero            { animation-delay:  60ms !important; animation-duration: 200ms !important; }
[data-card-mood="clinico"] .fpc-bio             { animation-delay: 120ms !important; animation-duration: 200ms !important; }
[data-card-mood="clinico"] .fpc-contact         { animation-delay: 180ms !important; animation-duration: 200ms !important; }
[data-card-mood="clinico"] .fpc-services        { animation-delay: 240ms !important; animation-duration: 200ms !important; }
[data-card-mood="clinico"] .fpc-footer .fpc-cta { animation-delay: 300ms !important; animation-duration: 200ms !important; }
[data-card-mood="clinico"] .fpc-link-footer     { animation-delay: 360ms !important; animation-duration: 200ms !important; }

/* ─── Boutique mood — "Personal y curado" ─── */

[data-card-mood="boutique"] {
  --fpc-bg-tint-amount: 0;
  --fpc-bg-tint-style:  paper-noise;
  --fpc-name-family:    var(--font-display);
  --fpc-name-weight:    600;
  --fpc-name-tracking:  -0.022em;
  --fpc-bio-style:      italic-serif;
  --fpc-radius:         24px;
  --fpc-decoration:     date-badge;
  --fpc-decoration-color: var(--accent-warm-2);
  --fpc-hero-py-full:   36px;
}
[data-card-mood="boutique"].fpc-card::before {
  /* Suppress the gradient overlay; the noise texture replaces it. */
  display: none;
}
[data-card-mood="boutique"].fpc-card {
  /* Subtle 1.5% paper-noise overlay layered above the surface. ~700 bytes
     inlined SVG (single seed) so no extra HTTP. Disabled under
     prefers-reduced-transparency. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.015 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-card-mood="boutique"] .fpc-bio {
  font-family: var(--font-display);
  font-style: italic;
  margin: 16px 28px 0;
  padding-top: 0;
}
[data-card-mood="boutique"].fpc-variant-preview .fpc-bio,
[data-card-mood="boutique"].fpc-variant-editing .fpc-bio {
  margin: 14px 20px 0;
}
[data-card-mood="boutique"] .fpc-link-footer {
  animation-delay: 920ms !important;
}

@media (prefers-reduced-transparency: reduce) {
  [data-card-mood="boutique"].fpc-card { background-image: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · MoodPicker (4-card grid)
   Consumed by <MoodPicker> at Onboarding Step 4 + dev preview.
   ════════════════════════════════════════════════════════════════════════ */

.fpc-mood-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fpc-mood-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-quick) var(--ease-standard-out),
    box-shadow var(--dur-quick) var(--ease-standard-out),
    border-color var(--dur-quick) var(--ease-standard-out);
  font: inherit;
  color: inherit;
}
.fpc-mood-card:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.fpc-mood-card:focus-visible {
  box-shadow: var(--shadow-focus-warm);
}
.fpc-mood-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fpc-mood-card.is-active {
  border-color: var(--accent-warm);
  box-shadow: var(--shadow-focus-warm);
  animation: fpc-mood-card-select var(--dur-deliberate) var(--spring-snap);
}

.fpc-mood-mini {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-warm) 18%, transparent),
    transparent
  );
  border: 1px solid var(--line-soft);
}
.fpc-mood-mini[data-card-mood="clinico"] {
  background: var(--surface-2);
  border-color: var(--accent-ink);
}
.fpc-mood-mini[data-card-mood="editorial"] {
  background: radial-gradient(
    at 0% 0%,
    color-mix(in srgb, var(--accent-warm) 12%, transparent),
    transparent 60%
  );
}
.fpc-mood-mini[data-card-mood="boutique"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.fpc-mood-label {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-md);
}
.fpc-mood-tag {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

@keyframes fpc-mood-card-select {
  0%   { transform: scale(1); }
  17%  { transform: scale(0.97); }
  58%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fpc-mood-card.is-active { animation: none; }
  .fpc-mood-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · Onboarding Step 4 · "Identidad visual" section layout
   ════════════════════════════════════════════════════════════════════════ */

.onb-identity-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-identity-section + .onb-identity-section {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.onb-identity-h {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--track-tight-0);
}
.onb-identity-hint {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* ═════════════ LANDING · marketing público (.fl-*) ═════════════
 * Esqueleto Fase A — los agentes de Fase B agregan los estilos de cada
 * sección debajo de este bloque. Solo tokens existentes; ningún selector
 * de elemento global (el archivo lo comparte el prototipo con visual
 * regression a 0.001). */

/* fl-base · color-scheme scopeado al landing (inputs/scrollbars nativos
   coherentes con el tema) — NO global, para no mover los snapshots del
   prototipo (visual regression a 0.001). */
.fl-root {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
  /* Tokens display del rediseño "Un día con Folio" (E1) — tipografía
     editorial gigante + ritmo vertical compartido entre secciones. */
  --fl-display-xl: clamp(2.9rem, 7.2vw, 6.75rem);
  --fl-display-lg: clamp(2.1rem, 4.2vw, 3.5rem);
  --fl-mono-giant: clamp(2.75rem, 7vw, 5.5rem);
  --fl-section-gap: clamp(96px, 14vh, 160px);
}

[data-theme="dark"] .fl-root {
  color-scheme: dark;
}

.fl-main {
  display: block;
}

/* fl-section · contenedor vertical estándar de cada bloque del landing */
.fl-section {
  max-width: 1120px;
  margin: 0 auto;
  padding-block: var(--fl-section-gap);
  padding-inline: var(--space-6);
}

/* fl-anchors · offset para navegación por ancla (#producto, #precios, …)
 * bajo el header sticky que llega en Fase B */
.fl-main [id] {
  scroll-margin-top: 76px;
}

/* fl-hero-title · headline display gigante (escena 08:00 del día) */
.fl-hero-title {
  font-family: var(--font-display);
  font-size: var(--fl-display-xl);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.fl-hero-line { display: block; }
.fl-hero-accent {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.035em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.14em;
}

/* ═════════════ LANDING · Fragment B1 — shell + above the fold ═════════════
 * Header sticky glass · hero + mockup en capas · trust strip · CTA final ·
 * footer. El orquestador anexa este archivo al final de public/folio.css y
 * lo borra. Solo tokens existentes via var(); todo scopeado .fl-*. */

/* fl-header */
.fl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.fl-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 64px;
  padding: 0 var(--space-6);
}
.fl-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.fl-wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.fl-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Los .fi-btn del design system traen cursor: default (app); en marketing
   son links de verdad. Scope bajo .fl-header/.fl-main/.fl-footer. */
.fl-header .fi-btn,
.fl-main .fi-btn,
.fl-footer .fi-btn { cursor: pointer; }

/* Skip link — visualmente oculto hasta recibir foco de teclado */
.fl-skip {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 600;
}
.fl-skip:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Foco visible para los links propios del landing (patrón del DS) */
.fl-root a:focus-visible,
.fl-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* fl-nav */
.fl-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 auto;
}
.fl-nav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard),
              background var(--dur-quick) var(--ease-standard);
}
.fl-nav-link:hover { color: var(--ink); background: var(--surface-2); }

/* Toggle hamburguesa (mobile) — 3 barras que se cruzan en X al abrir */
.fl-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--ink);
  flex-shrink: 0;
}
.fl-nav-toggle:hover { background: var(--surface-2); }
.fl-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-snappy) var(--ease-emphasized),
              opacity var(--dur-quick) var(--ease-standard);
}
.fl-nav-toggle.is-open .fl-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fl-nav-toggle.is-open .fl-nav-toggle-bar:nth-child(2) { opacity: 0; }
.fl-nav-toggle.is-open .fl-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel mobile — colapsado siempre; solo abre dentro del breakpoint mobile */
.fl-mobile-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-6) var(--space-5);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
}
.fl-mobile-nav { display: flex; flex-direction: column; }
.fl-mobile-link {
  padding: var(--space-3) var(--space-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.fl-mobile-link:hover { color: var(--ink); background: var(--surface-2); }
.fl-mobile-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.fl-mobile-actions .fi-btn {
  flex: 1;
  justify-content: center;
}

@keyframes fl-panel-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--motion-dist-sm))); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
  .fl-nav { display: none; }
  .fl-header-actions { display: none; }
  .fl-nav-toggle { display: inline-flex; margin-left: auto; }
  .fl-mobile-panel.is-open {
    display: flex;
    animation: fl-panel-in var(--dur-snappy) var(--ease-emphasized-out) both;
  }
}

/* fl-hero · escena 08:00 — headline full-width arriba, grid asimétrico
   debajo (copy a la izquierda, agenda del día a la derecha). */
.fl-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.fl-eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--track-loose-3);
  text-transform: uppercase;
  color: var(--accent-2);
}
.fl-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: center;
}
.fl-hero-sub {
  margin: 0 0 var(--space-8);
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fl-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.fl-btn-lg {
  padding: 12px 24px;
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--r-md);
}
.fl-hero-note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* fl-hero-stats · fila mono con los compromisos verificables (absorbe la
   ex trust-strip: cifrado, Ley 25.326, trial, hecho en Argentina). */
.fl-hero-stats {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.fl-hero-stats li { white-space: nowrap; }
.fl-hero-stats li + li::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--ink-4);
}

/* fl-hero-cue · puente narrativo hacia la escena siguiente (#dia) */
.fl-hero-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
.fl-hero-cue:hover { color: var(--ink); }
.fl-hero-cue svg {
  color: var(--accent);
  animation: fl-cue-bounce 2.6s var(--spring-soft) infinite;
}
@keyframes fl-cue-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(4px); }
}

/* Entrada inicial del hero — cinematic, decelerada. El head (h1 = LCP)
   entra sin delay; copy y visual lo siguen escalonados.
   ⚠ El head usa fl-rise-pos (solo transform, SIN opacity): un h1 que arranca
   en opacity:0 nunca califica como candidato LCP y el LCP "real" termina
   siendo el cookie banner post-hidratación. */
@keyframes fl-rise {
  from { opacity: 0; transform: translateY(var(--motion-dist-md)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fl-rise-pos {
  from { transform: translateY(var(--motion-dist-md)); }
  to   { transform: translateY(0); }
}
.fl-hero-head   { animation: fl-rise-pos var(--dur-cinematic) var(--ease-emphasized) both; }
.fl-hero-copy   { animation: fl-rise var(--dur-cinematic) var(--ease-emphasized) 120ms both; }
.fl-hero-visual { animation: fl-rise var(--dur-cinematic) var(--ease-emphasized) 240ms both; }

/* fl-mock · agenda del día en capas (estático; parallax solo con view()) */
.fl-hero-visual { position: relative; }
.fl-mock {
  position: relative;
  min-height: 440px;
}
.fl-mock-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--space-5);
}
.fl-mock-front {
  position: relative;
  z-index: 2;
  width: min(480px, 94%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-hero);
}
.fl-mock-back {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 8%;
  width: min(380px, 86%);
  box-shadow: var(--shadow-2);
  filter: blur(2px);
  opacity: 0.65;
}
.fl-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--space-1) var(--space-1);
}
.fl-mock-day {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
/* fl-mock-lock · chip candado del header de la card — la historia clínica
   viaja cifrada antes de tocar la base de datos. */
.fl-mock-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  white-space: nowrap;
}
.fl-mock-lock svg { flex-shrink: 0; }
/* fl-mock-caption · leyenda mono debajo del frame */
.fl-mock-caption {
  margin: var(--space-8) var(--space-1) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fl-mock-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.fl-mock-row.is-muted { opacity: 0.82; }
.fl-mock-time {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  flex-shrink: 0;
}
.fl-mock-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fl-mock-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-mock-service { font-size: var(--fs-sm); color: var(--ink-3); }
.fl-mock-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-mock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fl-mock-badge.is-amber { background: var(--amber-soft); color: var(--amber); }
.fl-mock-badge.is-slate { background: var(--slate-soft); color: var(--slate); }
.fl-mock-chip {
  position: absolute;
  z-index: 3;
  left: 6%;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.fl-mock-chip-icon {
  display: inline-flex;
  color: var(--green);
}

/* Parallax sutil scroll-driven de las capas del mock (fallback: estático) */
/* Parallax comprimido y simétrico (front<back<chip) — amplitudes grandes y
   asimétricas daban sensación flotante/desincronizada. Sigue linear (el
   parallax debe ser lineal al scroll). */
@keyframes fl-par-front {
  from { transform: translateY(10px); }
  to   { transform: translateY(-10px); }
}
@keyframes fl-par-back {
  from { transform: translateY(18px); }
  to   { transform: translateY(-18px); }
}
@keyframes fl-par-chip {
  from { transform: translateY(26px); }
  to   { transform: translateY(-26px); }
}
@supports (animation-timeline: view()) {
  .fl-mock-front {
    animation: fl-par-front linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .fl-mock-back {
    animation: fl-par-back linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .fl-mock-chip {
    animation: fl-par-chip linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* fl-reveal · entrada scroll-driven compartida para secciones (B1/B2/B3).
   Sin soporte de view(): contenido visible, sin animación.
   Stagger: cada item desplaza el INICIO del range con --fl-reveal-range
   (delays temporales no aplican con animation-timeline: view()). */
@supports (animation-timeline: view()) {
  .fl-reveal {
    animation: fl-reveal-in var(--ease-emphasized-out) both;
    animation-timeline: view();
    animation-range: entry var(--fl-reveal-range, 0%) entry 80%;
  }
}
@keyframes fl-reveal-in {
  from { opacity: 0; transform: translateY(var(--motion-dist-md)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fl-cta-final · panel DARK — bookend con la bóveda (mismo truco: redeclara
   localmente los tokens de [data-theme="dark"], líneas ~195-226; en dark
   real queda idéntico sin reglas extra). Cero hex inventado. */
.fl-cta-panel {
  /* superficies + tinta + acento — copia exacta de [data-theme="dark"] */
  --bg:        #14130F;
  --surface:   #1B1A14;
  --surface-2: #232017;
  --line:      #2F2B1F;
  --line-soft: #252118;
  --ink:       #E8E2D2;
  --ink-2:     #B5AE99;
  --ink-3:     #847E69;
  --accent:    #C29553;
  --accent-2:  #DDB070;
  --accent-soft:   rgba(194,149,83,.14);
  --accent-soft-2: rgba(194,149,83,.24);
  --shadow-1:  0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-2:  0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);

  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(var(--space-12), 8vw, var(--space-20)) var(--space-6);
  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  text-align: center;
}
/* Brasa radial cálida desde arriba — profundidad sin romper el contraste. */
.fl-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.fl-cta-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--track-loose-3);
  text-transform: uppercase;
  color: var(--accent);
}
/* Tinta-sobre-brass: #14130F sobre #C29553 ≈ 6.3:1 (AA); el #FBF9F4 global
   del .fi-btn-primary no alcanza AA sobre el accent dark de este panel. */
.fl-cta-panel .fi-btn-primary {
  color: var(--bg);
  font-weight: 600;
  border-color: var(--accent-2);
}
.fl-cta-panel .fi-btn-primary:hover {
  background: var(--accent-2);
}
.fl-cta-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.fl-cta-sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-wrap: pretty;
}
.fl-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* fl-footer */
.fl-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.fl-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding: var(--space-16) var(--space-6) var(--space-10);
}
.fl-footer-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fl-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-footer-link {
  font-size: var(--fs-body);
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fl-footer-link:hover { color: var(--ink); text-decoration: underline; }
.fl-footer-base {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-8);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* fl-responsive · mobile */
@media (max-width: 767px) {
  .fl-hero { gap: var(--space-8); }
  .fl-hero-body {
    /* minmax(0): `1fr` a secas tiene piso min-content y los rows del mock
       (hora + nombre + badge nowrap) lo empujan a ~362px → ~11px de scroll
       horizontal en 375. Con piso 0 la columna respeta el viewport y el
       contenido degrada con sus propios ellipsis/wrap. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .fl-hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .fl-hero-ctas .fi-btn { justify-content: center; }
  .fl-mock { min-height: 360px; }
  .fl-mock-front { width: 100%; }
  .fl-mock-back { width: 92%; bottom: 4%; }
  .fl-mock-chip { left: var(--space-2); }
  .fl-mock-row { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .fl-mock-time { font-size: var(--fs-md); }
  .fl-mock-head { flex-wrap: wrap; gap: var(--space-2); }
  /* CookieBanner fixed-bottom: aire extra para que no tape los CTAs */
  .fl-cta-final { padding-bottom: calc(var(--space-20) + var(--space-16)); }
  .fl-footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-6);
    padding-top: var(--space-12);
  }
  .fl-footer-base {
    flex-wrap: wrap;
    text-wrap: pretty;
  }
}

/* fl-reduced-motion · anula las animaciones del fragmento B1; el estado
   base (sin animation-fill) ya es el estado final visible. */
@media (prefers-reduced-motion: reduce) {
  .fl-hero-head,
  .fl-hero-copy,
  .fl-hero-visual,
  .fl-hero-cue svg,
  .fl-reveal,
  .fl-mock-front,
  .fl-mock-back,
  .fl-mock-chip,
  .fl-mobile-panel.is-open {
    animation: none !important;
  }
  .fl-nav-toggle-bar,
  .fl-nav-link,
  .fl-hero-cue,
  .fl-skip {
    transition: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento B2 — Precios / FAQ
 * El orquestador anexa este archivo a public/folio.css y lo borra.
 * Solo tokens var() existentes; selectores con prefijo .fl-*.
 * `.fl-reveal` la define B1 — acá solo se consume (--fl-reveal-range).
 * ─────────────────────────────────────────────────────────────────────────── */

/* fl-section · encabezados compartidos (pricing/faq) */
.fl-pricing-title,
.fl-faq-title {
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

.fl-pricing-sub {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 56ch;
  margin: 0 0 var(--space-10);
}

/* fl-pricing */
.fl-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 880px;
}

.fl-price-card {
  display: flex; /* fallback sin subgrid: columna con lista flexible */
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  position: relative;
}

/* subgrid: alinea head / precio / nota / bullets / CTA entre las dos cards */
@supports (grid-template-rows: subgrid) {
  .fl-pricing-grid {
    grid-template-rows: repeat(5, auto);
  }

  .fl-price-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.fl-price-card--featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-2);
}

.fl-price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fl-price-plan {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.fl-price-badge {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  white-space: nowrap;
}

.fl-price-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}

.fl-price-figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.fl-price-per {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--ink-2);
}

.fl-price-note {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0 0 var(--space-5);
}

.fl-price-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
}

.fl-price-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

.fl-price-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}

.fl-price-cta {
  display: flex;
  margin-top: auto; /* fallback flex: CTA al fondo */
}

.fl-price-cta .fi-btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
  font-size: var(--fs-body);
}

.fl-pricing-banner {
  margin: var(--space-8) 0 0;
  padding: var(--space-4) var(--space-6);
  max-width: 880px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
  text-align: center;
}

.fl-pricing-banner-days {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--accent);
  margin-right: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* fl-faq · editorial: sin cajas — divisores finos, pregunta generosa y
   apertura fluida (interpolate-size + ::details-content, progressive). */
.fl-faq-list {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin-top: var(--space-8);
  border-top: 1px solid var(--line);
}

.fl-faq-item {
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-quick) var(--ease-standard-out);
}

.fl-faq-item[open] {
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.fl-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  list-style: none;
  border-radius: var(--r-sm);
}

.fl-faq-q-text {
  text-wrap: balance;
}

.fl-faq-q::-webkit-details-marker {
  display: none;
}

.fl-faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fl-faq-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform var(--dur-snappy) var(--ease-standard-out);
}

.fl-faq-item[open] .fl-faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.fl-faq-a {
  margin: 0;
  padding: 0 var(--space-1) var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 64ch;
  animation: fl-faq-open var(--dur-snappy) var(--ease-standard-out);
}

@keyframes fl-faq-open {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--motion-dist-xs)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apertura fluida del <details> — Chrome 129+; el resto conserva el snap
   nativo + el fade del answer (fl-faq-open). */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .fl-faq-item {
      interpolate-size: allow-keywords;
    }
    .fl-faq-item::details-content {
      opacity: 0;
      block-size: 0;
      overflow-y: clip;
      transition:
        content-visibility var(--dur-snappy) allow-discrete,
        opacity var(--dur-snappy) var(--ease-standard),
        block-size var(--dur-snappy) var(--ease-standard);
    }
    .fl-faq-item[open]::details-content {
      opacity: 1;
      block-size: auto;
    }
  }
}

/* fl-b2-responsive */
@media (max-width: 767px) {
  .fl-pricing-grid {
    grid-template-columns: 1fr;
  }

  /* subgrid de filas no aporta en una sola columna */
  @supports (grid-template-rows: subgrid) {
    .fl-pricing-grid {
      grid-template-rows: none;
    }

    .fl-price-card {
      display: flex;
      grid-row: auto;
    }
  }

  .fl-price-card {
    padding: var(--space-6);
  }
}

/* fl-b2-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fl-faq-item,
  .fl-faq-chevron {
    transition: none;
  }

  .fl-faq-a {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento E2 — "Un día con Folio" (#dia) · 10:30 → 14:00 → 20:00
 * El orquestador anexa este archivo al final de public/folio.css y lo borra.
 * Solo tokens var() existentes; todo scopeado .fl-day-* / .fl-scene-* /
 * .fl-rsv-* / .fl-cipher-* / .fl-close-*.
 *
 * Mecánica:
 *  — BASE (mobile / sin animation-timeline / reduced-motion): escenas
 *    apiladas en flujo normal con gap generoso, mockups en estado FINAL
 *    (nota ya cifrada, candado y burbuja visibles, barras completas).
 *    `.fl-reveal` (definida por B1) da la entrada suave.
 *  — ENHANCED (≥768px + prefers-reduced-motion: no-preference + @supports
 *    animation-timeline: view()): .fl-day mide 320vh y nombra la
 *    view-timeline --fl-day; .fl-day-stage queda sticky bajo el header
 *    (64px) y las 3 escenas se scrubean en crossfade (contain 0%→100% ≈
 *    220vh de pin). Ventanas: a visible 0–30 / sale 38 · b entra 30–38,
 *    hold 38–62, sale 62–70 · c entra 62–70, hold a 100. El sweep de
 *    cifrado corre contain 44%→58% (dentro del hold de b) y el candado
 *    popea 56%→61% con --spring-soft. El rail scrubea scaleX 0→1 en todo
 *    el pin.
 * ─────────────────────────────────────────────────────────────────────── */

/* fl-day · layout base (flujo normal; el sticky vive solo en enhanced) */
.fl-day {
  max-width: 1120px;
  margin: 0 auto;
  padding-block: var(--fl-section-gap);
  padding-inline: var(--space-6);
}
.fl-day-stage {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-10), 6vh, var(--space-16));
}

/* fl-day-head · eyebrow mono + rail de progreso */
.fl-day-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.fl-day-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}
.fl-day-rail {
  flex: 1;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
}
.fl-day-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  /* base: rail completo (decorativo); enhanced lo scrubea 0 → 1 */
  transform: scaleX(1);
}

/* fl-day-scenes · base: 3 escenas apiladas en flujo */
.fl-day-scenes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fl-section-gap);
}
.fl-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
.fl-scene-copy { min-width: 0; }
.fl-scene-hour {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fl-mono-giant);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fl-scene-text {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.fl-scene-visual {
  min-width: 0;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .fl-scene {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-16);
  }
}

/* fl-rsv · escena 10:30 — página pública de reservas + burbuja WhatsApp */
.fl-rsv {
  position: relative;
  width: min(440px, 100%);
  /* aire para la burbuja que cuelga del borde inferior */
  padding-bottom: var(--space-10);
}
.fl-rsv-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero);
}
.fl-rsv-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-1);
}
.fl-rsv-url {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.fl-rsv-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.fl-rsv-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.fl-rsv-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.fl-rsv-slot.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}
.fl-rsv-slot.is-picked {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fl-rsv-slot.is-picked svg {
  color: var(--accent);
  flex-shrink: 0;
}
.fl-rsv-wa {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: min(320px, 94%);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}
.fl-rsv-wa-icon {
  display: inline-flex;
  margin-top: 2px;
  color: var(--green);
  flex-shrink: 0;
}
.fl-rsv-wa-text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.fl-rsv-wa-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--green);
}

/* fl-cipher · escena 14:00 — nota SOAP de dos capas (plano → ciphertext).
   Estado base: la capa cifrada se muestra completa (clip-path final) y el
   candado visible — el mensaje funciona sin motion. */
.fl-cipher { width: min(480px, 100%); }
.fl-cipher-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero);
}
.fl-cipher-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.fl-cipher-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.fl-cipher-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  white-space: nowrap;
}
.fl-cipher-tag svg { flex-shrink: 0; }
.fl-cipher-body {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
  /* contenedor de la línea de barrido: permite animarla con
     transform: translateX(100cqw) en vez de `left` (cero layout/reflow) */
  container-type: inline-size;
}
.fl-cipher-pt {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
}
.fl-cipher-pt span { display: block; }
.fl-cipher-pt b {
  font-weight: 600;
  color: var(--ink);
}
.fl-cipher-ct {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--space-4);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  word-break: break-all;
  overflow: hidden;
  /* base: YA cifrada; enhanced arranca en inset(0 100% 0 0) y sweepea */
  clip-path: inset(0 0 0 0);
}
.fl-cipher-ct-meta {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-4);
}
.fl-cipher-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 30% 70%, transparent);
  opacity: 0;
  pointer-events: none;
}
.fl-cipher-lock {
  position: absolute;
  z-index: 2;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--accent-soft-2);
  color: var(--accent);
  box-shadow: var(--shadow-2);
}
.fl-cipher-foot {
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* fl-close · escena 20:00 — cierre del día: stats mono + mini-barras */
.fl-close {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero);
}
.fl-close-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.fl-close-day {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.fl-close-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.fl-close-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fl-close-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.fl-close-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fl-close-num {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fl-close-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fl-close-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 52px;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.fl-close-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--accent-soft-2);
  transform-origin: bottom center;
}
.fl-close-bar:nth-child(1) { height: 38%; }
.fl-close-bar:nth-child(2) { height: 62%; }
.fl-close-bar:nth-child(3) { height: 84%; }
.fl-close-bar:nth-child(4) { height: 48%; }
.fl-close-bar:nth-child(5) { height: 100%; background: var(--accent); }
.fl-close-bar:nth-child(6) { height: 70%; }
.fl-close-bar:nth-child(7) { height: 30%; }

/* ── ENHANCED · sticky scrubbing (≥768px + motion ok + scroll-driven) ──
 * Las escenas pasan a absolute dentro del stage sticky y se scrubean por
 * la view-timeline --fl-day (declarada en .fl-day; visible a descendientes).
 * Los selectores van prefijados .fl-day para ganarle a la shorthand de
 * `.fl-reveal` (B1) que las li también llevan para el modo base. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fl-day {
      /* 340vh: el scrub de las 3 escenas se reparte sobre más scroll → cada
         beat respira y la transición se lee más deliberada (premium > veloz). */
      height: 340vh;
      max-width: none;
      padding: 0;
      view-timeline: --fl-day block;
    }
    .fl-day-stage {
      position: sticky;
      /* 65px = .fl-header-inner (64px) + border-bottom de .fl-header (1px) */
      top: 65px;
      height: calc(100vh - 65px);
      overflow: clip;
      display: grid;
      align-content: center;
      gap: clamp(var(--space-4), 4vh, var(--space-10));
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding-inline: var(--space-6);
    }
    .fl-day-scenes {
      position: relative;
      height: clamp(340px, 62vh, 600px);
      gap: 0;
    }
    .fl-day .fl-scene {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      /* curva simétrica entrada/salida del fade — redondea el borde mecánico
         del scrub lineal (solo el crossfade; rail y sweeps siguen linear) */
      animation-timing-function: var(--motion-ease-in-out);
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 0% contain 100%;
    }
    .fl-day .fl-scene--a { animation-name: fl-scene-a; }
    .fl-day .fl-scene--b { animation-name: fl-scene-b; }
    .fl-day .fl-scene--c { animation-name: fl-scene-c; }

    /* legibilidad a cualquier altura de viewport ≥768px: la escena activa
       entra entera en el stage — tipografía y visuales con techo en vh */
    .fl-day .fl-scene-hour { font-size: min(var(--fl-mono-giant), 12vh); }
    .fl-day .fl-scene-text { font-size: clamp(1.2rem, 4.2vh, 2.2rem); }
    .fl-day .fl-scene-visual { max-height: 100%; }
    .fl-day .fl-rsv-card,
    .fl-day .fl-cipher-card,
    .fl-day .fl-close {
      max-height: calc(100vh - 240px);
      overflow: clip;
    }

    /* rail de progreso · scrubeado por la misma timeline, 0 → 1 en el pin */
    .fl-day-rail-fill {
      transform: scaleX(0);
      animation-name: fl-rail-fill;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 0% contain 100%;
    }

    /* escena a · la burbuja de WhatsApp "llega" apenas arranca el pin */
    .fl-rsv-wa {
      animation-name: fl-rsv-wa-in;
      animation-timing-function: var(--ease-emphasized-out);
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 6% contain 16%;
    }

    /* escena b · sweep de cifrado: el ciphertext tapa el texto plano con
       clip-path (izq → der), la línea de barrido lo acompaña en lockstep
       (ambas linear sobre el mismo range) y el candado popea al final.
       Ventana alineada al hold de fl-scene-b (38%–62%). */
    .fl-cipher-ct {
      clip-path: inset(0 100% 0 0);
      animation-name: fl-cipher-sweep;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 44% contain 58%;
    }
    .fl-cipher-scan {
      animation-name: fl-cipher-scan-x;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 44% contain 58%;
    }
    .fl-cipher-lock {
      opacity: 0;
      transform: scale(0.4);
      animation-name: fl-cipher-lock-pop;
      /* overshoot por cubic-bezier (no linear() spring): popea intencional sin
         glitchear al scrollear hacia atrás */
      animation-timing-function: var(--ease-overshoot);
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 54% contain 62%;
    }

    /* escena c · las barras del cierre crecen al entrar la escena */
    .fl-close-bar {
      transform: scaleY(0.25);
      animation-name: fl-close-bar-up;
      /* decelerada monótona (sin overshoot): crecimiento limpio en ambas
         direcciones de scroll, sin "rebote al revés" */
      animation-timing-function: var(--ease-standard-out);
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 70% contain 90%;
    }
  }
}

/* viewports bajos (landscape tablet / notebooks chicas): compactar para que
   la escena activa siga entrando entera en el stage sticky */
@media (min-width: 768px) and (max-height: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fl-day-stage { gap: var(--space-3); }
    .fl-day-scenes { height: min(68vh, 420px); }
    .fl-day .fl-scene-hour { margin-bottom: var(--space-2); }
    .fl-day .fl-cipher-pt,
    .fl-day .fl-cipher-ct {
      font-size: var(--fs-sm);
      line-height: 1.5;
    }
    .fl-day .fl-rsv-card,
    .fl-day .fl-close { gap: var(--space-3); }
  }
}

/* keyframes de las escenas — scrubbed por --fl-day; fill both deja el primer/
   último keyframe aplicado fuera del range (la sección entra con la escena a
   ya visible y sale con la c). Custom props de motion del :root. */
/* Crossfades con ventana ancha (~18% de scroll) y solape real entre escenas:
   cada salida cruza en cross-opacity con la entrada siguiente, sin salto. El
   translateY baja a --motion-dist-sm (8px) — el desplazamiento grande durante
   un fade es lo que más acentuaba el "brusco". El hold de la escena b
   (40%→62%) preserva la ventana del sweep/candado de cifrado. */
@keyframes fl-scene-a {
  0%, 22% {
    opacity: 1;
    transform: none;
    filter: none;
  }
  40%, 100% {
    opacity: 0;
    transform: translateY(calc(var(--motion-dist-sm) * -1));
    filter: none;
  }
}
@keyframes fl-scene-b {
  0%, 22% {
    opacity: 0;
    transform: translateY(var(--motion-dist-sm));
    filter: none;
  }
  40%, 62% {
    opacity: 1;
    transform: none;
    filter: none;
  }
  80%, 100% {
    opacity: 0;
    transform: translateY(calc(var(--motion-dist-sm) * -1));
    filter: none;
  }
}
@keyframes fl-scene-c {
  0%, 62% {
    opacity: 0;
    transform: translateY(var(--motion-dist-sm));
    filter: none;
  }
  80%, 100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes fl-rail-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fl-rsv-wa-in {
  from { opacity: 0; transform: translateY(var(--motion-dist-sm)) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fl-cipher-sweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* translateX solo en 0%/100% → un único segmento lineal, en sync exacto con
   el borde del clip; la opacity prende/apaga en los extremos. 100cqw = ancho
   de .fl-cipher-body (container-type: inline-size) — compositor-only, sin
   layout (antes animaba `left`). */
@keyframes fl-cipher-scan-x {
  0%   { transform: translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}
@keyframes fl-cipher-lock-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fl-close-bar-up {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* fl-day · reduced-motion: anula toda animación propia del fragmento. El
   gate de media query ya excluye el modo sticky (las escenas quedan en flujo
   apiladas, NO absolute), así que acá solo reforzamos que los mockups queden
   en su estado base final: nota cifrada, candado y burbuja visibles, rail
   completo, barras crecidas. (.fl-reveal ya la anula el bloque de B1.) */
@media (prefers-reduced-motion: reduce) {
  .fl-scene,
  .fl-day-rail-fill,
  .fl-rsv-wa,
  .fl-cipher-ct,
  .fl-cipher-scan,
  .fl-cipher-lock,
  .fl-close-bar {
    animation: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento E3 — La bóveda (#seguridad, panel dark premium)
 * El orquestador anexa este archivo al final de public/folio.css y lo borra.
 * Solo tokens var() existentes; selectores con prefijo .fl-vault*.
 * `.fl-reveal` la define B1 — acá solo se consume (--fl-reveal-range), así
 * la política global de prefers-reduced-motion ya cubre la entrada; este
 * fragmento no declara animaciones propias.
 * ─────────────────────────────────────────────────────────────────────────── */

/* fl-vault · sección full-bleed, dark incluso en light mode (estilo Mercury).
   Redeclara localmente las custom properties con LOS MISMOS VALORES del
   bloque [data-theme="dark"] de folio.css (TOKENS · DARK, ~líneas 195-226):
   todo lo interior hereda el sistema dark completo, y en dark mode real la
   sección queda idéntica sin reglas extra. Cero hex inventado. */
.fl-vault {
  /* superficies — copia exacta de [data-theme="dark"] */
  --bg:        #14130F;
  --surface:   #1B1A14;
  --surface-2: #232017;
  --line:      #2F2B1F;
  --line-soft: #252118;
  /* tinta — copia exacta de [data-theme="dark"] */
  --ink:       #E8E2D2;
  --ink-2:     #B5AE99;
  --ink-3:     #847E69;
  /* acento — copia exacta de [data-theme="dark"] */
  --accent:    #C29553;
  --accent-soft: rgba(194,149,83,.14);
  /* sombras — copia exacta de [data-theme="dark"] */
  --shadow-1:  0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-2:  0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);

  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
  border-block: 1px solid var(--line);
  padding-block: clamp(96px, 14vh, 160px);
}

/* Contenido centrado al ancho estándar del landing (la sección en sí es
   full-bleed: no usa .fl-section en el wrapper exterior). */
.fl-vault-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

/* Eyebrow mono — --accent dark sobre --bg dark: 6.83:1 (AA texto normal). */
.fl-vault-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--track-loose-3);
  text-transform: uppercase;
  color: var(--accent);
}
.fl-vault-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.fl-vault-title {
  margin: 0 0 var(--space-4);
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* Subtítulo humano — la audiencia es médica: la promesa va sin jerga. */
.fl-vault-sub {
  margin: 0 0 var(--space-12);
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Grid 2×2 con separadores finos (--line-soft) entre items. */
.fl-vault-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
.fl-vault-item {
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  border-top: 1px solid var(--line-soft);
}
.fl-vault-item:nth-child(even) {
  padding-left: var(--space-8);
  border-left: 1px solid var(--line-soft);
}

/* Número display — Geist Mono gigante, --accent dark (#C29553 sobre #14130F:
   6.83:1 — AA Large sobrado). --fl-mono-giant = clamp(2.75rem, 7vw, 5.5rem). */
.fl-vault-num {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fl-mono-giant, clamp(2.75rem, 7vw, 5.5rem));
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-tight-2);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Displays largos («Solo tu equipo»): clamp menor para no desbordar, pero
   con peso display — balancea la fila contra los numerales gigantes. */
.fl-vault-num--code {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  letter-spacing: var(--track-tight-0);
}

.fl-vault-desc {
  margin: 0;
  max-width: 36ch;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Pie mono — --ink-3 dark sobre --bg dark: 4.58:1, pasa AA texto normal
   (par ya validado por la app en dark mode). */
.fl-vault-foot {
  margin: var(--space-10) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .fl-vault-grid {
    grid-template-columns: 1fr;
  }
  .fl-vault-item,
  .fl-vault-item:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento E4 — Bento grid (#producto, «Todo lo demás»)
 * El orquestador anexa este archivo a public/folio.css y lo borra.
 * Solo tokens var() existentes; selectores con prefijo .fl-*.
 * `.fl-reveal` la define B1 — acá solo se consume (--fl-reveal-range).
 *
 * Patrón de las mini-demos: el CSS BASE de cada pieza es el estado FINAL
 * (demo terminada). Las animaciones —keyframes que arrancan en el estado
 * inicial y terminan en el final— solo se aplican dentro de
 * @supports (animation-timeline: view()), con timeline view() propio del
 * elemento y ranges dentro de entry 30%…90%. Fallback sin view() y
 * reduced-motion = estado final visible, sin animación.
 * ─────────────────────────────────────────────────────────────────────────── */

/* fl-bento · encabezado (mismo patrón de títulos del landing) + grid */
.fl-bento-title {
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--space-10);
}

/* Tira de especialidades — banda calma "esto es para mí" (proof inventory-free)
   entre el día y la bóveda. Padding compacto (no usa .fl-section). */
.fl-specialties {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.fl-specialties-lead {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-loose-3);
  text-transform: uppercase;
  color: var(--accent-2);
}
.fl-specialties-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
}
.fl-specialties-item {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 500;
  color: var(--ink-2);
}
/* Punto separador centrado en el gap horizontal (no aparece al envolver línea
   porque se ancla al item, a la izquierda del gap). */
.fl-specialties-item + .fl-specialties-item::before {
  content: "·";
  position: absolute;
  right: calc(100% + var(--space-6) / 2);
  color: var(--ink-4);
}
/* Segunda línea menor: roadmap con badge "Próximamente" (pill brass, clona el
   patrón accent-soft). Solo verdades — estas especialidades aún no tienen ficha. */
.fl-specialties-soon {
  margin: var(--space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.fl-specialties-soon-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-loose-2);
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 2px 8px;
}

/* ── Sección #ficha · la historia clínica por especialidad (interactivo) ────
   El contenido clínico REUSA las clases reales de la app (pc-card / fi-pill /
   fi-wi-field / fm-modal-check / pc-legend-*) para verse idéntico a la ficha
   real; solo el marco exterior usa .fl-ficha-*. Tokens existentes, cero hex
   off-theme. */
.fl-ficha-intro {
  max-width: 42rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.fl-ficha-h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.fl-ficha-lead {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fl-ficha-stage {
  display: flex;
  justify-content: center;
}
.fl-ficha {
  width: min(560px, 100%);
}

/* Selector de especialidad — control segmentado real (role=tablist). */
.fl-ficha-tabbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.fl-ficha-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  transition:
    color var(--dur-quick) var(--ease-standard),
    background var(--dur-quick) var(--ease-standard),
    border-color var(--dur-quick) var(--ease-standard);
}
.fl-ficha-tab:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.fl-ficha-tab.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--accent-soft);
}

.fl-ficha-card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: clip;
}
/* Cuerpo que se intercambia al cambiar de especialidad (key=active → remount):
   fade + leve subida. */
.fl-ficha-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: fl-ficha-in var(--dur-moderate) var(--ease-emphasized-out) both;
}
@keyframes fl-ficha-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fl-ficha-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.fl-ficha-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.fl-ficha-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fl-ficha-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.fl-ficha-age {
  color: var(--ink-3);
  font-weight: 400;
}
.fl-ficha-submeta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fl-ficha-module {
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-loose-2);
  color: var(--accent-2);
  white-space: nowrap;
}
.fl-ficha-module svg {
  color: var(--accent);
}

/* Sub-pestañas del paciente (Resumen · Plan · …) — decorativas. */
.fl-ficha-subtabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.fl-ficha-subtabs span {
  position: relative;
  padding-bottom: var(--space-2);
}
.fl-ficha-subtabs .is-active {
  color: var(--ink);
  font-weight: 600;
}
.fl-ficha-subtabs .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.fl-ficha-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.fl-ficha-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
}
.fl-ficha-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-ficha-fieldset legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

/* Sparkline multi-métrica (eco del CardioSparkline / PsicoSparkline reales). */
.fl-ficha-spark-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-ficha-spark {
  width: 100%;
  height: 84px;
}
.fl-ficha-spark line {
  stroke: var(--line-soft);
  stroke-width: 1;
}
.fl-ficha-spark polyline {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-ficha-spark .is-red { stroke: var(--red); }
.fl-ficha-spark .is-amber { stroke: var(--amber); }
.fl-ficha-spark .is-slate { stroke: var(--slate); }
.fl-ficha-spark .is-accent { stroke: var(--accent); }
.fl-ficha-spark circle.is-red { fill: var(--red); stroke: none; }
.fl-ficha-spark circle.is-amber { fill: var(--amber); stroke: none; }
.fl-ficha-spark circle.is-slate { fill: var(--slate); stroke: none; }
.fl-ficha-spark circle.is-accent { fill: var(--accent); stroke: none; }
.fl-ficha-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.fl-ficha-legend-keys {
  display: inline-flex;
  gap: var(--space-3);
}
.fl-ficha-legend-range {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}
.fl-ficha-legend-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Filas de estudios (cardio), escalas y objetivos (psico). */
.fl-ficha-study,
.fl-ficha-goal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-soft);
}
.fl-ficha-study b { color: var(--ink); }
.fl-ficha-study .fi-pill,
.fl-ficha-goal .fi-pill {
  margin-left: auto;
}
.fl-ficha-goal span:first-child {
  flex: 1;
  color: var(--ink);
}
.fl-ficha-dim {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fl-ficha-scales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.fl-ficha-scale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* Quiropraxia · columna vertebral (vista posterior, simplificada) + evaluación. */
.fl-ficha-quiro {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.fl-ficha-spine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-2) 0;
}
.fl-ficha-vert {
  position: relative;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  opacity: 0.55;
}
.fl-ficha-vert--c { width: 22px; }
.fl-ficha-vert--d { width: 34px; }
.fl-ficha-vert--l { width: 46px; }
.fl-ficha-vert.is-leve { background: var(--amber); opacity: 1; }
.fl-ficha-vert.is-moderado {
  background: color-mix(in oklab, var(--amber) 60%, var(--ink-2));
  opacity: 1;
}
.fl-ficha-vert.is-ajustada { background: var(--green); opacity: 1; }
.fl-ficha-vert-tag {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.fl-ficha-quiro-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fl-ficha-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fl-ficha-foot svg {
  color: var(--accent);
}
.fl-ficha-caption {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Cuerpo del slot del paciente es solo lectura en el mock: campos sin foco ni
   cursor de edición; los checkboxes de factores se ven marcados, no clickeables. */
.fl-ficha-body .fi-wi-field input,
.fl-ficha-body .fm-modal-check input {
  cursor: default;
  pointer-events: none;
}

@media (max-width: 540px) {
  .fl-ficha-quiro { grid-template-columns: 110px 1fr; }
  .fl-ficha-grid3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .fl-ficha-head { flex-wrap: wrap; }
  .fl-ficha-module { margin-left: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-ficha-body { animation: none; }
}

.fl-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 156px;
  gap: var(--space-4);
}

/* fl-bento-cell · card base (estado final visible sin view()) */
.fl-bento-cell {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  /* `clip` y no `hidden`: hidden crea un scroll container y las demos con
     animation-timeline: view() anónimo resolverían contra la celda (que
     nunca scrollea) en vez del viewport — quedarían congeladas. */
  overflow: clip;
  transition:
    transform var(--dur-snappy) var(--spring-soft),
    box-shadow var(--dur-snappy) var(--ease-standard-out),
    border-color var(--dur-snappy) var(--ease-standard-out);
}
.fl-bento-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line);
}
.fl-bento-cell--lg {
  grid-column: span 4;
  grid-row: span 2;
}

.fl-bento-demo {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
}

.fl-bento-label {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.fl-bento-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Demo 1 · fl-bbook · mini página de reservas ───────────────────────────
 * 3 slots se "llenan" en secuencia; el badge Confirmado aparece al final. */
.fl-bbook {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
}
.fl-bbook-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.fl-bbook-day {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fl-bbook-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.fl-bbook-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fl-bbook-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.fl-bbook-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
/* estado final: slot reservado */
.fl-bbook-slot.is-fill {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--accent-2);
  font-weight: 500;
}

@keyframes fl-bbook-fill {
  from {
    background: var(--bg);
    border-color: var(--line-soft);
    color: var(--ink-3);
  }
  to {
    background: var(--accent-soft);
    border-color: var(--accent-soft-2);
    color: var(--accent-2);
  }
}
@keyframes fl-bbook-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Demo 2 · fl-bwa · burbuja WhatsApp ────────────────────────────────────
 * El doble check pasa de --ink-3 a --green (entregado → leído). */
.fl-bwa {
  align-items: flex-end;
  gap: var(--space-2);
}
.fl-bwa-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  flex-shrink: 0;
}
.fl-bwa-bubble {
  position: relative;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--green-soft);
  border-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
}
.fl-bwa-bubble::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  background: var(--green-soft);
  border-radius: 2px;
  transform: rotate(45deg);
}
.fl-bwa-meta {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
/* estado final: leído */
.fl-bwa-ticks {
  font-weight: 600;
  letter-spacing: -0.14em;
  color: var(--green);
}

@keyframes fl-bwa-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fl-bwa-read {
  from {
    color: var(--ink-3);
  }
  to {
    color: var(--green);
  }
}

/* ── Demo 3 · fl-bnum · mini-barras + cifra mono (estática) ──────────────── */
.fl-bnum {
  justify-content: space-between;
  gap: var(--space-4);
}
.fl-bnum-figure {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.fl-bnum-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 52px;
  flex-shrink: 0;
}
.fl-bnum-bar {
  width: 13px;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: var(--accent-soft-2);
  transform-origin: bottom;
}
.fl-bnum-bar--1 { height: 38%; }
.fl-bnum-bar--2 { height: 62%; }
.fl-bnum-bar--3 { height: 48%; }
.fl-bnum-bar--4 {
  height: 100%;
  background: var(--accent);
}

@keyframes fl-bnum-grow {
  from { transform: scaleY(0); }
  to   { transform: none; }
}

/* ── Demo 4 · fl-bcal · Folio ↔ Google (dot viaja, check final) ──────────── */
.fl-bcal {
  width: 100%;
  gap: var(--space-2);
}
.fl-bcal-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3) 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.fl-bcal-track {
  position: relative;
  width: 44px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-soft);
  flex-shrink: 0;
}
.fl-bcal-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
}
/* estado final: sincronizado */
.fl-bcal-check {
  display: inline-flex;
  color: var(--green);
}

@keyframes fl-bcal-travel {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(36px); }
  100% { transform: translateX(0); }
}
@keyframes fl-bcal-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Demo 5 · fl-bcif · candado + crossfade texto → ciphertext ────────────
 * Dos capas superpuestas (grid-area 1/1); final = solo cipher visible. */
.fl-bcif {
  gap: var(--space-3);
}
.fl-bcif-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.fl-bcif-lines {
  display: grid;
  flex: 1;
  min-width: 0;
}
.fl-bcif-plain,
.fl-bcif-cipher {
  grid-area: 1 / 1;
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
}
/* estado final: texto plano oculto, cipher visible */
.fl-bcif-plain {
  color: var(--ink-2);
  opacity: 0;
}
.fl-bcif-cipher {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  opacity: 1;
}

@keyframes fl-bcif-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fl-bcif-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fl-bcif-close {
  from { transform: translateY(-4px); }
  to   { transform: none; }
}

/* ── Demo 6 · fl-bteam · avatares en cascada ─────────────────────────────── */
.fl-bteam {
  align-items: center;
}
.fl-bteam-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.fl-bteam-ava + .fl-bteam-ava {
  margin-left: -10px;
}
.fl-bteam-ava--1 { background: var(--accent-soft); color: var(--accent-2); }
.fl-bteam-ava--2 { background: var(--amber-soft);  color: var(--amber); }
.fl-bteam-ava--3 { background: var(--green-soft);  color: var(--green); }

@keyframes fl-bteam-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Animaciones scroll-driven · solo con soporte de view() ───────────────
 * Timeline NOMBRADA en la celda (--fl-cell): con view() anónimo en cada
 * elemento chico el range `entry` duraba ~30px de scroll (flash invisible).
 * Sobre el `cover` de la celda, cada demo juega durante ~500px de scroll y
 * termina con la celda a mitad de viewport. fill both: antes del range se
 * ve el `from` (estado inicial), después queda el `to` (= estado final). */
@supports (animation-timeline: view()) {
  .fl-bento-cell {
    view-timeline: --fl-cell block;
  }

  /* 1 · reservas: slots en secuencia + badge al final */
  .fl-bbook-slot--f1 {
    animation: fl-bbook-fill var(--ease-standard-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 10% cover 29%;
  }
  .fl-bbook-slot--f2 {
    animation: fl-bbook-fill var(--ease-standard-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 19% cover 38%;
  }
  .fl-bbook-slot--f3 {
    animation: fl-bbook-fill var(--ease-standard-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 28% cover 47%;
  }
  .fl-bbook-badge {
    animation: fl-bbook-pop var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 42% cover 55%;
  }

  /* 2 · whatsapp: burbuja entra, ticks pasan a leído */
  .fl-bwa-bubble {
    animation: fl-bwa-in var(--ease-emphasized-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 10% cover 29%;
  }
  .fl-bwa-ticks {
    animation: fl-bwa-read var(--ease-standard) both;
    animation-timeline: --fl-cell;
    animation-range: cover 29% cover 51%;
  }

  /* 3 · números: barras crecen con stagger */
  .fl-bnum-bar--1 {
    animation: fl-bnum-grow var(--ease-emphasized-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 10% cover 32%;
  }
  .fl-bnum-bar--2 {
    animation: fl-bnum-grow var(--ease-emphasized-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 16% cover 38%;
  }
  .fl-bnum-bar--3 {
    animation: fl-bnum-grow var(--ease-emphasized-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 22% cover 44%;
  }
  .fl-bnum-bar--4 {
    animation: fl-bnum-grow var(--ease-emphasized-out) both;
    animation-timeline: --fl-cell;
    animation-range: cover 28% cover 52%;
  }

  /* 4 · gcal: dot ida y vuelta una vez, check final */
  .fl-bcal-dot {
    animation: fl-bcal-travel var(--ease-standard) both;
    animation-timeline: --fl-cell;
    animation-range: cover 10% cover 42%;
  }
  .fl-bcal-check {
    animation: fl-bcal-pop var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 43% cover 55%;
  }

  /* 5 · cifrado: crossfade plano → cipher, candado cierra con pop */
  .fl-bcif-plain {
    animation: fl-bcif-fade-out var(--ease-standard) both;
    animation-timeline: --fl-cell;
    animation-range: cover 16% cover 37%;
  }
  .fl-bcif-cipher {
    animation: fl-bcif-fade-in var(--ease-standard) both;
    animation-timeline: --fl-cell;
    animation-range: cover 20% cover 42%;
  }
  .fl-bcif-lock {
    animation: fl-bcif-close var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 29% cover 51%;
  }

  /* 6 · equipo: avatares en cascada */
  .fl-bteam-ava--1 {
    animation: fl-bteam-in var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 10% cover 31%;
  }
  .fl-bteam-ava--2 {
    animation: fl-bteam-in var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 19% cover 40%;
  }
  .fl-bteam-ava--3 {
    animation: fl-bteam-in var(--spring-soft) both;
    animation-timeline: --fl-cell;
    animation-range: cover 28% cover 49%;
  }
}

/* fl-bento · mobile: todo a una columna, celdas más bajas */
@media (max-width: 767px) {
  .fl-bento-grid {
    grid-auto-rows: minmax(132px, auto);
  }
  .fl-bento-cell,
  .fl-bento-cell--lg {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .fl-bento-cell--lg {
    min-height: 264px;
  }
  .fl-bento-cell {
    padding: var(--space-5);
  }
}

/* fl-bento · reduced-motion: demos en estado final (el CSS base), sin
 * animación. `.fl-reveal` ya lo anula el bloque de B1. */
@media (prefers-reduced-motion: reduce) {
  .fl-bbook-slot--f1,
  .fl-bbook-slot--f2,
  .fl-bbook-slot--f3,
  .fl-bbook-badge,
  .fl-bwa-bubble,
  .fl-bwa-ticks,
  .fl-bnum-bar,
  .fl-bcal-dot,
  .fl-bcal-check,
  .fl-bcif-plain,
  .fl-bcif-cipher,
  .fl-bcif-lock,
  .fl-bteam-ava {
    animation: none !important;
  }
  .fl-bento-cell {
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento R2 — refinamiento de los mockups de "Un día con Folio"
 * (#dia): página pública real en miniatura (10:30), ficha SOAP completa con
 * capa trasera (14:00) y dashboard de cierre (20:00).
 * El orquestador anexa este archivo al final de public/folio.css y lo borra
 * (a igual especificidad, estas reglas ganan la cascada sobre el frag. E2).
 * Solo tokens var()/color-mix; scopeado .fl-rsv-* / .fl-cipher-* /
 * .fl-close-* / .fl-sc-*.
 *
 * ⚠ Animaciones scrubeadas por --fl-day: los ranges del fragmento E2 quedan
 * EXACTOS — wa 6%–16% · sweep/scan 44%–58% · lock 56%–61% · barras 70%–86%.
 * Acá solo se SUMA un detalle (.fl-close-pay, fade-up de los cobros) DENTRO
 * del range 70%–86% ya existente, con su anulación en reduced-motion.
 * ─────────────────────────────────────────────────────────────────────── */

/* ── fl-rsv · 10:30 — página pública en miniatura, composición en capas ── */
.fl-rsv {
  width: min(460px, 100%);
  /* aire arriba para la capa trasera que asoma; abajo cuelga la notificación
     (espacio suficiente para que solo pise el borde de la card, no el botón) */
  padding-top: var(--space-4);
  padding-bottom: var(--space-20);
}
.fl-rsv-front {
  position: relative;
  z-index: 1;
}
.fl-rsv-back {
  position: absolute;
  z-index: 0;
  top: 0;
  right: calc(var(--space-3) * -1);
  width: 82%;
  gap: var(--space-3);
  box-shadow: var(--shadow-2);
  filter: blur(2px);
  opacity: 0.55;
}
.fl-rsv-back-lines {
  display: grid;
  gap: var(--space-2);
}
.fl-rsv-back-lines span {
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.fl-rsv-back-lines span:last-child { width: 68%; }

/* header del consultorio: avatar con iniciales + nombre + URL mono */
.fl-rsv-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}
.fl-rsv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-2);
}
.fl-rsv-org {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fl-rsv-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-rsv-url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-rsv-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-rsv-open-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* campos de la página: label mono + selector de servicio / grilla */
.fl-rsv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-rsv-field-label {
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.fl-rsv-services {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.fl-rsv-service {
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.fl-rsv-service.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
}

/* confirmación: botón primario + nota mono */
.fl-rsv-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-rsv-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}
.fl-rsv-confirm-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

/* el ciphertext corta en los guiones de los bloques, no a mitad de bloque */
.fl-cipher-ct {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* notificación de WhatsApp — superpuesta en la esquina, como capa del hero
   (la animación fl-rsv-wa-in del E2 sigue intacta: range contain 6%–16%) */
.fl-rsv-wa {
  right: calc(var(--space-2) * -1);
  max-width: min(300px, 92%);
  border-color: color-mix(in srgb, var(--green) 18%, var(--line-soft));
  box-shadow: var(--shadow-hero);
}
.fl-rsv-wa-text {
  display: block;
  flex: 1;
  min-width: 0;
}
.fl-rsv-wa-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  color: var(--ink);
}
.fl-rsv-wa-head b { font-weight: 600; }
.fl-rsv-wa-time {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--ink-4);
}
.fl-rsv-wa-meta {
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* ── fl-cipher · 14:00 — ficha SOAP completa + capa trasera desenfocada ── */
.fl-cipher {
  position: relative;
  width: min(480px, 100%);
  padding-top: var(--space-4);
}
.fl-cipher-front {
  position: relative;
  z-index: 1;
}
.fl-cipher-back {
  position: absolute;
  z-index: 0;
  top: 0;
  right: calc(var(--space-3) * -1);
  width: 78%;
  gap: var(--space-3);
  box-shadow: var(--shadow-2);
  filter: blur(2px);
  opacity: 0.55;
}
.fl-cipher-back-lines {
  display: grid;
  gap: var(--space-2);
}
.fl-cipher-back-lines span {
  height: 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.fl-cipher-back-lines span:nth-child(2) { width: 84%; }
.fl-cipher-back-lines span:nth-child(3) { width: 56%; }

/* header de ficha: avatar + paciente + tag de sesión + hora */
.fl-cipher-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.fl-cipher-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-2);
}
.fl-cipher-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fl-cipher-sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-cipher-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.fl-cipher-time {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* secciones S/O/A/P: label mono chiquito + 1-2 líneas de texto clínico */
.fl-cipher-pt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fl-cipher-sec { display: block; }
.fl-cipher-sec-label {
  display: block;
  margin-bottom: 1px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.fl-cipher-sec-label b {
  font-family: inherit;
  font-weight: 600;
  color: var(--accent);
}
.fl-cipher-sec-text {
  display: block;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

/* candado + AES-256-GCM al final del sweep, más prominente (pill).
   La animación fl-cipher-lock-pop del E2 sigue intacta: contain 56%–61%. */
.fl-cipher-lock {
  width: auto;
  height: auto;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-soft));
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fl-cipher-lock svg { flex-shrink: 0; }

/* ── fl-close · 20:00 — dashboard de cierre ── */
.fl-close {
  width: min(480px, 100%);
  gap: var(--space-4);
}
.fl-close-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

/* barras de la semana: columnas con label de día, hoy en --accent.
   La animación fl-close-bar-up del E2 sigue intacta: contain 70%–86%. */
.fl-close-week {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.fl-close-week-label,
.fl-close-pays-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.fl-close-bars {
  height: auto;
  padding-top: 0;
  border-top: 0;
  align-items: flex-end;
}
.fl-close-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.fl-close-col .fl-close-bar {
  flex: none;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--accent-soft-2);
  transform-origin: bottom center;
}
/* alturas por día (reemplazan los nth-child del E2, que ya no matchean) */
.fl-close-bars .fl-close-col:nth-child(1) .fl-close-bar { height: 30px; }
.fl-close-bars .fl-close-col:nth-child(2) .fl-close-bar { height: 42px; }
.fl-close-bars .fl-close-col:nth-child(3) .fl-close-bar { height: 34px; }
.fl-close-bars .fl-close-col:nth-child(4) .fl-close-bar { height: 18px; }
.fl-close-bars .fl-close-col:nth-child(5) .fl-close-bar { height: 8px; }
.fl-close-bars .fl-close-col:nth-child(6) .fl-close-bar { height: 24px; }
.fl-close-bars .fl-close-col:nth-child(7) .fl-close-bar { height: 52px; }
.fl-close-bars .fl-close-col .fl-close-bar.is-today { background: var(--accent); }
.fl-close-bar-day {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}
.fl-close-bar-day.is-today {
  color: var(--accent);
  font-weight: 600;
}

/* últimos cobros — fila de detalle en mono con check verde */
.fl-close-pays {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.fl-close-pay {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
}
.fl-close-pay-time {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.fl-close-pay-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fl-close-pay-amt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.fl-close-pay-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-close-pay-ok svg { flex-shrink: 0; }

/* etiquetas largo/corto — el corto solo aparece en pantallas angostas */
.fl-sc-short { display: none; }

/* mobile angosto: que el header del consultorio y los cobros respiren */
@media (max-width: 480px) {
  .fl-rsv-open { display: none; }
  .fl-sc-long { display: none; }
  .fl-sc-short { display: inline; }
  .fl-close-pay {
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }
}

/* ── ENHANCED · detalle animado DENTRO de ranges existentes ──
 * Mismo gate que el E2. Los cobros del cierre hacen fade-up en la MISMA
 * ventana de las barras (contain 70%–86%) — cero ranges nuevos. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fl-close-pay {
      animation-name: fl-sc-fade-up;
      animation-timing-function: var(--ease-emphasized-out);
      animation-fill-mode: both;
      animation-timeline: --fl-day;
      animation-range: contain 70% contain 86%;
    }
  }
}

/* viewports bajos: compactar igual que el E2 para que la escena entre entera */
@media (min-width: 768px) and (max-height: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fl-day .fl-cipher-card { gap: var(--space-2); }
    .fl-day .fl-cipher-sec-text {
      font-size: var(--fs-sm);
      line-height: 1.45;
    }
    .fl-day .fl-cipher-pt { gap: var(--space-1); }
    .fl-day .fl-close { gap: var(--space-3); }
    .fl-day .fl-close-week,
    .fl-day .fl-close-pays { padding-top: var(--space-2); }
    .fl-day .fl-rsv { padding-top: var(--space-3); }
    .fl-day .fl-rsv-card { gap: var(--space-3); }
  }
}

@keyframes fl-sc-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--motion-dist-sm));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* reduced-motion: el detalle nuevo también queda en su estado final */
@media (prefers-reduced-motion: reduce) {
  .fl-close-pay {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Folio · Landing — fragmento R3 del CTA sticky mobile.
   El orquestador anexa este archivo al final de public/folio.css y lo borra
   (lo consume components/landing/sticky-cta.tsx; clases fl-sticky-* propias,
   cero colisiones).

   Barra fixed-bottom SOLO <768px, glass como .fl-header (color-mix sobre
   --bg + blur 12px), borde superior --line-soft y padding inferior con
   env(safe-area-inset-bottom). Oculta vía visibility:hidden (sale del tab
   order y del árbol de accesibilidad); .is-show la sube con una transición
   corta — bajo prefers-reduced-motion aparece sin animación.
   z-index 40: debajo del header (50) y del CookieBanner (60) — además el
   island no la muestra hasta que el consent de cookies está resuelto.
   ════════════════════════════════════════════════════════════════════════ */

.fl-sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-moderate) ease,
    opacity var(--dur-moderate) ease,
    visibility 0s linear var(--dur-moderate);
}
.fl-sticky-cta.is-show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--dur-moderate) ease,
    opacity var(--dur-moderate) ease,
    visibility 0s;
}

.fl-sticky-cta-btn {
  flex: 1;
  justify-content: center;
  font-size: var(--fs-body);
  padding: 10px 16px;
}

.fl-sticky-cta-note {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .fl-sticky-cta,
  .fl-sticky-cta.is-show {
    transition: none;
  }
}

/* Tablet/desktop: la barra no existe. */
@media (min-width: 768px) {
  .fl-sticky-cta {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento R1 — Craft visual (atmósfera, transiciones, micro-UX)
 * El orquestador anexa este archivo AL FINAL de public/folio.css y lo borra.
 * Solo tokens var() / color-mix sobre tokens; cero hex nuevo; todo .fl-*.
 *
 * Bloques:
 *   1. Atmósfera del hero — glow radial accent detrás del mockup + trama de
 *      puntos finísima que se desvanece (mask radial). CSS puro, ambos temas.
 *   2. Transición a la bóveda — fog gradient de 112px en la entrada Y la
 *      salida de .fl-vault. La bóveda redeclara los tokens dark adentro, así
 *      que el --bg claro de la página entra vía la custom property puente
 *      --fl-page-bg (se computa en .fl-root, donde --bg aún es el de la
 *      página, y se hereda ya resuelta). En dark real los pseudos se apagan
 *      (content: none) y se restaura el borde fino original.
 *   3. Microinteracciones — header que se eleva al scrollear (scroll()),
 *      subrayado animado del nav, CTA primario con lift + sombra cálida,
 *      borde que se enciende en el bento, hover del FAQ.
 *   4. Scroll cue del hero — pill con borde + fade out scroll-driven.
 *   5. Ritmo vertical — hero más alto en el viewport (el cue entra en el
 *      fold) y FAQ pegado a su zona (pricing).
 *   6. Reduced motion — anula TODO lo nuevo.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1 · Atmósfera del hero ────────────────────────────────────────────── */

/* Puente: --bg de la PÁGINA, resuelto fuera de .fl-vault (ver bloque 2). */
.fl-root {
  --fl-page-bg: var(--bg);
}

/* Trama de puntos 1px sobre la cabecera del hero — se desvanece hacia abajo
   y hacia los lados con una mask radial (sin costura en los bordes de la
   caja). Color derivado de --ink-3: se adapta solo a ambos temas y queda
   muy por debajo del umbral de contraste del texto. */
.fl-hero {
  position: relative;
  isolation: isolate;
}
.fl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    color-mix(in srgb, var(--ink-3) 24%, transparent) 1px,
    transparent 1.4px
  );
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 56% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(120% 56% at 50% 0%, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Glow radial desaturado detrás del mockup. Derecha en 0 para no generar
   scroll horizontal (overflow a la izquierda/abajo no crea scrollbar).
   closest-side: el gradiente muere dentro de la caja, sin corte visible. */
.fl-hero-visual::before {
  content: "";
  position: absolute;
  inset: -16% 0 -12% -10%;
  z-index: -1;
  background: radial-gradient(
    closest-side at 55% 42%,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 100%
  );
  pointer-events: none;
}
/* En dark el mismo 9% casi no se lee sobre #14130F — un paso más cálido. */
[data-theme="dark"] .fl-hero-visual::before {
  background: radial-gradient(
    closest-side at 55% 42%,
    color-mix(in srgb, var(--accent) 14%, transparent),
    transparent 100%
  );
}

/* ── 2 · Transición cinematográfica hacia/desde la bóveda ─────────────────
   Fog de 112px con stops "easeados" (un linear-gradient de 2 stops deja un
   borde duro perceptible). En light: la página funde al dark de la bóveda;
   el borde fino original se vuelve transparente para no cortar el fog.
   En dark real: pseudos apagados + borde restaurado → idéntico a hoy. */
.fl-vault {
  position: relative;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.fl-vault::before,
.fl-vault::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 112px;
  pointer-events: none;
}
.fl-vault::before {
  top: -1px; /* cubre el área del borde (background-clip: border-box) */
  background: linear-gradient(
    to bottom,
    var(--fl-page-bg) 0%,
    color-mix(in srgb, var(--fl-page-bg) 70%, transparent) 32%,
    color-mix(in srgb, var(--fl-page-bg) 32%, transparent) 64%,
    transparent 100%
  );
}
.fl-vault::after {
  bottom: -1px;
  background: linear-gradient(
    to top,
    var(--fl-page-bg) 0%,
    color-mix(in srgb, var(--fl-page-bg) 70%, transparent) 32%,
    color-mix(in srgb, var(--fl-page-bg) 32%, transparent) 64%,
    transparent 100%
  );
}
[data-theme="dark"] .fl-vault {
  /* var(--line) acá resuelve al --line redeclarado dentro de .fl-vault —
     el mismo separador fino que hoy distingue bóveda y página en dark. */
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .fl-vault::before,
[data-theme="dark"] .fl-vault::after {
  content: none;
}

/* ── 3 · Microinteracciones ───────────────────────────────────────────── */

/* Header: al despegar del top gana fondo más sólido, sombra y borde --line.
   scroll-driven puro (sin JS); fallback = estado actual, intacto. */
@supports (animation-timeline: scroll()) {
  .fl-header {
    animation: fl-header-elevate linear both;
    animation-timeline: scroll(root);
    animation-range: 0 96px;
  }
}
@keyframes fl-header-elevate {
  to {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-1);
  }
}

/* Nav: subrayado accent que entra desde la izquierda (spring suave) y sale
   barriendo hacia la derecha — el clásico "wipe-through". */
.fl-nav-link {
  position: relative;
}
.fl-nav-link::after {
  content: "";
  position: absolute;
  left: 12px;  /* alineado al padding-inline del link */
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%; /* exit: se repliega hacia la derecha */
  transition: transform var(--dur-quick) var(--ease-standard);
}
.fl-nav-link:hover::after,
.fl-nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%; /* enter: crece desde la izquierda */
  transition: transform var(--dur-snappy) var(--spring-soft);
}
/* El outline genérico de .fl-root a:focus-visible fuerza --r-sm; estos dos
   son pills — que el anillo siga la forma real. */
.fl-nav-link:focus-visible,
.fl-hero-cue:focus-visible {
  border-radius: var(--r-pill);
}

/* CTA primario (header, hero, cierre): lift + sombra cálida tintada con
   accent (geometría de --shadow-2, color via color-mix), active 0.98
   instantáneo. Scope .fl-root: no toca los .fi-btn de la app. */
.fl-root .fi-btn-primary {
  transition:
    background var(--dur-quick) var(--ease-standard),
    color var(--dur-quick) var(--ease-standard),
    border-color var(--dur-quick) var(--ease-standard),
    transform var(--dur-quick) var(--ease-standard-out),
    box-shadow var(--dur-quick) var(--ease-standard-out);
}
.fl-root .fi-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--accent) 26%, transparent),
    0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent);
}
.fl-root .fi-btn-primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--dur-instant);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Bento: el lift existente se mantiene; el borde se "enciende" con accent
   y el label responde con un paso cálido. */
.fl-bento-cell:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.fl-bento-label {
  transition: color var(--dur-snappy) var(--ease-standard);
}
.fl-bento-cell:hover .fl-bento-label {
  color: var(--accent-2);
}

/* FAQ editorial: el hover responde con tinta cálida (sin fondo — el estilo
   sin cajas no lo necesita) y el chevron se enciende en accent. */
.fl-faq-q {
  transition: color var(--dur-quick) var(--ease-standard);
}
.fl-faq-q:hover {
  color: var(--accent-2);
}
.fl-faq-q:hover .fl-faq-chevron {
  color: var(--accent);
}

/* ── 4 · Scroll cue del hero ──────────────────────────────────────────────
   De link suelto a pill con borde — y se desvanece al scrollear (timeline
   scroll() del root, primeros ~360px). Fallback sin scroll(): pill estática
   (el chevron ya rebota). El hover empuja 1px hacia ABAJO: insinúa la
   dirección del scroll. */
.fl-hero-cue {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  transition:
    color var(--dur-quick) var(--ease-standard),
    border-color var(--dur-quick) var(--ease-standard),
    background var(--dur-quick) var(--ease-standard),
    transform var(--dur-quick) var(--ease-standard-out);
}
.fl-hero-cue:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface);
  transform: translateY(1px);
}
@supports (animation-timeline: scroll()) {
  .fl-hero-cue {
    animation: fl-cue-fade linear both;
    animation-timeline: scroll(root);
    animation-range: 40px 360px;
  }
}
@keyframes fl-cue-fade {
  to {
    opacity: 0;
    visibility: hidden; /* invisible ⇒ tampoco clickeable */
  }
}

/* ── 5 · Ritmo vertical ───────────────────────────────────────────────────
   El hero pierde aire arriba (el headline sube y el scroll cue entra en el
   fold a 1440×900); pricing y FAQ son la misma zona transaccional — el FAQ
   se acerca. La bóveda conserva su runway: el pin del día ya respira. */
.fl-hero {
  padding-block: clamp(56px, 9vh, 112px) var(--fl-section-gap);
}
#faq.fl-section {
  padding-block-start: calc(var(--fl-section-gap) * 0.45);
}

/* ── 6 · Reduced motion — anula TODO lo nuevo de este fragmento ────────── */
@media (prefers-reduced-motion: reduce) {
  .fl-header,
  .fl-hero-cue {
    animation: none !important;
  }
  .fl-nav-link::after,
  .fl-hero-cue,
  .fl-bento-label,
  .fl-faq-q,
  .fl-root .fi-btn-primary {
    transition: none !important;
  }
  .fl-root .fi-btn-primary:hover,
  .fl-root .fi-btn-primary:active,
  .fl-hero-cue:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento R3 — micro-interacciones premium (refinamiento 2)
 * Capa por encima de R1: sheen del CTA primario, barrido de los displays de
 * la bóveda (eco del clip-path de la escena de cifrado), hover de pricing,
 * settle del subrayado del hero y detalles de selección. Solo tokens var() /
 * color-mix (el blanco del sheen es overlay, mismo precedente que --shadow-hero);
 * todo scopeado .fl-*.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1 · Selección de texto — brass, la marca hasta en el detalle ───────── */
.fl-root ::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ── 2 · Sheen del CTA primario — una pasada de luz al hover ────────────── */
.fl-root .fi-btn-primary {
  position: relative;
  overflow: clip;
}
.fl-root .fi-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(255, 255, 255, 0.26) 50%,
    transparent 64%
  );
  transform: translateX(-130%);
  pointer-events: none;
}
.fl-root .fi-btn-primary:hover::before {
  transform: translateX(130%);
  transition: transform var(--dur-cinematic) var(--ease-standard);
}

/* ── 3 · Bóveda: los displays se revelan con el mismo barrido que el
       ciphertext de las 14:00 — coherencia narrativa. Fallback: estáticos. ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fl-vault-num {
      animation: fl-vault-wipe linear both;
      animation-timeline: view();
      animation-range: entry 50% entry 100%;
    }
  }
}
@keyframes fl-vault-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── 4 · Mock del hero: respira hacia arriba al hover (desktop) ─────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fl-mock {
    transition: transform var(--dur-cinematic) var(--ease-standard);
  }
  .fl-hero-visual:hover .fl-mock {
    transform: translateY(-4px);
  }
}

/* ── 5 · Pricing: lift + borde que se enciende (la featured, con halo) ──── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fl-price-card {
    transition:
      transform var(--dur-snappy) var(--ease-standard-out),
      box-shadow var(--dur-snappy) var(--ease-standard-out),
      border-color var(--dur-snappy) var(--ease-standard-out);
  }
  .fl-price-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: var(--shadow-2);
  }
  .fl-price-card--featured:hover {
    border-color: var(--accent);
    box-shadow:
      0 14px 36px color-mix(in srgb, var(--accent) 20%, transparent),
      var(--shadow-2);
  }
}

/* ── 6 · Subrayado del hero: «cifrada.» asienta su subrayado después de que
       la línea sube (backwards: arranca transparente durante el delay) ──── */
@media (prefers-reduced-motion: no-preference) {
  .fl-hero-accent {
    animation: fl-accent-settle var(--dur-cinematic) var(--ease-standard-out) 620ms backwards;
  }
}
@keyframes fl-accent-settle {
  from {
    text-decoration-color: transparent;
    text-underline-offset: 0.3em;
  }
}

/* ── 7 · Bento: la demo acompaña el hover de la celda con un paso ────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fl-bento-demo {
    transition: transform var(--dur-snappy) var(--ease-standard-out);
  }
  .fl-bento-cell:hover .fl-bento-demo {
    transform: translateY(-2px);
  }
}

/* ── 8 · Footer: transición de tinta en los links ───────────────────────── */
.fl-footer-link {
  transition: color var(--dur-quick) var(--ease-standard);
  text-underline-offset: 3px;
}

/* ── 9 · Reduced motion — anula lo de este fragmento que no está ya gateado ── */
@media (prefers-reduced-motion: reduce) {
  .fl-root .fi-btn-primary::before {
    content: none;
  }
  .fl-vault-num,
  .fl-hero-accent {
    animation: none !important;
  }
  .fl-footer-link {
    transition: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * LANDING · Fragmento R4 — material depth + paridad (Fase 1/2 del upgrade)
 * Grano de papel (técnica feTurbulence ya usada en las cards boutique),
 * bóveda como superficie ILUMINADA ESTÁTICA (sin sweep — la quietud es la
 * señal de confianza; el barrido de los numerales ya lo da fl-vault-wipe),
 * nav activo (scroll-spy) y piso mobile. Solo tokens var()/color-mix;
 * todo scopeado .fl-*; no toca la app.
 * ─────────────────────────────────────────────────────────────────────────── */

/* 1 · Grano de papel ~1.5% — el wrapper lleva la textura detrás del contenido;
   las secciones crema transparentes la dejan pasar. Apagado bajo
   prefers-reduced-transparency. */
.fl-root {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='flg'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.015 0'/></filter><rect width='100%25' height='100%25' filter='url(%23flg)'/></svg>");
}

/* 2 · Bóveda · superficie iluminada estática: luz brass anclada arriba +
   grano oscuro, en una sola declaración (dos capas). var(--accent) acá = brass
   dark. Los numerales gigantes quedan apenas "encendidos por la sala" (glow
   atmosférico bajo, NO neón). */
.fl-vault {
  background-image:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='flgd'><feTurbulence baseFrequency='0.8' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23flgd)'/></svg>");
}
.fl-vault-num {
  text-shadow: 0 0 24px color-mix(in oklab, var(--accent) 12%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .fl-root { background-image: none; }
  .fl-vault {
    background-image: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%);
  }
}

/* 3 · Nav activo (isla LandingScrollspy): subrayado persistente reusando la
   geometría ::after del hover. */
.fl-nav-link.is-active { color: var(--ink); }
.fl-nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* 4 · Piso mobile — target táctil 44px en los CTA del landing (sin tocar el
   .fi-btn compartido) + headline sub-480 que no quede apretado en Android. */
@media (max-width: 768px) {
  .fl-root .fi-btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .fl-root { --fl-display-xl: clamp(2.35rem, 9.5vw, 2.9rem); }
  .fl-hero-title { letter-spacing: -0.02em; line-height: 1.06; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOLIO ATELIER · /book/[slug] · skeleton de carga de horarios
   Placeholder shimmer del paso "Elegí un horario" del BookingWizard.
   Mismos tokens de superficie/línea; reduce-motion congela el shimmer.
   ════════════════════════════════════════════════════════════════════════ */

.bk-skel {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.bk-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--surface) 65%, transparent) 50%,
    transparent 100%
  );
  animation: bk-skel-shimmer 1.4s var(--ease-emphasized-out) infinite;
}
.bk-skel-label {
  width: 140px;
  height: 13px;
  margin-bottom: 10px;
}
.bk-skel-slot {
  height: 38px;
}
@keyframes bk-skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-skel::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   A11Y · WCAG AA camino de la demo (2026-06) — SOLO APPENDS.
   Estas reglas no alteran ningún estilo existente: aplican únicamente a
   clases nuevas (.a11y-*) sobre estados de foco que el baseline visual
   no captura.
   ════════════════════════════════════════════════════════════════════════ */

/* Headings de paso (booking wizard) que reciben foco programático al cambiar
   de vista (tabIndex={-1} + focus()). No son tab-reachable, así que el
   indicador de foco no es requerido — lo suprimimos para no ensuciar el
   flujo visual del paciente. */
.a11y-focus-heading:focus { outline: none; }

/* Contenedor raíz de modal (tabIndex={-1}): recibe foco solo como fallback
   del focus-trap cuando el modal todavía no tiene focusables (estado
   loading). Ver lib/use-modal-a11y.ts. */
.a11y-modal-root:focus { outline: none; }

/* ════════════════════════════════════════════════════════════════════════
   AGENDA MULTI-PROFESIONAL (modo clínica, 2026-06) — SOLO APPENDS.
   Clases nuevas: el selector de profesional (/hoy y /calendario) y la
   atribución por turno solo se montan en orgs con >1 colegiado — las orgs
   Solo jamás renderizan estos nodos y su baseline no cambia ni un píxel.
   ════════════════════════════════════════════════════════════════════════ */

/* Fila de chips "Todos | Dra. X | Dr. Y" (links SSR ?prof=). Mismo lenguaje
   visual que .cal-chip, en clase propia para no tocar estilos existentes. */
.fi-prof-filter {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.cal-nav-r .fi-prof-filter { margin: 0 6px 0 0; }
.fi-prof-chip {
  padding: 5px 10px; border-radius: var(--r-sm);
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--line-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.fi-prof-chip:hover { color: var(--ink); border-color: var(--ink-4); }
.fi-prof-chip.is-on {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}

/* Atribución en /hoy (TurnoRow/CerradoRow, dentro de .fi-t-meta): chip chico
   con el nombre corto del profesional. Mismo lenguaje que .fi-t-pv. */
.fi-t-prof {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .04em;
  color: var(--slate);
  padding: 1px 6px; border-radius: 99px;
  background: var(--slate-soft);
  border: 1px solid transparent;
}

/* Atribución en la grilla semanal (TurnoCardSemana, dentro de .cal-turno-meta):
   iniciales del profesional. Hereda el color de estado de la card. */
.cal-turno-prof {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 8.5px; font-weight: 600;
  letter-spacing: .05em;
  padding: 0 4px; border-radius: 99px;
  margin-left: 4px;
  background: var(--slate-soft); color: var(--slate);
  border: 1px solid transparent;
}

/* ─── M56 turno detalle ─────────────────────────────────────────────────────
   Botón clickeable del preview de turno en la vista mensual. El <li>
   .cal-mes-event conserva el chrome (fondo, padding, color); el botón es un
   contenedor flex transparente que ocupa todo el alto/ancho del <li> y abre el
   detalle del turno. Reset de defaults del <button> para no alterar el render.
   Usa solo tokens existentes. */
.cal-mes-event-btn {
  display: flex; align-items: baseline; gap: 5px;
  width: 100%; margin: 0; padding: 0;
  border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  overflow: hidden; white-space: nowrap;
}
.cal-mes-event-btn:hover { text-decoration: underline; }

/* ─── M57 · menú "⋮" de acciones secundarias del turno (Workstream 2) ────────
   Popover de Reagendar / No asistió / Cancelar en la fila de /hoy. Reemplaza
   los botones inline para mantener el baseline colapsado de la fila. Accesible
   a mano (no useModalA11y): trigger aria-haspopup + role="menu"/menuitem. Solo
   tokens existentes (sin hex off-theme). */
.fi-t-menu { position: relative; display: inline-flex; }
.fi-t-menu-trigger {
  /* Botón compacto cuadrado para el glifo ⋮ (mismo chrome que fi-btn-ghost). */
  padding: 6px 8px; line-height: 1; font-size: 16px;
}
.fi-t-menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 168px;
  display: flex; flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.fi-t-menu-item {
  display: flex; align-items: center;
  width: 100%; padding: 7px 10px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink);
  text-align: left; border-radius: var(--r-sm);
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fi-t-menu-item:hover { background: var(--surface-2); }
.fi-t-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.fi-t-menu-item--danger { color: var(--red); }
.fi-t-menu-item--danger:hover { background: var(--red-soft); }

/* ─── Empty-state "sin turno en curso" del tab Plan (Workstream 2) ───────────
   Aviso honesto cuando no hay turno activo: la herramienta queda en readOnly y
   este nota explica por qué + cómo habilitar el guardado. Estilo muted alineado
   con "Borrador local" del SOAP. Solo tokens existentes. */
.pc-sin-turno {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-3);
}
.pc-sin-turno svg { flex-shrink: 0; margin-top: 1px; color: var(--ink-4); }
.pc-sin-turno p { margin: 0; font-size: 12.5px; line-height: 1.5; }
/* Variante informativa (feedback jul-2026): la ficha ya no se bloquea sin
   turno en curso — esta nota avisa CONTRA QUÉ visita se guarda (turno de hoy
   por iniciar / edición retroactiva de la última visita). Mismo layout que el
   empty state, acento suave para leerse como aviso y no como bloqueo. */
.pc-sin-turno--info { background: var(--accent-soft); color: var(--ink-2); }
.pc-sin-turno--info svg { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
   M-quiropraxia v2 (Workstream 6) — ficha quiropráctica reestructurada.

   Ámbito: solo la Tool de quiropraxia (slot a ancho completo, sin SOAP).
   Reusa el look de pc-card / fi-eyebrow / fi-wi-field / pc-soap-textarea y SOLO
   tokens del tema (--accent, --ink-*, --surface*, --line*, --r-*, --green/
   amber/red, --ease-in) — sin hex off-theme.
   ════════════════════════════════════════════════════════════════════════════ */

.pc-quiro-tool {
  display: flex; flex-direction: column; gap: 22px;
  width: 100%;
}
.pc-quiro-muted { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; margin: 0; }

/* Input puntual de la galería (no hay clase genérica de input en el tema). */
.pc-quiro-input {
  flex: 1; min-width: 120px;
  padding: 8px 11px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: 'Geist', sans-serif; font-size: 13px; color: var(--ink);
  transition: border-color 120ms var(--ease-in), background 120ms var(--ease-in);
}
.pc-quiro-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pc-quiro-input::placeholder { color: var(--ink-4); }
.pc-quiro-input:disabled { opacity: .55; cursor: not-allowed; }

/* Pill genérica (toggle de vista, modos del leg check, controles de postura). */
.pc-quiro-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in), border-color 120ms var(--ease-in);
}
.pc-quiro-pill:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-4); }
.pc-quiro-pill.is-active {
  color: var(--surface); background: var(--accent); border-color: transparent;
}
.pc-quiro-pill:disabled { opacity: .5; cursor: not-allowed; }

.pc-quiro-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--ink-3); background: transparent; border: none; cursor: pointer;
  border-radius: var(--r-sm);
}
.pc-quiro-icon-btn:hover { color: var(--ink); background: var(--surface-2); }

/* ── Layout: columna vertebral a la izquierda, campos a la derecha ────────── */
.pc-quiro-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 22px; align-items: start;
}
/* Scroll independiente (feedback Lorenzo jul-2026): la columna del mapa queda
   sticky Y scrollea por dentro. Antes, en pantallas bajas (notebook 1366×768)
   el sticky sin overflow dejaba el sacro/cóccix inalcanzables: la columna era
   más alta que el viewport y el tope quedaba clavado arriba. Ahora el mapa
   scrollea solo y los campos de la derecha scrollean con la página — dos lados
   independientes, como la planilla. */
.pc-quiro-col-spine {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pc-quiro-col-fields { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ── Mapa vertebral (columna lateral) ─────────────────────────────────────── */
.pc-quiro-spine {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.pc-quiro-spine-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pc-quiro-vista-toggle { display: flex; gap: 6px; }
.pc-quiro-spine-illu {
  display: flex; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 10px 8px;
}
/* max-width 188 = 168 escalado al viewBox 170 (antes 152): los glifos miden lo
   mismo. Sin max-height: la ilustración rinde a tamaño completo y scrollea
   dentro de la columna sticky — con el cap de 460px, `meet` la letterboxeaba a
   ~66% y las vértebras quedaban diminutas (feedback jul-2026). */
.pc-quiro-svg { width: 100%; max-width: 188px; height: auto; }
/* Foco de teclado visible sobre la vértebra seleccionable (WCAG 2.4.7). */
.pc-quiro-svg [data-vert] { outline: none; }
.pc-quiro-svg [data-vert]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 3px;
}
.pc-quiro-spine-hint { text-align: center; padding: 2px 4px; }

/* Panel de la vértebra (técnica + listado), debajo de la ilustración. */
.pc-quiro-vert-panel {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.pc-quiro-vert-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: var(--ink);
}

/* ── Evaluación inicial (secciones apiladas) ──────────────────────────────── */
.pc-quiro-eval {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.pc-quiro-eval-head { margin-bottom: -4px; }
.pc-quiro-eval-section { display: flex; flex-direction: column; gap: 8px; }
.pc-quiro-eval-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Análisis postural ────────────────────────────────────────────────────── */
.pc-quiro-postura { display: flex; flex-direction: column; gap: 10px; }
.pc-quiro-postura-canvas { display: flex; flex-direction: column; gap: 8px; }
.pc-quiro-postura-svg {
  width: 100%; max-width: 280px; height: auto;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  align-self: center;
}
.pc-quiro-postura-tools { display: flex; gap: 8px; justify-content: center; }

/* ── Leg check ────────────────────────────────────────────────────────────── */
.pc-quiro-legcheck { display: flex; flex-direction: column; gap: 10px; }
.pc-quiro-legcheck-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Radiografías ─────────────────────────────────────────────────────────── */
.pc-quiro-radios { display: flex; flex-direction: column; gap: 12px; }
.pc-quiro-radios-head { display: flex; align-items: center; justify-content: space-between; }
.pc-quiro-radios-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
}
.pc-quiro-radio-item { display: flex; flex-direction: column; gap: 6px; }
.pc-quiro-radio-thumb {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pc-quiro-radio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-quiro-radio-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%;
  color: var(--ink-3); font-size: 12px;
}
.pc-quiro-radio-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pc-quiro-radio-meta b { color: var(--ink); }
.pc-quiro-radio-meta span { color: var(--ink-3); line-height: 1.4; }
.pc-quiro-radios-upload {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 4px;
}
.pc-quiro-file-label { position: relative; display: inline-flex; cursor: pointer; }
.pc-quiro-file-label input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer;
}
.pc-quiro-file-label input[type="file"]:disabled { cursor: not-allowed; }
.pc-quiro-radios-hint { flex-basis: 100%; }
.pc-quiro-radios-error { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--red); }

/* ── Control de visitas ───────────────────────────────────────────────────── */
.pc-quiro-visits {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.pc-quiro-visits-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-quiro-visits-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-quiro-visit-cell {
  padding: 6px 12px; font-size: 12px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color 120ms var(--ease-in), color 120ms var(--ease-in);
}
.pc-quiro-visit-cell:hover { border-color: var(--ink-4); color: var(--ink); }
.pc-quiro-visit-cell.is-active { color: var(--surface); background: var(--accent); border-color: transparent; }

/* ── Banner de snapshot (visita pasada en solo lectura) ───────────────────── */
.pc-quiro-snapshot-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 12.5px;
}

/* Responsive: en angosto, la columna vertebral pasa arriba de los campos.
   Sin sticky ni scroll interno (la página scrollea normal) y el mapa se
   compacta para no ocupar toda la pantalla del teléfono. */
@media (max-width: 860px) {
  .pc-quiro-grid { grid-template-columns: 1fr; }
  .pc-quiro-col-spine { position: static; max-height: none; overflow-y: visible; }
  .pc-quiro-svg { max-height: 380px; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOOK LANDING · /book/[slug] · landing médico-first (.bl-*) — SOLO APPENDS.
   El acento del consultorio se inyecta inline (--accent/--accent-2/
   --accent-soft) sobre .bl-root; estas reglas solo consumen tokens, así que
   se adaptan a dark mode ([data-theme]) y al acento por org sin reglas extra.
   El wizard (.bk-*) vive intacto dentro de #reservar.
   ════════════════════════════════════════════════════════════════════════ */

.bl-root {
  background: var(--bg);
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* Header glass — marca del consultorio (Folio NO aparece acá). */
.bl-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px clamp(16px, 4vw, 28px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.bl-header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bl-header-logo { border-radius: var(--r-sm); object-fit: cover; display: block; }
.bl-header-name {
  font-weight: 500;
  font-size: var(--fs-md, 15px);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-header-cta { flex-shrink: 0; cursor: pointer; text-decoration: none; }

.bl-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* Hero médico-first */
.bl-hero {
  display: flex;
  align-items: center;
  gap: clamp(20px, 5vw, 48px);
  padding: clamp(32px, 6vw, 64px) 0 clamp(28px, 5vw, 48px);
}
.bl-hero-text { flex: 1 1 0; min-width: 0; }
.bl-hero-figure { flex-shrink: 0; }
.bl-hero-logo {
  width: 160px;
  height: 160px;
  border-radius: var(--r-xl);
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: block;
}
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bl-eyebrow-motif { display: block; flex-shrink: 0; }
.bl-hero-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 8px;
}
.bl-hero-sub { font-size: var(--fs-md, 15px); color: var(--ink-2); margin: 0 0 14px; }
.bl-hero-value {
  font-size: var(--fs-lg, 18px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 0 22px;
}
.bl-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bl-btn-lg {
  padding: 11px 22px;
  font-size: var(--fs-md, 15px);
  cursor: pointer;
  text-decoration: none;
}
.bl-confirm-note {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm, 12.5px);
  color: var(--green);
}
.bl-trust-micro {
  margin: 16px 0 0;
  font-size: var(--fs-xs, 11px);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Matrícula del hero (orgs solo). */
.bl-hero-matricula {
  display: inline-block;
  margin: 0 0 14px;
  font-size: var(--fs-xs, 11px);
  color: var(--accent-2);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: var(--r-pill, 99px);
  letter-spacing: 0.02em;
}

/* Nuestro equipo (multi-prof) — grid con foto/matrícula/bio (M62). */
.bl-team { padding: clamp(20px, 4vw, 36px) 0; }
.bl-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.bl-team-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.bl-team-info { min-width: 0; }
.bl-team-name { font-weight: 500; font-size: var(--fs-md, 15px); color: var(--ink); margin: 0; }
.bl-team-matricula { font-size: var(--fs-xs, 11px); color: var(--ink-3); margin: 2px 0 0; letter-spacing: 0.02em; }
.bl-team-bio {
  font-size: var(--fs-sm, 12.5px);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Reserva enfocada — el wizard intacto, en columna centrada. */
.bl-book { padding: clamp(28px, 5vw, 48px) 0; scroll-margin-top: 76px; }
.bl-book-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 24px;
}
.bl-book-frame { max-width: 720px; margin: 0 auto; }

/* Powered by Folio — sello sutil + adquisición suave. */
.bl-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 20px 40px;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.bl-powered-mark { display: inline-flex; }
.bl-powered-text { font-size: var(--fs-sm, 12.5px); color: var(--ink-3); }
.bl-powered-text b { color: var(--ink); font-weight: 500; }
.bl-powered-cta {
  font-size: var(--fs-sm, 12.5px);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.bl-powered-cta:hover { color: var(--accent-2); text-decoration: underline; }

/* Entrada del hero (gateada por reduce-motion). */
.bl-hero-text {
  animation: bl-rise 640ms var(--ease-emphasized-out, cubic-bezier(0, 0, .2, 1)) both;
}
.bl-hero-figure {
  animation: bl-rise 640ms var(--ease-emphasized-out, cubic-bezier(0, 0, .2, 1)) 80ms both;
}
@keyframes bl-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive — hero apilado, figura arriba. */
@media (max-width: 760px) {
  .bl-hero { flex-direction: column-reverse; align-items: flex-start; }
  .bl-hero-figure { align-self: center; }
  .bl-hero-logo { width: 120px; height: 120px; }
  .bl-header-cta { padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-hero-text,
  .bl-hero-figure { animation: none; }
}

/* ── Book Landing · Slice 2 · secciones sobre/servicios/seguridad/ubicación ── */

.bl-section-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--ink);
  margin: 0 0 16px;
}

/* Bloques de sección con respiro vertical consistente. */
.bl-about,
.bl-services,
.bl-trust,
.bl-location { padding: clamp(20px, 4vw, 36px) 0; }

.bl-about-text {
  font-size: var(--fs-md, 15px);
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0;
  white-space: pre-line;
}

/* Servicios — vitrina */
.bl-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.bl-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.bl-service-info { display: flex; flex-direction: column; gap: 2px; }
.bl-service-name { font-weight: 500; font-size: var(--fs-md, 15px); color: var(--ink); }
.bl-service-dur { font-size: var(--fs-sm, 12.5px); color: var(--ink-3); }
.bl-service-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bl-service-price { font-size: var(--fs-body, 14px); color: var(--ink); }
.bl-service-cta {
  font-size: var(--fs-sm, 12.5px);
  font-weight: 500;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.bl-service-cta:hover { background: var(--accent-soft); }

/* Seguridad / confianza — panel oscuro premium en AMBOS modos (técnica
   .fl-vault): redeclara los tokens [data-theme="dark"] localmente (cero hex
   inventado). Sobreescribe el acento del consultorio a propósito: la capa de
   seguridad es de Folio, no del consultorio. */
.bl-trust {
  --bg:          #14130F;
  --surface:     #1B1A14;
  --surface-2:   #232017;
  --line:        #2F2B1F;
  --line-soft:   #252118;
  --ink:         #E8E2D2;
  --ink-2:       #B5AE99;
  --ink-3:       #847E69;
  --accent:      #C29553;
  --accent-soft: rgba(194, 149, 83, .14);
  --shadow-2:    0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .25);

  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  margin: clamp(16px, 3vw, 24px) 0;
}
.bl-trust-lead {
  font-size: var(--fs-md, 15px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 20px;
}
.bl-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.bl-trust-item { display: flex; align-items: flex-start; gap: 12px; }
.bl-trust-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.bl-trust-item-title { font-weight: 500; font-size: var(--fs-body, 14px); color: var(--ink); margin: 0 0 3px; }
.bl-trust-item-text { font-size: var(--fs-sm, 12.5px); color: var(--ink-3); line-height: 1.5; margin: 0; }

/* Ubicación / contacto */
.bl-location-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bl-location-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md, 15px);
  color: var(--ink-2);
}
.bl-location-row svg { color: var(--ink-3); flex-shrink: 0; }
.bl-location-row a { color: var(--accent-2); text-decoration: none; }
.bl-location-row a:hover { text-decoration: underline; }

/* Barra sticky de reserva (solo mobile). */
.bl-sticky-sentinel { height: 1px; width: 100%; }
.bl-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.bl-sticky-btn { width: 100%; justify-content: center; cursor: pointer; text-decoration: none; }

@media (max-width: 760px) {
  .bl-sticky-cta.is-shown { display: block; }
  /* Espacio para que la barra no tape el powered-by. */
  .bl-powered { padding-bottom: 84px; }
}

/* ════════════════════════════════════════════════════════════════════════
   DIRECTORIO PÚBLICO · /profesionales (.dir-*) — Fase 3, SOLO APPENDS.
   Destino de descubrimiento de Folio (marca Folio en header/footer). Solo
   tokens; las cards reciben el acento de cada org inline (--accent).
   ════════════════════════════════════════════════════════════════════════ */

.dir-root {
  background: var(--bg);
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.dir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.dir-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-lg, 18px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.dir-header-cta {
  font-size: var(--fs-sm, 12.5px);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.dir-header-cta:hover { color: var(--accent-2); text-decoration: underline; }

.dir-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 72px);
}
.dir-intro { margin-bottom: 24px; }
.dir-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
}
.dir-subtitle { font-size: var(--fs-lg, 18px); color: var(--ink-2); margin: 0; max-width: 52ch; }

.dir-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.dir-chip {
  font-size: var(--fs-sm, 12.5px);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 99px);
  padding: 7px 15px;
  text-decoration: none;
}
.dir-chip:hover { border-color: var(--accent); color: var(--ink); }
.dir-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.dir-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-quick, 140ms), transform var(--dur-quick, 140ms);
}
.dir-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dir-card-head { display: flex; align-items: center; gap: 12px; }
.dir-card-logo { border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; }
.dir-card-id { min-width: 0; }
.dir-card-name { font-weight: 500; font-size: var(--fs-md, 15px); color: var(--ink); margin: 0; }
.dir-card-esp {
  display: inline-block;
  font-size: var(--fs-xs, 11px);
  color: var(--accent-2);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--r-pill, 99px);
  margin-top: 3px;
}
.dir-card-lugar { font-size: var(--fs-sm, 12.5px); color: var(--ink-3); margin: 0; }
.dir-card-bio {
  font-size: var(--fs-sm, 12.5px);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card-cta { font-size: var(--fs-sm, 12.5px); font-weight: 500; color: var(--accent); margin-top: 2px; }

.dir-empty {
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 20px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
}
.dir-empty-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-xl, 22px);
  color: var(--ink);
  margin: 0 0 8px;
}
.dir-empty-sub { font-size: var(--fs-md, 15px); color: var(--ink-2); margin: 0 0 20px; }
.dir-empty-cta { cursor: pointer; text-decoration: none; }

.dir-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 28px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm, 12.5px);
  color: var(--ink-3);
}
.dir-footer-mark { display: inline-flex; }

/* ═════════════ CONSENTIMIENTOS (ficha · tab Información · Ley 26.529) ═════════════ */
/* Card de consentimientos + modal de firma en canvas. Solo tokens :root
   existentes; el scrim replica la receta de .fi-wi-backdrop (ink 27,24,18). */

.pc-consent-card { grid-column: 1 / -1; }

/* X7 · agrupador de acciones del header de la card (Imprimir · Registrar). */
.pc-consent-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.pc-consent-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}

.pc-consent-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.pc-consent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pc-consent-row:last-child { border-bottom: none; padding-bottom: 4px; }
.pc-consent-row:first-child { padding-top: 4px; }

.pc-consent-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-consent-row-title { font-size: 13.5px; color: var(--ink); }
.pc-consent-row-title b { font-weight: 500; }
.pc-consent-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-sm, 12.5px);
}
.pc-consent-row-motivo { margin: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.5; }
.pc-consent-row-actions {
  display: flex; align-items: flex-start; gap: 14px;
  padding-top: 2px;
  white-space: nowrap;
}
.pc-consent-revocar:hover { color: var(--red); border-color: var(--red); }

.pc-consent-pill {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.pc-consent-pill--vigente { color: var(--green); background: var(--green-soft); }
.pc-consent-pill--revocado { color: var(--red); background: var(--red-soft); }

.pc-consent-foot { margin: 0; font-size: var(--fs-xs, 11px); }
.pc-consent-error { margin: 0; color: var(--red); font-size: var(--fs-sm, 12.5px); }
.pc-consent-label {
  display: block; font-size: var(--fs-sm, 12.5px); color: var(--ink-3); margin-bottom: 4px;
}

.pc-consent-revoke-box {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px;
  margin-top: 6px;
}
.pc-consent-motivo {
  width: 100%;
  padding: 8px 10px;
  font: inherit; font-size: var(--fs-body, 14px);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  resize: vertical;
}
.pc-consent-revoke-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── Modal de firma ─── */

.pc-consent-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 24, 18, 0.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
}
[data-theme="dark"] .pc-consent-overlay { background: rgba(0, 0, 0, 0.55); }

.pc-consent-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.pc-consent-modal-head { display: flex; flex-direction: column; gap: 4px; }
.pc-consent-modal-head h2 { margin: 0; font-size: var(--fs-lg, 18px); font-weight: 550; }
.pc-consent-modal-sub { margin: 0; font-size: var(--fs-sm, 12.5px); color: var(--ink-3); line-height: 1.5; }

.pc-consent-tipos {
  border: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pc-consent-tipo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-quick, 140ms), background var(--dur-quick, 140ms);
}
.pc-consent-tipo:hover { border-color: var(--accent); }
.pc-consent-tipo.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.pc-consent-tipo input { grid-row: 1 / span 2; accent-color: var(--accent); }
.pc-consent-tipo-titulo { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.pc-consent-tipo-meta { grid-column: 2; font-size: var(--fs-xs, 11px); color: var(--ink-3); }

.pc-consent-legal {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px 16px;
  font-size: var(--fs-sm, 12.5px);
  line-height: 1.6;
  color: var(--ink-2);
}
.pc-consent-legal p { margin: 0 0 8px; }
.pc-consent-legal ul, .pc-consent-legal ol { margin: 0 0 8px; padding-left: 18px; }
.pc-consent-legal li { margin-bottom: 3px; }
.pc-consent-legal-h1 {
  margin: 0 0 10px; font-size: var(--fs-body, 14px); font-weight: 600; color: var(--ink);
}
.pc-consent-legal-h2 {
  margin: 12px 0 6px; font-size: var(--fs-sm, 12.5px); font-weight: 600;
  color: var(--ink); text-transform: none;
}
.pc-consent-legal-hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.pc-consent-legal-check { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.pc-consent-legal-checkbox {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 1px solid var(--ink-4); border-radius: 3px; background: var(--surface);
}

.pc-consent-firmante { display: block; }
.pc-consent-select {
  width: 100%;
  padding: 8px 10px;
  font: inherit; font-size: var(--fs-body, 14px);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.pc-consent-aviso {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--fs-sm, 12.5px); line-height: 1.5;
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: var(--r-md);
}

.pc-consent-canvas-frame {
  position: relative;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.pc-consent-canvas {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
}
.pc-consent-canvas-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md, 15px);
  color: var(--ink-4);
  pointer-events: none;
  user-select: none;
}
.pc-consent-canvas-tools { display: flex; gap: 8px; }

.pc-consent-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 640px) {
  .pc-consent-row { grid-template-columns: 1fr; }
  .pc-consent-row-actions { padding-top: 6px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   X4 · Matriz de permisos rol × capacidad (vista, /configuracion Equipo).
   Solo-lectura, derivada de capabilitiesFor. Tokens brass/cream, sin hex nuevo.
   ───────────────────────────────────────────────────────────────────────── */

/* Leyenda: rol + una línea de alcance, en tarjetas compactas. */
.pm-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.pm-legend-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.pm-legend-role { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pm-legend-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* Contenedor con scroll horizontal propio: la tabla nunca desborda el body. */
.pm-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

/* Encabezados de columna: capacidad (izquierda, pegada) + roles. */
.pm-table thead th {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  vertical-align: bottom;
}
.pm-th-cap {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 220px;
}
.pm-th-role {
  text-align: center;
  min-width: 92px;
  white-space: normal;
  line-height: 1.3;
}

/* Fila de grupo: banda de sección (Datos clínicos, Finanzas, …). */
.pm-group-th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  left: 0;
}

/* Celda de capacidad (primera columna, pegada al hacer scroll). */
.pm-th-cap-cell {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
  vertical-align: top;
}
.pm-cap-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.pm-cap-detalle { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }

.pm-row:hover .pm-th-cap-cell,
.pm-row:hover .pm-cell { background: var(--bg); }

/* Celda de valor: check (concedido) o guion tenue (no). */
.pm-cell {
  text-align: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  vertical-align: middle;
}
.pm-yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 99px;
  color: var(--green);
  background: var(--green-soft);
}
.pm-no {
  color: var(--ink-4, var(--ink-3));
  font-size: 14px;
  user-select: none;
}

.pm-foot {
  margin: 0;
  padding: 14px 24px 18px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .pm-legend { padding: 14px; }
  .pm-foot { padding: 12px 16px 16px; }
}

/* ═════════════ SKELETONS · loading.tsx (PR X6) ═════════════
 * Bloques de carga con shimmer sutil. Construidos sobre `--surface-*` para
 * adaptarse a light/dark sin reglas duplicadas (los tokens se redefinen en
 * [data-theme="dark"]). El barrido usa un gradiente que corre sobre la base
 * `--surface-2`; el highlight es `--surface-3` (un paso más claro en light,
 * un paso más cálido en dark). Puramente decorativo → los elementos son
 * `aria-hidden` desde el componente `<Skeleton />`.
 * ─────────────────────────────────────────────────────────── */
.fi-skeleton {
  display: block;
  width: 100%;
  height: 1em;
  border-radius: var(--r-sm);
  background-color: var(--surface-2);
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    var(--surface-3) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: fi-skeleton-shimmer 1.4s var(--ease-standard) infinite;
  /* Nunca es interactivo ni seleccionable. */
  pointer-events: none;
  user-select: none;
}
.fi-skeleton-text { border-radius: var(--r-sm); }
.fi-skeleton-block { border-radius: var(--r-md); }
.fi-skeleton-circle { border-radius: 50%; }

@keyframes fi-skeleton-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* Contenedor de filas (listas/tablas en carga). Espeja el ritmo vertical de
 * las tablas densas (turnos, transacciones, directorio) sin cargar datos. */
.fi-skeleton-list {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.fi-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.fi-skeleton-row:last-child { border-bottom: none; }
.fi-skeleton-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Reduced-motion: el shimmer es una animación decorativa infinita → OFF
 * (política Folio v2, punto 2). El bloque permanece visible con su base
 * `--surface-2` para que el layout de carga siga leyéndose. */
@media (prefers-reduced-motion: reduce) {
  .fi-skeleton { animation: none !important; background-image: none; }
}

/* X7 · `.print-only` existe en el DOM siempre pero SOLO se ve en papel: en
 * pantalla queda oculto para no ensuciar la ficha con el membrete. Regla base
 * (fuera de @media print); el bloque print de abajo lo revela. */
.print-only { display: none !important; }

/* ═════════════ PRINT · documentos clínicos (PR X7) ═════════════
 * Estilos @media print para imprimir/guardar-como-PDF documentos clínicos
 * desde el navegador: la ficha del paciente y los consentimientos. La
 * arquitectura de impresión es OPT-IN, no opt-out, por una razón de PHI: la
 * app puede tener otras rutas (agenda, finanzas) con datos de MÚLTIPLES
 * pacientes en pantalla. Imprimir "lo que sea que esté visible" filtraría PHI
 * de terceros a un papel suelto. Por eso:
 *
 *   1. Por defecto, en print NO se imprime NADA del cuerpo de la app
 *      (`.fi-main > * { display: none }`). El papel sale en blanco salvo que
 *      la página se marque explícitamente como imprimible.
 *   2. Una pantalla imprimible pone `data-printable` en su contenedor raíz
 *      (`.fi-content[data-printable]`). Hoy sólo la ficha de UN paciente lo
 *      hace — la ruta /pacientes/[id] renderiza un único paciente, así que no
 *      hay PHI cruzada estructuralmente posible.
 *   3. Dentro de lo imprimible, el chrome (sidebar, nav, tabs, botones,
 *      badges, modales) se oculta; el contenido se refluye a A4 vertical.
 *   4. Cualquier elemento marcado `.no-print` desaparece; `.print-only`
 *      aparece SÓLO en papel (encabezados membretados que identifican el
 *      documento — sin ellos una hoja suelta sería PHI anónima).
 *
 * Se fuerzan los tokens claros aunque el usuario tenga dark-mode activo: la
 * tinta oscura sobre papel es derroche de tóner y un documento legal debe
 * verse como documento, no como captura de pantalla nocturna.
 * ─────────────────────────────────────────────────────────── */
@media print {
  /* Página A4 con márgenes clínicos (membrete arriba, aire a los lados). */
  @page {
    size: A4 portrait;
    margin: 16mm 14mm 18mm;
  }

  /* Tokens claros forzados: dark-mode nunca llega al papel. Redefinimos sobre
   * la raíz (donde `data-theme` vive, en <html>) para ganarle a `[data-theme]`. */
  :root,
  html[data-theme="dark"] {
    --bg:        #FFFFFF;
    --surface:   #FFFFFF;
    --surface-2: #FFFFFF;
    --surface-3: #F4F1EA;
    --line:      #C9C2AE;
    --line-soft: #DDD5C0;
    --ink:       #111111;
    --ink-2:     #2A271E;
    --ink-3:     #4A4636;
    --ink-4:     #6B6553;
    --accent:    #6E5119;
    --accent-2:  #5A4214;
    --accent-soft:   #EFE6CE;
    --accent-soft-2: #E4D6AE;
    --green:     #235730;
    --red:       #7E2E21;
    --amber:     #8F6A22;
  }

  html,
  body,
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #111111 !important;
    /* Fuerza la impresión de fondos/colores de acento (membrete, pills). */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* El shell deja de ser grilla: una sola columna a ancho de página. */
  .fi-app {
    display: block !important;
    min-height: 0 !important;
  }

  /* Chrome que nunca va al papel. El sidebar es sticky/100vh: fuera. Banners
   * de verificación, skeletons de carga y modales tampoco. */
  .fi-sidebar,
  .fi-nav,
  .pc-tabs,
  .fi-email-verify-banner,
  .fi-skeleton,
  .fi-skeleton-list,
  .a11y-modal-root,
  .fi-ficha-backdrop,
  .no-print {
    display: none !important;
  }

  .fi-main {
    display: block !important;
  }

  /* Por defecto, el cuerpo de la app NO se imprime (evita fuga de PHI de otras
   * rutas). Sólo el contenedor marcado imprimible reaparece. */
  .fi-main > * {
    display: none !important;
  }
  .fi-main > .fi-content[data-printable],
  .fi-main > [data-printable] {
    display: block !important;
  }

  /* El contenedor imprimible ocupa toda la caja de página, sin max-width ni
   * padding de pantalla (los márgenes los pone @page). */
  .fi-content[data-printable],
  [data-printable] {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Dentro de lo imprimible: fuera todo control interactivo. Los botones de
   * acción, los "Ver firma"/"Revocar"/"Editar", los badges de guardado y los
   * indicadores de foco no tienen sentido en papel. */
  [data-printable] .fi-btn,
  [data-printable] .pc-link,
  [data-printable] .pc-actions,
  [data-printable] .pc-back,
  [data-printable] .pc-card-head .pc-link,
  [data-printable] .fm-save,
  [data-printable] .pc-consent-row-actions,
  [data-printable] .pc-consent-revoke-box,
  [data-printable] button,
  [data-printable] .no-print {
    display: none !important;
  }

  /* Encabezado membretado sólo-papel: identifica el documento (org · paciente ·
   * fecha) para que una hoja suelta no sea PHI anónima. La regla base lo oculta
   * en pantalla (`.print-only { display:none !important }`); acá lo revelamos
   * dentro del contenedor imprimible con mayor especificidad. */
  [data-printable] .print-only,
  .print-only.fi-print-header {
    display: block !important;
  }
  .fi-print-header {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1.5px solid var(--accent);
    page-break-after: avoid;
    break-after: avoid;
  }
  .fi-print-header-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .fi-print-header-brand b {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .fi-print-header-meta {
    font-size: 10.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .fi-print-header-doc {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-2);
  }
  .fi-print-header-doc b { color: var(--ink); }

  /* Tarjetas como bloques de papel: borde fino, sin sombra ni radios grandes,
   * y sin cortarlas a mitad de página cuando se puede evitar. */
  [data-printable] .pc-card,
  [data-printable] .pc-spine-wrap {
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    padding: 14px 16px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Reflow de grillas de la ficha a una sola columna (el papel es angosto). */
  [data-printable] .pc-info-grid,
  [data-printable] .pc-plan-grid,
  [data-printable] .pc-bottom-grid {
    display: block !important;
  }
  [data-printable] .pc-info-grid > *,
  [data-printable] .pc-bottom-grid > * {
    margin-bottom: 12px;
  }

  /* Los textareas del SOAP se imprimen como texto plano, no como campos. */
  [data-printable] textarea,
  [data-printable] .pc-soap-textarea {
    border: none !important;
    padding: 0 !important;
    resize: none !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-family: inherit;
    white-space: pre-wrap;
    overflow: visible !important;
    height: auto !important;
  }

  /* Tipografía base de documento: negro nítido, sin arrastrar títulos solos. */
  [data-printable] h1,
  [data-printable] h2,
  [data-printable] h3,
  [data-printable] .fi-eyebrow,
  [data-printable] b {
    color: var(--ink) !important;
  }
  [data-printable] h1,
  [data-printable] h2,
  [data-printable] h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Los links imprimibles no muestran su URL (los internos no sirven en papel). */
  [data-printable] a[href] {
    color: var(--ink) !important;
    text-decoration: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portal del paciente (Fase 3 · P3) — shell liviano sobre tokens brass/cream.
   Reusa .au-* de la pantalla de auth para el login; estas clases visten la
   landing (/portal) y el panel de vinculación. Sin nuevos hex off-theme.
   ═══════════════════════════════════════════════════════════════════════════ */
.pt-app {
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
}
.pt-main h1 { font-size: var(--fs-2xl, 1.6rem); letter-spacing: -0.01em; }
.pt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
}
.pt-org-list .pt-card { transition: border-color .15s ease, box-shadow .15s ease; }
.pt-org-list .pt-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.pt-empty {
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Importador CSV de pacientes (/configuracion/importar-pacientes) — wizard de
   3 pasos sobre tokens brass/cream. Prefijo imp-*. Sin hex off-theme.
   ═══════════════════════════════════════════════════════════════════════════ */
.imp-wizard { display: flex; flex-direction: column; gap: 16px; }

.imp-steps {
  display: flex; gap: 18px; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-size: 12.5px; color: var(--ink-3);
}
.imp-step { display: flex; align-items: center; gap: 7px; }
.imp-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600;
}
.imp-step.is-active { color: var(--ink); font-weight: 600; }
.imp-step.is-active .imp-step-num {
  background: var(--accent); border-color: var(--accent); color: var(--surface);
}

.imp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.imp-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 40px 24px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.imp-drop:hover, .imp-drop:focus-within { border-color: var(--accent); }
.imp-drop input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.imp-drop-glyph {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 4px;
}
.imp-drop-title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.imp-drop-sub { font-size: 12.5px; color: var(--ink-3); max-width: 420px; line-height: 1.55; }
.imp-drop-btn { margin-top: 8px; pointer-events: none; }

.imp-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }

.imp-alert {
  margin: 0; padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.5;
}
.imp-alert--err { background: var(--red-soft); color: var(--red); }

.imp-file-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.imp-file-name { font-weight: 600; color: var(--ink); }
.imp-file-row .fi-btn { margin-left: auto; }

.imp-h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 4px 0 0; letter-spacing: -.01em; }
.imp-sub { font-size: 12.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }

.imp-map-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.imp-map-item { display: flex; flex-direction: column; gap: 5px; }
.imp-map-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.imp-req { color: var(--red); }

.imp-preview-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 99px;
}
.imp-stat--ok { background: var(--green-soft); color: var(--green); }
.imp-stat--warn { background: var(--amber-soft); color: var(--amber); }
.imp-stat--err { background: var(--red-soft); color: var(--red); }

.imp-preview { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.imp-preview table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-preview th {
  text-align: left; padding: 8px 12px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.imp-preview td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.imp-preview tr:last-child td { border-bottom: 0; }
.imp-preview tr.is-err td { background: var(--red-soft); }
.imp-motivo { color: var(--ink-3); font-style: italic; }
.imp-preview-more { font-size: 12px; padding: 8px 12px; margin: 0; }

.imp-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.imp-badge--ok { background: var(--green-soft); color: var(--green); }
.imp-badge--err { background: var(--red-soft); color: var(--red); }

.imp-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--line);
}

.imp-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.imp-result-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
}
.imp-result-num { font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.imp-result-lbl { font-size: 12px; color: var(--ink-3); text-align: center; }
.imp-result-card--ok .imp-result-num { color: var(--green); }
.imp-result-card--warn .imp-result-num { color: var(--amber); }
.imp-result-card--err .imp-result-num { color: var(--red); }

.imp-err-list ul {
  margin: 8px 0; padding: 0 0 0 2px; list-style: none;
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--ink-2);
}

@media (max-width: 640px) {
  .imp-result-grid { grid-template-columns: 1fr; }
  .imp-steps { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Primeros pasos (/hoy) — checklist de activación post-onboarding.
   Card fi-* arriba del KpiStrip, visible solo mientras la org es joven
   (lib/primeros-pasos.ts). Tokens brass/cream; sin hex nuevos.
   ═══════════════════════════════════════════════════════════════════════════ */
.fi-pp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
  overflow: hidden;
}
.fi-pp-head {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px;
}
.fi-pp-head-txt { min-width: 0; }
.fi-pp-head-txt h2 {
  margin: 3px 0 0;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.2;
}
.fi-pp-progress {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.fi-pp-count {
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3); white-space: nowrap;
}
.fi-pp-bar {
  width: 96px; height: 3px; border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}
.fi-pp-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width 280ms var(--ease-in);
}
.fi-pp-toggle {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--ink-3); cursor: pointer;
  transition: background 120ms var(--ease-in), color 120ms var(--ease-in);
}
.fi-pp-toggle:hover { background: var(--surface-2); color: var(--ink); }
.fi-pp-toggle svg { transition: transform 200ms var(--ease-in); }
.fi-pp-toggle.is-collapsed svg { transform: rotate(-90deg); }

.fi-pp-list {
  list-style: none; margin: 0; padding: 2px 12px 12px;
  display: flex; flex-direction: column;
}
.fi-pp-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px;
  border-radius: var(--r-md);
}
.fi-pp-item + .fi-pp-item { border-top: 1px solid var(--line-soft); }
.fi-pp-check {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 99px;
  border: 1.5px solid var(--line);
  color: transparent;
}
.fi-pp-item.is-done .fi-pp-check {
  background: var(--green-soft); border-color: transparent;
  color: var(--green);
}
.fi-pp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fi-pp-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.fi-pp-item.is-done .fi-pp-label { color: var(--ink-3); }
.fi-pp-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.fi-pp-url {
  font-size: 12px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; display: inline-block;
  border-bottom: 1px solid transparent;
}
.fi-pp-url:hover { border-bottom-color: var(--accent); }
.fi-pp-action { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
.fi-pp-action .fi-btn { cursor: pointer; text-decoration: none; }
.fi-pp-copy.is-copied {
  background: var(--accent); color: #FBF9F4; border-color: var(--accent);
}
.fi-pp-done-chip {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft);
  padding: 2px 8px; border-radius: 99px;
}

@media (max-width: 640px) {
  .fi-pp-head { flex-wrap: wrap; gap: 10px 14px; }
  .fi-pp-progress { margin-left: 0; order: 3; width: 100%; }
  .fi-pp-bar { flex: 1; width: auto; }
  .fi-pp-item { flex-wrap: wrap; }
  .fi-pp-body { flex: 1; min-width: 180px; }
  .fi-pp-action { margin-left: 36px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-pp-bar-fill, .fi-pp-toggle svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING · PREMIUM (feat/onboarding-premium)
   Barra de progreso fina del wizard, card pública opcional plegada (Step 3),
   estado "Conectado" de Google Calendar (Step 7), línea de trial en el moment
   y link a login del Step 1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Barra de progreso: 3px bajo el header del step, avanza con var(--accent).
   Misma duración (280ms) que la transición de pasos (onb-anim). */
.onb-progress {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.onb-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 280ms var(--motion-ease-out, ease);
}
@media (prefers-reduced-motion: reduce) {
  .onb-progress-fill { transition: none; }
}

/* Step 3 · campos diferibles de la card pública, plegados por defecto. */
.onb-optional {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.onb-optional > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  user-select: none;
}
.onb-optional > summary::-webkit-details-marker { display: none; }
.onb-optional > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1;
}
.onb-optional[open] > summary::after { content: "–"; }
.onb-optional > summary:hover { color: var(--ink); }
.onb-optional-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.onb-optional-body {
  display: grid;
  gap: 16px;
  padding: 4px 14px 16px;
}

/* Step 7 · Google Calendar ya conectado: card informativa, no clickeable. */
.onb-oauth-card.is-connected {
  cursor: default;
  border-color: var(--green);
  background: var(--green-soft);
}
.onb-oauth-card.is-connected:hover {
  border-color: var(--green);
  background: var(--green-soft);
}
.onb-oauth-card.is-connected .onb-oauth-body b { color: var(--green); }

/* Moment · línea de trial + precio (fusión del viejo Step 8 informativo). */
.onb-moment-trial {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 480px;
  opacity: 0;
  animation: onb-moment-up 520ms var(--motion-ease-out) 560ms both;
}

/* Moment · error de finalize + botón Reintentar. */
.onb-moment-finalize-err {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

/* Step 1 · "¿Ya tenés cuenta? Entrar". */
.onb-step1-login {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING · Grado A — honestidad total, 5 especialidades y social proof.
   Append-only: celdas nuevas del bento (Portal del paciente + Escalas),
   sección "Ficha clínica por especialidad" (.fl-esp-*) y testimonios
   (.fl-testi-*, se renderiza solo con quotes reales). Tokens existentes,
   cero hex off-theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Celda media del bento: dos por fila (3 de 6 columnas) — cierran la grilla
   de 8 celdas sin huecos. En mobile caen a columna completa como el resto. */
.fl-bento-cell--half {
  grid-column: span 3;
}
@media (max-width: 767px) {
  .fl-bento-cell--half {
    grid-column: 1 / -1;
  }
}

/* ── Demo 7 · fl-bport · mini-card del portal del paciente (estática) ────── */
.fl-bport {
  justify-content: center;
}
.fl-bport-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(240px, 100%);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.fl-bport-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-loose-2);
  text-transform: uppercase;
  color: var(--ink-3);
}
.fl-bport-turno {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.fl-bport-actions {
  display: flex;
  gap: var(--space-2);
}
.fl-bport-btn {
  padding: 3px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.fl-bport-btn.is-primary {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--accent-2);
}

/* ── Demo 8 · fl-bscore · escala con puntaje que baja (mejora, estática) ── */
.fl-bscore {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
}
.fl-bscore-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.fl-bscore-name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.fl-bscore-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.fl-bscore-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 44px;
}
.fl-bscore-bar {
  flex: 1;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: var(--accent-soft-2);
}
.fl-bscore-bar--1 { height: 88%; }
.fl-bscore-bar--2 { height: 66%; }
.fl-bscore-bar--3 { height: 52%; }
/* la última sesión, en verde: el puntaje bajó — el paciente mejora */
.fl-bscore-bar--4 {
  height: 34%;
  background: var(--green);
}

/* ── Sección "Ficha clínica por especialidad" (.fl-esp-*) ─────────────────
   Intro centrada (patrón .fl-ficha-intro) + 5 cards con chips de
   instrumentos reales. */
.fl-esp-title {
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  text-align: center;
  margin: 0 0 var(--space-3);
}
.fl-esp-lead {
  max-width: 42rem;
  margin: 0 auto var(--space-10);
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fl-esp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.fl-esp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--dur-snappy) var(--spring-soft),
    box-shadow var(--dur-snappy) var(--ease-standard-out),
    border-color var(--dur-snappy) var(--ease-standard-out);
}
.fl-esp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line);
}
.fl-esp-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
}
.fl-esp-desc {
  margin: 0;
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.fl-esp-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.fl-esp-tool {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .fl-esp-card {
    transition: none;
  }
}

/* ── Sección Testimonios (.fl-testi-*) — solo con quotes reales ─────────── */
.fl-testi-title {
  font-family: var(--font-display);
  font-size: var(--fl-display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  text-align: center;
  margin: 0 0 var(--space-10);
}
.fl-testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.fl-testi-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.fl-testi-quote {
  margin: 0;
  flex: 1;
}
.fl-testi-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.fl-testi-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fl-testi-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.fl-testi-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ── Fase 1 fix review · slides de auth: campana de recordatorio en tokens ──
   El glifo WhatsApp de los mocks del login se reemplazó por una campana
   genérica, pero los contenedores conservaban el verde de marca WhatsApp
   (#25D366) — la implicación visual que este PR elimina. Override a tokens. */
.au2-cal2-wa-icon,
.au2-rea2-step-wa {
  background: var(--green-soft);
  color: var(--green);
}

/* ───────────────────────────────────────────────────────────────────────────
 * APP SHELL · Skip-link (honestidad operativa · a11y)
 * Espejo de .fl-skip del landing (folio.css:13474) para el shell logueado:
 * visualmente oculto hasta recibir foco de teclado, apunta a #main en
 * .fi-main. Solo tokens var() existentes; append-only.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-skip {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 600;
}
.fi-skip:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* El target del skip-link recibe foco programático (tabindex="-1"); el anillo
   de foco ahí es ruido visual — el foco real sigue siendo visible al tabular. */
.fi-main:focus {
  outline: none;
}