/* ==========================================================================
   Components. One definition per pattern; views only compose them. Tokens only (colours live in tokens.css),
   with two documented exceptions: the white QR tile and the chevron of .select (a data URI cannot use var()).
   Additive changes only after S0 (SPEC Appendix B). Not linked yet.
   Order of the stylesheets in <head>: tokens, base, components, shell, dialogs, then the view files.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--target); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: none; color: var(--ink);
  font-weight: 650; font-size: var(--fs-md); line-height: 1.15; text-align: center; text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere;                    /* S10 round 1: "Eliminar a <45 letters>" breaks inside the button; its min-content no longer pushes the card, the row and the page wider */
  transition: background var(--t-fast), border-color var(--t-fast), filter var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.btn:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.btn--lg { min-height: 52px; padding: 0 22px; border-radius: 14px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--primary { background: linear-gradient(135deg, var(--accent-hi), var(--accent-lo)); color: var(--accent-ink); box-shadow: var(--glow); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--secondary { background: var(--s3); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--s4); }
.btn--ghost { color: var(--accent); padding: 0 12px; }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--danger { border-color: var(--danger-line); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--danger-solid { background: var(--danger-strong); color: var(--danger-ink); }
.btn--danger-solid:hover { filter: brightness(1.08); }
.btn--warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.btn--warn:hover { background: var(--warn-wash); }
.btn--sm { padding: 0 14px; font-size: var(--fs-sm); } /* still 44px tall */
.btn--icon { width: var(--target); padding: 0; }
/* Disabled never means silent: an explanation line always sits next to it (.why). aria-disabled keeps it focusable. */
.btn[aria-disabled="true"], .btn:disabled { background: var(--s2); border-color: var(--line); color: var(--disabled); box-shadow: none; cursor: not-allowed; filter: none; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--spinner-dark); border-top-color: var(--accent-ink); animation: spin .8s linear infinite; }
.btn--secondary.is-loading::after { border-color: var(--spinner-light); border-top-color: var(--ink); }
.btn.is-done { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); box-shadow: none; }
.why { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.why .icon { margin-top: 2px; color: var(--warn); }

/* ---------- Inline status next to a control (K.inline): busy / ok / error. role=status, role=alert for errors; an error never auto-clears ---------- */
.inline-status { margin-top: var(--sp-2); }
.inline-status:empty { display: none; }   /* the ONE rule: an empty status line takes no room (it used to be repeated in three stage files) */
.inline-status__text { flex: 1; min-width: 0; }
.inline-status--busy .icon { color: var(--info); animation: spin 1s linear infinite; }
.inline-status--ok .icon { color: var(--accent); }
.inline-status--error { color: var(--danger); }
.inline-status--error .icon { color: var(--danger); }
.link { color: var(--accent); background: none; border: 0; padding: 0; min-height: var(--target); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Chips / badges (always icon or word, never colour alone) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--s3); color: var(--ink-2); border: 1px solid var(--line); }
.chip .icon { width: 14px; height: 14px; }
.chip--ok { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.chip--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.chip--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.chip--info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.chip--type { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.chip--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ---------- Cards ---------- */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); padding: var(--sp-5); }
.card--flush { padding: 0; overflow: hidden; }
.card--warn { border-color: var(--warn-line); background: linear-gradient(180deg, var(--warn-faint), var(--s1) 60%); }
.card--danger { border-color: var(--danger-line); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card__head .btn { white-space: nowrap; flex: none; }
.card__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
.card__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.section-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.section-sub { font-size: var(--fs-md); color: var(--muted); margin-top: 4px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.field__hint { font-size: var(--fs-sm); color: var(--muted); }
.field__error { font-size: var(--fs-sm); color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--s2); color: var(--ink);
  border: 1px solid var(--field-border); border-radius: var(--r-md);
  font-size: 16px; /* never smaller: iOS zooms below 16 */
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--field-border-hover); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.textarea { padding: 12px 14px; min-height: 132px; line-height: 1.45; resize: vertical; }
.textarea--mono { font-family: var(--font-mono); font-size: 16px; }
.select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a3b5cc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.input-row { display: flex; gap: var(--sp-2); }
.input-row > .input, .input-row > .select { flex: 1; min-width: 0; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; min-height: var(--target); padding: 8px 0; cursor: pointer; }
.checkbox input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--field-border); border-radius: 7px; background: var(--s2); display: grid; place-items: center; cursor: pointer; }
.checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after { content: ""; width: 12px; height: 7px; border: solid var(--accent-ink); border-width: 0 0 3px 3px; transform: translateY(-1px) rotate(-45deg); }
.checkbox span { font-size: var(--fs-md); }
/* Bare form controls inside <main> and the dialogs that carry no .input / .select / .textarea class get the same look (the zero-specificity :where() keeps every class rule stronger) */
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]),
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) select,
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) textarea { width: 100%; min-height: 48px; padding: 0 14px; background: var(--s2); color: var(--ink); border: 1px solid var(--field-border); border-radius: var(--r-md); font-size: 16px; }
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) textarea { min-height: 132px; padding: 12px 14px; line-height: 1.45; resize: vertical; font-family: var(--font-mono); }
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) input[readonly] { color: var(--muted); }
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); background: transparent; }
:where(main, #payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }

/* Switch rows: the whole row is the target */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 60px; padding: 10px 0; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch-row__title { display: block; font-weight: 600; }
.switch-row__hint { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.switch { appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border-radius: var(--r-pill); background: var(--s3); border: 2px solid var(--field-border); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transition: transform var(--t-base) var(--ease), background var(--t-base); }
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(20px); background: var(--accent-ink); }
.switch:focus-visible { outline-offset: 3px; }

/* Range */
.range { width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--s3) var(--fill, 50%)); }
.range::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 4px solid var(--accent); box-shadow: var(--e-thumb); }
.range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--s3); }
.range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 4px solid var(--accent); }

