/* ============================================================================
   Social Nudge — TEMA de todo dashboard. Fonte ÚNICA da aparência, como o
   dash-controls.js é a fonte única do comportamento.

   Cada dashboard só precisa de uma linha, logo após o primeiro </style>:
       <link rel="stylesheet" href="/dash-theme.css">

   POR QUE FUNCIONA SEM EDITAR OS 26: todos os 26 dashboards já declaram o mesmo
   vocabulário (--bg, --panel, --elev, --line, --ink, --dim, --accent, --good,
   --bad, --r). Redefinir essas variáveis aqui repinta todos de uma vez.

   CASCATA — a razão de existirem 4 blocos abaixo e não 1:
   os dashboards não concordam entre si sobre qual é a base. 25 têm :root escuro
   com @media(light) por cima; 22 têm o contrário. Como @media não soma
   especificidade e :root[data-theme=X] vale mais que :root, a única forma de
   vencer em TODOS os estados é espelhar os quatro. Não usar !important: o
   <link> vem depois do <style> do arquivo, então empate de especificidade já
   resolve a favor daqui.

   Paleta: site/tokens/tokens.css (design system v2.0, íntegro por sha256).
   Aquele arquivo é GERADO — nunca editar à mão. Os valores abaixo são cópia de
   leitura; se o DS mudar, re-sincronizar lá e reconciliar aqui.
   ============================================================================ */

/* ── Fontes da marca ────────────────────────────────────────────────────────
   Subset próprio dos dashboards (scripts/dashboards/build-dash-fonts.sh) — o
   subset do site não tem € × → e o painel da Marta é em euro.
   ↗ não existe em nenhuma das três upstream: cai no fallback do sistema, que o
   navegador resolve por caractere. É o único glifo que não é da marca. */
@font-face{font-family:"Archivo Dash";src:url("/fonts/archivo-dash.woff2") format("woff2");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"Bodoni Dash";src:url("/fonts/bodoni-dash.woff2") format("woff2");
  font-weight:500 700;font-display:swap}
@font-face{font-family:"Martian Dash";src:url("/fonts/martian-dash.woff2") format("woff2");
  font-weight:400 600;font-display:swap}

/* ── 1. Base: CLARO (creme quente) ──────────────────────────────────────────*/
:root{
  --bg:#FBF7F1; --panel:#FFFFFF; --elev:#F2EBE1;
  --line:rgb(43 35 32 / .12); --grid:rgb(43 35 32 / .035);
  --ink:#17120F; --dim:#6D6158; --faint:#75695D;
  --accent:#AF8B31; --accent-soft:rgb(201 162 67 / .15);
  --good:#43633A; --good-soft:#E8F0E4;
  --warn:#8F6620; --warn-soft:#FBF2E1;
  --bad:#8A3430;  --bad-soft:#F7E7E5;
  --hot:#D34917;  /* ember — realce, o "pico" do gráfico */
  --r:16px;
  --sans:"Archivo Dash",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Dash",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Bodoni Dash",Georgia,"Times New Roman",serif;
  --sombra:0 1px 2px rgb(43 35 32 / .05),0 2px 8px rgb(43 35 32 / .05);
}
/* ── 2. Escuro por preferência do sistema ───────────────────────────────────*/
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0908; --panel:#14100E; --elev:#1F1917;
  --line:rgb(244 237 227 / .14); --grid:rgb(244 237 227 / .04);
  --ink:#F4EDE3; --dim:#B6A99B; --faint:#9C8F81;
  --accent:#D7B155; --accent-soft:rgb(215 177 85 / .16);
  --good:#6F9460; --good-soft:rgb(111 148 96 / .16);
  --warn:#C9943A; --warn-soft:rgb(201 148 58 / .16);
  --bad:#C0504A;  --bad-soft:rgb(192 80 74 / .16);
  --hot:#FF8449;
  --sombra:0 1px 2px rgb(0 0 0 / .40),0 8px 24px rgb(0 0 0 / .30);
}}
/* ── 3. Escuro escolhido no botão ───────────────────────────────────────────*/
:root[data-theme="dark"]{
  --bg:#0B0908; --panel:#14100E; --elev:#1F1917;
  --line:rgb(244 237 227 / .14); --grid:rgb(244 237 227 / .04);
  --ink:#F4EDE3; --dim:#B6A99B; --faint:#9C8F81;
  --accent:#D7B155; --accent-soft:rgb(215 177 85 / .16);
  --good:#6F9460; --good-soft:rgb(111 148 96 / .16);
  --warn:#C9943A; --warn-soft:rgb(201 148 58 / .16);
  --bad:#C0504A;  --bad-soft:rgb(192 80 74 / .16);
  --hot:#FF8449;
  --sombra:0 1px 2px rgb(0 0 0 / .40),0 8px 24px rgb(0 0 0 / .30);
}
/* ── 4. Claro escolhido no botão ────────────────────────────────────────────*/
:root[data-theme="light"]{
  --bg:#FBF7F1; --panel:#FFFFFF; --elev:#F2EBE1;
  --line:rgb(43 35 32 / .12); --grid:rgb(43 35 32 / .035);
  --ink:#17120F; --dim:#6D6158; --faint:#75695D;
  --accent:#AF8B31; --accent-soft:rgb(201 162 67 / .15);
  --good:#43633A; --good-soft:#E8F0E4;
  --warn:#8F6620; --warn-soft:#FBF2E1;
  --bad:#8A3430;  --bad-soft:#F7E7E5;
  --hot:#D34917;
  --sombra:0 1px 2px rgb(43 35 32 / .05),0 2px 8px rgb(43 35 32 / .05);
}

