/* app-repaint.css · A REPINTURA DO PAINEL PELA MARCA (casca v2 · 07/09/2026 · tarefa 205 · ÁREA 2).
 *
 * O QUE ESTA FOLHA É: uma camada de REMAPEAMENTO por cima de `_MARCA/patterns/painel.css`. O Painel
 * (index.html) foi desenhado na pele do fornecedor que saiu da casa e carrega ~90 variáveis próprias
 * (`--bg-app`, `--blue-primary`, `--text-heading`…). Em vez de reescrever 139 KB de CSS (e quebrar o
 * `/gestor`, que consome a MESMA folha), esta camada reaponta essas variáveis para os SEMÂNTICOS do
 * `_MARCA/tokens/tokens.css`. Um arquivo, uma passada, zero risco na página irmã.
 *
 * ORDEM DE CARGA (obrigatória, no index.html): painel.css → app.css → app-repaint.css.
 * O `painel.css` NÃO se edita: `2_CLIENTES/ongoing/painel/gestor.html` ainda o usa como é.
 *
 * OS 2 TEMAS DE GRAÇA: o `:root` do tokens.css é o ESCURO e `html.tema-claro` é o CLARO. Como esta
 * folha aponta para os SEMÂNTICOS (`--pagina`, `--superficie`, `--texto`…), e não para primitivos, ela
 * vale nos dois sem duplicar uma linha. O botão de tema da barra (chip S) troca a classe e pronto.
 *
 * A REGRA DURA DA MARCA: zero hex, zero fonte inventada. Todo valor sai de `var(--token)`.
 * Cor de ação = `--booot-cinza-500` (a primária do whitelabel, D-WHITELABEL-CORES-OURO-16AGO), com
 * texto `--booot-cinza-900`. Ouro é SELO (o símbolo do menu, a pill do plano), nunca botão.
 *
 * DENSIDADE: a do STChat (a referência que o dono mandou adotar), não a do Painel de julho: título de
 * card 15/600, apoio 13, rótulo 11 em caixa alta, número 26/600 com algarismo tabular, raio de cartão,
 * borda de 1 px e sombra fora (a separação é a borda, como no CRM).
 */

/* ── 1 · O REMAPEAMENTO ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* fundos: página → superfície → superfície elevada */
  --bg-app: var(--pagina);
  --bg-page: var(--pagina);
  --bg-surface: var(--superficie);
  --bg-card: var(--superficie);
  --bg-card-soft: var(--superficie-2);
  --bg-table-head: var(--superficie-2);
  --bg-track: var(--superficie-2);
  --white: var(--superficie);

  /* texto: 3 degraus, os mesmos do resto da casa */
  --text-primary: var(--texto);
  --text-heading: var(--texto);
  --text-secondary: var(--texto-2);
  --text-muted: var(--texto-3);
  --text-soft: var(--texto-3);

  /* bordas */
  --border-default: var(--borda-forte);
  --border-soft: var(--borda);
  --border-card: var(--borda);

  /* AÇÃO · a primária do whitelabel (o azul do fornecedor sai da tela) */
  --brand-blue: var(--booot-cinza-500);
  --blue-primary: var(--booot-cinza-500);
  --blue-600: color-mix(in srgb, var(--booot-cinza-500) 85%, var(--booot-cinza-000));
  --blue-disabled: color-mix(in srgb, var(--booot-cinza-500) 40%, transparent);
  --blue-soft: color-mix(in srgb, var(--booot-cinza-500) 12%, transparent);
  --blue-sky: var(--booot-cinza-500);

  /* estados · sempre com ponto/ícone junto, nunca só cor */
  --success-bg: color-mix(in srgb, var(--booot-sucesso) 14%, transparent);
  --success-bg-soft: color-mix(in srgb, var(--booot-sucesso) 10%, transparent);
  --success-text: var(--booot-sucesso);
  --success-text-soft: var(--booot-sucesso);
  --danger-bg: color-mix(in srgb, var(--booot-erro) 14%, transparent);
  --danger-text: var(--booot-erro);
  --warning-bg: color-mix(in srgb, var(--booot-ouro-600) 14%, transparent);
  --warning-text: var(--booot-ouro-600);

  /* a moldura do modal do WhatsApp: o grafite e o claro da marca */
  --wa-carvao: var(--booot-cinza-000);
  --wa-creme: var(--booot-cinza-900);

  /* forma: os raios da casa */
  --radius-sm: var(--raio-controle);
  --radius-md: var(--raio-controle);
  --radius-lg: var(--raio-cartao);
  --radius-card: var(--raio-cartao);
  --radius-input: var(--raio-controle);

  /* profundidade: a borda separa, a sombra some (a régua do CRM) */
  --shadow-soft: none;
  --shadow-sm: none;
  --shadow-md: 0 4px 12px color-mix(in srgb, var(--booot-cinza-000) 14%, transparent);
  --shadow-btn-primary: none;
  --shadow-topbar: none;
}

