/* ==========================================================================
   View: Llamadas (SPEC 3.3, 4.9, 4.10, 4.11), slice S6. Live calls and results, readable at every width: below 1100 px a call is a card, from 1100 px a
   one-line grid; nothing here scrolls sideways or clips a control. The shared rows (.live-call, .call, .chip, .stat, .empty) live in components.css;
   the supervision bar (.supbar) in shell.css. This file holds the page layout, the filter chips, the funnel and outcome bars, the keys and feed rows, the
   supervision line, and the content of the call sheet, the help and the hand-off (SPEC 16.9: a dialog's content is styled by the slice that owns it).
   Tokens only; breakpoints 761 and 1100.
   ========================================================================== */

/* ---- page: header, tabs, panel, tools. On a phone the tools come AFTER the content so they never push the first live call down. ---- */
.view--llamadas { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "empty" "panel" "tools"; gap: 0; align-content: start; }
.view--llamadas > .calls-head { grid-area: head; margin-bottom: var(--sp-4); }
.view--llamadas > .calls-tabs { grid-area: tabs; margin-bottom: var(--sp-4); }
.view--llamadas > .calls-empty { grid-area: empty; }
.view--llamadas > .panel-calls { grid-area: panel; }
.view--llamadas > .calls-tools { grid-area: tools; margin-top: var(--sp-6); }
.view--llamadas > [hidden] { display: none; }
.calls-head .lead { font-size: var(--fs-md); }
.calls-state { justify-self: start; max-width: 100%; margin: 0; }
.calls-state .chip { white-space: normal; max-width: 100%; }
.view--llamadas.is-never > .calls-tabs, .view--llamadas.is-never > .panel-calls { display: none; }
.calls-empty__action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.calls-empty__action:empty { display: none; }
@media (max-width: 1099px) { .calls-tools .btn { padding: 0 12px; } }
@media (min-width: 1100px) {
  .view--llamadas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head tools" "tabs tabs" "empty empty" "panel panel"; column-gap: var(--sp-4); align-items: end; }
  .view--llamadas > .calls-tools { margin-top: 0; margin-bottom: var(--sp-4); justify-content: flex-end; }
}

.panel-calls { display: grid; gap: var(--sp-5); align-content: start; }
.calls-side { display: grid; gap: var(--sp-5); min-width: 0; align-content: start; }
@media (min-width: 1100px) { .panel-calls--vivo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }

/* ---- filter chips: they wrap, never scroll sideways, never clip ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-3); }
.fchip { flex: none; min-height: var(--target); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 8px; }
.fchip:hover { border-color: var(--line-hover); }
.fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fchip b { font-variant-numeric: tabular-nums; }

/* ---- live list ---- */
.live-list { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.live-list:empty { display: none; }
.live-call__error { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 16px 14px; font-size: var(--fs-sm); color: var(--danger); }
.live-call__error .icon { flex: none; margin-top: 2px; }
.live-call__state .chip { margin-left: 6px; vertical-align: middle; }
.live-empty .empty__title { font-size: var(--fs-lg); }

/* supervisor prerequisites, always visible before pressing anything (SPEC 8.8) */
.sup-line { display: grid; gap: 10px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.live-list:empty + .live-empty + .sup-line, .live-list:empty + .sup-line { margin-top: 0; }
.sup-line .field { max-width: 360px; }
.sup-line__status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.sup-line__status a { color: var(--accent); min-height: var(--target); display: inline-flex; align-items: center; }
.sup-line .link { justify-self: start; }

/* the supervision bar (shell.css): the name and the timer are spans inside the title (shell.css makes every span a block) and the timer stays on the
   line of the name. Its height depends on the phase, the name, the language and the width, so js/views/llamadas.js writes it to --supbar-h and the toasts and
   the end of the page keep clear of it (shell.css assumes a one-line bar of 88 px). */
.supbar__text b span { display: inline; font-size: inherit; font-weight: inherit; color: inherit; }
.supbar__time { white-space: nowrap; }
@media (max-width: 760px) {
  body.has-supbar .toasts { bottom: calc(var(--dock-h) + var(--safe-b) + var(--supbar-h, 88px) + 20px); }
  body.has-supbar .app__body { padding-bottom: calc(var(--dock-h) + var(--safe-b) + var(--supbar-h, 88px) + 24px); }
}
/* S10 round 1: both bars are fixed at the foot of a phone. While someone listens during a setup stage the supervision bar rides above the next-step bar instead of on top of its button */
@media (max-width: 760px) {
  body.has-actionbar.has-supbar .supbar { bottom: calc(var(--dock-h) + var(--safe-b) + var(--action-h) + 10px); }
  body.has-actionbar.has-supbar .toasts { bottom: calc(var(--dock-h) + var(--safe-b) + var(--action-h) + var(--supbar-h, 88px) + 20px); }
  body.has-actionbar.has-supbar .app__body { padding-bottom: calc(var(--dock-h) + var(--safe-b) + var(--action-h) + var(--supbar-h, 88px) + 24px); }
}
@media (min-width: 761px) {
  body.has-supbar .toasts { bottom: calc(var(--supbar-h, 88px) + 36px); }
  body.has-supbar .app__body { padding-bottom: calc(var(--safe-b) + var(--supbar-h, 88px) + 48px); }
}

/* ---- keys pressed now, "Qué ha pasado" ---- */
.key-cap { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; background: var(--s3); border: 1px solid var(--line-strong); border-bottom-width: 4px; color: var(--ink); }
.key-cap--sm { width: 40px; height: 40px; border-radius: 11px; font-size: var(--fs-lg); border-bottom-width: 3px; }
.row--key, .row--feed { min-height: 56px; padding: 8px 0; }
.row--key { grid-template-columns: auto minmax(0, 1fr) auto; }
.row--feed { grid-template-columns: auto minmax(0, 1fr) auto; }
.row--key .row__title { overflow-wrap: anywhere; }
.row__title--plain { font-weight: 500; font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.row--feed .row__icon--info { background: var(--info-soft); color: var(--info); }
.feed-more { justify-self: start; margin-top: var(--sp-2); }

/* ---- Resultados: four counters, the funnel, how calls end ---- */
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 761px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats-grid .stat__value small { white-space: nowrap; }
.res-top { display: grid; gap: var(--sp-5); }
@media (min-width: 1100px) { .res-top { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.funnel, .outcomes { display: grid; gap: 12px; }
.funnel__row { display: grid; grid-template-columns: clamp(104px, 34vw, 160px) minmax(0, 1fr) minmax(32px, auto); gap: 12px; align-items: center; font-size: var(--fs-sm); }
.funnel__label, .outc__label { color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.funnel__track, .outc__track { height: 14px; border-radius: 7px; background: var(--s3); overflow: hidden; display: block; }
.funnel__fill { display: block; height: 100%; border-radius: inherit; width: var(--w, 0%); background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); }
.funnel__row--blue .funnel__fill { background: var(--info); }
.funnel__row--violet .funnel__fill { background: var(--accent); }
.funnel__row--ok .funnel__fill { background: var(--accent-hi); }
.funnel__val, .outc__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.outc { display: grid; grid-template-columns: clamp(104px, 34vw, 160px) minmax(0, 1fr) minmax(32px, auto); gap: 12px; align-items: center; font-size: var(--fs-sm); }
.outc__track { height: 12px; border-radius: 6px; }
.outc__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--disabled); }
.outc--ok .outc__fill { background: var(--accent); }
.outc--danger .outc__fill { background: var(--danger); }
.outc--danger .outc__label { color: var(--danger); }
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.facts:empty { display: none; }
.fact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.fact__k { color: var(--muted); }
.fact__v { color: var(--ink); }

/* the list: cards below 1100 px, one line from it (the row rules are components.css). The header row of the grid is aria-hidden. */
.calls--grid .call__main { min-width: 0; }
.calls--grid .call__num, .call__out .reason { overflow-wrap: anywhere; }
.call__out .reason { color: var(--muted); }
.list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.list-foot .muted { flex: 1 1 240px; min-width: 0; font-size: var(--fs-sm); }
.results-empty .empty__title { font-size: var(--fs-lg); }
@media (min-width: 1100px) {
  .calls--grid .call__dot { align-self: center; margin-top: 0; }
  /* components.css fixes the columns at 648 px: with the rail open that leaves 22 px for the result at 1100. These give the result the room that is left. */
  .calls--grid .call, .calls--grid .call__cols { grid-template-columns: 14px 64px minmax(150px, 200px) minmax(0, 1fr) 56px minmax(80px, 140px) 44px; }
}

/* ---- the call sheet: actions with a hint under each, a summary, the timeline of what the server recorded ---- */
.sheet-actions { display: grid; gap: 8px; }
.sheet-actions .btn { justify-content: flex-start; text-align: left; min-height: 52px; padding-block: 8px; height: auto; }
.sheet-actions .btn > span { display: grid; min-width: 0; }
.sheet-actions .btn small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sheet-actions .btn[aria-disabled="true"] small { color: var(--disabled); }
.sheet-actions .alert { margin-bottom: 4px; }
.sheet-actions .alert > div { min-width: 0; overflow-wrap: anywhere; }
.sheet-actions .why a { color: var(--accent); }
.sheet-sum { display: grid; margin: 4px 0; }
.sheet-sum__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; }
.sheet-sum__row + .sheet-sum__row { border-top: 1px solid var(--line); }
.sheet-sum__row .row__icon { width: 36px; height: 36px; border-radius: 10px; }
.sheet-sum__k { font-size: var(--fs-sm); color: var(--muted); }
.sheet-sum__v { font-weight: 650; overflow-wrap: anywhere; }
.techcode { font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
.calltl { display: grid; margin: 4px 0 8px; padding: 0; list-style: none; }
.calltl__step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 40px; }
.calltl__step::before { content: ""; position: absolute; left: 13px; top: 50%; width: 2px; height: 100%; background: var(--accent); }
.calltl__step:last-child::before { display: none; }
.calltl__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); border: 2px solid var(--accent); color: var(--accent-ink); }
.calltl__dot .icon { width: 14px; height: 14px; }
.calltl__txt { font-weight: 500; font-size: var(--fs-sm); }
.calltl__time { font-size: var(--fs-sm); color: var(--muted); }

/* ---- "¿Cómo funciona escuchar?" ---- */
.help-steps { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; counter-reset: help; }
.help-steps > li { position: relative; padding-left: 44px; counter-increment: help; }
.help-steps > li::before { content: counter(help); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: var(--fs-sm); background: var(--accent-soft); color: var(--accent); }
.help-steps b { display: block; margin-bottom: 2px; }
.help-steps p { color: var(--muted); font-size: var(--fs-sm); }

/* ---- the hand-off dialog ("Pasar a otro agente") ---- */
.handoff-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2); }
.handoff-modes > button { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; text-align: left; background: var(--s2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; }
.handoff-modes > button:hover { border-color: var(--line-hover); }
.handoff-modes > button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.handoff-modes .icon { width: 20px; height: 20px; color: var(--accent); }
.handoff-modes span { display: grid; gap: 2px; min-width: 0; }
.handoff-modes b { color: var(--ink); }
.handoff-modes small { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.handoff-modes > button[aria-pressed="true"] b { color: var(--accent); }
#agentHandoffStatus:empty { display: none; }