/* ============================================================
   TEMA — Crivo + Realoca · direção CONSOLE (1b)
   Substitui as seções 1 e 2 do tema.css atual.
   As seções 3+ (base e componentes) continuam funcionando:
   todos os nomes de token antigos foram mantidos.
   Contraste conferido par a par (WCAG 2.1 AA).
   ============================================================ */

/* ---------- 1. PRIMITIVOS (compartilhados) ---------- */
:root {
  /* Tipografia — troca de família, mesma escala
     Archivo: grotesca estreita, títulos densos sem parecer SaaS genérico.
     Public Sans: corpo de UI, x-height alto, ótimo em 13-14px de tabela.
     JetBrains Mono: números, notas, timecodes (tabular por padrão). */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-2xs: 0.625rem;  /* 10 — rótulo de coluna, caixa alta apenas */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 — corpo, nunca menor em inputs */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.4vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --lh-tight: 1.05; --lh-snug: 1.3; --lh-body: 1.55;
  --ls-display: -0.025em;  /* Archivo pede tracking negativo acima de 24px */

  /* Espaçamento (inalterado, base 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Raios — mais fechados que os atuais (6/10/16 → 6/8/10) */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(14, 22, 32, .06);
  --shadow-md: 0 6px 16px -10px rgba(14, 22, 32, .40);
  --shadow-lg: 0 32px 64px -20px rgba(14, 22, 32, .50);
  --shadow-pri: 0 8px 20px -8px rgba(27, 79, 216, .70);

  --tap: 44px;
  --row-h-compact: 44px;      /* densidade compacta */
  --row-h-comfort: 60px;      /* densidade confortável */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 160ms;
}

/* ---------- 2. TOKENS DE COR POR MARCA ---------- */

[data-brand="crivo"] {
  /* Console: azul de sinal + chrome quase preto + neutros frios. */
  --c-primary:        #1B4FD8;  /* 6.65:1 s/ branco · branco sobre ele 6.65:1 */
  --c-primary-strong: #143CA6;  /* 9.43:1 s/ branco · 8.06:1 sobre primary-soft */
  --c-primary-soft:   #E8EDFB;  /* fundo de seleção/filtro ativo */
  --c-on-primary:     #ffffff;  /* 6.65:1 sobre primary */
  --c-accent:         #0B7385;  /* 5.52:1 s/ branco — timecode, links de evidência */
  --c-accent-soft:    #E3F1F5;
  --c-bg:             #F1F4F8;
  --c-surface:        #ffffff;
  --c-surface-2:      #E7ECF3;  /* cabeçalho de tabela, hover de linha */
  --c-ink:            #0E1620;  /* 18.19:1 s/ branco · 15.33:1 s/ surface-2 */
  --c-muted:          #4C5866;  /* 7.25:1 s/ branco · 6.11:1 s/ surface-2 */
  --c-line:           #DCE3EC;  /* divisória de linha (não carrega texto) */
  --c-line-strong:    #BCC7D6;  /* borda de controle */
  --c-focus:          rgba(27, 79, 216, .45);
  --c-link:           #143CA6;  /* 9.43:1 */

  /* Chrome escuro — barra lateral, topo do dossiê, player, rodapé */
  --c-chrome:        #0D141C;
  --c-chrome-ink:    #ffffff;   /* 18.52:1 sobre chrome */
  --c-chrome-2:      #C3CCD8;   /* 11.42:1 — texto secundário */
  --c-chrome-muted:  #8A97A8;   /*  6.24:1 — texto terciário, ainda AA */
  --c-chrome-line:   rgba(255,255,255,.14);
  --c-chrome-accent: #5FC7DC;   /*  9.43:1 — timecode sobre chrome */
  --c-chrome-ok:     #7FE3C0;   /* 12.04:1 — número positivo sobre chrome */
}

[data-brand="realoca"] {
  /* Mesma estrutura, verde + neutros quentes. Nunca cita o Crivo. */
  --c-primary:        #0F7A55;  /* 5.34:1 s/ branco */
  --c-primary-strong: #0A5A3E;  /* 8.25:1 s/ branco · 7.10:1 sobre primary-soft */
  --c-primary-soft:   #E4F1EA;
  --c-on-primary:     #ffffff;  /* 5.34:1 sobre primary */
  --c-accent:         #B4520A;  /* 5.06:1 s/ branco — “está escondido” */
  --c-accent-soft:    #FBEEE0;
  --c-bg:             #F7F5F1;
  --c-surface:        #ffffff;
  --c-surface-2:      #EFEBE4;
  --c-ink:            #191713;  /* 17.90:1 s/ branco · 16.44:1 s/ bg */
  --c-muted:          #5C554A;  /* 7.36:1 s/ branco · 6.19:1 s/ surface-2 */
  --c-line:           #E4DED3;
  --c-line-strong:    #CDC4B4;
  --c-focus:          rgba(15, 122, 85, .45);
  --c-link:           #0A5A3E;

  --c-chrome:        #14201A;
  --c-chrome-ink:    #ffffff;   /* 16.78:1 */
  --c-chrome-2:      #C6CFC9;   /* 10.53:1 */
  --c-chrome-muted:  #8FA096;   /*  6.02:1 */
  --c-chrome-line:   rgba(255,255,255,.14);
  --c-chrome-accent: #F0BE8A;   /*  9.94:1 */
  --c-chrome-ok:     #7FE3C0;   /* 11.62:1 */
}

