/*
 * Identidade visual das três páginas (painel, relatório e histórico), adaptada do
 * DESIGN-meta.md que o Matheus passou em 13/09/2026.
 *
 * Carregada DEPOIS do CSS de cada página: redefine cores, fonte e o formato dos
 * componentes, sem mexer em estrutura. O que veio do documento: tela branca, tinta
 * quase preta e cinzas frios; botões, seletores e selos em pílula (100px); cards
 * arredondados com borda fina e sem sombra; hierarquia tipográfica de três pesos.
 *
 * O que foi adaptado, de propósito:
 *  - Densidade de painel: o documento é de loja (corpo 16px, títulos de 64px). Aqui as
 *    tabelas continuam em 13px, senão uma tabela de 18 colunas não cabe.
 *  - Fonte: a Optimistic VF é proprietária da Meta. Montserrat é a substituta que o
 *    próprio documento indica.
 *  - Modo escuro: o documento não tem. Os tokens escuros abaixo são derivados dele.
 *  - Azul e verde continuam dizendo Meta e Google nos dados. O botão principal é preto,
 *    como o documento manda pras superfícies que não são de compra.
 */

:root {
  color-scheme: light;
  --ground:       #ffffff;
  --surface:      #ffffff;
  --surface-soft: #f1f4f7;
  --ink:          #0a1317;
  --ink-mid:      #5d6c7b;
  --ink-faint:    #8595a4;
  --rule:         #ced0d4;
  --rule-soft:    #dee3e9;
  --meta:         #0064e0;
  --google:       #15803d;
  --bom:          #218a3c;
  --alerta:       #e41e3f;

  --display: Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
  --corpo:   Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
  --dados:   Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b0f13; --surface: #12181e; --surface-soft: #1a2128; --ink: #e8edf2;
    --ink-mid: #a1afbc; --ink-faint: #6f7e8c; --rule: #2b333c; --rule-soft: #1f262d;
    --meta: #4d9dff; --google: #46c46f; --bom: #45c46a; --alerta: #ff5c73;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0f13; --surface: #12181e; --surface-soft: #1a2128; --ink: #e8edf2;
  --ink-mid: #a1afbc; --ink-faint: #6f7e8c; --rule: #2b333c; --rule-soft: #1f262d;
  --meta: #4d9dff; --google: #46c46f; --bom: #45c46a; --alerta: #ff5c73;
}

/* ---------------------------------------------------------------- texto */
body { letter-spacing: -0.14px; }
/* Número em coluna alinha; número grande solto fica proporcional (o documento pede). */
.num, td, .cal-data b, .canal dd, .quando b { font-variant-numeric: tabular-nums; }
h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: normal; }
.topo { border-bottom-color: var(--rule-soft); }

/* Título de seção: de rótulo em caixa alta pra título de verdade, no peso do documento. */
h2.secao {
  font: 600 18px/1.25 var(--display); letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); margin: 40px 0 14px;
}
h2.secao::after { background: var(--rule-soft); }

/* Rótulos miúdos (cabeçalho de tabela, etiquetas): continuam em caixa alta, que ajuda a
   separar rótulo de dado num painel, mas na fonte do documento e com espaçamento menor. */
thead th { font-family: var(--corpo); font-weight: 600; letter-spacing: .04em; }
td { border-bottom-color: var(--rule-soft); }