/* ---------- Segmented control / tabs ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg__btn { text-decoration: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 650; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"] { background: var(--s3); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.seg__btn .chip { min-height: 22px; padding: 0 8px; font-size: var(--fs-cap); }
/* Tabs (SPEC 4.6): equal columns and NEVER a bar that scrolls sideways (a tab off screen is a feature nobody can find). A label that does not fit wraps;
   on a phone the bar is two columns, so the four tabs of Herramientas are 2 x 2. The bar leaves room before the content below it. */
.tabs { margin-bottom: var(--sp-5); }
.tabs .seg__btn { white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 760px) { .tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Choice cards (radio-style) */
.choice { display: grid; gap: var(--sp-3); }
.choice__item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--s2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice__item:hover { border-color: var(--line-hover); }
.choice__item input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 2px solid var(--field-border); display: grid; place-items: center; background: var(--s1); }
.choice__item input:checked { border-color: var(--accent); }
.choice__item input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.choice__item:has(input:checked) { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--s2)); } /* progressive enhancement only */
.choice__item.is-checked { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--s2)); }
.choice__title { font-weight: 650; display: block; }
.choice__sub { font-size: var(--fs-sm); color: var(--muted); display: block; }
.choice__price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Accordion: closed state always shows the current value ---------- */
.acc { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.acc + .acc { margin-top: var(--sp-3); }
.acc__sum { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 64px; padding: 12px 16px; cursor: pointer; }
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum:hover { background: var(--wash); }
.acc__sum:focus-visible { outline-offset: -3px; }          /* the accordion clips (overflow: hidden): a ring drawn outside would be cut off, in every stage */
.acc__title { font-weight: 650; }
.acc__value { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
.acc__chev { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); transition: transform var(--t-base) var(--ease); }
.acc[open] > .acc__sum .acc__chev { transform: rotate(180deg); }
.acc[open] > .acc__sum { border-bottom: 1px solid var(--line); }
.acc__body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }

/* ---------- Route (the guided stepper). Vertical by default. ---------- */
.route { display: grid; gap: 0; counter-reset: none; }
.route__step { position: relative; }
.route__link { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; min-height: 68px; padding: 10px 12px 10px 4px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.route__link:hover { background: var(--wash); }
.route__node { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: var(--fs-sm); background: var(--s2); border: 2px solid var(--line-strong); color: var(--muted); font-variant-numeric: tabular-nums; }
.route__step::before { /* the thread */ content: ""; position: absolute; left: 21px; top: 50%; width: 2px; height: 100%; background: var(--line-strong); }
.route__step:last-child::before { display: none; }
.route__step.is-done::before { background: var(--accent); }
.route__title { display: block; font-weight: 700; font-size: var(--fs-md); }
.route__value { display: block; font-size: var(--fs-sm); color: var(--muted); }
.route__go { color: var(--muted); }
.route__step.is-done .route__node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.route__step.is-current .route__node,
.route__step.is-ready .route__node { background: var(--s1); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.route__step.is-current .route__title, .route__step.is-ready .route__title { color: var(--accent); }
.route__step.is-warn .route__node { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.route__step.is-live .route__node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); animation: ring 2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 12px var(--accent-clear); } }
.route__step:not(.is-current):not(.is-ready) .route__go { opacity: .7; }
.route__node .icon { width: 18px; height: 18px; stroke-width: 3; }

/* Horizontal strip (phone + tablet inside Campaña) */
.route--h { grid-template-columns: repeat(4, 1fr); }
.route--h .route__link { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 12px 4px 10px; align-content: start; }
.route--h .route__step::before { left: calc(50% + 24px); right: calc(-50% + 24px); top: 30px; width: auto; height: 2px; }
.route--h .route__text { display: block; }
.route--h .route__title { font-size: var(--fs-sm); line-height: 1.2; }
.route--h .route__value, .route--h .route__go { display: none; }
@media (min-width: 761px) { .route--h .route__value { display: block; } .route--h .route__title { font-size: var(--fs-md); } }
/* the route strip of Campaña (painted by js/views/inicio.js paintRoute): four columns while every word of every station fits its column; when the text is larger or the screen
   narrower the stations stack in a list (the vertical route of the desktop), so a word is never broken in the middle. The container query measures in the em of the text, so it
   follows the size of the text and not only the width of the screen (a browser without container queries keeps the columns and breaks the word only as a last resort). */
.campana__route > .card { container: route / inline-size; }
.route--h { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route--h .route__link, .route--h .route__text { min-width: 0; }
.route--h .route__title { overflow-wrap: break-word; hyphens: manual; }
@container route (max-width: 18.5em) {
  .route--h { grid-template-columns: 1fr; }
  .route--h .route__link { grid-template-columns: 36px minmax(0, 1fr) auto; justify-items: stretch; text-align: left; gap: 14px; padding: 10px 12px 10px 4px; }
  .route--h .route__go { display: block; }
  .route--h .route__step::before { left: 21px; right: auto; top: 50%; width: 2px; height: 100%; }
  .route--h .route__title { font-size: var(--fs-md); }
}

/* ---------- Alerts ---------- */
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--s2); font-size: var(--fs-sm); }
.alert .icon { margin-top: 1px; }
.alert__title { font-weight: 700; font-size: var(--fs-md); margin-bottom: 2px; }
.alert--info { background: var(--info-soft); border-color: var(--info-line); } .alert--info > .icon { color: var(--info); }
.alert--warn { background: var(--warn-soft); border-color: var(--warn-line); } .alert--warn > .icon { color: var(--warn); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger-line); } .alert--danger > .icon { color: var(--danger); }
.alert--ok { background: var(--accent-soft); border-color: var(--accent-line); } .alert--ok > .icon { color: var(--accent); }
.alert p + p { margin-top: 4px; }
.alert .btn { margin: -6px -6px -6px 0; }
.alert__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- Note line: an icon and one sentence under a field or inside a dialog (payment, hand-off, supervision help). The ONE definition: it used to be in two view files ---------- */
.note-line { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.note-line .icon { flex: none; color: var(--info); margin-top: 2px; }
.note-line[hidden] { display: none; }

/* ---------- Lists & rows ---------- */
.rows { display: grid; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s3); color: var(--ink-2); }
.row__icon--ok { background: var(--accent-soft); color: var(--accent); }
.row__icon--warn { background: var(--warn-soft); color: var(--warn); }
.row__icon--danger { background: var(--danger-soft); color: var(--danger); }
.row__title { font-weight: 650; }
.row__sub { font-size: var(--fs-sm); color: var(--muted); }
a.row { color: inherit; text-decoration: none; }
a.row:hover .row__title { color: var(--accent); }

