/* GENERATED by tools/build_css.sh from tokens.css + base.css + components.css — edit those, not this. */
/* ===========================================================================
   tokens.css — the ONLY file allowed to hold literal colours, sizes, radii,
   shadows and durations. Everything else references these by name.
   Colour is OKLCH: one warm neutral ramp (hue 70, chroma ≤ .012), one accent
   ramp on the existing brand hue (154), four semantic families, twelve
   branch swatches at one lightness so any two of them sit well together.
   Every text/surface pair below is measured in DESIGN_SYSTEM.md.
   =========================================================================== */
:root {
  color-scheme: light;

  /* ---- type ---------------------------------------------------------- */
  --font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;   /* public page only */

  --t-display-size: 2.75rem;  --t-display-lh: 1.05; --t-display-w: 700; --t-display-ls: -0.022em;
  --t-title1-size:  2.125rem; --t-title1-lh:  1.10; --t-title1-w:  700; --t-title1-ls:  -0.020em;
  --t-title2-size:  1.75rem;  --t-title2-lh:  1.15; --t-title2-w:  600; --t-title2-ls:  -0.016em;
  --t-title3-size:  1.375rem; --t-title3-lh:  1.25; --t-title3-w:  600; --t-title3-ls:  -0.012em;
  --t-headline-size: 1.0625rem; --t-headline-lh: 1.35; --t-headline-w: 600; --t-headline-ls: -0.006em;
  --t-body-size:    1rem;     --t-body-lh:    1.55; --t-body-w:    400; --t-body-ls:    0;
  --t-subhead-size: 0.9375rem; --t-subhead-lh: 1.45; --t-subhead-w: 400; --t-subhead-ls: 0;
  --t-footnote-size: 0.8125rem; --t-footnote-lh: 1.40; --t-footnote-w: 400; --t-footnote-ls: 0.004em;
  --t-caption-size: 0.75rem;  --t-caption-lh: 1.35; --t-caption-w: 500; --t-caption-ls: 0.010em;
  --measure: 68ch;                       /* prose line length cap */

  /* ---- warm neutrals (hue 70) ---------------------------------------- */
  --surface-canvas:  oklch(98.4% 0.005 70);
  --surface-raised:  oklch(99.6% 0.002 70);
  --surface-sunken:  oklch(96.2% 0.006 70);
  --surface-overlay: oklch(99.6% 0.002 70 / 0.86);     /* + backdrop-filter */
  --surface-nav:     oklch(21% 0.012 70);              /* the one dark surface in light mode */
  --surface-nav-hover: oklch(100% 0 0 / 0.06);
  --surface-nav-active: oklch(100% 0 0 / 0.10);

  --text-1: oklch(24% 0.012 70);          /* 15.8:1 on canvas */
  --text-2: oklch(46% 0.010 70);          /*  6.8:1 */
  --text-3: oklch(54% 0.008 70);          /*  4.8:1 — the floor for body text */
  --text-4: oklch(72% 0.007 70);          /* 2.4:1 — placeholders, disabled; never for content */
  --text-on-nav: oklch(93% 0.006 70);
  --text-on-nav-2: oklch(72% 0.008 70);

  --hairline:     oklch(24% 0.012 70 / 0.10);   /* dividers: decorative, not a boundary */
  --hairline-2:   oklch(24% 0.012 70 / 0.16);   /* card edges when a shadow is not earned */
  --border-input: oklch(62% 0.008 70);          /* 3.5:1 — a boundary the user must find */

  /* ---- accent: brand hue 154, lightness stops fixed ------------------ */
  --accent-50:  oklch(97.5% 0.038 154);
  --accent-100: oklch(94.0% 0.077 154);
  --accent-200: oklch(89.0% 0.116 154);
  --accent-300: oklch(82.0% 0.146 154);
  --accent-400: oklch(74.0% 0.154 154);
  --accent-500: oklch(66.0% 0.154 154);   /* = the historical #0ea15a, identity only */
  --accent-600: oklch(57.0% 0.136 154);
  --accent-700: oklch(49.0% 0.122 154);   /* 5.9:1 with white — the working accent */
  --accent-800: oklch(41.0% 0.102 154);
  --accent-900: oklch(34.0% 0.084 154);
  --accent-950: oklch(26.0% 0.066 154);

  --accent:        var(--accent-700);     /* fills, active nav, primary actions */
  --accent-hover:  var(--accent-800);
  --accent-fg:     oklch(99.6% 0.002 70); /* text on --accent */
  --accent-text:   var(--accent-700);     /* accent used AS text: 5.8:1 on raised */
  --accent-subtle: var(--accent-100);     /* tinted buttons, selected rows */
  --accent-subtle-fg: var(--accent-900);
  --accent-ring:   var(--accent-700);     /* focus ring: ≥3:1 on every surface */

  /* ---- semantic (text / solid / subtle) ------------------------------ */
  --success-text: oklch(45% 0.14 150); --success-solid: oklch(50% 0.15 150); --success-subtle: oklch(95% 0.03 150);
  --warning-text: oklch(45% 0.14 70);  --warning-solid: oklch(50% 0.15 70);  --warning-subtle: oklch(95% 0.03 70);
  --danger-text:  oklch(45% 0.14 25);  --danger-solid:  oklch(50% 0.15 25);  --danger-subtle:  oklch(95% 0.03 25);
  --info-text:    oklch(45% 0.14 250); --info-solid:    oklch(50% 0.15 250); --info-subtle:    oklch(95% 0.03 250);
  /* Chart series. Categorical, not semantic: they only have to stay apart from each other and clear
     3:1 against the card they sit on, which is why none of them is a hairline grey. -1 green, -2 amber,
     -3 the neutral for "everything else", -4 blue, -5 magenta, -6 teal. */
  --chart-1: oklch(58% 0.150 154); --chart-2: oklch(58% 0.150 65);  --chart-3: oklch(56% 0.015 70);
  --chart-4: oklch(55% 0.160 255); --chart-5: oklch(56% 0.170 330); --chart-6: oklch(58% 0.110 195);
  --on-solid: oklch(99.6% 0.002 70);

  /* ---- branch palette: one lightness, one chroma, twelve hues --------- */
  --branch-1:  oklch(72% 0.12 15);   --branch-2:  oklch(72% 0.12 45);   --branch-3:  oklch(72% 0.12 75);
  --branch-4:  oklch(72% 0.12 105);  --branch-5:  oklch(72% 0.12 135);  --branch-6:  oklch(72% 0.12 165);
  --branch-7:  oklch(72% 0.12 195);  --branch-8:  oklch(72% 0.12 225);  --branch-9:  oklch(72% 0.12 255);
  --branch-10: oklch(72% 0.12 285);  --branch-11: oklch(72% 0.12 315);  --branch-12: oklch(72% 0.12 345);
  --branch-fg: var(--text-1);        /* deterministic: every swatch is L 72, so dark text always reads */
  --branch-tint-mix: 82%;            /* how much surface to mix into a branch fill */

  /* ---- space (4px base, 8px rhythm) ---------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* ---- radius --------------------------------------------------------- */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;

  /* ---- elevation: four levels, tinted with the neutral hue ----------- */
  --shadow-flat: none;
  --shadow-raised:  0 1px 2px oklch(24% 0.012 70 / 0.06), 0 4px 12px -4px oklch(24% 0.012 70 / 0.08);
  --shadow-overlay: 0 2px 6px oklch(24% 0.012 70 / 0.08), 0 12px 32px -8px oklch(24% 0.012 70 / 0.18);
  --shadow-modal:   0 4px 12px oklch(24% 0.012 70 / 0.10), 0 32px 80px -16px oklch(24% 0.012 70 / 0.28);

  /* ---- motion --------------------------------------------------------- */
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-page: 420ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- sizes ---------------------------------------------------------- */
  --control-sm: 2rem; --control-md: 2.75rem; --control-lg: 3rem;   /* md = 44px: the touch floor */
  --icon-16: 1rem; --icon-20: 1.25rem; --icon-24: 1.5rem;
  --sidebar-w: 15.5rem; --sidebar-rail: 4.25rem; --content-max: 70rem;

  /* ---- z ---------------------------------------------------------------- */
  --z-nav: 40; --z-overlay: 55; --z-modal: 60; --z-toast: 70;
}

