/* QuantoVale — base.css
 * Tokens, reset, tipografia e componentes compartilhados (spec 0001 §3.2) + shell (topo, abas,
 * barra do celular), menu, folha, toast, modal, gaveta, login, bloqueio, admin, assinatura e
 * onboarding. Guia de uso: docs/specs/0001-radar-do-dia-componentes.md.
 * Regras do dono: sem gradiente, glow, blur ou emoji; fio > sombra (sombra só em menu, gaveta e
 * folha); status em texto, nunca com cara de botão. Tema único claro. */

:root {
  --nevoa: #E6EBF0;
  --papel: #F8FAFB;
  --papel2: #EFF3F6;
  --branco: #FFFFFF;
  --tinta: #142032;
  --tinta2: #3A4658;
  --cinza: #56627A;
  --fio: #CAD2DC;
  --fio2: #DDE3EA;
  --cobalto: #2446C4;
  --cobalto-h: #1D3AA6;
  --cobalto-f: #E3E9FA;
  --alta: #17775A;
  --alta-f: #E1F0EA;
  --queda: #B0441D;
  --queda-f: #F7E7DF;
  --compra: #D02A2A;
  --myp: #96680F;
  --faixa: rgba(36, 70, 196, .10);   /* faixa entre Liga e MyP no gráfico da carta */
  --faixa-k: rgba(36, 70, 196, .22); /* amostra da faixa na legenda */
  --ambar: #8F5B00;
  --ambar-f: #FAF0D9;
  --ambar-fio: #E7CF9C;
  --ambar-t: #5E3C00;
  --ambar-tt: #4A2F00;          /* texto forte dentro de alerta âmbar */
  --queda-h: #963815;           /* hover do botão de perigo */
  --toast-ok: #5FB98A;          /* fio do toast (sobre fundo tinta) */
  --toast-erro: #E0835F;
  --av2: #3E5A8A; --av3: #4F6B5E; --av4: #6E5A4A;   /* avatares do admin */
  --veu: rgba(20, 32, 50, .32);
  --veu-l: rgba(20, 32, 50, .18);
  --sombra: 0 6px 18px rgba(20, 32, 50, .10);
  --sombra-g: 0 10px 30px rgba(20, 32, 50, .16);
  --f-d: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --f-t: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-marca: "Fraunces", "Bricolage Grotesque", Georgia, serif;
  --topo-h: 58px;
  --tabbar-h: 58px;
  --cta-h: 57px;                /* barra fixa de ação acima da barra de abas (página da carta) */
  color-scheme: light;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-t);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--nevoa);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg { display: block; }
svg.ico, .ico { display: inline-block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--cobalto-f); }

