/* ==========================================================================
   View: Inicio (SPEC 2.6, 3.1, 4.8, 4.10, 4.11). The shell parts that follow the state of the account (ribbon, balance chip, sticky next-step bar) are in css/shell.css.
   Adapted from docs/web-rework/final-proto/css/view-inicio.css with tokens only (SPEC 16.9). Owner: slice S1.
   Three states of ONE view: setting up (hero, route, account line), ready (hero, "Todo preparado", Atención, team, recap, last calls, "Antes de lanzar"),
   running or paused (the hero is the live card, then live calls, Atención, team, funnel, last calls). js/views/inicio.js only toggles [hidden].
   ========================================================================== */
.inicio__grid { display: grid; gap: var(--sp-5); }
.inicio__main, .inicio__side { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
.inicio__grid > *, .inicio__main > *, .inicio__side > * { min-width: 0; }
/* ONE column below 1100 px, in the order of priority (SPEC 2.6). The blocks are in that order in the DOM, so the keyboard and the screen reader read what the eye sees
   (SPEC 2.2, WCAG 2.4.3): there is no CSS `order`. From 1100 px js/views/inicio.js (layoutInicio) moves the route, Atención and the recap into the second column. */
@media (max-width: 1099px) { .inicio__side { display: none; } }
@media (min-width: 1100px) { .inicio__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }

/* The header: "Hola, Marta" with the date above it; running, the page is a console and the header is compact */
.page-head.is-compact { margin-bottom: var(--sp-3); }
.page-head.is-compact h1 { font-size: var(--fs-xl); }
@media (min-width: 1100px) { .page-head.is-compact h1 { font-size: var(--fs-2xl); } }

/* ---------- Hero: your next step (SPEC 2.4) ---------- */
.hero { position: relative; overflow: hidden; display: grid; gap: var(--sp-3); align-content: start; padding: 26px 22px 24px; border-radius: var(--r-xl); border: 1px solid var(--accent-line); background: radial-gradient(120% 110% at 100% 0%, var(--accent-wash), var(--accent-clear) 55%), linear-gradient(180deg, var(--hero-top), var(--hero-bottom)); box-shadow: var(--e2), 0 0 0 1px var(--accent-halo); }
.hero[hidden] { display: none; }
.hero > * { min-width: 0; }
.hero__big { position: absolute; right: 14px; top: -22px; font-size: 168px; line-height: 1; font-weight: 800; letter-spacing: -.06em; color: var(--glow-mint); pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; }
.hero__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hero__tag { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 30px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; }
.hero__tag--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.hero__tag--live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.hero__clock { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hero__clock[hidden] { display: none; }
.hero h2 { position: relative; font-size: 1.875rem; letter-spacing: -.03em; line-height: 1.12; max-width: 20ch; overflow-wrap: anywhere; }
.hero__lead { position: relative; color: var(--ink-2); font-size: var(--fs-lg); max-width: 46ch; }
.hero__lead[hidden], .hero__progress[hidden] { display: none; }
.hero__progress { position: relative; display: grid; gap: 8px; }
.hero__progress-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero__progress-text b { color: var(--ink); }
.hero__line { position: relative; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hero__line[hidden] { display: none; }
.hero__line--note { color: var(--warn); font-weight: 600; }
/* A refusal of Pausar, Reanudar, Parar or the launch is a line of the hero, between the facts and the buttons (SPEC 8.1, 37-error-en-su-sitio). K.inline fills it. */
.hero__slot { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; margin: 0; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--ink); font-size: var(--fs-sm); }
.hero__slot:empty { display: none; }
.hero__slot .icon { margin-top: 2px; color: var(--danger); }
.hero__slot .inline-status__text { flex: 1 1 calc(100% - 28px); min-width: 0; }
.hero__slot .inline-status__text > span:first-child { font-weight: 700; }      /* what failed, like the title of the prototype's alert */
.hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-3); }
.hero__actions .btn--lg { flex: 1 1 240px; min-width: 0; }
.hero__actions .btn[hidden] { display: none; }
/* Running or paused: the buttons are Pausar (or Reanudar) and Parar. They share a row while they fit and stack when they do not (200% text at 360 px), never sideways. */
.hero__actions--run { margin-top: 4px; }
.hero__actions--run .btn--lg { flex: 1 1 120px; }
.hero__actions--run[data-live="paused"] .btn--primary { flex-basis: 100%; }
@media (min-width: 761px) {
  .hero__actions--run[data-live="paused"] .btn--primary { flex: 2 1 220px; }
  .hero__actions--run[data-live="paused"] .btn--danger { flex: 1 1 120px; }
  .hero--live .hero__actions--run { max-width: 460px; }
}
.hero__why { position: relative; margin-top: 2px; }
.hero__why[hidden] { display: none; }
.hero__why summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); }
.hero__why summary::-webkit-details-marker { display: none; }
.hero__why summary .icon { color: var(--accent); }
.hero__why[open] summary { color: var(--ink); }
.hero__why p { font-size: var(--fs-sm); color: var(--ink-2); padding: 2px 0 6px; max-width: 52ch; }
.hero--live { padding: 18px; gap: 10px; }
.hero--live h2 { font-size: 1.5rem; max-width: none; }
@media (min-width: 1100px) {
  .hero { padding: 34px 34px 30px; align-content: center; }
  .hero h2 { font-size: 2.5rem; }
  .hero__big { font-size: 220px; right: 28px; top: -34px; }
  .hero--live { padding: 26px 30px; }
  .hero--live h2 { font-size: 1.875rem; }
}