/* Dark is a designed counterpart, not an inversion: surfaces lift by lightness,
   chroma rises a little, text backs off from full contrast so it does not vibrate. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-canvas:  oklch(17% 0.010 70);
    --surface-raised:  oklch(21% 0.010 70);
    --surface-sunken:  oklch(14% 0.010 70);
    --surface-overlay: oklch(21% 0.010 70 / 0.86);
    --surface-nav:     oklch(14% 0.010 70);
    --surface-nav-hover: oklch(100% 0 0 / 0.05);
    --surface-nav-active: oklch(100% 0 0 / 0.09);
    --text-1: oklch(93% 0.006 70);
    --text-2: oklch(74% 0.008 70);
    --text-3: oklch(62% 0.008 70);
    --text-4: oklch(46% 0.008 70);
    --text-on-nav: oklch(93% 0.006 70);
    --text-on-nav-2: oklch(66% 0.008 70);
    --hairline:     oklch(93% 0.006 70 / 0.10);
    --hairline-2:   oklch(93% 0.006 70 / 0.16);
    --border-input: oklch(52% 0.008 70);
    --accent:        var(--accent-400);
    --accent-hover:  var(--accent-300);
    --accent-fg:     oklch(17% 0.010 70);
    --accent-text:   var(--accent-300);
    --accent-subtle: oklch(30% 0.06 154);
    --accent-subtle-fg: var(--accent-200);
    --accent-ring:   var(--accent-300);
    --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150);
    --warning-text: oklch(80% 0.13 70);  --warning-subtle: oklch(26% 0.05 70);
    --danger-text:  oklch(78% 0.13 25);  --danger-subtle:  oklch(26% 0.05 25);
    --info-text:    oklch(78% 0.12 250); --info-subtle:    oklch(26% 0.05 250);
    --chart-1: oklch(74% 0.160 154); --chart-2: oklch(78% 0.150 70);  --chart-3: oklch(68% 0.015 70);
    --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195);
    --branch-fg: oklch(17% 0.010 70);
    --branch-tint-mix: 78%;
    --shadow-raised:  0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
    --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55);
    --shadow-modal:   0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas:  oklch(17% 0.010 70);
  --surface-raised:  oklch(21% 0.010 70);
  --surface-sunken:  oklch(14% 0.010 70);
  --surface-overlay: oklch(21% 0.010 70 / 0.86);
  --surface-nav:     oklch(14% 0.010 70);
  --surface-nav-hover: oklch(100% 0 0 / 0.05);
  --surface-nav-active: oklch(100% 0 0 / 0.09);
  --text-1: oklch(93% 0.006 70);
  --text-2: oklch(74% 0.008 70);
  --text-3: oklch(62% 0.008 70);
  --text-4: oklch(46% 0.008 70);
  --text-on-nav: oklch(93% 0.006 70);
  --text-on-nav-2: oklch(66% 0.008 70);
  --hairline:     oklch(93% 0.006 70 / 0.10);
  --hairline-2:   oklch(93% 0.006 70 / 0.16);
  --border-input: oklch(52% 0.008 70);
  --accent:        var(--accent-400);
  --accent-hover:  var(--accent-300);
  --accent-fg:     oklch(17% 0.010 70);
  --accent-text:   var(--accent-300);
  --accent-subtle: oklch(30% 0.06 154);
  --accent-subtle-fg: var(--accent-200);
  --accent-ring:   var(--accent-300);
  --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150);
  --warning-text: oklch(80% 0.13 70);  --warning-subtle: oklch(26% 0.05 70);
  --danger-text:  oklch(78% 0.13 25);  --danger-subtle:  oklch(26% 0.05 25);
  --info-text:    oklch(78% 0.12 250); --info-subtle:    oklch(26% 0.05 250);
  --chart-1: oklch(74% 0.160 154); --chart-2: oklch(78% 0.150 70);  --chart-3: oklch(68% 0.015 70);
  --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195);
  --branch-fg: oklch(17% 0.010 70);
  --branch-tint-mix: 78%;
  --shadow-raised:  0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
  --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55);
  --shadow-modal:   0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70);
}
/* ===========================================================================
   base.css — reset, fonts, document defaults, type ramp, focus, motion
   preferences, accessibility utilities. No component here, no literal
   colour or size: everything comes from tokens.css.
   =========================================================================== */

/* ---- fonts: Figtree, self-hosted, split by script so a Spanish/English
   session downloads ~20 KB. Fallback is Arial with metric overrides so the
   swap does not reflow (values tuned against Figtree's vertical metrics). */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica");
  size-adjust: 103%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: var(--t-body-w) var(--t-body-size) / var(--t-body-lh) var(--font-sans);
  letter-spacing: var(--t-body-ls);
  color: var(--text-1);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent-text); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { font-weight: var(--t-headline-w); overflow-wrap: anywhere; }
p, li, dd { overflow-wrap: anywhere; }
[hidden] { display: none !important; }   /* the single documented !important: `hidden` must win */
::selection { background: var(--accent-200); color: var(--accent-950); }

/* ---- type ramp: one class per role, the only sizes the app may use ------- */
.t-display  { font-size: var(--t-display-size);  line-height: var(--t-display-lh);  font-weight: var(--t-display-w);  letter-spacing: var(--t-display-ls); }
.t-title-1  { font-size: var(--t-title1-size);   line-height: var(--t-title1-lh);   font-weight: var(--t-title1-w);   letter-spacing: var(--t-title1-ls); }
.t-title-2  { font-size: var(--t-title2-size);   line-height: var(--t-title2-lh);   font-weight: var(--t-title2-w);   letter-spacing: var(--t-title2-ls); }
.t-title-3  { font-size: var(--t-title3-size);   line-height: var(--t-title3-lh);   font-weight: var(--t-title3-w);   letter-spacing: var(--t-title3-ls); }
.t-headline { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); }
.t-body     { font-size: var(--t-body-size);     line-height: var(--t-body-lh);     font-weight: var(--t-body-w);     letter-spacing: var(--t-body-ls); }
.t-subhead  { font-size: var(--t-subhead-size);  line-height: var(--t-subhead-lh);  font-weight: var(--t-subhead-w);  letter-spacing: var(--t-subhead-ls); }
.t-footnote { font-size: var(--t-footnote-size); line-height: var(--t-footnote-lh); font-weight: var(--t-footnote-w); letter-spacing: var(--t-footnote-ls); }
.t-caption  { font-size: var(--t-caption-size);  line-height: var(--t-caption-lh);  font-weight: var(--t-caption-w);  letter-spacing: var(--t-caption-ls); }
.t-caption.upper { text-transform: uppercase; letter-spacing: 0.08em; }   /* uppercase never at default tracking */
.t-2 { color: var(--text-2); } .t-3 { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums lining-nums; }          /* every count, price, time, date */
.prose { max-width: var(--measure); }
.strong { font-weight: 600; }

/* ---- focus: one ring, drawn from a token, visible on every surface ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.on-nav :focus-visible { outline-color: var(--accent-300); }

/* ---- icons: one family, one geometry, stroke scales with size --------------- */
.icon { display: inline-block; width: var(--icon-20); height: var(--icon-20); --icon-stroke: 1.6; stroke-width: var(--icon-stroke);
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex: none;
  vertical-align: -0.2em; }   /* inline-block, not the reset's block: an icon in a run of text must not break the line */                        /* optical: sits on the cap height next to text */
.icon.sm { width: var(--icon-16); height: var(--icon-16); --icon-stroke: 1.5; }
.icon.lg { width: var(--icon-24); height: var(--icon-24); --icon-stroke: 1.75; }

/* ---- accessibility utilities ---------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--text-1);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); }
.skip-link:focus-visible { top: var(--space-4); }

/* ---- motion preferences ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 80ms !important; scroll-behavior: auto !important; }
  /* the second documented !important block: a user preference must beat every component rule */
}
@media (forced-colors: active) {
  .icon { forced-color-adjust: auto; }
  :focus-visible { outline: 2px solid Highlight; }
}
@media (prefers-contrast: more) {
  :root { --hairline: oklch(24% 0.012 70 / 0.24); --hairline-2: oklch(24% 0.012 70 / 0.34); --text-3: var(--text-2); }
}
/* ===========================================================================
   components.css — every primitive once, in CSS, driven by classes and custom
   properties. Part A is the new primitive set. Part B holds the screen components (the migration bridge it once was is gone):
   the class names the views use TODAY, restyled on tokens so nothing breaks
   while screens are moved to the primitives one by one (then Part B shrinks).
   No literal colour, size, radius or shadow lives here.
   =========================================================================== */

/* ============================ A · PRIMITIVES ============================= */