/* ------------------------------------------------------------------ tipografia e utilitários */
h1, h2, h3, h4 { font-family: var(--f-d); margin: 0; letter-spacing: -.015em; font-weight: 700; line-height: 1.15; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
/* Schibsted Grotesk com tnum deixa vírgula, ponto e % com largura de dígito ("R$ 959 , 80"):
   números ficam lining e proporcionais; colunas de valor já são alinhadas à direita. */
.num { font-variant-numeric: lining-nums; }
.num-p { font-variant-numeric: lining-nums proportional-nums; }
.up { color: var(--alta); }
.dn { color: var(--queda); }
.eq { color: var(--cinza); }
.mut { color: var(--cinza); }
.rot { font-size: 12.5px; color: var(--cinza); font-weight: 500; }
.peq { font-size: 12.5px; }
.lnk { color: var(--cobalto); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lnk:hover { color: var(--cobalto-h); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.ico.s { width: 15px; height: 15px; }
.ico.g { width: 22px; height: 22px; }
.marca { font-family: var(--f-marca); font-weight: 600; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; color: var(--tinta); }
.marca b { font-weight: 600; color: var(--cobalto); }

/* ------------------------------------------------------------------ página e painel */
.pag { max-width: 1320px; margin: 0 auto; padding: 22px 24px 48px; }
.pag-cab { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 14px; }
.painel { background: var(--papel); border: 1px solid var(--fio); border-radius: 6px; min-width: 0; }
.painel-pad { padding: 18px 20px; }
.sec-cab { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin: 24px 0 10px; }
.sec-cab h2 { font-size: 18px; }
.nota { font-size: 12.5px; color: var(--cinza); margin: 10px 2px 0; }
.rodape { display: flex; justify-content: space-between; gap: 6px 12px; padding: 12px 20px; font-size: 12.5px; color: var(--cinza); border-top: 1px solid var(--fio2); flex-wrap: wrap; }
.grupo-sep { display: flex; gap: 4px 10px; align-items: baseline; padding: 16px 20px 6px; border-top: 1px solid var(--fio2); flex-wrap: wrap; }
.grupo-sep b { font-size: 13px; }
.grupo-sep span { font-size: 12.5px; color: var(--cinza); }
.estado { font-size: 12.5px; color: var(--cinza); margin-top: 5px; }
.estado > span + span::before { content: "·"; margin: 0 7px; color: var(--cinza); }

/* ------------------------------------------------------------------ botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 5px; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; line-height: 1; border: 1px solid transparent; }
.bt .ico { width: 16px; height: 16px; }
.bt.pri { background: var(--cobalto); color: var(--branco); }
.bt.pri:hover:not(:disabled) { background: var(--cobalto-h); }
.bt.pri:disabled { background: var(--fio); color: var(--cinza); }
.bt.sec { border-color: var(--fio); color: var(--tinta); background: var(--papel); }
.bt.sec:hover:not(:disabled) { border-color: var(--cinza); }
.bt.sec:disabled { color: var(--cinza); }
.bt.txt { color: var(--cinza); padding: 0 8px; }
.bt.txt:hover:not(:disabled) { color: var(--tinta); }
.bt.perigo { color: var(--queda); }
.bt.perigo:hover:not(:disabled) { background: var(--queda-f); }
.bt.perigo-s { background: var(--queda); color: var(--branco); }
.bt.perigo-s:hover:not(:disabled) { background: var(--queda-h); }
.bt.escuro { background: var(--tinta); color: var(--papel); }
.bt.escuro:hover:not(:disabled) { background: var(--tinta2); }
.bt.bt-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.bt.bt-g { height: 40px; padding: 0 16px; font-size: 14px; }
.bt.bt-bloco { display: flex; width: 100%; }
.bt[aria-busy="true"] { opacity: .75; cursor: progress; }
.bt-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; color: var(--cinza); }
.bt-ico:hover:not(:disabled) { background: var(--papel2); color: var(--tinta); }
.x { display: inline-grid; place-items: center; margin-left: auto; padding: 5px; border-radius: 4px; color: var(--cinza); flex: none; }
.x:hover { background: var(--papel2); color: var(--tinta); }

/* confirmação em linha (fora de menu) */
.conf-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--tinta2); padding: 10px 12px; background: var(--papel2); border-radius: 5px; }
.conf-l > span { flex: 1 1 200px; }

/* ------------------------------------------------------------------ seg (alternador) e chips */
.seg { display: inline-flex; border: 1px solid var(--fio); border-radius: 6px; padding: 2px; background: var(--papel); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { padding: 4px 10px; border-radius: 4px; font-size: 12.5px; color: var(--cinza); font-weight: 500; white-space: nowrap; }
.seg button:hover { color: var(--tinta); }
.seg button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
/* contêineres com rolagem cortam o anel de foco desenhado para fora: nesses, o anel vai para dentro */
.seg button:focus-visible, .chips .chip:focus-visible { outline-offset: -2px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--fio); border-radius: 16px; font-size: 12.5px; font-weight: 500; background: var(--papel); white-space: nowrap; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chip.novo { color: var(--cobalto); font-weight: 600; border-style: dashed; }

/* ------------------------------------------------------------------ busca e campos */
.busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fio); border-radius: 5px; padding: 0 10px; height: 34px; flex: 1 1 220px; max-width: 340px; background: var(--papel); color: var(--cinza); min-width: 0; }
.busca input { border: 0; outline: 0; background: none; font: inherit; color: var(--tinta); width: 100%; height: 100%; min-width: 0; }
.busca input::placeholder { color: var(--cinza); }
.busca:focus-within { border-color: var(--cobalto); box-shadow: 0 0 0 1px var(--cobalto); }
.busca .x { margin: 0 -4px 0 0; padding: 3px; }

.campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.campo > label, .campo .lb { font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
.campo > label small, .campo .lb small { font-weight: 400; color: var(--cinza); }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea, .inp {
  height: 38px; border: 1px solid var(--fio); border-radius: 5px; background: var(--branco); padding: 0 10px; font: inherit; color: var(--tinta); width: 100%; min-width: 0;
}
.campo textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .inp:focus { outline: 2px solid var(--cobalto); outline-offset: -1px; border-color: var(--cobalto); }
.campo input[aria-invalid="true"], .inp[aria-invalid="true"] { border-color: var(--queda); box-shadow: inset 0 0 0 1px var(--queda); }
.campo input[readonly] { background: var(--papel2); }
.campo input[type="number"] { -moz-appearance: textfield; }
.campo .ok { font-size: 12px; color: var(--alta); }
.campo .erro { font-size: 12px; color: var(--queda); }
.campo .dica { font-size: 12px; color: var(--cinza); }
.campo .seg { display: flex; }
.campo .seg button { flex: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cobalto); flex: none; }
.check small { display: block; color: var(--cinza); font-size: 12.5px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.form { display: grid; gap: 14px; }

/* ------------------------------------------------------------------ kpis */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fio2); border-bottom: 1px solid var(--fio2); }
.kpis.k3 { grid-template-columns: repeat(3, 1fr); }
.kpis.k2 { grid-template-columns: repeat(2, 1fr); }
.kpi { padding: 12px 20px; border-right: 1px solid var(--fio2); min-width: 0; }
.kpi:last-child { border-right: 0; }
/* número nunca é cortado com reticências: o % (small) quebra para a linha de baixo quando falta espaço */
.kpi .val { font-size: 20px; font-weight: 600; margin-top: 2px; letter-spacing: -.01em; font-variant-numeric: lining-nums proportional-nums; white-space: normal; overflow: visible; }
.kpi .val small { font-size: 13px; font-weight: 500; white-space: nowrap; }
.kpi .obs { font-size: 12px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ tags, flags, alertas */
.tag { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.t-max { color: var(--alta); }
.t-min { color: var(--queda); }
.t-alerta { color: var(--ambar); }
.t-info { color: var(--cinza); }
.novo-m { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--cobalto); margin-left: 8px; vertical-align: 1px; }
.novo-m::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalto); }
.flag { font-size: 11.5px; font-weight: 600; color: var(--ambar); white-space: nowrap; }
.alerta { display: flex; gap: 10px; align-items: flex-start; background: var(--ambar-f); color: var(--ambar-t); border: 1px solid var(--ambar-fio); border-radius: 4px; padding: 10px 12px; font-size: 13px; }
.alerta .ico { color: var(--ambar); margin-top: 1px; }
.alerta b { display: block; color: var(--ambar-tt); }
.alerta button, .alerta a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-top: 4px; color: var(--ambar-tt); }
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--alta); margin-right: 6px; vertical-align: 1px; }
.ponto.velho { background: var(--ambar); }

/* ------------------------------------------------------------------ miniatura e placeholder */
.th { width: 44px; height: 61px; border-radius: 3px; object-fit: cover; background: var(--papel2); flex: none; }
.th-conter { object-fit: contain; }
.ph { display: grid; place-items: center; text-align: center; background: var(--papel2); border: 1px dashed var(--fio); color: var(--cinza); font-size: 10px; font-weight: 600; border-radius: 3px; overflow: hidden; line-height: 1.15; padding: 2px; word-break: break-word; }

/* ------------------------------------------------------------------ listas de linhas genéricas */
.linhas { width: 100%; }
.linha { display: grid; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 20px; border-top: 1px solid var(--fio2); min-width: 0; color: inherit; text-decoration: none; }
button.linha:hover, a.linha:hover { background: var(--papel2); }
.linha .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .sub { font-size: 12.5px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .r { text-align: right; }

/* ------------------------------------------------------------------ vazio, erro e carregando */
.vazio { padding: 28px 20px; color: var(--cinza); }
.vazio h3 { color: var(--tinta); margin-bottom: 6px; }
.vazio p { max-width: 560px; }
.vazio p + .bt, .vazio p + p { margin-top: 12px; }
.estado-erro { padding: 28px 20px; display: grid; gap: 12px; justify-items: start; }
.esq { display: block; height: 12px; border-radius: 2px; background: var(--fio2); margin-top: 8px; }
.esq.g { height: 28px; width: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .esq { animation: qv-pulso 1.4s ease-in-out infinite; }
  @keyframes qv-pulso { 50% { opacity: .55; } }
}

/* ------------------------------------------------------------------ migalha */
.crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cinza); margin-bottom: 14px; flex-wrap: wrap; }
.crumb .voltar { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); padding: 4px 8px 4px 4px; border-radius: 4px; text-decoration: none; }
.crumb .voltar:hover { background: var(--papel); }
.crumb a { color: var(--cinza); text-decoration: none; }
.crumb a:hover { color: var(--tinta); text-decoration: underline; }
.crumb .sep { color: var(--fio); }

/* ------------------------------------------------------------------ gráficos (grafico.js) */
.spk { display: block; flex: none; max-width: 100%; }
.spk-vazio { font-size: 12px; color: var(--cinza); }
.graf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf-svg text { font-family: var(--f-t); font-size: 11px; fill: var(--cinza); font-variant-numeric: lining-nums; }
.graf-svg:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; }
.graf-vazio { padding: 30px 4px; color: var(--cinza); font-size: 13px; }
.leg { display: flex; gap: 4px 14px; font-size: 12.5px; color: var(--tinta2); flex-wrap: wrap; }
.leg span { display: inline-flex; align-items: center; gap: 6px; }