/* ── Forma — o que dá o ar do painel: canto largo, sombra macia, borda leve ──*/
body{font-family:var(--sans);letter-spacing:-.005em}
.card,.kpi,.strip,.controls,.chip,.resumo{border-radius:var(--r);box-shadow:var(--sombra)}
.card,.kpi{padding:16px 18px}
.kpi::before{width:3px;opacity:1}
.track,.prog,.fill,.bar{border-radius:100px}
.bar{border-radius:8px 8px 0 0}
.dinput,.qchip,.iconbtn{border-radius:10px}
.qchip,.chip,.rtoggle{border-radius:100px}

/* ── Tipografia — Bodoni nos títulos, Martian em todo número ────────────────
   Martian Mono é notavelmente mais larga que a mono de sistema: sem o degrau de
   tamanho abaixo, os números de KPI e as tabelas densas estouram a coluna. */
h1{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
h2,.card h2,.subcard-h3{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.mono,.val,td,th,.v,.lbl,.kicker,.chip,.num,.sv,.cpl,.dspend,.dl,.pill{font-family:var(--mono)}
.val{font-size:23px;letter-spacing:-.02em;font-weight:600}
.strip .v{font-size:15px}
td,th{font-size:11.5px;letter-spacing:-.01em}
.lbl,.kicker{font-size:9.5px;letter-spacing:.1em}

/* ── CORREÇÃO: barras que nunca preencheram ─────────────────────────────────
   17 dos 26 dashboards desenham a barra como <span class="fill"> dentro de
   <span class="track">. `width` e `height` não se aplicam a elemento inline
   não-substituído, então o preenchimento sempre mediu 0x0 e a barra aparecia
   como uma pílula vazia — o valor estava certo no HTML e invisível na tela.

   Bug PRÉ-EXISTENTE, não deste tema: medido com e sem este arquivo carregado,
   0x0 nos dois casos. Está aqui porque a folha compartilhada conserta os 17 de
   uma vez, que é a mesma razão de ela existir.

   Seletor com o pai (0,2,0) para vencer o `.fill` (0,1,0) de cada arquivo. */
.track>.fill,.ftrack>.ffill,.prog>i{display:block}

/* ── Fundo limpo, sem o quadriculado ────────────────────────────────────────
   25 dos 26 dashboards pintam uma grade de 32px no body com dois
   linear-gradient sobre var(--grid). O /marta nasceu sem ela e ficou melhor:
   o creme liso deixa o cartão branco respirar, e a grade competia com as
   linhas dos próprios gráficos.

   Duas travas de propósito: `--grid:transparent` resolve pela variável (é como
   os 25 desenham) e `background-image:none` resolve mesmo se algum dashboard
   novo escrever a cor na mão. Para trazer a grade de volta, apagar este bloco. */
:root,:root[data-theme="dark"],:root[data-theme="light"]{--grid:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid:transparent}}
body{background-image:none}

/* ── CELULAR ────────────────────────────────────────────────────────────────
   A régua da casa parava em 820px, que é tablet: abaixo disso os painéis ainda
   saíam em duas colunas e a tabela arrastava a página inteira para o lado.

   IMPORTANTE — isto sozinho não basta. Sem <meta name="viewport"> no HTML o
   celular renderiza a página em 980px e encolhe tudo, e nenhuma regra daqui
   chega a valer. A tag é a única parte que não dá para centralizar; ela vai em
   cada arquivo por scripts/dashboards/ensure-viewport-tag.cjs.

   Princípio: uma coluna só, e o que é largo por natureza (tabela, gráfico por
   dia) rola DENTRO do próprio cartão em vez de arrastar a página. */
@media (max-width:560px){
  body{padding:12px 12px 40px}
  .wrap{max-width:100%}
  h1{font-size:20px;line-height:1.15}
  h1 .sub{display:block;font-size:14px;margin-top:3px}
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .meta{align-items:flex-start}
  h2{font-size:17px}

  /* tudo em coluna única */
  .kpis,.strip,.cols,.duo,.qgrid,.cmpgrid,.grid2,.cards{grid-template-columns:1fr}
  .strip>div{border-right:0;border-bottom:1px solid var(--line)}
  .strip>div:last-child{border-bottom:0}
  .val{font-size:24px}

  /* controles de período */
  .controls{padding:10px 12px;gap:8px}
  .controls .lbl{width:100%}
  .dinput{flex:1;min-width:0;font-size:12px}
  .chips{margin-left:0;width:100%}
  .qchip{flex:1;text-align:center;padding:6px 8px;font-size:11.5px}

  /* abas rolam na horizontal em vez de quebrar linha */
  .tabs,.rtoggle{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab,.tbtn{white-space:nowrap;padding:9px 11px;font-size:12.5px}
  /* `align-items:flex-start` num flex COLUNA encolhe o filho ao conteúdo:
     ali o eixo horizontal é o TRANSVERSAL, então min-width/flex-shrink não
     valem. Com `stretch` o filho ocupa a largura do contêiner e o texto
     quebra. O toggle volta a ficar à esquerda por align-self. */
  /* `flex-wrap:wrap` + `flex-direction:column` faz o flex quebrar em COLUNAS,
     e as colunas extras vazam para a direita — foi o que segurou o /salomao-ig
     em 428px. Ao virar coluna, o wrap precisa ser desligado junto. */
  .rankhead{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px}
  /* o toggle fica à esquerda, mas limitado ao contêiner: sem o max-width ele
     dimensiona pelo conteúdo (377px no /salomao-ig, que tem muitos critérios
     de ordenação) e o overflow-x acima nunca tem o que rolar. */
  .rankhead .rtoggle{align-self:flex-start;max-width:100%}

  /* barras horizontais: o rótulo sobe para cima do traço — em 390px sobravam
     ~60px de barra, o que tornava a comparação inútil */
  .hbars .row,.srow{grid-template-columns:1fr auto;grid-template-areas:"lb num" "track track";gap:4px 10px}
  .hbars .lb,.hbars .lbl2,.srow .sn{grid-area:lb;white-space:normal;overflow:visible}
  .hbars .num,.srow .sv{grid-area:sv;grid-area:num}
  .srow .sv{grid-area:num}
  .hbars .track,.srow .track{grid-area:track}
  .fstage{grid-template-columns:1fr auto;grid-template-areas:"fn fv" "ftrack ftrack";gap:4px 10px}
  .fstage .fn{grid-area:fn} .fstage .fv{grid-area:fv} .fstage .ftrack{grid-area:ftrack}

  /* largos por natureza: rolam dentro do cartão */
  .chart{overflow-x:auto;padding-bottom:6px}
  .col{min-width:56px}
  table{font-size:11.5px} td,th{padding:8px 6px}
  .cthumb{width:32px;height:32px}
  .donut-wrap{gap:12px} .dlegend{min-width:100%}
  .verbat{max-height:none}
  /* menu de navegação (dash-nav.js): abre com left:0 e min-width 216px, então
     em tela estreita ele vaza pela direita. Ancorar à direita e limitar. */
  /* o dash-nav.js cria o <style> dele em runtime, então cai DEPOIS deste
     arquivo na cascata e vence empate de especificidade. Por isso aqui vai
     com o pai junto (0,2,0) em vez da classe sozinha (0,1,0). */
  .dashnav .dashnav-menu{left:auto;right:0;min-width:0;width:max-content;max-width:calc(100vw - 28px)}
}

/* ── A ARMADILHA DO GRID (vale em QUALQUER largura, por isso fora do @media) ──
   Item de grid/flex não encolhe abaixo do próprio conteúdo mínimo a menos que
   se dê `min-width:0`. Sem isso, o gráfico de dias empurra a coluna do `.cols`,
   a página estoura a largura, o Chrome no celular dá zoom-out para caber — e o
   @media (max-width:560px) NUNCA dispara, porque o viewport virou 1560px.
   Medido: /salomao-dd abria com viewport de 1560px e documento de 2040px.

   Por isso estas duas regras não podem viver dentro de media query: elas são o
   que impede o zoom-out que desligaria a media query. */
.cols>*,.duo>*,.kpis>*,.qgrid>*,.cmpgrid>*,.grid2>*,.cards>*,.rankhead>*,.card{min-width:0}
.chart{overflow-x:auto}

/* ── QUIRKS MODE: tabela não herda cor de texto ─────────────────────────────
   Nenhum dashboard da casa tem <!doctype html>, então todos rodam em quirks
   mode. Nesse modo o navegador aplica `table { color: -internal-quirk-inherit }`
   na folha DELE — confirmado via CSS.getMatchedStylesForNode, origem user-agent.
   O efeito: a tabela ignora a cor herdada do pai e mantém a antiga. Trocar para
   o tema claro em tempo real deixava o texto claro sobre fundo branco, ilegível
   (contraste ~1,1) — foi o que o Carlos reportou no /vinicius-5era.

   Declarar a cor explicitamente vence a regra do user-agent e resolve nos dois
   modos. A alternativa seria pôr doctype nos 27 arquivos, o que muda o modo de
   renderização de layouts inteiros que foram construídos em quirks — risco
   grande para o mesmo ganho. */
table, th, td { color: var(--ink) }
th { color: var(--dim) }