/* Base: reset, typography, focus, utilities. Tokens only (see tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar-real-h, 56px) + 20px); scroll-padding-bottom: calc(var(--dock-h) + 24px); }
/* WCAG 2.4.11 (focus not obscured): the sticky next-step bar (phones) and the supervision bar (every width) sit above the dock, so a focused control near the bottom is scrolled clear of
   them too. js/views/inicio.js and js/views/llamadas.js toggle these classes on <html> together with the ones on <body>; --supbar-h is the bar's real height (S10 round 1). */
html.has-actionbar { scroll-padding-bottom: calc(var(--dock-h) + var(--safe-b) + var(--action-h) + 24px); }
html.has-supbar { scroll-padding-bottom: calc(var(--dock-h) + var(--safe-b) + var(--supbar-h, 88px) + 36px); }
html.has-actionbar.has-supbar { scroll-padding-bottom: calc(var(--dock-h) + var(--safe-b) + var(--action-h) + var(--supbar-h, 88px) + 36px); }
@media (min-width: 761px) { html.has-supbar { scroll-padding-bottom: calc(var(--supbar-h, 88px) + 48px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-md)/1.5 var(--font);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body::before { /* the one decorative glow: very low, fixed, behind everything */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -10%, var(--glow-mint), transparent 62%),
    radial-gradient(700px 480px at -10% 8%, var(--glow-blue), transparent 60%);
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 650; font-size: var(--fs-md); margin-bottom: var(--sp-3); }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
.num, .tnum { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Focus: one ring everywhere, 3px mint, never removed */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: inherit; }
[tabindex="-1"]:focus { outline: none; }

/* Icons (inline SVG sprite, html/05-sprite.html). Decorative: aria-hidden on every use. */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }

/* Utilities */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 3000; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; border-radius: var(--r-md); font-weight: 700; text-decoration: none; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: var(--sp-4); }
.stack--lg { gap: var(--sp-6); }
.stack--sm { gap: var(--sp-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--between { justify-content: space-between; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); letter-spacing: .01em; }

/* Deep-link landing (K.focusTarget): a short ring so the eye finds the focused control */
.is-flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 4px var(--accent-glow); } 100% { box-shadow: 0 0 0 4px transparent, 0 0 0 18px transparent; } }

/* Reduced motion: every duration and iteration collapses. (!important is needed to beat component-level declarations.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Grid/flex children may shrink below their content: no horizontal page scroll at 360px */
:where(.stage, .stage-grid, .panel-calls, .inicio, .inicio__grid, .inicio__main, .inicio__side, .campana, .campana__stage, .cuenta, .tool-grid, .stack, .agents, .live-list, .health, .card, .acc__body, .agent__body, .agent__section, .dialog__body, .pay, .calls, .rows) > * { min-width: 0; }
.panel-calls, .inicio, .inicio__grid, .inicio__main, .inicio__side, .campana, .stage, .stage-grid, .cuenta, .tool-grid, .live-list, .agents { grid-template-columns: minmax(0, 1fr); }