/* Key/value rows with copy */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv__k { font-size: var(--fs-sm); color: var(--muted); grid-column: 1; }
.kv__v { grid-column: 1; font-weight: 600; word-break: break-all; }
.kv > .btn { grid-column: 2; grid-row: 1 / span 2; }

/* Stat tiles */
.stat { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); display: grid; gap: 2px; align-content: start; }
.stat__label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.stat__value { font-size: var(--fs-num); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: var(--fs-md); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.stat__hint { font-size: var(--fs-sm); color: var(--muted); }

/* Progress */
.progress { height: 10px; border-radius: var(--r-pill); background: var(--s3); overflow: hidden; }
.progress__bar { height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); transition: width var(--t-slow) var(--ease); }

/* Dropzone */
.drop { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 20px; border: 2px dashed var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.drop:hover, .drop.is-over, .drop:focus-within { background: var(--accent-wash); border-color: var(--accent); }
.drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--s1); color: var(--accent); display: grid; place-items: center; margin-bottom: 4px; }
.drop__title { font-size: var(--fs-lg); font-weight: 700; }
.drop__hint { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }

/* QR */
.qr { width: 232px; max-width: 100%; aspect-ratio: 1; padding: 14px; background: #fff; /* the one literal colour: a QR code needs a white quiet zone */ border-radius: var(--r-md); }
.qr svg { width: 100%; height: 100%; }

/* Empty / loading */
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--s2); color: var(--muted); }
.empty__title { font-size: var(--fs-lg); font-weight: 700; }
.empty p { color: var(--muted); max-width: 44ch; }
.skeleton { position: relative; overflow: hidden; background: var(--s2); border-radius: var(--r-sm); min-height: 16px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--wash-2), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Toasts (one queue, errors persist) ---------- */
.toasts { position: fixed; z-index: 2000; left: 12px; right: 12px; bottom: calc(var(--dock-h) + var(--safe-b) + 12px); display: grid; gap: 10px; pointer-events: none; justify-items: stretch; }
.toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 8px 14px 16px; background: var(--toast-bg); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--e3); animation: toast-in var(--t-base) var(--ease); }
.toast > .icon { margin-top: 2px; }
.toast--ok > .icon { color: var(--accent); } .toast--ok { border-color: var(--accent-line); }
.toast--error > .icon { color: var(--danger); } .toast--error { border-color: var(--danger-line); }
.toast--info > .icon { color: var(--info); }
.toast__title { font-weight: 700; }
.toast__text { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
.toast__actions { display: flex; gap: 6px; margin-top: 4px; }
.toast__actions .btn { margin-left: -12px; }
.toast__close { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); border-radius: 12px; display: grid; place-items: center; margin-top: -6px; }
.toast__close:hover { color: var(--ink); background: var(--wash-2); }
.toast.is-leaving { animation: toast-out var(--t-base) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (min-width: 761px) {
  .toasts { left: auto; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 48px)); }
}