/* gráfico da carta (G.linha): SVG + rótulos em HTML por cima + leitura do dia (mouse, toque e setas) */
.gm { position: relative; width: 100%; }
.gm:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; border-radius: 4px; }
.gm-r { position: absolute; white-space: nowrap; pointer-events: none; font-size: 11px; line-height: 1.2; color: var(--cinza); font-variant-numeric: lining-nums; }
.gm-r.b { font-weight: 700; color: var(--tinta); }
.gm-r.m { color: var(--tinta2); }
.gm-r.s { font-size: 10.5px; }
.gm-r.mes { font-weight: 600; color: var(--tinta2); }
.gm-r.fim { font-size: 12.5px; }
.gm-r.fim.m { font-size: 12px; font-weight: 500; }
.gm-r.tit { font-weight: 600; color: var(--tinta2); }
.gm-r.nota { background: var(--nevoa); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; font-weight: 600; color: var(--tinta); }
.gm-r.cp { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--compra); }
.gm-r.tag { font-size: 10.5px; font-weight: 600; color: var(--branco); }
.gm-r.fim2 { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--tinta); }   /* preço de hoje na ponta (fonte e hora em cima) */
.gm-r.fim2.m { font-size: 14px; font-weight: 600; color: var(--tinta2); }
.gm-r.fim2 small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--cinza); }
@media (max-width: 559px) { .gm-r.fim2 { font-size: 15px; } .gm-r.fim2.m { font-size: 12.5px; } .gm-r.fim2 small { font-size: 10px; } }
.gm-dica { position: absolute; top: 2px; z-index: 2; background: var(--branco); border: 1px solid var(--fio); border-radius: 6px; box-shadow: var(--sombra);
  padding: 8px 11px 9px; font-size: 12.5px; line-height: 1.4; color: var(--tinta); white-space: nowrap; pointer-events: none; }
.gm-dd { font-size: 11.5px; color: var(--cinza); margin-bottom: 3px; }
.gm-dl { display: grid; grid-template-columns: 14px auto auto; column-gap: 7px; align-items: center; }
.gm-dl svg { display: block; }
.gm-dl span { color: var(--cinza); }
.gm-dl b { text-align: right; padding-left: 10px; font-weight: 700; }
.gm-dl b.mut { font-weight: 500; color: var(--cinza); }
.gm-dxs { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--fio2); display: grid; gap: 2px; }
.gm-dx { font-size: 12px; font-weight: 600; color: var(--tinta2); }
.gm-dx.up { color: var(--alta); }
.gm-dx.dn { color: var(--queda); }
@media (max-width: 559px) { .gm-r.fim { font-size: 11.5px; } .gm-r.fim.m { font-size: 11px; } .gm-r.nota { font-size: 10.5px; } }

/* ------------------------------------------------------------------ topo e abas */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 0 24px; height: var(--topo-h); background: var(--papel); border-bottom: 1px solid var(--fio); }
.abas { display: flex; gap: 2px; height: 100%; }
.aba { display: inline-flex; align-items: center; height: 100%; padding: 0 14px; font-weight: 500; color: var(--cinza); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.aba:hover { color: var(--tinta); }
.aba[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }
.aba .ico { display: none; }   /* o ícone só aparece na barra lateral */
/* sem login (lendo artigo pelo link): botão Entrar no topo e "Entrar" no lugar de "Conta" na barra do celular */
.entrar-bt, .so-anonimo { display: none; }
body.anonimo .topo .entrar-bt { display: inline-flex; margin-left: auto; }
body.anonimo .so-anonimo { display: inline; }
body.anonimo .so-logado { display: none; }
/* visitante: as seções fechadas aparecem com cadeado (tocar abre a entrada) e uma nota na barra lateral */
.aba .ico.aba-cad, .anon-nota { display: none; }   /* vence o ".aba .ico { display: block }" da barra lateral */
body.anonimo .aba .aba-cad { display: inline-block; width: 13px; height: 13px; margin-left: 6px; color: var(--cinza); }
/* Premium vencido (spec 0003): o app abre só com os artigos; as outras abas somem */
body.so-artigos .aba:not([data-aba="artigos"]), body.so-artigos .tabbar a:not([data-aba="artigos"]) { display: none; }
.fr .fr-item + .fr-item::before { content: "·"; margin: 0 8px; color: var(--cinza); }
.topo .conta-bt { margin-left: auto; }
.conta-bt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; max-width: 240px; }
.conta-bt:hover, .conta-bt[aria-expanded="true"] { background: var(--papel2); }
.conta-bt .nomec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ini { width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: var(--papel); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; text-transform: uppercase; }
#view { flex: 1; min-width: 0; }

/* barra de abas do celular */
.tabbar { display: none; }