/* ---------- Route card (setting up) ---------- */
.route-card { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.route-card[hidden] { display: none; }
.route-card .card__head { padding: 4px 6px 0; margin-bottom: var(--sp-2); }

/* ---------- "Todo preparado" (ready): one line ---------- */
.done-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 68px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--accent-line); color: var(--ink); text-decoration: none; }
.done-line[hidden] { display: none; }
.done-line:hover { background: var(--s2); }
.done-line__mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.done-line__mark .icon { width: 18px; height: 18px; stroke-width: 3; }
.done-line__text b { display: block; }
.done-line__text span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.done-line__go { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 650; font-size: var(--fs-sm); }

/* ---------- The compact account line while setting up (SPEC 2.6): the chip whose fact is the hero's subject is not drawn ---------- */
.acct-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-strip[hidden] { display: none; }
.acct-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--s1); border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.acct-chip b { color: var(--ink); }
.acct-chip .icon { color: var(--accent); }
.acct-chip:hover { border-color: var(--line-hover); background: var(--s2); }

/* ---------- Cards of the view ---------- */
#liveCard[hidden], #attentionCard[hidden], #rosterCard[hidden], #funnelCard[hidden], #recentCard[hidden], #toolsCard[hidden], #lastRunCard[hidden] { display: none; }
.empty--tight { padding: 22px 16px; }
/* The line under the live rows: what Escuchar and Hablar al agente need (said before anything is pressed), what happened when one was pressed, and the way out. The same box as
   the refusals of the hero and of stage 4: icon, sentence (the first one in bold), the way out as links with room between them. Its home is under the card's header, above the rows
   (room below it); after a press it sits between the pressed row and the next one (the list's gap is the room). */
.live-status:empty { display: none; }
.live-list > .live-status { margin: 0; }
.live-status { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; margin: 0 0 var(--sp-3); padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--s2); color: var(--ink); font-size: var(--fs-sm); }
.live-status .icon { flex: none; margin-top: 2px; }
.live-status .inline-status__text { flex: 1 1 calc(100% - 28px); min-width: 0; }
.live-status .inline-status__text > span:first-child { font-weight: 700; }
.live-status .link { font-size: var(--fs-sm); }
.live-status.inline-status--error { border-color: var(--danger-line); background: var(--danger-soft); color: var(--ink); }
.live-status.inline-status--warn { border-color: var(--warn-line); background: var(--warn-soft); }
.live-status.inline-status--warn .icon { color: var(--warn); }
.live-status.inline-status--ok { border-color: var(--accent-line); background: var(--accent-soft); }