/* ── 2 · TIPO E CORPO ───────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--fonte-texto);
  background: var(--pagina);
  color: var(--texto);
}

/* ── 3 · A CASCA (o miolo do app dentro do partial) ─────────────────────────────────────────────── */
/* o conteúdo herda o fundo da página; o respiro e a largura de leitura são os da casca (STChat), não os
   do Painel de julho (que tinha barra de 88 px e página de 32) */
.page {
  background: transparent;
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.sh-main .dashboard { padding-left: 0; padding-right: 0; }
@media (max-width: 900px) {
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
}

/* ── 4 · CARTÃO · a densidade do CRM ────────────────────────────────────────────────────────────── */
.card,
.task-card,
.cap {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: none;
}
/* `p-4` = 16 px é a medida do cartão no CRM (medido na marcação salva: `rounded-xl border bg-card p-4`),
   não os 20-24 que o Painel herdou. Cartão estático NÃO levanta no hover; só linha clicável reage. */
.card-header { padding: 16px 16px 8px; }
.card-title,
.task-header-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--texto); }
/* a linha clicável do Aprender: o `hover:bg-accent` do CRM, e a sombra sai (a separação é a borda) */
.inicio-link { transition: var(--sh-transicao); }
.inicio-link:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); border-color: var(--borda-forte); box-shadow: none; }
.inicio-link:active { transform: scale(.99); }
.card-subtitle { font-size: 13px; line-height: 18px; color: var(--texto-2); margin-top: 2px; }
.kpi-caption { color: var(--texto-3); }

/* rótulo de bloco: 11 em caixa alta (a etiqueta do CRM) */
.kpi-label,
.section-label,
.inicio-fase,
.meta-proj-janela { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }

/* NÚMERO · a medida do CRM é `text-2xl font-bold tabular-nums leading-none` = 24/700/1. O Painel herdou do
   fornecedor que morreu uma escala de MANCHETE (`.kpi-xl`/`.kpi-lg`/`.analise-num-big` = 52px, `.kpi-hero`
   e `.page-title` = 34px), e foi ela que abriu a aba Acelerar com um "500" de 52 px: número de display
   dentro do produto foi o que o dono chamou de Word. Aqui o HERÓI da tela vai a 32 e o resto a 24. */