/* Semânticos — iguais nas duas marcas.
   Todo par ink-sobre-soft passa AA com folga. */
[data-brand="crivo"], [data-brand="realoca"] {
  --c-success: #0B6E4F; --c-success-soft: #E2F0E9; --c-success-ink: #0B5B41; /* 6.91:1 */
  --c-warning: #8A5800; --c-warning-soft: #FAF0DA; --c-warning-ink: #6E4600; /* 7.30:1 */
  --c-danger:  #B3261E; --c-danger-soft:  #FBEDEC; --c-danger-ink:  #8E1E18; /* 7.84:1 */
  --c-info:    #0E5A86; --c-info-soft:    #E7EEF6; --c-info-ink:    #0A4568; /* 8.70:1 */

  /* Faixas da nota 0-100. A cor nunca é o único sinal:
     sempre acompanhada do número e de “n/7 requisitos”. */
  --c-band-forte:   #0B6E4F;  /* 85-100 · 6.25:1 */
  --c-band-atende:  #0B7385;  /* 70-84  · 5.52:1 */
  --c-band-parcial: #8A5800;  /* 55-69  · 6.04:1 */
  --c-band-abaixo:  #B3261E;  /* 0-54   · 6.54:1 */
  --c-band-empty:   var(--c-surface-2);  /* segmento não preenchido */

  /* Data-viz — 6 hues, todas ≥5:1 sobre branco, distinguíveis em
     deuteranopia por ordem de luminância (azul→teal→roxo→verde→âmbar→vermelho). */
  --c-viz-1: #1B4FD8;  /* 6.65:1 — inscritos */
  --c-viz-2: #0B7385;  /* 5.52:1 — triados */
  --c-viz-3: #7A3E9D;  /* 6.99:1 — entrevistados */
  --c-viz-4: #0B6E4F;  /* 6.25:1 — finalistas */
  --c-viz-5: #8A5800;  /* 6.04:1 — reserva */
  --c-viz-6: #B3261E;  /* 6.54:1 — reprovados */
}

/* ---------- 2b. IMPRESSÃO / PDF DO PARECER ---------- */
/* O dossiê exportado usa os mesmos tokens, com superfícies neutras
   e sem chrome escuro (economia de toner e legibilidade em papel). */