/* barra de visão assumida */
.visao-bar { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 16px; background: var(--tinta); color: var(--papel); font-size: 13px; }
.visao-bar b { font-weight: 700; }
.visao-bar .ro { color: var(--fio); }
.visao-bar .bt { height: 28px; font-size: 12.5px; background: var(--papel); color: var(--tinta); }
.visao-bar .bt:hover { background: var(--fio2); }

/* ------------------------------------------------------------------ menu (QV.menu) */
.menu { position: fixed; z-index: 100; width: 250px; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--papel); border: 1px solid var(--fio); border-radius: 6px; box-shadow: var(--sombra); padding: 6px; font-size: 13.5px; }
.menu-cab { padding: 8px 10px 6px; font-size: 12.5px; color: var(--cinza); }
.menu-grupo { padding: 8px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--cinza); }
.menu-sep { border: 0; border-top: 1px solid var(--fio2); margin: 6px 0; }
.menu-it { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 4px; color: var(--tinta); text-decoration: none; font-size: 13.5px; line-height: 1.3; }
.menu-it .ico { color: var(--tinta2); }
.menu-it:hover:not(:disabled), .menu-it:focus-visible { background: var(--papel2); outline: none; }
.menu-it:focus-visible { box-shadow: inset 0 0 0 2px var(--cobalto); }
.menu-it:disabled { color: var(--cinza); }
.menu-it:disabled .ico { color: var(--cinza); }
.menu-it.perigo, .menu-it.perigo .ico { color: var(--queda); }
.menu-rot { flex: 1; min-width: 0; }
.menu-chk { margin-left: auto; font-size: 12px; color: var(--cinza); }
.menu-it[aria-checked="true"] .menu-chk { color: var(--tinta); font-weight: 600; }
.menu-dica { flex-basis: 100%; font-size: 12px; color: var(--cinza); padding-left: 28px; }
.menu-it:not(:has(.ico)) .menu-dica { padding-left: 0; }
.menu-conf { padding: 8px 10px 10px; margin: 2px 0; background: var(--papel2); border-radius: 4px; font-size: 12.5px; color: var(--tinta2); }
.menu-conf-bts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.menu-inp { display: block; margin-top: 8px; height: 34px; width: 100%; border: 1px solid var(--fio); border-radius: 5px; background: var(--branco); padding: 0 10px; font-variant-numeric: tabular-nums; }
.menu-inp:focus { outline: 2px solid var(--cobalto); outline-offset: -1px; }
.menu-inp[aria-invalid="true"] { border-color: var(--queda); }

/* folha inferior (menu no celular, gaveta no celular) */
.veu { position: fixed; inset: 0; z-index: 86; background: var(--veu); }
.menu.menu-folha { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 85vh; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: var(--sombra-g); padding: 4px 10px calc(14px + env(safe-area-inset-bottom)); font-size: 15px; }
.menu-folha .menu-it { padding: 12px 10px; font-size: 15px; }
.folha-alca { width: 40px; height: 4px; border-radius: 2px; background: var(--fio); margin: 8px auto 6px; }

/* ------------------------------------------------------------------ toast */
/* acima das telas de login e bloqueio (z 200): o aviso de pagamento precisa aparecer lá */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 210; display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--tinta); color: var(--papel); padding: 8px 8px 8px 14px; border-radius: 5px; font-size: 13.5px; pointer-events: auto; border-left: 3px solid var(--tinta); }
.toast.toast-ok { border-left-color: var(--toast-ok); }
.toast.toast-erro { border-left-color: var(--toast-erro); }
.toast-txt { flex: 1; min-width: 0; }
.toast-acao { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 2px 6px; white-space: nowrap; }
.toast-x { display: inline-grid; place-items: center; padding: 4px; border-radius: 3px; color: var(--fio); }
.toast-x:hover { color: var(--papel); }
.toast-acao:focus-visible, .toast-x:focus-visible { outline-color: var(--papel); }

/* ------------------------------------------------------------------ modal */
body.com-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 95; background: var(--veu); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 24px; overflow-y: auto; }
.modal-box { position: relative; width: min(460px, 100%); background: var(--papel); border: 1px solid var(--fio); border-radius: 6px; margin: auto 0; }
.modal-box.modal-grande { width: min(1120px, 100%); }
.modal-box.modal-medio { width: min(560px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--fio2); }
.modal-head h2 { font-size: 18px; flex: 1; min-width: 0; }
.modal-head-acoes { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.modal-head .x { margin-left: 0; }
.modal-body { padding: 16px 20px 20px; }
.modal-body > p { color: var(--tinta2); font-size: 13.5px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--fio2); flex-wrap: wrap; }
.modal-foot .mut { margin-right: auto; font-size: 12.5px; }