.kpi-value,
.kpi-number,
.meta-num,
.rank-num { font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.kpi-xl,
.kpi-lg,
.kpi-hero,
.analise-num-big,
.card-analise .analise-num-big { font-size: 32px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--texto); }
.kpi-sm { font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* o alvo ao lado do número-herói acompanha (16 px ao lado de 52 era proporção de manchete) */
.meta-alvo { font-size: 14px; }

/* ── 5 · CONTROLES · as DUAS formas do STChat (D-PLATAFORMA-COPIA-O-STCHAT-07SET) ───────────────── */
/* ⚠️ ACHADO desta rodada, medido na marcação salva do próprio fornecedor
   (`_MARCA/whitelabel/refs-stchat/pagina-sla.html` · `pagina-painel.html`): o STChat NÃO faz "todo botão
   pílula". Ele tem duas formas, e só a SECUNDÁRIA é pílula:
     primário   `bg-primary hover:bg-primary/90 h-9 rounded-md px-3 text-sm font-medium`   (36px · raio 6)
     secundário `border border-input hover:bg-accent h-8 rounded-full px-3 text-xs font-medium` (32 · pílula)
   As 2 fotos que o dono mandou confirmam: em `painel-exemplo.jpg` o seletor de período é pílula e o "CSV"
   não é; em `form-claro.jpg` o "Salvar" é retângulo arredondado dentro de uma barra que É pílula.
   A régua completa e a divergência declarada estão no HANDOFF-F §3.1. */
.btn { border-radius: var(--raio-pill); font-family: var(--fonte-texto); transition: var(--sh-transicao); }
.btn:active:not(:disabled):not(.is-disabled) { transform: scale(.97); }
/* secundário/perigo = a PÍLULA de 32 px, 12/500 (o `h-8 rounded-full px-3 text-xs`) */
.btn-secondary,
.btn-danger { height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; }
/* primário = 36 px, raio de controle, 14/500 (o `h-9 rounded-md px-3 text-sm`) */
.btn-primary,
.btn-danger-solid { height: 36px; padding: 0 16px; font-size: 14px; font-weight: 500; border-radius: var(--raio-controle); }
.btn-primary { background: var(--cta-fundo); border-color: var(--cta-fundo); color: var(--cta-texto); box-shadow: var(--sombra-cartao); }
/* o fornecedor faz `bg-primary/90`; aqui escurece em vez de lavar com alfa, porque sobre o cartão branco
   o `/90` compõe em 4,19:1 com o texto branco e cai abaixo do piso 4,5 (medido). */
.btn-primary:hover { background: color-mix(in srgb, var(--cta-fundo) 88%, var(--booot-cinza-000)); border-color: color-mix(in srgb, var(--cta-fundo) 88%, var(--booot-cinza-000)); }
.btn-primary:active { background: var(--cta-press); border-color: var(--cta-press); }
.btn-primary:disabled,
.btn-primary.is-disabled { background: color-mix(in srgb, var(--booot-cinza-500) 40%, transparent); border-color: transparent; color: var(--texto-3); }
.btn-secondary { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); box-shadow: none; }
/* lavagem do próprio texto, nunca `--superficie-2`: no tema claro os dois são branco puro e o hover some */
.btn-secondary:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); border-color: var(--texto-3); }
.btn-danger { background: var(--superficie); border-color: var(--booot-erro); color: var(--booot-erro); }
.btn-danger-solid { background: var(--booot-erro); border-color: var(--booot-erro); color: var(--booot-cinza-900); }
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: var(--anel-foco); outline-offset: 2px; }

/* campo: `h-10 rounded-md border border-input` + foco `border-primary` e anel de 1 px por box-shadow */
input, select, textarea { font-family: var(--fonte-texto); background: var(--campo-fundo); color: var(--texto); border-color: var(--campo-borda); border-radius: var(--raio-controle); transition: var(--sh-transicao); }
input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }
input:focus, select:focus, textarea:focus { border-color: var(--campo-borda-foco); box-shadow: 0 0 0 1px var(--campo-borda-foco); }

/* ── 5.1 · PROGRESSO É NEUTRO, nunca semáforo ───────────────────────────────────────────────────── */
/* DESIGN.md §4 (verde/vermelho só em sucesso/erro REAL) e o CRM, onde a barra de progresso usa a primária.
   O `painel.css` pinta `.task-progress-fill` de verde: a jornada em "3 de 5" lia "deu certo" antes de ter
   dado certo, e a barra "Sua conta hoje" lia o mesmo. Verde volta a ser só o "● No ar" e os checks. */
/* (o `.inicio-seg` de "Sua conta hoje" mora no <style> do próprio index.html, que carrega DEPOIS desta
   folha e venceria aqui: ele é curado lá, na origem) */
.task-progress-fill,
.sol-progress-fill { background: var(--cta-fundo); }
.task-progress-track { background: var(--superficie-2); }

/* ── 5.2 · PILL/CHIP: 11/500, sem caixa alta, o ponto/ícone só em estado vivo (DESIGN.md §7) ─────── */
.cap-status { height: 24px; padding: 0 12px; font-size: 11px; line-height: 16px; font-weight: 500; }
.cap-status .icon { width: 12px; height: 12px; }
.badge-positive,
.badge-negative,
.badge-late,
.rank-plano,
.pill-count { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: normal; text-transform: none; border-radius: var(--raio-pill); }

/* ── 5.3 · SEM TRANSBORDO (DESIGN.md §14.6) · o defeito que o verificador fresco mediu em 07/09 ──── */
/* A escada de conquistas do Ranking cortava o 4º degrau no meio da palavra ("Tr…" / "conq…"), em 1280 E
   em 390, sem fade e sem rolagem (`overflow-x: visible` = corte, não scroll). MEDIDO: clientWidth 254 ×
   scrollWidth 323 em 1280 · 292 × 323 em 390.
   A CAUSA é o "grid blowout" clássico: `repeat(4, 1fr)` é `minmax(auto, 1fr)`, e o `auto` deixa o
   min-content de cada coluna EMPURRAR a grade pra fora do contêiner. 🧱 O padrão de mercado pra isto é
   `minmax(0, 1fr)` + `min-width: 0` nos filhos (MDN, "Minimum content size in CSS grid"); é o que adoto.
   A cura mora AQUI e não no `painel.css` porque aquela folha é compartilhada com o `/gestor` e o contrato
   desta rodada a declara intocável: esta camada existe justamente pra corrigir a pintura só no app. */