/* ---- buttons: filled / tinted / plain / danger · sm / md / lg ------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--t-subhead-size); line-height: 1; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard); }
.btn, .btn.filled { background: var(--accent); color: var(--accent-fg); }
.btn:hover, .btn.filled:hover { background: var(--accent-hover); }
.btn.tinted { background: var(--accent-subtle); color: var(--accent-subtle-fg); }
.btn.tinted:hover { background: color-mix(in oklab, var(--accent-subtle) 80%, var(--accent)); }
.btn.plain { background: transparent; color: var(--accent-text); }
.btn.plain:hover { background: var(--surface-sunken); }
.btn.danger { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.btn.danger:hover { background: var(--danger-subtle); }
.btn.sm { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--t-footnote-size); border-radius: var(--radius-xs); }
.btn.lg { min-height: var(--control-lg); padding: 0 var(--space-6); font-size: var(--t-body-size); }
.btn.icon-only { padding: 0; width: var(--control-md); }
.btn.icon-only.sm { width: var(--control-sm); }
.btn.block { width: 100%; }
.btn.block + .btn.block { margin-top: var(--space-2); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.5; cursor: default; }
.btn[aria-busy="true"] .icon { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- segmented control ------------------------------------------------- */
.segmented { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.segmented > button { display: inline-grid; grid-auto-flow: column; place-items: center; gap: var(--space-1);
  min-height: calc(var(--control-sm) - 6px); padding: 0 var(--space-4); border-radius: var(--radius-full);
  font-weight: 600; font-size: var(--t-footnote-size); color: var(--text-2); }
.segmented > button.on, .segmented > button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); }

/* ---- fields ------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-block: var(--space-3); }
.field-label, label { display: block; font-size: var(--t-footnote-size); font-weight: 600; color: var(--text-2); }
label { margin: var(--space-3) 0 var(--space-1); }
.field-help { font-size: var(--t-footnote-size); color: var(--text-3); }
.field-error { font-size: var(--t-footnote-size); color: var(--danger-text); font-weight: 500; }
.field-error:empty { display: none; }
.check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--t-subhead-size); color: var(--text-1); cursor: pointer; }
.check input { margin-top: 0.2em; width: 1rem; height: 1rem; accent-color: var(--accent); flex: 0 0 auto; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  width: 100%; min-height: var(--control-md); padding: var(--space-2) var(--space-3);
  background: var(--surface-raised); color: var(--text-1);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
textarea { min-height: calc(var(--control-md) * 2); resize: vertical; line-height: var(--t-body-lh); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 0; border-color: var(--accent-ring); }
.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--danger-solid); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); margin: 0; flex: none; }
select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--space-4)) 50%, calc(100% - var(--space-4) + 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.switch { position: relative; width: 2.75rem; height: 1.625rem; border-radius: var(--radius-full); background: var(--border-input); flex: none;
  transition: background var(--motion-fast) var(--ease-standard); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--surface-raised); box-shadow: var(--shadow-raised); transition: transform var(--motion-fast) var(--ease-standard); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(1.125rem); }

/* ---- surfaces ------------------------------------------------------------ */
.card { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-5); }
.card > h3:first-child, .card > .card-head:first-child { margin-bottom: var(--space-3); }
.card-head { display: flex; align-items: center; gap: var(--space-3); }
.card-head > h3 { flex: 1; }
.well { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-4); }
.divider { height: 1px; background: var(--hairline); margin-block: var(--space-4); }
.section { margin-top: var(--space-5); } .section > h3 { margin-bottom: var(--space-3); }
.cap::first-letter { text-transform: uppercase; }
.perm-group { border: 0; padding: 0; margin: 0 0 var(--space-2); min-width: 0; } .perm-group > legend { padding: 0; }
.check span small { display: block; color: var(--text-2); font-size: var(--t-footnote-size); font-weight: 400; }
.dot.branch { width: 0.75rem; height: 0.75rem; background: var(--branch-color, var(--text-3)); flex: none; }
.eyebrow { font-size: var(--t-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.mono-box { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); padding: var(--space-3); border-radius: var(--radius-sm);
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--t-footnote-size); line-height: 1.5; margin: var(--space-3) 0; }
.card.warning { border-color: color-mix(in oklab, var(--warning-solid) 40%, var(--hairline-2)); background: var(--warning-subtle); }
.card-foot { margin-top: var(--space-3); }

/* ---- inset grouped list rows --------------------------------------------- */
.rows { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline); text-align: left; width: 100%; color: inherit; }
.row:first-child { border-top: 0; }
.row.link { cursor: pointer; }
.row.link:hover { background: var(--surface-sunken); }
.row .chev { margin-left: auto; color: var(--text-3); }
.row .primary { font-weight: 600; }
.row .secondary { color: var(--text-2); font-size: var(--t-footnote-size); }
.row .grow { flex: 1; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row-group + .row-group { border-top: 1px solid var(--hairline); }
.rows .editor { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-sunken); border-top: 1px solid var(--hairline); }
.hours-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--hairline); }
.hours-row:last-of-type { border-bottom: 0; } .hours-row .check { padding: 0; } .hours-row input[type="time"] { width: 100%; min-width: 0; }
.faq-row { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
@media (max-width: 35rem) { .row.wrap > .cluster { flex-basis: 100%; } .hours-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .hours-row .check { grid-column: 1 / -1; padding-top: var(--space-2); } }

/* ---- data table ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-subhead-size); }
.table th, .table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.table th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text-2); font-size: var(--t-caption-size);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; z-index: 1; }
.table th[aria-sort] { cursor: pointer; }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.table tr:hover > td { background: color-mix(in oklab, var(--surface-sunken) 60%, var(--surface-raised)); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); }

/* ---- tabs -------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--hairline); }
.tabs > button { min-height: var(--control-md); padding: 0 var(--space-3); color: var(--text-2); font-weight: 500; font-size: var(--t-subhead-size);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs > button.on, .tabs > button[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- modal / bottom sheet ---------------------------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-5); }
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--text-1) 45%, transparent);
  opacity: 0; transition: opacity var(--motion-base) var(--ease-standard); }
.modal-panel { position: relative; width: min(30rem, 100%); max-height: 90dvh; overflow: auto; background: var(--surface-raised);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: var(--space-6);
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); }
.modal-root.on .modal-backdrop { opacity: 1; }
.modal-root.on .modal-panel { opacity: 1; transform: none; }
.modal-root.leaving .modal-backdrop, .modal-root.leaving .modal-panel { transition-timing-function: var(--ease-exit); transition-duration: var(--motion-base); }
.modal-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal-head > h2 { flex: 1; }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-5); flex-wrap: wrap; }
body.scroll-locked { overflow: hidden; }
@media (max-width: 34.99rem) {
  .modal-root.as-sheet { place-items: end stretch; padding: 0; }
  .modal-root.as-sheet .modal-panel { width: 100%; max-height: 88dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); }
  .modal-root.as-sheet.on .modal-panel { transform: none; }
}

/* ---- dropdown menu ------------------------------------------------------------ */
.menu { position: absolute; z-index: var(--z-overlay); min-width: 12rem; padding: var(--space-1);
  background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); border: 1px solid var(--hairline-2); }
.menu > button, .menu > a { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-sm);
  padding: 0 var(--space-3); border-radius: var(--radius-xs); text-align: left; color: var(--text-1); text-decoration: none; }
.menu > button:hover, .menu > a:hover { background: var(--surface-sunken); }
.menu > .danger { color: var(--danger-text); }

/* ---- toast --------------------------------------------------------------------- */
.toast-region { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; width: min(26rem, calc(100% - var(--space-8))); }
.toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-overlay); border: 1px solid var(--hairline-2);
  font-size: var(--t-subhead-size); pointer-events: auto; opacity: 0; transform: translateY(8px);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.toast.on { opacity: 1; transform: none; }
.toast.success .icon { color: var(--success-text); } .toast.warning .icon { color: var(--warning-text); }
.toast.danger .icon { color: var(--danger-text); } .toast.info .icon { color: var(--info-text); }

/* ---- badge / status pill (never colour alone: icon or text carries it too) --- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.5rem; padding: 0 var(--space-2);
  border-radius: var(--radius-full); font-size: var(--t-caption-size); font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; }
.pill.success { background: var(--success-subtle); color: var(--success-text); }
.pill.warning { background: var(--warning-subtle); color: var(--warning-text); }
.pill.danger  { background: var(--danger-subtle);  color: var(--danger-text); }
.pill.info    { background: var(--info-subtle);    color: var(--info-text); }
.pill.accent  { background: var(--accent-subtle);  color: var(--accent-subtle-fg); }
.count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1);
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 700; }

/* ---- avatar ------------------------------------------------------------------- */
.avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  background: var(--accent-subtle); color: var(--accent-subtle-fg); font-weight: 700; font-size: var(--t-footnote-size); letter-spacing: 0.02em; }
.avatar.sm { width: 2rem; height: 2rem; font-size: var(--t-caption-size); }
.avatar.web { background: var(--info-subtle); color: var(--info-text); }
.avatar .icon { width: 1.25rem; height: 1.25rem; }
.avatar.square { border-radius: var(--radius-sm); }