/* Atención: every alert has its own fix button (SPEC 2.6) */
.attention { display: grid; }
.att { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 14px 0; }
.att + .att { border-top: 1px solid var(--line); }
.att:first-child { padding-top: 4px; }
.att .btn { grid-column: 2; justify-self: start; max-width: 100%; }
.att__body { min-width: 0; }
.att__title { font-weight: 700; overflow-wrap: anywhere; }
.att__text { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.row__icon--info { background: var(--info-soft); color: var(--info); }

/* The team: a state word per person */
.roster { display: grid; }
.rost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 56px; padding: 6px 0; }
.rost + .rost { border-top: 1px solid var(--line); }
.rost__name { flex: 1 1 8ch; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.rost .chip { flex: none; max-width: 100%; margin-left: auto; white-space: normal; }
.rost__more { padding: 8px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.rost__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; background: linear-gradient(135deg, var(--s3), var(--s2)); border: 1px solid var(--line-strong); color: var(--ink); }

/* Cómo va la campaña: three bars of the dialed ones, every value written as a number (SPEC 4.10) */
.mfunnel { display: grid; gap: 12px; }
.mfunnel__row { display: grid; grid-template-columns: minmax(6.5em, 9em) minmax(0, 1fr) minmax(3em, auto); gap: 12px; align-items: center; font-size: var(--fs-sm); }   /* em: the label column grows with the text */
.mfunnel__label { color: var(--ink-2); font-weight: 600; overflow-wrap: break-word; }
.mfunnel__track { height: 14px; border-radius: 7px; background: var(--s3); overflow: hidden; }
.mfunnel__fill { display: block; height: 100%; border-radius: inherit; width: var(--w, 0%); background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); }
.mfunnel__row:nth-child(2) .mfunnel__fill { background: var(--info); }
.mfunnel__row:nth-child(3) .mfunnel__fill { background: var(--ink-2); }
.mfunnel__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tu última campaña */
.lastrun { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.45; }

/* Antes de lanzar */
.tool-tip { display: grid; gap: var(--sp-2); }
.tool-tip .row { padding: 10px 0; }
.tool-tip .row[hidden] { display: none; }
.row__text { display: grid; min-width: 0; }
.row__go { color: var(--muted); }

/* ---------- Large text (SPEC 9: nothing is wider than the screen at 200 %): the parts of this view; the shell's are in css/shell.css, the route strip's in css/components.css ---------- */
/* the head of a card: the link goes under the title when both do not fit (the link keeps its size, nothing shrinks it) */
#view-inicio .card__head { flex-wrap: wrap; }
#view-inicio .card__head > div { flex: 1 1 12ch; min-width: 0; }
/* the chips of the rows of the last calls and of the team say their words in as many lines as they need */
#recentCalls .chip, .rost .chip { white-space: normal; max-width: 100%; }
/* the three bars of the funnel: the label, the bar and the number share a row while the longest label ("Contestaron") fits; otherwise the bar goes under them */
#funnelCard { container: funnel / inline-size; }
@container funnel (max-width: 17em) {
  .mfunnel__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .mfunnel__track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- First paint (SPEC 2.8, screenshot 44-carga-inicial) ---------- */
/* On Inicio the shapes of what is coming (greeting, hero, route card) take the place of the generic blocks of the shell: they sit inside the page gutters (.view) and in the columns of the real
   page, so nothing jumps when the data arrives. The view itself stays hidden until the first answer. Any other destination keeps the generic skeleton of the shell. */
.inicio-skel { display: none; }
body.is-loading[data-view="inicio"]:not(.is-load-failed) .inicio-skel { display: block; }
body.is-loading[data-view="inicio"]:not(.is-load-failed) #bootSkeleton { display: none; }
.inicio-skel__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.inicio-skel__eyebrow { height: 16px; width: 44%; max-width: 240px; }
.inicio-skel__title { height: 40px; width: 38%; max-width: 220px; border-radius: var(--r-md); }
.inicio-skel__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1100px) { .inicio-skel__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.inicio-skel__hero { min-height: 190px; align-content: end; }
.inicio-skel__bar { border-radius: var(--r-md); background: var(--s3); }
.inicio-skel__bar--title { height: 44px; width: 82%; }
.inicio-skel__bar--lead { height: 22px; width: 62%; }
.inicio-skel__bar--button { height: 52px; }
.inicio-skel__route { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.inicio-skel__route .card__sub { margin-bottom: var(--sp-3); }
.inicio-skel__route .route__link { min-height: 68px; }
.inicio-skel__route .route__node { border: 0; background: var(--s2); }
.inicio-skel__route .route__text { display: grid; gap: 8px; align-content: center; }
.inicio-skel__line { display: block; height: 14px; width: 86%; }
.inicio-skel__line--short { width: 40%; height: 16px; }
/* the rail's "Tu camino" while the first answer is on its way (js/views/inicio.js paintBootRail) */
.route--rail[data-skel] .route__link { cursor: default; }
.route--rail[data-skel] .route__node { border: 0; background: var(--s2); }
.route--rail[data-skel] .route__text { display: grid; gap: 6px; }
.rail-skel__bar { display: block; height: 14px; width: 90%; }
.rail-skel__bar--short { width: 55%; height: 14px; }