/* ---------- Call rows (list on phone, grid row on desktop; never a clipped table). Rendered by K.ui.callRow ---------- */
.calls { display: grid; }
.call { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot main more" "dot out out"; gap: 4px 12px; align-items: center; padding: 12px 0; }
.call + .call { border-top: 1px solid var(--line); }
.call__dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); align-self: start; margin-top: 8px; }
.call__dot--ok { background: var(--accent); } .call__dot--live { background: var(--accent); animation: pulse 1.6s infinite; } .call__dot--warn { background: var(--warn); } .call__dot--bad { background: var(--danger); } .call__dot--info { background: var(--info); }
.call__main { grid-area: main; min-width: 0; display: grid; }
.call__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.call__meta { font-size: var(--fs-sm); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }       /* the agent's name is in it: 45 unbroken letters break, they do not stick out of the row */
.call__agent { overflow-wrap: anywhere; min-width: 0; }
.call__out .chip { white-space: normal; max-width: 100%; }                       /* "No se pudo completar la llamada" at 200% text wraps inside its row (S10 round 1) */
.call__out { grid-area: out; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.call__more { grid-area: more; }
.call__cols { display: none; }
@media (min-width: 1100px) {
  .calls--grid .call { grid-template-columns: 14px 150px 220px 1fr 80px 140px 44px; grid-template-areas: "dot time num out dur agent more"; padding: 8px 0; min-height: 56px; }
  .calls--grid .call__main { display: contents; }
  .calls--grid .call__num { grid-area: num; } .calls--grid .call__time { grid-area: time; color: var(--muted); font-size: var(--fs-sm); }
  .calls--grid .call__meta { display: none; }
  .calls--grid .call__dur { grid-area: dur; } .calls--grid .call__agent { grid-area: agent; }
  .calls--grid .call__cols { display: grid; grid-template-columns: 14px 150px 220px 1fr 80px 140px 44px; gap: 12px; padding: 0 0 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
  .calls--grid .call__time, .calls--grid .call__dur, .calls--grid .call__agent { display: block; }
}
.call__time, .call__dur, .call__agent { display: none; }

/* ---------- Live call row (K.ui.liveCallRow): the whole top part opens the call sheet; supervision buttons sit under it, 44 px tall ---------- */
.live-list { display: grid; gap: var(--sp-3); }
.live-call { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); }
.live-call__open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 72px; padding: 12px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.live-call__open:hover { background: var(--wash); }
.live-call__open:focus-visible { outline-offset: -3px; }
.live-call__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.live-call__icon--ring { background: var(--info-soft); color: var(--info); }
.live-call__icon--agent { background: var(--accent); color: var(--accent-ink); }
.live-call__icon--wait { background: var(--warn-soft); color: var(--warn); }
.live-call__main { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }      /* S10 round 1: minmax(0, 1fr), not the automatic column, which is as wide as the number */
.live-call__num { font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.live-call__state { font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.live-call__state .chip { white-space: normal; max-width: 100%; }
.live-call__timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-lg); color: var(--ink); text-align: right; }
.live-call__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.live-call.is-waiting { border-color: var(--warn-line); background: linear-gradient(180deg, var(--warn-faint), var(--s1) 70%); }
.live-call.is-waiting .live-call__state { color: var(--warn); font-weight: 600; }

/* Tablet: a route variant that becomes a horizontal strip under the hero (Inicio) */
@media (min-width: 761px) and (max-width: 1099px) {
  .route--tab-h { grid-template-columns: repeat(4, 1fr); }
  .route--tab-h .route__link { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 12px 6px 10px; align-content: start; }
  .route--tab-h .route__step::before { left: calc(50% + 24px); right: calc(-50% + 24px); top: 30px; width: auto; height: 2px; }
  .route--tab-h .route__go { display: none; }
}