/* ---- tooltip (pure CSS, on data-tip) ------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--text-1); color: var(--surface-raised);
  font-size: var(--t-caption-size); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); z-index: var(--z-overlay); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* ---- skeleton ------------------------------------------------------------------ */
.skeleton { display: grid; gap: var(--space-2); }
.skeleton-line { height: 0.875rem; width: var(--w, 100%); border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, color-mix(in oklab, var(--surface-sunken) 50%, var(--surface-raised)) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- empty / error state --------------------------------------------------------- */
.empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-12) var(--space-5); color: var(--text-2); }
.empty > .icon { color: var(--text-3); width: 2.5rem; height: 2.5rem; --icon-stroke: 1.5; }
.empty > .btn { margin-top: var(--space-2); }
.empty.error > .icon { color: var(--danger-text); }
.empty.compact { padding: var(--space-6) var(--space-4); }

/* ---- pagination -------------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: var(--space-1); justify-content: flex-end; }
.pager > .btn { min-width: var(--control-sm); }
.pager > .btn[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-fg); }

/* ---- layout helpers ------------------------------------------------------------------ */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.grid-2 > *, .grid-4 > * { min-width: 0; }   /* date/time inputs have a wide intrinsic size; let columns shrink them */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 68.75rem) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 56.25rem) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 35rem)    { .grid-4 { grid-template-columns: 1fr 1fr; } }

/* ======================= B · MIGRATION BRIDGE (shrinks in Phase 4) ======================= */

.btn.chico { width: auto; min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--t-footnote-size); border-radius: var(--radius-xs); margin-top: 0; }
.btn.sec { background: var(--surface-raised); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.btn.sec:hover { background: var(--surface-sunken); color: var(--text-1); }
.btn.peligro { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.btn.peligro:hover { background: var(--danger-subtle); }

/* -- text roles -- */
.error { color: var(--danger-text); font-size: var(--t-footnote-size); margin-top: var(--space-2); }
.ok { color: var(--success-text); font-size: var(--t-footnote-size); margin-top: var(--space-2); }
h2 { font-size: var(--t-title3-size); line-height: var(--t-title3-lh); font-weight: var(--t-title3-w); letter-spacing: var(--t-title3-ls); margin: 0 0 var(--space-4); }
h3 { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); }
.saludo { font-size: var(--t-title2-size); line-height: var(--t-title2-lh); font-weight: var(--t-title2-w); letter-spacing: var(--t-title2-ls); margin-bottom: 2px; }
.fila { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; } .fila > * { min-width: 0; }
.lista { display: flex; flex-direction: column; gap: var(--space-3); }
.item { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.item .t { font-weight: 600; } .item .s { color: var(--text-2); font-size: var(--t-footnote-size); }
.etiqueta.owner, .etiqueta.dueno, .etiqueta.ok { background: var(--success-subtle); color: var(--success-text); }

/* -- KPI tiles: numbers are content, not decoration → text-1, tabular; semantic tints keep meaning -- */
.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.metricas:not(:last-child) { margin-bottom: var(--space-4); }
.metricas > * { min-width: 0; }
.metricas .m { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-4); }
.metricas .m b { display: block; font-size: var(--t-title2-size); line-height: 1.1; font-weight: 700; letter-spacing: var(--t-title2-ls); color: var(--text-1); font-variant-numeric: tabular-nums lining-nums; }
.metricas .m span { display: block; font-size: var(--t-footnote-size); color: var(--text-1); font-weight: 600; margin-top: var(--space-2); }
.metricas .m i { display: block; font-style: normal; font-size: var(--t-footnote-size); color: var(--text-2); margin-top: 2px; }
.metricas.chicas .m b { font-size: var(--t-headline-size); }
.metricas .m.ok b { color: var(--success-text); } .metricas .m.bad b { color: var(--danger-text); } .metricas .m.warn b { color: var(--warning-text); }
@media (max-width: 68.75rem) { .metricas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35rem)    { .metricas { grid-template-columns: 1fr 1fr; } }

/* -- login -- */
.centro { position: fixed; inset: 0; background: var(--surface-canvas); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-5); overflow: auto; }
.acceso { width: min(26rem, 100%); min-width: 0; }
.acceso .card { border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); padding: var(--space-8); text-align: left; }
.acceso .mark { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center;
  font-weight: 700; font-size: var(--t-title3-size); margin: 0 auto var(--space-4); }
.acceso h1 { font-size: var(--t-title3-size); line-height: var(--t-title3-lh); font-weight: var(--t-title3-w); letter-spacing: var(--t-title3-ls); margin-bottom: var(--space-1); text-align: center; }
.acceso p.sub { color: var(--text-2); font-size: var(--t-subhead-size); margin: 0 0 var(--space-5); text-align: center; }
.acceso .cluster.center { justify-content: center; margin-top: var(--space-4); }
.acceso .btn.block { margin-top: var(--space-4); } .acceso .btn.plain.block { margin-top: var(--space-2); }
input.codigo { font-size: var(--t-title1-size); letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.idioma { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.idioma button { min-height: calc(var(--control-sm) - 6px); padding: 0 var(--space-3); border-radius: var(--radius-full); font-size: var(--t-caption-size); font-weight: 600; color: var(--text-2); }
.idioma button.activo { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); }

/* -- shell -- */
.shell { min-height: 100dvh; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface-nav); color: var(--text-on-nav-2);
  display: flex; flex-direction: column; z-index: var(--z-modal); overflow: hidden;
  transition: width var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard), visibility 0s; }
/* -- the menu toggle: one state on the shell (data-nav), read differently by each breakpoint.
   Wide: the menu collapses to a rail of icons and the toggle lives in the sidebar's own header —
   a chevron pointing left to contract, right to expand. Narrow: it is closed unless opened, rides
   over the content with a backdrop, and the topbar hamburger drives it; `visibility` (delayed until
   the slide finishes) is what keeps that closed menu out of the tab order. -- */
.sb-toggle { display: none; margin-left: auto; place-items: center; flex: none; border-radius: var(--radius-sm);
  min-width: var(--control-sm); min-height: var(--control-sm); color: var(--text-on-nav-2); }
.sb-toggle:hover { background: var(--surface-nav-hover); color: var(--text-on-nav); }
.sb-toggle > span { display: inline-grid; place-items: center; }
.shell[data-nav="open"] .sb-toggle .when-closed, .shell[data-nav="closed"] .sb-toggle .when-open { display: none; }