/* ------------------------------------------------------------------ gaveta (QV.abrirGaveta) */
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 88; width: min(400px, 100%); background: var(--papel); border-left: 1px solid var(--fio); box-shadow: var(--sombra-g); display: flex; flex-direction: column; }
.gaveta-veu { background: var(--veu-l); }
.g-cab { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--fio2); align-items: flex-start; flex: none; }
.g-cab .th { width: 54px; height: 75px; }
.g-cab .gnm { font-family: var(--f-d); font-weight: 700; font-size: 17px; line-height: 1.15; }
.g-cab .rot { display: block; margin-top: 3px; }
.g-corpo { padding: 14px 16px; display: grid; gap: 12px; overflow-y: auto; flex: 1; align-content: start; }
.g-pe { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--fio2); flex: none; flex-wrap: wrap; }
.g-ok { display: grid; gap: 6px; }
.g-ok b { font-family: var(--f-d); font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .gaveta { animation: qv-gaveta .18s ease; }
  @keyframes qv-gaveta { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .menu.menu-folha { animation: qv-folha .18s ease; }
  @keyframes qv-folha { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ------------------------------------------------------------------ plano (QV.tier.planoHtml) */
.plano-box { padding: 12px; border: 1px solid var(--fio); border-radius: 6px; background: var(--papel); display: grid; gap: 8px; }
.plano-tit { font-weight: 700; font-size: 13px; }
.plano-item { display: grid; gap: 4px; }
.plano-linha { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinta2); }
.plano-barra { height: 4px; border-radius: 2px; background: var(--fio2); overflow: hidden; }
.plano-barra i { display: block; height: 100%; background: var(--tinta2); }
.plano-barra.cheio i { background: var(--ambar); }
.plano-box .bt { margin-top: 2px; }

/* ------------------------------------------------------------------ login */
body.login-lock { overflow: hidden; }
.auth-screen { position: fixed; inset: 0; z-index: 200; background: var(--nevoa); }
/* a tela de entrada (#authScreen) tem o próprio CSS: static/css/entrada.css (prefixo en-) */

/* ------------------------------------------------------------------ bloqueio (assinatura vencida) */
.bloqueio { display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.auth-card { width: min(400px, 100%); background: var(--papel); border: 1px solid var(--fio); border-radius: 6px; padding: 28px 26px; display: grid; gap: 12px; }
.auth-card .marca { font-size: 26px; }
.auth-card h1 { font-size: 22px; margin-top: 6px; }
.auth-card .block-sub { color: var(--tinta2); }
.block-info { font-size: 13px; color: var(--cinza); padding: 10px 0; border-top: 1px solid var(--fio2); border-bottom: 1px solid var(--fio2); }
.block-info b { color: var(--tinta); }
.block-pendente { font-size: 13.5px; color: var(--cobalto); font-weight: 600; }
.block-ajuda { font-size: 13px; text-align: center; margin-top: 2px; }

/* ------------------------------------------------------------------ assinatura */
.assin-plano { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 12px; border-bottom: 1px solid var(--fio); margin-bottom: 4px; }
.assin-plano b { font-family: var(--f-d); font-size: 20px; }
.assin-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fio2); font-size: 13.5px; color: var(--tinta2); }
.assin-linha b { color: var(--tinta); font-weight: 600; }
.assin-nota { color: var(--tinta2); font-size: 13.5px; margin: 10px 0 12px; }
.assin-nota.pendente { color: var(--cobalto); font-weight: 600; }
.assin-acoes { display: grid; gap: 8px; margin-top: 14px; }
.assin-sec { margin-top: 20px; }
.assin-sec .rot { display: block; margin-bottom: 4px; }
.assin-pg { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--fio2); font-size: 13px; color: var(--tinta2); }
.assin-pg b { color: var(--tinta); }