@media print {
  [data-brand="crivo"], [data-brand="realoca"] {
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-2: #F2F2F2;
    --c-line: #C9C9C9;
    --c-line-strong: #9A9A9A;
    --c-chrome: #ffffff;
    --c-chrome-ink: #000000;
    --c-chrome-2: #333333;
    --c-chrome-muted: #555555;
    --c-chrome-line: #C9C9C9;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-pri: none;
  }
  body { background: #fff; font-size: 11pt; line-height: 1.45; }
  .no-print { display: none !important; }
  .page-break { break-before: page; }
  a[href]::after { content: ""; }  /* não imprimir URLs no meio do parecer */
  .evidence-quote, .table tr, .req { break-inside: avoid; }
}

/* Fontes — Google Fonts, pesos usados apenas
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> */

/* ---------- 3. BASE ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; }
h1 { font-size: var(--fs-3xl); font-weight: 700; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
p { margin: 0; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-strong); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- 4. COMPONENTES ---------- */

/* 4.1 Botão — 3 variantes + loading/disabled */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  font: 600 var(--fs-md)/1 var(--font-body);
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; position: relative; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-pri); }
.btn--primary:hover { background: var(--c-primary-strong); }
.btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--secondary:hover { background: var(--c-surface-2); border-color: var(--c-muted); }
.btn--ghost { background: transparent; color: var(--c-muted); }
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
/* decisão do RH (19/08): aprovar/reprovar com peso visual distinto */
.btn--positive { background: var(--c-success); color: #fff; border-color: transparent; }
.btn--positive:hover { background: #095B41; }
.btn--destructive { background: var(--c-danger-soft); color: var(--c-danger-ink); border-color: #E7B4B0; }
.btn--destructive:hover { background: #F7DEDC; }
/* botão sobre o chrome escuro (barra lateral, player, topo do dossiê) */
.btn--on-chrome { background: transparent; color: #fff; border-color: var(--c-chrome-line); }
.btn--on-chrome:hover { background: rgba(255,255,255,.1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after {
  border-color: var(--c-line-strong); border-top-color: var(--c-primary);
}
.btn--sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-xs); box-shadow: none; }
.btn--icon { width: 32px; min-height: 32px; padding: 0; }
/* dedo precisa de 44px: no toque, os pequenos crescem */
@media (pointer: coarse) { .btn--sm, .btn--icon { min-height: var(--tap); } .btn--icon { width: var(--tap); } }
/* Em dispositivos de toque, mesmo as ações densas respeitam o alvo de 44px */
@media (pointer: coarse) {
  .btn--sm { min-height: var(--tap); padding: 0 var(--sp-4); }
  .table-evidence summary { min-height: var(--tap); padding: var(--sp-2) var(--sp-3); margin: 0; }
  .table td, .table th { padding: var(--sp-4); }
}
.btn--block { display: flex; width: 100%; }

/* 4.2 Input / 4.3 Textarea */
.field { display: grid; gap: var(--sp-2); }
.field-label { font-size: var(--fs-sm); font-weight: 600; }
.field-hint { font-size: var(--fs-xs); color: var(--c-muted); }
.input, .textarea {
  width: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  font: 400 var(--fs-md)/var(--lh-snug) var(--font-body); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.input:hover, .textarea:hover { border-color: var(--c-muted); }
.input:focus, .textarea:focus { outline: 3px solid var(--c-focus); outline-offset: 0; border-color: var(--c-primary); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-danger); }
.field-error { font-size: var(--fs-sm); color: var(--c-danger-ink); font-weight: 500; }
.textarea { resize: vertical; min-height: 120px; }
.field-counter { font-size: var(--fs-xs); color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* 4.4 Checkbox de consentimento — nunca pré-marcado */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; padding: var(--sp-3); min-height: var(--tap);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  cursor: pointer;
}
.consent:hover { border-color: var(--c-line-strong); }
.consent input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--c-primary); cursor: pointer;
}
.consent-text { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.consent-text strong { font-weight: 600; }
.consent-note { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); }
.consent--required .consent-text::after { content: " (obrigatório)"; color: var(--c-muted); font-size: var(--fs-xs); }

/* 4.5 Card */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5);
}
.card--flat { box-shadow: none; }
.card-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }

/* 4.6 Tabela de dados (com linha de evidência expansível) */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* Console (19/08): cabeçalho fixo no topo, rótulo menor em caixa alta,
   densidade compacta por padrão e alternável para confortável. */
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font: 600 var(--fs-2xs)/1 var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted);
  padding: 8px var(--sp-4); border-bottom: 1px solid var(--c-line-strong);
  background: var(--c-surface-2); white-space: nowrap;
}
.table td { padding: 9px var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table tbody tr { transition: background var(--dur) var(--ease); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table tbody tr[aria-selected="true"] { background: var(--c-primary-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; }
/* densidade confortável: classe no .table-wrap */
.is-comfort .table td { padding: var(--sp-4); }

/* Medidor da nota 0-100 (Console): número + 5 segmentos + "n/x requisitos".
   A cor NUNCA é o único sinal — sempre acompanha número e contagem. */
.meter { display: flex; gap: 2px; }
.meter i { width: 5px; height: 14px; border-radius: 1px; background: var(--c-band-empty); display: block; }
.meter[data-band="forte"]   i.on { background: var(--c-band-forte); }
.meter[data-band="atende"]  i.on { background: var(--c-band-atende); }
.meter[data-band="parcial"] i.on { background: var(--c-band-parcial); }
.meter[data-band="abaixo"]  i.on { background: var(--c-band-abaixo); }
.table-evidence { border-bottom: 1px solid var(--c-line); }
.table-evidence summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; padding: var(--sp-1) var(--sp-2); margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2));
  font-weight: 600; color: var(--c-link); border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.table-evidence summary::-webkit-details-marker { display: none; }
.table-evidence summary::after { content: "▾"; font-size: 10px; transition: transform var(--dur) var(--ease); }
.table-evidence[open] summary::after { transform: rotate(180deg); }
.evidence-body {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2); border-radius: var(--r-md);
  font-size: var(--fs-sm); display: grid; gap: var(--sp-2);
}
.evidence-quote {
  margin: 0; padding-left: var(--sp-3); border-left: 2px solid var(--c-line-strong);
  color: var(--c-muted); font-style: italic;
}