@media (min-width: 55.0625rem) {
  .sb-toggle { display: inline-grid; }
  .shell[data-nav="closed"] .sidebar { width: var(--sidebar-rail); }
  .shell[data-nav="closed"] .main { margin-left: var(--sidebar-rail); }
  .shell[data-nav="closed"] .content { margin-inline: auto; }   /* reclaimed space is shared, not dumped on the right */
  .shell[data-nav="closed"] .sb-brand { flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
  .shell[data-nav="closed"] .sb-toggle { margin-left: 0; }
  .shell[data-nav="closed"] .sb-brand > div,
  .shell[data-nav="closed"] .sb-ws .nm,
  .shell[data-nav="closed"] .sb-foot .segmented,
  .shell[data-nav="closed"] .sb-foot .plan { display: none; }
  .shell[data-nav="closed"] .sb-ws { justify-content: center; padding: var(--space-3) var(--space-2); }
  .shell[data-nav="closed"] .nav { padding: var(--space-2); }
  .shell[data-nav="closed"] .nav a { justify-content: center; padding: 0; }
  /* the label still names the link for assistive tech; on the rail it also becomes the hover tooltip */
  .shell[data-nav="closed"] .nav a > span:not(.badge),
  .shell[data-nav="closed"] .sb-foot .out span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shell[data-nav="closed"] .nav a .badge { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 4px; }
  .shell[data-nav="closed"] .nav .sep { height: 1px; padding: 0; margin: var(--space-3) var(--space-2); background: var(--hairline); font-size: 0; line-height: 0; color: transparent; }
  .shell[data-nav="closed"] .sb-foot { padding: var(--space-2); }
  .shell[data-nav="closed"] .sb-foot .out { justify-content: center; margin-top: 0; }
  .content[data-view="calendar"] { display: flex; flex-direction: column; height: calc(100dvh - 3.875rem); }
  .content[data-view="calendar"] .ag-cal { flex: 1; min-height: 18rem; }
}
.sidebar :focus-visible { outline-color: var(--accent-300); }
.sb-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); }
.sb-brand .mark { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-sm); background: var(--accent-400); color: var(--accent-950); display: grid; place-items: center; font-weight: 800; }
.sb-brand b { color: var(--text-on-nav); font-size: var(--t-headline-size); font-weight: 700; }
.sb-brand small { display: block; font-size: var(--t-caption-size); color: var(--text-on-nav-2); letter-spacing: 0.08em; text-transform: uppercase; }
.sb-ws { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--space-3); }
.sb-ws .av { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-sm); flex: none; background: var(--accent-subtle); color: var(--accent-subtle-fg); display: grid; place-items: center; font-weight: 700; font-size: var(--t-footnote-size); }
.sb-ws .nm { font-size: var(--t-subhead-size); font-weight: 600; color: var(--text-on-nav); line-height: 1.2; min-width: 0; }
.sb-ws .nm small { display: block; color: var(--text-on-nav-2); font-weight: 400; font-size: var(--t-caption-size); }
.sb-ws select { background: transparent; border: 0; color: var(--text-on-nav); font-weight: 600; font-size: var(--t-subhead-size); padding: 0; min-height: 0; width: 100%; background-image: none; }
.nav { flex: 1; overflow-y: auto; padding: var(--space-2); }
.nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-on-nav-2); font-size: var(--t-subhead-size); font-weight: 500; margin-bottom: 2px; cursor: pointer; text-decoration: none; position: relative;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.nav a:hover { background: var(--surface-nav-hover); color: var(--text-on-nav); }
.nav a.on { background: var(--surface-nav-active); color: var(--text-on-nav); font-weight: 600; }
.nav a.on::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 3px; border-radius: var(--radius-full); background: var(--accent-300); }
.nav a .badge { margin-left: auto; background: var(--danger-solid); color: var(--on-solid); font-size: var(--t-caption-size); font-weight: 700; border-radius: var(--radius-full); padding: 1px var(--space-2); }
.nav .sep { font-size: var(--t-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-nav-2); opacity: 0.7; padding: var(--space-4) var(--space-3) var(--space-1); }
.sb-foot { padding: var(--space-3); border-top: 1px solid var(--hairline); }
.sb-foot .segmented { display: flex; width: 100%; background: var(--surface-nav-hover); margin-bottom: var(--space-2); }
.sb-foot .segmented > button { flex: 1; padding: 0; color: var(--text-on-nav-2); }
.sb-foot .segmented > button:hover { color: var(--text-on-nav); }
.sb-foot .segmented > button[aria-pressed="true"] { background: var(--surface-nav-active); color: var(--text-on-nav); box-shadow: none; }
.sb-foot .plan { background: var(--surface-nav-hover); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--t-footnote-size); }
.sb-foot .plan b { color: var(--text-on-nav); }
.sb-foot .out { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--text-on-nav-2); font-size: var(--t-footnote-size); }
.main { margin-left: var(--sidebar-w); min-height: 100dvh; transition: margin-left var(--motion-slow) var(--ease-standard); }
.topbar { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); min-height: 3.875rem; }
.topbar .ham { display: none; place-items: center; min-width: var(--control-md); min-height: var(--control-md); flex: none; }
.topbar h2 { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); margin: 0; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.topbar .sede { width: auto; min-height: var(--control-sm); padding: 0 var(--space-8) 0 var(--space-3); font-size: var(--t-footnote-size); max-width: 12rem; border-radius: var(--radius-full); }
.content { padding: var(--space-6); max-width: var(--content-max); }
.content[data-wide] { max-width: none; }   /* tables, agenda, dashboards: the data wants the room */
/* Vertical rhythm of a screen: every top-level block after another gets one step of air. Views used to get
   it only from `.section` or inline margins, so cards, grids and empty states sat at 0 px on each other
   (measured on overview, plan, settings, profile, billing). A caption right under a heading stays tight. */
.content > * + * { margin-top: var(--space-5); }
.content > :is(h1, h2, h3) + p { margin-top: var(--space-1); }
.sb-backdrop { display: none; position: fixed; inset: 0; background: color-mix(in oklab, var(--text-1) 45%, transparent); z-index: var(--z-overlay); }

/* -- legacy #sheet: centred dialog on desktop, bottom sheet on phones -- */
#sheet { position: fixed; inset: 0; background: color-mix(in oklab, var(--text-1) 45%, transparent); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); }

@media (max-width: 55rem) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-100%); visibility: hidden; width: 15.5rem; box-shadow: var(--shadow-modal);
    transition: transform var(--motion-slow) var(--ease-standard), visibility 0s linear var(--motion-slow); }
  .shell[data-nav="open"] .sidebar { transform: none; visibility: visible; transition-delay: 0s; }
  .shell[data-nav="open"] .sb-backdrop { display: block; }
  .topbar .ham { display: inline-grid; }
  .main, .shell[data-nav="open"] .main { margin-left: 0; }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); } .topbar .right { gap: var(--space-2); } .topbar .sede { max-width: 7.5rem; } .idioma button { padding: 0 var(--space-2); }
  .topbar h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: var(--space-4); }
  #sheet { align-items: flex-end; padding: 0; }
}
@media (max-width: 35rem) { .acceso .tarjeta { padding: var(--space-6); } }

/* -- agenda component (migrated 2026-09-05): the branch colour is ONE custom property; everything else derives in CSS -- */
.ag-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.ag-nav { display: flex; gap: var(--space-1); }
.ag-label::first-letter { text-transform: uppercase; }   /* "sábado, 5 de septiembre" → only the first letter */
.ag-label { margin: 0; flex: 1; min-width: 7.5rem; text-align: center; font-size: var(--t-headline-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.segm button.on { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); }
.ag-cal { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: auto; }
/* The day as a ruler: an hour is a fixed height and everything is placed against it. A 45-minute
   visit is taller than a 30-minute one, and the quarter of an hour between two of them is a visible
   gap -- which is the thing a receptionist is actually being asked for on the telephone. */
.ag-head, .ag-body { display: grid; grid-template-columns: 3.5rem var(--tracks, 1fr); }
.ag-head { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); border-bottom: 1px solid var(--hairline); }
.ag-time { padding: var(--space-1) var(--space-2); font-size: var(--t-caption-size); color: var(--text-3); text-align: right; border-right: 1px solid var(--hairline); background: var(--surface-raised); font-variant-numeric: tabular-nums; }
.ag-dh { padding: var(--space-2) var(--space-1); text-align: center; border-left: 1px solid var(--hairline); }
.ag-dh b { display: block; font-size: var(--t-caption-size); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.ag-dh span { font-size: var(--t-headline-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-dh.td span { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); }
.ag-dh.shut { color: var(--text-3); }                     /* a day the clinic does not open: half a track, and quieter */
.ag-dh.shut span { font-size: var(--t-subhead-size); font-weight: 600; }

.ag-gut { border-right: 1px solid var(--hairline); background: var(--surface-raised); }
.ag-h { height: var(--h); position: relative; }
.ag-h span { position: absolute; top: -0.55em; right: var(--space-2); font-size: var(--t-caption-size);
  color: var(--text-3); background: var(--surface-raised); padding: 0 2px; font-variant-numeric: tabular-nums; }
.ag-h:first-child span { top: 0; }

.ag-day { position: relative; height: var(--dh); border-left: 1px solid var(--hairline); }
.ag-day[data-open="1"] { cursor: copy; }
.ag-day.td { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.ag-lines { position: absolute; inset: 0; }
.ag-lines > i { display: block; height: var(--h); border-top: 1px solid var(--hairline); }
.ag-lines > i:first-child { border-top: 0; }

.ag-band { position: absolute; left: 0; right: 0; top: var(--t); height: var(--h); overflow: hidden;
  font-size: var(--t-caption-size); padding: 2px var(--space-2); }
.ag-band.off { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 5px, var(--surface-raised) 5px, var(--surface-raised) 10px); color: var(--text-3); }
.ag-band.lunch { background: repeating-linear-gradient(45deg, var(--warning-subtle), var(--warning-subtle) 5px, var(--surface-raised) 5px, var(--surface-raised) 10px); color: var(--warning-text); }
.ag-band.blk { background: var(--danger-subtle); color: var(--danger-text); font-weight: 600; }

.ag-appt { --branch-color: var(--accent-400); --lane: 0; --lanes: 1;
  position: absolute; top: var(--t); height: var(--h);
  left: calc(var(--lane) / var(--lanes) * 100% + 2px); width: calc(100% / var(--lanes) - 4px);
  background: color-mix(in oklab, var(--branch-color) calc(100% - var(--branch-tint-mix)), var(--surface-raised));
  color: var(--text-1); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2) 0 calc(var(--space-2) - 1px);
  cursor: pointer; font-size: var(--t-footnote-size); line-height: 1.3; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--branch-color) 35%, var(--hairline-2)); border-left: 3px solid var(--branch-color); }