/* ------------------------------------------------------------------ extensão (token) */
.token-linha { display: flex; gap: 8px; margin-top: 6px; }
.token-linha input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ------------------------------------------------------------------ onboarding */
.welcome-box { width: min(500px, 100%); text-align: left; }
.welcome-x { position: absolute; top: 10px; right: 10px; }
.welcome-body { padding: 30px 32px 6px; }
.welcome-ico { display: block; color: var(--tinta2); margin-bottom: 16px; }
.welcome-ico svg { width: 24px; height: 24px; }
.welcome-titulo { font-size: 23px; margin: 0 0 12px; }
.welcome-texto { font-size: 14px; line-height: 1.65; color: var(--tinta2); }
.welcome-texto p + p { margin-top: 12px; }
.welcome-nota { font-size: 12.5px; color: var(--cinza); margin-top: 16px; }
.welcome-foot { padding: 20px 32px 24px; display: grid; gap: 18px; }
.welcome-dots { display: flex; gap: 6px; }
.wdot { width: 18px; height: 3px; border-radius: 2px; background: var(--fio); }
.wdot.on { background: var(--tinta); }
.welcome-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.welcome-cta { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.welcome-apos { font-size: 13px; color: var(--tinta2); flex: 1 1 200px; }

/* ------------------------------------------------------------------ importar set */
.imp-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.imp-row .campo { width: 140px; }
.imp-status { font-size: 13px; padding: 9px 12px; border-radius: 5px; background: var(--papel2); color: var(--tinta2); }
.imp-status.ok { background: var(--alta-f); color: var(--alta); }
.imp-status.erro { background: var(--queda-f); color: var(--queda); }

/* ------------------------------------------------------------------ painel admin */
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--fio2); border-radius: 5px; margin-bottom: 16px; }
.adm-stats .kpi { padding: 10px 16px; }
.admin-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.admin-users { display: grid; gap: 8px; min-width: 0; }
.admin-users .busca { max-width: none; flex: none; }
.adm-count { font-size: 12px; color: var(--cinza); }
.adm-lista { list-style: none; max-height: 62vh; overflow-y: auto; border-top: 1px solid var(--fio2); }
.u-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--fio2); }
.u-item:hover { background: var(--papel2); }
.u-item[aria-current="true"] { background: var(--cobalto-f); }
.u-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; color: var(--papel); background: var(--tinta2); }
.u-av.a1 { background: var(--tinta); } .u-av.a2 { background: var(--av2); } .u-av.a3 { background: var(--av3); } .u-av.a4 { background: var(--av4); }
.u-av.big { width: 46px; height: 46px; font-size: 16px; }
.u-main { min-width: 0; flex: 1; }
.u-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.u-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-meta { font-size: 12px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-val { flex: none; text-align: right; font-weight: 600; font-size: 13px; white-space: nowrap; }
.u-val small { display: block; font-size: 11px; color: var(--cinza); font-weight: 400; }
.u-item.skel { pointer-events: none; }
.adm-erro { list-style: none; display: grid; gap: 8px; justify-items: start; padding: 10px 0; }
.selo { flex: none; font-size: 11.5px; font-weight: 600; color: var(--cinza); white-space: nowrap; }
.selo.s-admin { color: var(--cobalto); }
.selo.s-prem { color: var(--alta); }
.selo.s-venc { color: var(--queda); }
.selo.s-cort { color: var(--ambar); }
.admin-detail { min-width: 0; }
.ins-back { font-size: 13px; font-weight: 600; color: var(--tinta2); padding: 2px 0 12px; display: inline-flex; align-items: center; gap: 4px; }
.ins-back:hover { color: var(--tinta); }
.d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.d-name { font-family: var(--f-d); font-size: 21px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.d-sub { font-size: 12.5px; color: var(--cinza); margin-top: 2px; }
.d-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.plano-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.d-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--fio2); border-radius: 5px; margin-bottom: 18px; }
.d-summary .kpi { padding: 10px 14px; }
.ins-sec { margin-bottom: 22px; }
.ins-title { font-family: var(--f-d); font-size: 15px; font-weight: 700; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--fio); display: flex; gap: 8px; align-items: baseline; }
.ins-title small { font-family: var(--f-t); font-weight: 400; font-size: 12.5px; color: var(--cinza); }
.trend-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.trend-val { font-size: 22px; font-weight: 600; font-variant-numeric: lining-nums proportional-nums; }
.trend-delta { font-weight: 600; }
.trend-delta small { color: var(--cinza); font-weight: 400; margin-left: 6px; }
.trend-svg { width: 100%; height: 80px; display: block; margin-top: 8px; }
.trend-svg path { fill: none; stroke: var(--tinta); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.adm-card { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 4px; border-radius: 4px; min-width: 0; }
.adm-card:hover { background: var(--papel2); }
.adm-card .th { width: 30px; height: 42px; }
.adm-card .c-nome { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.adm-card .c-nome small { display: block; font-size: 11.5px; color: var(--cinza); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.adm-card .c-val { font-size: 12.5px; font-weight: 600; }
.pub-list, .ins-rank { list-style: none; }
.pub-item, .ins-rank li { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--fio2); font-size: 13.5px; }
.pub-main { flex: 1; min-width: 0; display: grid; }
.pub-nome, .ins-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ins-nome { flex: 1; font-weight: 500; }
.pub-sub { font-size: 12px; color: var(--cinza); }
.pub-val { flex: none; font-weight: 600; }
.ins-pos { width: 22px; flex: none; text-align: right; font-weight: 700; color: var(--cinza); }
.ins-n { font-weight: 600; color: var(--tinta2); }
.d-col { margin-bottom: 18px; }
.d-col-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--fio); }
.d-col-head b { font-size: 14.5px; }
.d-col-head .cm { font-size: 12.5px; color: var(--cinza); margin-left: auto; }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 900px) {
  .topo .conta-bt { margin-left: auto; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--fio2); }
  .kpis.k3 .kpi { border-bottom: 0; }
  .kpis.k3 .kpi:nth-child(2) { border-right: 1px solid var(--fio2); }
  .kpis.k2 .kpi { border-bottom: 0; }
  .admin-wrap { grid-template-columns: 1fr; }
  .adm-lista { max-height: 40vh; }
}
@media (max-width: 760px) {
  .adm-stats, .d-summary { grid-template-columns: 1fr 1fr; }
  .adm-stats .kpi:nth-child(2), .d-summary .kpi:nth-child(2) { border-right: 0; }
  .adm-stats .kpi:nth-child(-n+2), .d-summary .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--fio2); }
}
@media (max-width: 639px) {
  .topo { padding: 0 12px; gap: 8px; }
  .topo .abas, .topo .conta-bt { display: none; }
  .marca { font-size: 18px; }
  .pag { padding: 16px 12px 40px; }
  body.com-app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* altura presa ao token: a barra fixa da carta e o rodapé do Adicionar encostam nela sem fresta */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--fio); padding: 4px 4px env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 0; font-size: 11px; color: var(--cinza); text-decoration: none; }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar [aria-current="page"], .tabbar [aria-expanded="true"] { color: var(--tinta); font-weight: 600; }
  .toasts { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  body.com-cta .toasts { bottom: calc(var(--tabbar-h) + var(--cta-h) + 12px + env(safe-area-inset-bottom)); }
  .grade2, .grade3 { grid-template-columns: 1fr; }
  .kpis, .kpis.k3, .kpis.k2 { grid-template-columns: 1fr; }
  .kpis .kpi, .kpis.k3 .kpi, .kpis.k2 .kpi { border-right: 0; border-bottom: 1px solid var(--fio2); }
  .kpis .kpi:last-child { border-bottom: 0; }
  .kpi { padding: 10px 12px; }
  .linha { padding: 8px 12px; }
  .rodape, .grupo-sep { padding-left: 12px; padding-right: 12px; }
  .busca { max-width: none; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box.modal-grande, .modal-box.modal-medio { width: 100%; border-radius: 12px 12px 0 0; border-bottom: 0; margin: 0; max-height: 94vh; overflow-y: auto; }
  .modal-body { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
  .modal-head { padding: 12px 12px 10px 16px; position: sticky; top: 0; background: var(--papel); z-index: 1; }
  .gaveta { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--fio); border-radius: 14px 14px 0 0; }
  .welcome-body { padding: 26px 18px 6px; }
  .welcome-foot { padding: 16px 18px 22px; }
  .d-acoes { margin-left: 0; }
}
/* barra lateral (set/2026, opção 10 das mockups): de 1100 px para cima o topo vira uma coluna à esquerda
   com a marca, as seções com ícone e a conta no pé. Abaixo disso fica o topo; no celular, a barra de baixo. */
@media (min-width: 1100px) {
  :root { --topo-h: 0px; }   /* nada mais gruda embaixo de um topo */
  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .visao-bar { grid-column: 1 / -1; }
  .topo {
    grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 0; height: 100vh;
    flex-direction: column; align-items: stretch; gap: 22px; padding: 20px 14px 16px;
    border-bottom: 0; border-right: 1px solid var(--fio);
  }
  .topo .marca { padding: 0 10px; font-size: 21px; }
  .abas { flex-direction: column; height: auto; gap: 2px; }
  .aba { height: 40px; gap: 10px; padding: 0 10px; border-bottom: 0; margin: 0; border-radius: 6px; }
  .aba .ico { display: block; }
  .aba:hover { background: var(--papel2); }
  .aba[aria-current="page"] { background: var(--papel2); }
  .topo .conta-bt { position: relative; margin: auto 0 0; width: 100%; max-width: none; padding: 8px 10px; font-size: 13.5px; }
  .topo .conta-bt::before { content: ""; position: absolute; left: -4px; right: -4px; top: -12px; border-top: 1px solid var(--fio2); }
  .topo .conta-bt .nomec { flex: 1; text-align: left; }
  body.anonimo .topo .entrar-bt { margin: auto 0 0; width: 100%; justify-content: center; }
  body.anonimo .aba .aba-cad { margin-left: auto; }
  body.anonimo .anon-nota { display: block; margin: -10px 10px 0; font-size: 12px; line-height: 1.45; color: var(--cinza); }
  #view { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}