/* A CURA é ROLAR, não espremer, e cheguei nela MEDINDO as duas outras. `minmax(0, 1fr)` fazia as colunas
   cederem e a palavra "conquistado" quebrava no meio ("conquist / ado"); baixar o corpo pra 10 px punha a
   palavra numa linha só mas ainda estourava 6 px por célula. Os 4 degraus pedem 323 px e a coluna do
   Ranking tem 254: não existe aperto que caiba, só corte ou quebra feia.
   Rolar (o que a casca faz em `.sh-abas`) resolve o CORTE mas deixa o 4º degrau pela metade na foto: o
   dono lê "quebrado" mesmo com o conteúdo alcançável. A cura que serve às duas coisas é DEIXAR REFLUIR:
   `repeat(auto-fit, minmax(5rem, 1fr))` põe 4 numa fila onde couber e 2x2 onde não couber, sempre com a
   palavra inteira. É o mesmo `auto-fit` que a casca já usa em `.sh-grade` e `.inicio-aprender`. */
.escada-strip { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
/* o rótulo da etapa do funil estourava 7 px em 390 por OUTRA causa: `white-space: nowrap` dentro da
   coluna FIXA de 92 px do `painel.css` (a coluna é fixa de propósito, pra todas as pistas terem a mesma
   escala · nota r3 lá). "Compareceram" em 11/600 pede 97. Alargo a coluna em 8 px e a pista cede o mesmo
   (ela é `minmax(0,1fr)`): nada é cortado e a escala continua igual entre as 4 linhas. */
@media (max-width: 640px) {
  .funnel-row { grid-template-columns: 100px minmax(0, 1fr) 76px; }
}

/* ── 6 · A BARRA DO ADMIN, DENTRO DA BARRA SUPERIOR ─────────────────────────────────────────────── */
/* o JS do Painel move o elemento pra dentro de `.sh-top`; aqui ele vira um seletor compacto, à direita
   do título, e nunca mais uma faixa que empurra a casca pra baixo. */
.sh-top .adm-bar {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 0; background: transparent; border: 0; position: static;
}
.sh-top .adm-bar-label { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--booot-cinza-900); opacity: .72; }
.sh-top .adm-bar-select {
  height: 28px; max-width: 15rem; padding: 0 8px; font-size: 12px; font-family: var(--fonte-texto);
  border-radius: var(--raio-controle);
  background: color-mix(in srgb, var(--booot-cinza-900) 10%, transparent);
  color: var(--booot-cinza-900);
  border: 1px solid color-mix(in srgb, var(--booot-cinza-900) 20%, transparent);
}
@media (max-width: 900px) { .sh-top .adm-bar-label { display: none; } }

/* ── 7 · O CONTEÚDO DO POPUP ────────────────────────────────────────────────────────────────────── */
/* 🧱 O POPUP em si NÃO é meu: o "?" da barra, os guias e os vídeos do Aprender abrem o `<dialog class=
   "sh-modal">` do kernel da casca (App.abrirAjuda), com véu, Esc e trava de foco nativos. O que esta
   folha faz é vestir o MIOLO que o Painel manda pra dentro dele: passos de guia e vídeo embutido. */
.ajuda-bloco + .ajuda-bloco { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda); }
.ajuda-titulo { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--texto); }
.ajuda-linha { margin: 0 0 8px; font-size: 13px; line-height: 20px; color: var(--texto-2); }
.ajuda-passo-cabeca { margin: 12px 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ajuda-passos { margin: 0; padding-left: 20px; font-size: 13px; line-height: 20px; color: var(--texto); }
.ajuda-passos li + li { margin-top: 4px; }
.ajuda-guias { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ajuda-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--raio-cartao); overflow: hidden; background: var(--superficie-2); }
.ajuda-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .inicio-link, input, select, textarea { transition: none; }
  .btn:active, .inicio-link:active { transform: none; }
}