/* Too short to hold two lines: the service name steps out rather than being clipped mid-word. */
.ag-appt.tight { padding-top: 1px; }
.ag-appt.tight small { display: none; }
/* Booked by hand: the whole outline is dashed, not just the left edge. Where the eye lands on the card
   should not decide whether it can tell. The left edge keeps the branch colour and its 3px. */
.ag-appt.man { border-style: dashed; }
.ag-appt.done { opacity: 0.7; }
/* Its hour passed and nobody closed it. A hard ring shouted at a week that is otherwise calm; this
   breathes instead -- a warm wash over the card, fading in and out, so the eye finds it while scanning
   without the diary looking alarmed. The wash is an overlay whose OPACITY animates: opacity
   interpolates the same in every engine and costs the compositor nothing, where animating a
   colour-mix does neither. The clock stays, because colour alone is never the whole signal. */
.ag-appt.late::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--warning-solid); opacity: 0.12; animation: late-pulse 2.6s ease-in-out infinite; }
.ag-appt.late .hd, .ag-appt.late small { position: relative; z-index: 1; }   /* text above the wash */
@keyframes late-pulse { 0%, 100% { opacity: 0.07; } 50% { opacity: 0.26; } }
/* Reduced motion keeps the signal and drops the movement: a steady wash, not a missing warning. */
@media (prefers-reduced-motion: reduce) { .ag-appt.late::after { animation: none; opacity: 0.18; } }
.ag-appt .ag-ok.late { color: var(--warning-solid); }
/* Unfinished appointments are a standing note, not an alarm: one quiet line under the legend, in the
   warning colour so it is findable, at footnote size so it does not compete with the week itself. */
.ag-late { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-2) 0 0; font-size: var(--t-footnote-size); color: var(--warning-text); }
.ag-late .lnk { background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ag-late .lnk:hover { text-decoration-thickness: 2px; }
.ag-legend .sep { width: 1px; height: 1em; background: var(--hairline-2); margin: 0 var(--space-1); }
.ag-legend .lg { display: inline-flex; align-items: center; gap: 0.25rem; }
.ag-legend .lg.late { color: var(--warning-text); }
/* Full screen: the calendar alone. The shell keeps its grid, the sidebar and the header step out. */
.shell[data-focus="calendar"] .sidebar, .shell[data-focus="calendar"] .topbar { display: none; }
.shell[data-focus="calendar"] .main { margin-left: 0; }   /* the sidebar is fixed: the margin is what holds the room */
/* Full screen is for the week itself: the column fills the viewport and the grid takes what is left,
   scrolling inside its own box instead of pushing the page. The standing note and the hint step out —
   the point of asking for full screen is to see appointments, not prose. */
.shell[data-focus="calendar"] .content { padding: var(--space-4); max-width: none;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.shell[data-focus="calendar"] .content > * + * { margin-top: var(--space-3); }
.shell[data-focus="calendar"] .ag-cal { flex: 1 1 auto; min-height: 0; }
.shell[data-focus="calendar"] .ag-late, .shell[data-focus="calendar"] .content > p.t-footnote { display: none; }
.shell[data-focus="calendar"] .ag-legend { flex: 0 0 auto; margin-bottom: 0; }
/* A card is exactly two lines tall, in every engine. It used to depend on whether the customer's name
   happened to fit beside the time: it did in Chrome and often did not in Safari, whose text measures
   wider, so the card grew a third line, the hour did not grow with it, and the next hour painted over
   the overflow -- the card lost its service line. Height is no longer the font's decision: the first
   line is a flex row that cannot wrap, and a long name ellipsises like the service line already did. */
.ag-appt .hd { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.ag-appt .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-appt b { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ag-appt span { display: inline; font-weight: 600; }
.ag-appt small { display: block; color: var(--text-2); font-size: var(--t-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-appt .ag-ok { display: inline-flex; vertical-align: -0.125em; color: var(--text-2); flex: 0 0 auto; }   /* beats `.ag-appt span` */
.ag-ok .icon { width: 0.875rem; height: 0.875rem; }
.ag-legend { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); }
.ag-legend .k { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; margin-left: var(--space-3); border: 1px solid var(--hairline-2); }
.ag-legend .k:first-child { margin-left: 0; }
.ag-legend .k.ai { background: var(--accent-400); border-left: 3px solid var(--accent-600); }
/* the swatch shows what a card shows: a dashed LEFT edge, not a dashed box */
.ag-legend .k.man { background: var(--surface-raised); border: 1px dashed var(--text-3); border-left-width: 3px; }
.ag-legend .k.blkk { background: var(--danger-subtle); }
.ag-legend .k.offk { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 3px, var(--surface-raised) 3px, var(--surface-raised) 6px); }
.sede-row { display: flex; align-items: center; gap: var(--space-3); }
.sede-row .estado { font-size: var(--t-footnote-size); color: var(--text-2); min-width: 4.5rem; text-align: right; }
.sede-swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0; }
.sede-swatches button { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid transparent; background: var(--branch-color, var(--surface-sunken)); }
.sede-swatches button.on { border-color: var(--text-1); }

/* -- caja -- */
.cperiod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.cperiod .mes { display: flex; align-items: center; gap: var(--space-1); }
.cperiod h3 { min-width: 9.5em; text-align: center; margin: 0; } .cperiod h3::first-letter { text-transform: uppercase; }
/* -- day chart: a scale on the left, a readout that follows the pointer, and a strip that scrolls
   on a phone without clipping either of them -- */
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: stretch; max-width: 56rem; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  padding: var(--space-6) 0 1.15rem; font-size: var(--t-caption-size); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-plot { position: relative; min-width: 0; padding-top: var(--space-6); }
.chart-plot::before, .chart-plot::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
.chart-plot::after { bottom: 1.15rem; background: var(--hairline-2); }
.chart-plot::before { bottom: calc(1.15rem + (100% - 1.15rem - var(--space-6)) / 2); background: var(--hairline); }
.chart-tip { position: absolute; top: 0; left: var(--tip-x, 50%); transform: translateX(-50%); z-index: var(--z-overlay);
  display: grid; grid-template-columns: auto auto; gap: 1px var(--space-3); align-items: baseline;
  background: var(--text-1); color: var(--surface-raised); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
  font-size: var(--t-caption-size); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; max-width: 100%; }
.chart-tip b { justify-self: end; font-weight: 600; }
.cbars { display: flex; align-items: flex-end; gap: var(--space-1); height: 6.5rem; overflow-x: auto; padding-bottom: 2px; }
.cbar { flex: 1 1 0; min-width: 0.875rem; max-width: 2.25rem; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 3px; border-radius: var(--radius-xs); }
.cbar:hover, .cbar:focus-visible { background: var(--surface-sunken); }
.cbar > span { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; }
.cbar i, .cbar u { display: block; flex: 1 1 0; max-width: 0.4375rem; height: var(--h, 0%); border-radius: 3px 3px 0 0; min-height: 2px; }
.cbar i { background: var(--chart-1); } .cbar u { background: var(--chart-2); }
.cbar b { font-size: var(--t-caption-size); color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cbar:nth-child(even) b { visibility: hidden; }   /* every other day is enough of a ruler */
@media (min-width: 55.0625rem) { .cbar:nth-child(even) b { visibility: visible; } }
.cmt { font-weight: 600; white-space: nowrap; margin-left: var(--space-3); font-variant-numeric: tabular-nums; }
.cmt.pos { color: var(--success-text); } .cmt.neg { color: var(--danger-text); }

/* -- chats: keep the shape, warm the surfaces, drop the dot-grid wallpaper -- */
.wa-search { width: 100%; margin: 0 0 var(--space-3); border-radius: var(--radius-full); padding: 0 var(--space-4); }
.wa-list { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; }
.wa-row { display: flex; gap: var(--space-3); align-items: center; width: 100%; text-align: left; color: inherit; padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--hairline); }
.wa-row:last-child { border-bottom: 0; } .wa-row[hidden] { display: none; } .wa-row:hover { background: var(--surface-sunken); }
/* the branch a chat belongs to, as a shaded edge — the same colour the agenda gives it */
.wa-row.has-branch { border-left: 3px solid var(--branch-color, transparent); background: color-mix(in oklab, var(--branch-color) 7%, var(--surface-raised)); }
.wa-row.has-branch:hover { background: color-mix(in oklab, var(--branch-color) 14%, var(--surface-raised)); }
.wa-nm .pill { margin-left: var(--space-2); }
.wa-rt { flex: 1; min-width: 0; }
.wa-nm { display: flex; align-items: baseline; gap: var(--space-3); }
.wa-nm b { font-weight: 600; font-size: var(--t-subhead-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-nm span { margin-left: auto; font-size: var(--t-caption-size); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-lm { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--t-footnote-size); margin-top: 2px; }
.wa-lm .p { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-lm .p .icon { width: 0.875rem; height: 0.875rem; vertical-align: -0.125em; }
.wa-lm em { font-style: normal; color: var(--warning-text); }
.content.wa-host { padding: 0; max-width: none; }
.wa { display: flex; flex-direction: column; height: calc(100dvh - 3.875rem); background: var(--surface-sunken); overflow: hidden; }
body.chat-open { overflow: hidden; }   /* the thread is the screen; nothing behind it scrolls */
.wa-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--hairline); }
.wa-head > div:not(.right) { flex: 1; min-width: 0; }   /* the name takes the room the controls leave */
.wa-head .nm { font-weight: 600; font-size: var(--t-subhead-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head .st { font-size: var(--t-caption-size); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.wa-back { font-size: var(--t-title3-size); line-height: 1; min-width: var(--control-md); min-height: var(--control-md); color: var(--text-2); display: inline-grid; place-items: center; }
.wa-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-4) var(--space-5); background: var(--surface-sunken); }
/* the same thread, read inside a patient file: a panel instead of a whole screen */
.wa-thread { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); max-height: 26rem; overflow-y: auto; }
.wa-thread .wa-b { max-width: 84%; }
.wa-day { text-align: center; margin: var(--space-3) 0; }
.wa-day span { display: inline-block; background: var(--surface-raised); color: var(--text-2); font-size: var(--t-caption-size); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--hairline); max-width: 80%; }
.wa-b { position: relative; width: fit-content; max-width: 76%; margin: 2px 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised);
  border: 1px solid var(--hairline); font-size: var(--t-subhead-size); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-b.out { margin-left: auto; background: var(--accent-subtle); border-color: transparent; }
.wa-b.in.tail { border-top-left-radius: var(--radius-xs); } .wa-b.out.tail { border-top-right-radius: var(--radius-xs); }
.wa-b .who { display: block; font-size: var(--t-caption-size); font-weight: 700; margin-bottom: 2px; }
.wa-b .who.ai { color: var(--accent-text); } .wa-b .who.hum { color: var(--info-text); }
.wa-meta { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-3); vertical-align: baseline;
  font-size: var(--t-caption-size); color: var(--text-3); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-tick { display: inline-flex; } .wa-tick .icon { width: 0.875rem; height: 0.875rem; } .wa-tick.read { color: var(--info-text); } .wa-tick.bad { color: var(--danger-text); }
.wa-comp { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom));
  background: var(--surface-raised); border-top: 1px solid var(--hairline); }
.wa-comp .wa-hint { flex: 1 0 100%; margin: 0 0 var(--space-1); font-size: var(--t-caption-size); color: var(--text-3); text-align: center; }
.wa-comp textarea { flex: 1; min-height: var(--control-md); max-height: 7.5rem; border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); resize: none; line-height: 1.35; height: var(--h, auto); }
.wa-send { flex: 0 0 auto; width: var(--control-md); height: var(--control-md); border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: var(--t-body-size); }
.wa-send:hover { background: var(--accent-hover); }
.wa .field-error { padding: 0 var(--space-3); }
@media (max-width: 53.75rem) { body.chat-open .topbar { display: none; } body.chat-open .wa { height: var(--vvh, 100dvh); } .wa-b { max-width: 86%; }
  .wa-head .segmented > button { padding: 0 var(--space-3); font-size: var(--t-footnote-size); } }