/* ---------------------------------------------------------------- pílulas */
.btn, .periodos button, .periodos button:first-child, .periodos button:last-child {
  border-radius: 100px; margin-left: 0;
  font: 600 13px/1.2 var(--corpo); letter-spacing: -0.1px; text-transform: none;
  padding: 8px 16px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
}
.periodos { gap: 6px; flex-wrap: wrap; }
.btn:hover, .periodos button:hover { border-color: var(--ink); color: var(--ink); }
.periodos button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primario { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primario:hover { background: #444950; border-color: #444950; }

.modo-metricas { border-radius: 100px; border-color: var(--rule); }
.modo-metricas button { font: 600 11.5px var(--corpo); letter-spacing: 0; text-transform: none; padding: 5px 12px; }
.bloco > header .abrir-todos { font: 600 12px var(--corpo); letter-spacing: 0; text-transform: none; }
button.tema { border-radius: 100px; font: 600 12px var(--corpo); letter-spacing: 0; text-transform: none; padding: 8px 14px; }

.chip, .cal-cli, .card .ver, .peca .ver, .selo, .medalha, .aviso-flutuante {
  border-radius: 100px;
}
.chip { font: 600 11.5px var(--corpo); padding: 5px 10px; }
.card .ver, .peca .ver { font: 600 11.5px var(--corpo); letter-spacing: 0; text-transform: none; padding: 6px 12px; }
.selo, .medalha { font-family: var(--corpo); font-weight: 600; letter-spacing: 0; padding: 3px 9px; }
.st::before { border-radius: 50%; }

/* ---------------------------------------------------------------- campos */
select, input[type=search], input[type=password], input[type=date], input[type=number],
.g-quem input, .orc-campo input, .filtros select, .filtros input, .evo-sel select, .datas input[type=date] {
  border-radius: 8px; border-color: var(--rule); font-family: var(--corpo);
}
select:focus, input:focus { outline: none; border-color: var(--meta); box-shadow: 0 0 0 1px var(--meta); }

/* ---------------------------------------------------------------- cards */
/* Cards arredondados com borda fina e sem sombra. A barra colorida na lateral dos blocos
   vira uma bolinha antes do título: o documento não usa cor de borda em card. */
.painel, .cartoes, .bloco, .card, .gerir-dlg, .orc-pop, .numero, .canal, .peca, .alcance,
.frase, .reparticao, .foco-dias li {
  border-radius: 16px;
}
.painel, .cartoes, .bloco, .card, .numero, .canal, .peca, .reparticao { border-color: var(--rule-soft); }
.bloco { border: 1px solid var(--rule-soft); border-left-width: 1px; }
.bloco > header { background: var(--surface); border-bottom-color: var(--rule-soft); padding: 14px 18px; }
.bloco > header h3 { font: 600 15px var(--corpo); letter-spacing: -0.01em; }
.bloco > header h3::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento, var(--ink)); margin-right: 9px; vertical-align: 1px;
}
.bloco .nota { border-top-color: var(--rule-soft); }

.cartao { box-shadow: 1px 0 0 var(--rule-soft), 0 1px 0 var(--rule-soft); padding: 16px 18px 17px; }
.cartao .rot { font: 600 11px var(--corpo); letter-spacing: .04em; }
.cartao .val { font: 600 28px/1.05 var(--display); letter-spacing: -0.02em; font-variation-settings: normal; }

.card .quadro, .peca img, .mini { border-radius: 10px; }
.card { overflow: hidden; }

.g-confirma { border-radius: 12px; }
.achado:first-child, .cal-lista .cal-item:first-child { border-top: 0; }
.cal-ev { border-radius: 8px; }
.trilho { border-radius: 100px; }
.regua, .regua i { border-radius: 100px; }

/* ---------------------------------------------------------------- relatório do cliente */
.numero dt, .alcance dt, .quando, .peca .posicao, .rotulo {
  font-family: var(--corpo); font-weight: 600; letter-spacing: .04em;
}
.numero dd, .alcance dd, .peca .valor { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.canal .cabeca b { font-family: var(--display); font-weight: 600; }
.frase { border-color: var(--rule-soft); }

/* A Montserrat é mais larga que a fonte anterior: o valor grande do card precisa caber
   até em "R$ 28.932" num card estreito, sem vazar pela borda. */
.numero dd { font-size: clamp(22px, 2.3vw, 28px); overflow-wrap: anywhere; }
.cartao .val { font-size: clamp(22px, 2.1vw, 28px); }