/* 4.7 Badge de status */
/* Console (19/08): retangular, sem bolinha — em tabela densa a bolinha vira ruído */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--r-sm);
  font: 600 11px/1.4 var(--font-body); white-space: nowrap;
  border: 1px solid transparent;
}
.badge--success { background: var(--c-success-soft); color: var(--c-success-ink); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning-ink); }
.badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger-ink); }
.badge--info    { background: var(--c-info-soft);    color: var(--c-info-ink); }
.badge--neutral { background: var(--c-surface-2);    color: var(--c-muted); }
.badge--outline { background: transparent; border-color: var(--c-line-strong); color: var(--c-muted); }

/* 4.8 Progresso com fases (operações longas de IA) */
.progress { display: grid; gap: var(--sp-4); }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.progress-elapsed { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.progress-track { height: 8px; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--r-full); background: var(--c-primary); transition: width .6s var(--ease); }
.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.phase { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); color: var(--c-muted); }
.phase-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-line-strong);
}
.phase--done { color: var(--c-ink); }
.phase--done .phase-dot { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success-ink); }
.phase--done .phase-dot::before { content: "✓"; }
.phase--active { color: var(--c-ink); font-weight: 600; }
.phase--active .phase-dot {
  border-color: var(--c-primary); color: var(--c-primary);
  animation: pulse-soft 1.4s ease-in-out infinite;
}

/* 4.9 Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 32, .5);
  display: grid; place-items: center; padding: var(--sp-4);
}
.modal {
  background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px; padding: var(--sp-6); display: grid; gap: var(--sp-4);
  max-height: 90vh; overflow-y: auto;
}
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-2); }

/* 4.10 Paywall (crédito esgotado — sempre com preço claro) */
.paywall {
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-6); display: grid; gap: var(--sp-4); text-align: center;
  max-width: 420px;
}
.paywall-icon {
  width: 48px; height: 48px; margin: 0 auto; border-radius: 50%;
  background: var(--c-primary-soft); color: var(--c-primary-strong);
  display: grid; place-items: center; font-size: 22px;
}
.paywall-price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.paywall-price small { font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted); }
.paywall-note { font-size: var(--fs-sm); color: var(--c-muted); }

/* 4.11 Alerta legal (LGPD art. 20 e afins) */
.alert-legal {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-info-soft); border: 1px solid var(--c-info);
  border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-info-ink);
}
.alert-legal-tag {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--c-info); color: #fff; margin-top: 1px;
}

/* 4.12 Timer de entrevista */
.timer { display: inline-grid; gap: var(--sp-1); justify-items: center; text-align: center; }
.timer-digits {
  font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; letter-spacing: .02em;
}
.timer-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.timer--warning .timer-digits { color: var(--c-warning-ink); animation: pulse-soft 1.2s ease-in-out infinite; }
.timer--warning .timer-label { color: var(--c-warning-ink); }
.timer--ended .timer-digits { color: var(--c-muted); }
.timer-hint {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-warning-ink);
  background: var(--c-warning-soft); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
}

/* Rótulo-guia (eyebrow) */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-primary-strong);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--c-primary); border-radius: 2px; }

/* ---------- 5. UTILITÁRIOS MÍNIMOS ---------- */
.stack-2 { display: grid; gap: var(--sp-2); }
.stack-4 { display: grid; gap: var(--sp-4); }
.stack-6 { display: grid; gap: var(--sp-6); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   AVISOS DE AÇÃO (19/08) — toda ação do sistema dá retorno no topo.
   Some sozinho em 15s. Empilha sem sobrepor. Não bloqueia a tela.
   ============================================================ */
#pilha-toasts {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 90; display: grid; gap: 8px; width: min(560px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 14px;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-left: 4px solid var(--c-success);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--c-ink);
  opacity: 1; transition: opacity .18s var(--ease);
  animation: toast-entra .2s var(--ease);
}
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast-ic {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--c-success-soft); color: var(--c-success-ink);
}
.toast-txt { flex: 1; min-width: 0; }
.toast-acao {
  flex-shrink: 0; background: none; border: 0; padding: 4px 8px; border-radius: var(--r-sm);
  font: 600 var(--fs-sm)/1 var(--font-body); color: var(--c-primary); cursor: pointer;
}
.toast-acao:hover { background: var(--c-primary-soft); }
.toast-x {
  flex-shrink: 0; background: none; border: 0; padding: 4px; border-radius: var(--r-sm);
  color: var(--c-muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.toast-x:hover { background: var(--c-surface-2); color: var(--c-ink); }
.toast--erro { border-left-color: var(--c-danger); }
.toast--erro .toast-ic { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.toast--info { border-left-color: var(--c-info); }
.toast--info .toast-ic { background: var(--c-info-soft); color: var(--c-info-ink); }
@media (pointer: coarse) { .toast-acao, .toast-x { min-height: var(--tap); min-width: 44px; } }