@media (max-width: 35rem) {
  /* the name of the person you are writing to comes first; the controls take the row below */
  .wa-head { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .wa-head .avatar { width: 2.25rem; height: 2.25rem; }
  .wa-head .right { flex-basis: 100%; margin-left: 0; justify-content: space-between; }
  .wa-head .right .segmented { flex: 1; }
  .wa-head .right .segmented > button { flex: 1; white-space: nowrap; }
  .wa-comp { padding: var(--space-2); }
  .wa-comp .wa-hint { font-size: var(--t-caption-size); margin-bottom: 0; }
}

/* A datetime-local writes its own text and the browser decides how wide that is: "09/16/2026, 05:52 PM"
   needs noticeably more room than a two-digit duration, and half and half clipped the PM off the end. */
.grid-when { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-3); }
.grid-when input[type="datetime-local"] { min-width: 0; }
@media (max-width: 26rem) { .grid-when { grid-template-columns: 1fr; } }

.ov-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ov-head > p { margin: 0; flex: 1 1 auto; }
.ov-when select { min-height: var(--control-sm, 2rem); font-size: var(--t-footnote-size); padding: 0 var(--space-6) 0 var(--space-3); }
.wa-hidden-sw { margin-bottom: var(--space-2); color: var(--text-2); }
.ws-note { margin: calc(var(--space-2) * -1) 0 var(--space-3); }
.legend-min { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-3) 0 0; }
.legend-min .icon { color: var(--success-text, var(--text-2)); }

/* -- picking a patient who is already on file --------------------------------------------------- */
.pick { border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken);
  padding: var(--space-2); margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.pick > p { margin: 0 var(--space-2) var(--space-1); }
.pick-it { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: inherit; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.pick-it:hover, .pick-it:focus-visible { background: var(--surface-raised); outline: none; }
.pick-it:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); }
.pick-it span { color: var(--text-2); font-size: var(--t-footnote-size); }
.picked-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);
  padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken); }
.picked-row > div { flex: 1 1 auto; min-width: 0; }
.picked-row .secondary { color: var(--text-2); font-size: var(--t-footnote-size); }

/* -- a sheet's facts: one per line, label left, value right ------------------------------------- */
.dl { margin: 0 0 var(--space-4); }
.dl-row { display: grid; grid-template-columns: minmax(6rem, 8rem) 1fr; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.dl-row:last-child { border-bottom: 0; }
.dl-row dt { color: var(--text-2); font-size: var(--t-footnote-size); }
.dl-row dd { margin: 0; }
@media (max-width: 26rem) { .dl-row { grid-template-columns: 1fr; gap: 0; } }
.card.soft { background: var(--surface-sunken); border: 1px solid var(--hairline-2); box-shadow: none; padding: var(--space-3) var(--space-4); }
.card.soft .dl { margin-bottom: 0; }
.card.minor { margin-bottom: var(--space-4); }

/* -- cash: the toolbar over a section, the invoice drop zone, a tighter preview list -- */
.section-head { margin: var(--space-4) 0 var(--space-3); align-items: center; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: var(--space-4);
  border: 1px dashed var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken); }
.drop p { flex-basis: 100%; margin: 0; }
.rows.compact .row { padding: var(--space-2) var(--space-3); }

/* -- overview / reports -- */
.dn-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
/* 8rem left a hole too small for a Spanish word: "Confirmadas" had to be shortened to fit, and a
   truncated label is worse than no label. The card had the room. */
.dn { position: relative; width: 9.5rem; height: 9.5rem; flex: 0 0 auto; }
.dn svg { width: 100%; height: 100%; overflow: visible; }
.dn-seg, .dn-empty { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-width var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard); }
.dn-seg { stroke: var(--c); cursor: pointer; }
.dn-empty { stroke: var(--surface-sunken); }
.dn.picking .dn-seg { opacity: 0.55; }                       /* everything recedes so one can stand out */
.dn .dn-seg.hot { opacity: 1; stroke-width: 21; transform: translate(var(--tx), var(--ty)); }
/* Whatever goes in the middle has to fit the HOLE, not the ring. The hole is about 4.6rem across, so
   the label is capped there and wraps inside it -- "Confirmadas" used to run out over the arcs and
   read as a rendering fault. Two lines is the most it gets; beyond that the name is shortened. */
.dn-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dn-c b { font-size: var(--t-title3-size); line-height: 1; font-variant-numeric: tabular-nums; }
/* The hole is a CIRCLE: at the height where the label sits, a couple of lines below the middle, the
   usable width is the chord there (~4.3rem), not the diameter. So the cap is narrower than the hole
   looks, the type is a step smaller, and a word too long is shortened instead of broken mid-syllable. */
.dn-c small { display: block; max-width: 5.2rem; margin: 0.2rem auto 0; color: var(--text-3);
  font-size: var(--t-caption-size); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-leg { flex: 1; min-width: 8rem; font-size: var(--t-footnote-size); }
.dn-leg > div { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-sm); cursor: default; transition: background var(--motion-fast) var(--ease-standard); }
.dn-leg > div:hover { background: var(--surface-sunken); }
.dn-leg > div:focus-visible { background: var(--surface-sunken); outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.dn-leg b { margin-left: auto; font-variant-numeric: tabular-nums; }
.dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; display: inline-block; background: var(--dot, var(--text-3)); }
.feed { max-height: 21rem; overflow: auto; }
.feed .it { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-footnote-size); }
.feed .it:last-child { border-bottom: 0; } .feed .it b { font-weight: 600; } .feed .it span { color: var(--text-2); margin-left: var(--space-2); }
.feed .it time { margin-left: auto; color: var(--text-3); font-size: var(--t-caption-size); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qbar { position: relative; height: 0.625rem; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
/* The goal is a line ON the bar, not a number beside it: "38% of a 70% target" is arithmetic the reader
   should not have to do. It sits above the fill so it stays visible once the fill passes it. */
.qbar .goal { position: absolute; top: 0; bottom: 0; left: var(--g, 70%); width: 2px; background: var(--text-2); opacity: .55; }
.qbar i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); transition: width var(--motion-base) var(--ease-standard); } .qbar i.hot { background: var(--danger-solid); }
/* The mark that opens "what is this number?". It has to be quiet enough to ignore and big enough to
   hit with a thumb, so it borrows the label's font size and pads out to a touch target. */
.xpl { display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1);
  padding: 0; width: 1.5rem; height: 1.5rem; vertical-align: -0.3em; border: 0; border-radius: var(--radius-full);
  background: none; color: var(--text-3); cursor: pointer; }
.xpl:hover, .xpl:focus-visible { background: var(--surface-sunken); color: var(--text-1); }
.xpl .icon { width: 0.9375rem; height: 0.9375rem; }

/* The occupancy headline: one number big enough to be the answer, and the sentence that says what to
   do about it. Both live in the card, above the bar, so the eye lands on the percentage first. */
.occ-pct { font-size: var(--t-title1-size); line-height: 1.1; font-weight: 700; margin: var(--space-2) 0 var(--space-2); }
.occ-say { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-3); background: var(--accent-subtle); color: var(--accent-subtle-fg); border-radius: var(--radius-md); font-size: var(--t-footnote-size); }
.occ-say .icon { flex: none; margin-top: 1px; }
.trend { display: flex; align-items: flex-end; gap: var(--space-1); padding: 0 2px; min-height: 8rem; }
.tr-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); border-radius: var(--radius-xs); }
.tr-col:hover, .tr-col:focus-visible { background: var(--surface-sunken); }
.tr-b { display: flex; align-items: flex-end; gap: 3px; height: 6.875rem; }
.tr-b i, .tr-b u { display: block; width: 0.6875rem; height: var(--h, 0%); border-radius: 3px 3px 0 0; } .tr-b i { background: var(--chart-1); } .tr-b u { background: var(--chart-2); }
/* A column is a thirtieth of the chart, so "10 ago" wrapped onto two lines and shoved its own bar
   sideways. Only one label in five is shown, so it may spill over its neighbours: there is room. */
.tr-col small { color: var(--text-3); font-size: var(--t-caption-size); white-space: nowrap; overflow: visible; }
.legend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); }
.legend .k { width: 0.5625rem; height: 0.5625rem; border-radius: 2px; display: inline-block; margin: 0 0 0 var(--space-3); flex: none; } .legend .k:first-child { margin-left: 0; }
.legend .k.income { background: var(--chart-1); } .legend .k.expense { background: var(--chart-2); }
.catbar { margin-bottom: var(--space-3); } .catbar > div { display: flex; justify-content: space-between; font-size: var(--t-footnote-size); margin-bottom: var(--space-1); }
.catbar .track { height: 0.5rem; background: var(--surface-sunken); border-radius: var(--radius-xs); overflow: hidden; } .catbar .track i { display: block; height: 100%; width: var(--w, 0%); background: var(--chart-2); }

/* -- website figures (views/analytics.js): one series, the website colour of the whole panel -- */
.tr-b i.web, .catbar .track i.web { background: var(--chart-6); }
.trend.days { gap: 2px; }                                                     /* 30 bars: a 2px surface gap between fills */
.trend.days .tr-col { gap: 2px; }
.trend.days .tr-b { width: 100%; height: 6.875rem; }
.trend.days .tr-b i { width: 100%; min-width: 3px; }
.trend.days .tr-col small { visibility: hidden; }                            /* every fifth day is labelled; the readout names the rest */
.trend.days .tr-col:nth-child(5n+1) small, .trend.days .tr-col:last-child small { visibility: visible; }
.site-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.site-head b { font-size: var(--t-title2-size); font-weight: 700; letter-spacing: var(--t-title2-ls); color: var(--text-1); }
.site-head > span { font-size: var(--t-footnote-size); color: var(--text-2); margin-right: var(--space-2); }
.site-card .chart { margin-bottom: var(--space-4); }
.metricas.funnel .m i { color: var(--text-2); }
@media (max-width: 56.25rem) { .metricas.funnel { grid-template-columns: repeat(2, 1fr); } }
.yoy { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-footnote-size); }
.yoy span { flex: 1; color: var(--text-2); } .yoy em { font-style: normal; color: var(--text-3); font-size: var(--t-caption-size); }
.yoy i { font-style: normal; font-weight: 700; min-width: 3.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.yoy i { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; } .yoy i.up { color: var(--success-text); } .yoy i.down { color: var(--danger-text); }

/* -- assistant + website -- */
.featrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.featrow:last-of-type { border-bottom: 0; } .featrow b { display: block; font-size: var(--t-subhead-size); font-weight: 600; }
.featrow small { display: block; color: var(--text-2); font-size: var(--t-footnote-size); } .featrow > div { flex: 1; min-width: 0; }
.featrow .ok { color: var(--success-text); display: inline-flex; } .featrow .off { color: var(--text-3); display: inline-flex; }
.site-prev { width: 100%; height: 18.75rem; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-raised); margin: var(--space-3) 0; }
.probe { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); min-height: 11rem; max-height: 20rem; overflow: auto; margin-bottom: var(--space-3); }
.probe .wa-b { max-width: 88%; }
.probe-in { display: flex; gap: var(--space-2); align-items: flex-end; }
.probe-in textarea { flex: 1; min-height: var(--control-md); max-height: 7rem; border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); resize: none; }
.wa-b.dots { opacity: 0.6; letter-spacing: 3px; }

/* -- master/detail (customers) -- */
.mdet { display: grid; grid-template-columns: 19.5rem 1fr; gap: var(--space-4); align-items: start; }
.md-list { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; }
.md-top { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--hairline); }
.md-top .wa-search { margin: 0; }
.md-rows { max-height: calc(100dvh - 12rem); overflow: auto; }
.md-rows .wa-row.on, .md-rows .wa-row[aria-current="true"] { background: var(--accent-subtle); }
.md-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.md-head h3 { margin: 0; flex: 1; min-width: 0; }
.md-content { margin-top: var(--space-3); }
.md-head #cu_back { display: none; }
@media (max-width: 56.25rem) {
  .mdet { grid-template-columns: 1fr; } .mdet .md-body { display: none; }
  .mdet.showdetail .md-list { display: none; } .mdet.showdetail .md-body { display: block; }
  .md-head #cu_back { display: inline-flex; } .md-rows { max-height: none; }
}

/* ---- first steps (/start) ---------------------------------------------------------------------- */
.ob-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ob-progress { min-width: 12rem; flex: 0 1 18rem; }
.ob-progress .qbar { margin-top: var(--space-2); }
.ob-card { margin-bottom: var(--space-4); }
.ob-card.is-done { opacity: 0.82; }
.ob-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-text); font-size: var(--t-footnote-size); font-weight: 700; }
.ob-fields { display: grid; gap: var(--space-3); }
.ob-field { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.ob-field > input[type=checkbox] { margin-top: 0.35em; width: 1rem; height: 1rem; accent-color: var(--accent); }
.ob-field > span { display: grid; gap: var(--space-1); min-width: 0; }
.ob-field > span > b { font-size: var(--t-footnote-size); color: var(--text-2); font-weight: 600; }
.ob-field input:not([type=checkbox]), .ob-field textarea { width: 100%; }
.ob-svcs { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.ob-svc { display: grid; grid-template-columns: auto minmax(8rem, 2fr) 5.5rem 4.5rem minmax(6rem, 1fr); gap: var(--space-2); align-items: center; }
.ob-svc input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--accent); }
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.ob-tile { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer; }
.ob-tile:hover { border-color: var(--accent); }
.ob-url { display: block; margin: var(--space-2) 0 var(--space-3); word-break: break-all; }
.ob-domain { margin-top: var(--space-4); }
.ob-foot { margin-top: var(--space-5); }
@media (max-width: 40rem) { .ob-svc { grid-template-columns: auto 1fr; } .ob-svc input[type=number] { grid-column: 2; } }