/* ============================================================
   Gestão Tributária — folha de estilo
   Tokens herdados da calculadora, para as duas aplicações
   parecerem a mesma casa.

   As dez heurísticas de Nielsen aparecem citadas onde a regra
   existe por causa delas — para ninguém "simplificar" depois
   sem saber o que estava sendo sustentado.
   ============================================================ */

:root{
  --navy:#0f172a; --ink:#1e293b; --ink-muted:#64748b; --ink-faint:#94a3b8;
  --accent:#0f766e; --accent-mid:#14b8a6; --accent-soft:#ccfbf1; --accent-tint:#f0fdfa;
  --bg:#f1f5f9; --surface:#fff; --line:#e2e8f0; --line-soft:#f1f5f9;
  --ok:#15803d; --ok-bg:#f0fdf4; --ok-line:#86efac;
  --warn:#a16207; --warn-bg:#fefce8; --warn-line:#fde047;
  --danger:#b91c1c; --danger-bg:#fef2f2; --danger-line:#fca5a5;
  --info:#1d4ed8; --info-bg:#eff6ff; --info-line:#bfdbfe;

  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px -12px rgba(15,23,42,.16);
  --gap:18px; --pad:18px;
  /* Recuo lateral único: a tela inteira respira pela mesma margem. */
  --pad-x:20px;
  /* Altura real da topbar, medida em JS — as abas grudam logo abaixo dela
     mesmo quando o nome da empresa quebra para uma segunda linha. */
  --topbar-h:56px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* nada de rolagem horizontal na página: quem rola é a tabela */
}
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent-mid); outline-offset:2px; border-radius:4px; }

/* A tela toda, sem coluna estreita no meio do monitor. O teto de 1920px é só
   para a linha de texto não virar um horizonte em monitores ultralargos. */
.wrap{ width:100%; max-width:1920px; margin-inline:auto; padding-inline:var(--pad-x); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:8px; top:-60px; z-index:60; background:var(--navy);
  color:#fff; padding:10px 16px; border-radius:var(--r-sm); text-decoration:none;
  transition:top .15s;
}
.skip:focus{ top:8px; }

/* ---------- Topbar: Heurística 1, sempre visível onde se está ---------- */
.topbar{ background:var(--navy); color:#fff; position:sticky; top:0; z-index:30; }
.topbar__in{
  display:flex; align-items:center; gap:12px; min-height:56px; flex-wrap:wrap;
  padding-block:8px;
}
.topbar__mark{
  font-size:16px; font-weight:700; color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
}
.topbar__mark span{ color:var(--accent-mid); }
.topbar__sep{ color:#475569; }
.topbar__where{
  font-size:14px; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; flex:1;
}
.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.topbar__right form{ margin:0; display:flex; }
.tlink{
  color:#cbd5e1; font:inherit; font-size:13px; text-decoration:none; padding:8px 10px;
  border-radius:6px; border:0; background:none; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.tlink:hover{ background:#1e293b; color:#fff; }
.tlink:focus-visible{ outline-color:var(--accent-mid); }

/* ---------- Abas (Heurística 6: reconhecer, não lembrar) ---------- */
.tabs{
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:var(--topbar-h); z-index:25;
}
.tabs__in{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.tabs__in::-webkit-scrollbar{ display:none; }
.tabs a{
  padding:12px 14px; font-size:13.5px; font-weight:500; color:var(--ink-muted);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
  scroll-snap-align:start;
}
.tabs a:hover{ color:var(--ink); background:var(--line-soft); }
.tabs a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tabs__voltar{ margin-left:auto; color:var(--ink-faint) !important; }
/* Heurística 1: no celular a régua de abas rola, e a borda esmaecida diz
   que ainda há aba do lado de fora. O JS traz a aba atual para a vista. */
.tabs[data-mais]::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:28px;
  background:linear-gradient(270deg, var(--surface) 30%, transparent);
  pointer-events:none;
}

main{ padding:22px 0 64px; }

/* ---------- Cabeçalho de página ---------- */
.head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.head h1{ font-size:23px; }
.head p{ margin:4px 0 0; color:var(--ink-muted); font-size:13.5px; max-width:80ch; }
.head__actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }

/* ---------- Botões ---------- */
.btn{
  font:inherit; font-size:13px; font-weight:500; line-height:1; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; padding:10px 14px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  min-height:38px;
  transition:border-color .15s, background-color .15s, color .15s;
}
.btn:hover{ border-color:var(--accent-mid); color:var(--accent); }
.btn--primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn--primary:hover{ background:#334155; border-color:#334155; color:#fff; }
.btn--danger{ color:var(--danger); border-color:var(--danger-line); background:var(--danger-bg); }
.btn--danger:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn--sm{ padding:7px 10px; font-size:12px; min-height:32px; }
.btn--ghost{ border-color:transparent; background:transparent; color:var(--ink-muted); }
.btn--ghost:hover{ background:var(--line-soft); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn[disabled]:hover{ border-color:var(--line); color:inherit; }
.btn--primary[disabled]:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* Heurística 1: enquanto o servidor não responde, o botão diz que está indo. */
.btn[aria-busy="true"]{ pointer-events:none; opacity:.72; }
.btn[aria-busy="true"]::before{
  content:""; width:13px; height:13px; border-radius:50%; flex:none;
  border:2px solid currentColor; border-top-color:transparent;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ---------- Painéis e cartões ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); margin-bottom:var(--gap);
}
.panel__head{
  padding:14px var(--pad); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.panel__head h2{ font-size:15px; font-weight:600; }
.panel__head p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-muted); }
.panel__head .right{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.panel__body{ padding:var(--pad); }
.panel__foot{
  margin:0; padding:12px var(--pad); border-top:1px solid var(--line);
  background:var(--line-soft); font-size:12.5px; color:var(--ink-muted);
  border-radius:0 0 var(--r) var(--r);
}

/* Heurística 4: cartões da mesma faixa são blocos iguais — mesma altura,
   rótulo em cima, número no mesmo lugar, nota rente ao pé. Nada de valores
   dançando de altura só porque um cartão tem observação e o vizinho não. */
.cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); align-items:stretch; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-width:0;
}
.card__label{
  font-size:11.5px; font-weight:600; color:var(--ink-muted); text-transform:uppercase;
  letter-spacing:.04em; display:flex; align-items:center; gap:5px; min-height:2.4em;
}
.card__value{
  font-size:24px; font-weight:700; letter-spacing:-.03em; margin:6px 0 0;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.card__value--sm{ font-size:16px; line-height:1.3; }
.card__note{ font-size:12px; color:var(--ink-muted); margin:6px 0 0; padding-top:2px; }
.card__note:last-child{ margin-top:auto; }
.card--ok{ background:var(--ok-bg); border-color:var(--ok-line); }
.card--ok .card__value{ color:var(--ok); }
.card--warn{ background:var(--warn-bg); border-color:var(--warn-line); }
.card--warn .card__value{ color:var(--warn); }
.card--danger{ background:var(--danger-bg); border-color:var(--danger-line); }
.card--danger .card__value{ color:var(--danger); }

.secao{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin:26px 0 10px;
}
.secao:first-child{ margin-top:0; }

/* ---------- Tabelas: rolam sozinhas, o corpo da página nunca rola ---------- */

/* A caixa é criada pelo JS em volta de cada .rolagem, só para pendurar a
   sombra que avisa que há mais coluna fora da vista (Heurística 1). */
.rolagem-cx{ position:relative; }
.rolagem-cx::before, .rolagem-cx::after{
  content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none;
  z-index:4; opacity:0; transition:opacity .18s;
}
.rolagem-cx::before{ left:0; background:linear-gradient(90deg, rgba(15,23,42,.14), transparent); }
.rolagem-cx::after{ right:0; background:linear-gradient(270deg, rgba(15,23,42,.14), transparent); }
.rolagem-cx[data-esq]::before{ opacity:1; }
.rolagem-cx[data-dir]::after{ opacity:1; }
.panel > .rolagem-cx:last-child .rolagem, .panel > .rolagem:last-child{
  border-radius:0 0 var(--r) var(--r);
}

.rolagem{
  overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* Barra sempre visível: no macOS a barra fantasma só aparece durante o
     gesto, e quem usa mouse não tinha o que agarrar. */
  scrollbar-width:auto; scrollbar-color:#b6c2d2 var(--line-soft);
}
.rolagem::-webkit-scrollbar{ height:13px; width:13px; }
.rolagem::-webkit-scrollbar-track{ background:var(--line-soft); }
.rolagem::-webkit-scrollbar-thumb{
  background:#c2ccd9; border-radius:999px; border:3px solid var(--line-soft);
}
.rolagem::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }
.rolagem::-webkit-scrollbar-corner{ background:var(--line-soft); }
.rolagem:focus-visible{ outline:2px solid var(--accent-mid); outline-offset:-2px; }

/* Tabela alta: teto de altura para o cabeçalho grudar e, principalmente, para
   a barra horizontal ficar sempre à vista — antes ela morava no fim de uma
   tabela de 60 linhas, longe de quem precisava dela. */
.rolagem--fixa{ max-height:min(70vh, 760px); }

/* Dica de gesto no celular, onde não existe barra de rolagem para ver.
   No desktop a barra já diz isso sozinha — ver regra no bloco responsivo. */
.rolagem-dica{
  display:none; font-size:11.5px; color:var(--ink-muted); padding:6px var(--pad) 0;
  align-items:center; gap:6px; position:relative; z-index:5; margin:0;
}

table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
thead th{
  background:var(--line-soft); font-size:11px; font-weight:700; color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; z-index:2;
  /* Cabeçalho quebra em duas linhas em vez de esticar a coluna: é o que faz a
     apuração inteira caber na largura da tela. */
  white-space:normal; line-height:1.25; vertical-align:bottom;
}
tbody tr:hover{ background:var(--accent-tint); }
tbody tr:last-child td{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.forte{ font-weight:600; }
.muted{ color:var(--ink-muted); }
.faint{ color:var(--ink-faint); }
td.wrap-ok, th.wrap-ok{ white-space:normal; min-width:150px; }
.wrap-ok .tag{ white-space:normal; }
.linha-ok{ background:var(--ok-bg) !important; }
.linha-erro{ background:var(--danger-bg); }
.linha-fora{ color:var(--ink-faint); font-style:italic; }
.col-barra{ min-width:120px; }
tfoot td{
  background:var(--line-soft); font-weight:700; border-top:2px solid var(--line);
  position:sticky; bottom:0; z-index:2;
}

/* Tabela larga (apuração, comparativo): mais colunas na mesma largura. */
.t-densa th, .t-densa td{ padding:8px 9px; font-size:12.5px; }

/* Células que carregam um juízo, sem style="" espalhado pelos templates. */
.cel-ok{ background:var(--ok-bg); color:var(--ok); }
.cel-ruim{ background:var(--danger-bg); color:var(--danger); }
.cel-alvo{ color:var(--ok); }
caption{ caption-side:top; text-align:left; }

/* Coluna do mês fixa na horizontal, inclusive no celular: rolando para o lado
   sem ela, ninguém sabe de que mês é a linha (Heurística 6). */
.fixa-1 th:first-child, .fixa-1 td:first-child{
  position:sticky; left:0; background:var(--surface); z-index:3;
}
.fixa-1 thead th:first-child{ z-index:5; background:var(--line-soft); }
.fixa-1 tfoot td:first-child{ z-index:4; background:var(--line-soft); }
.fixa-1 tbody tr:hover td:first-child{ background:var(--accent-tint); }
.fixa-1 tbody tr.linha-ok td:first-child{ background:var(--ok-bg); }
.rolagem-cx[data-esq] .fixa-1 th:first-child,
.rolagem-cx[data-esq] .fixa-1 td:first-child{ box-shadow:6px 0 8px -6px rgba(15,23,42,.28); }

/* ---------- Formulários ---------- */
/* 240px é a menor coluna em que "Simples Nacional — Anexo III" ainda cabe
   dentro de um <select>; abaixo disso o valor escolhido aparecia cortado. */
.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo > label, .campo__label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.campo__dica{ font-size:11.5px; color:var(--ink-muted); }
input[type=text], input[type=date], input[type=number], input[type=password],
input[type=search], input[type=file], select, textarea{
  font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
  width:100%; min-width:0; min-height:38px;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent-mid); outline:none;
  box-shadow:0 0 0 3px var(--accent-soft); }
input[readonly]{ background:var(--line-soft); color:var(--ink-muted); }
.campo--num input{ text-align:right; font-variant-numeric:tabular-nums; }
.sufixo{ position:relative; display:block; }
.sufixo input{ padding-right:32px; }
.sufixo::after{
  content:attr(data-sufixo); position:absolute; right:11px; top:50%;
  transform:translateY(-50%); font-size:12.5px; color:var(--ink-muted); pointer-events:none;
}
fieldset{ border:0; padding:0; margin:0; }
.check{ display:flex; align-items:flex-start; gap:9px; padding:9px 0; font-size:13.5px; }
.check input{ width:17px; height:17px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.check__txt strong{ display:block; font-weight:600; }
.check__txt span{ font-size:12px; color:var(--ink-muted); }

.barra-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.barra-form .campo{ flex:1 1 150px; }
/* Larguras de campo numa barra de filtros — classe em vez de style="",
   para o empilhamento do celular conseguir desfazê-las. */
.barra-form .campo--curto{ flex:0 1 170px; }
.barra-form .campo--medio{ flex:1 1 200px; }
.barra-form .campo--largo{ flex:2 1 240px; }

/* Heurística 4 — blocos irmãos na mesma direção.
   Todo bloco de ação (buscar, cadastrar, filtrar, lançar) tem a mesma pilha:
   título, linha de controles, dica. Assim os campos de duas colunas vizinhas
   começam na mesma altura e os botões terminam na mesma linha, mesmo quando
   só um dos blocos tem dica. */
.blocos{
  display:grid; gap:16px var(--gap); align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.bloco{ display:grid; grid-template-rows:auto auto 1fr; gap:6px; min-width:0; }
.bloco__titulo{ font-size:12.5px; font-weight:600; color:var(--ink); }
.bloco__linha{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
.bloco__linha > .campo{ flex:1 1 190px; }
.bloco__linha > .btn{ flex:0 0 auto; }
.bloco__dica{ font-size:11.5px; color:var(--ink-muted); margin:0; }
.blocos--separados .bloco + .bloco{ padding-left:var(--gap); border-left:1px solid var(--line); }

/* Barra fixa de salvar: Heurística 1 e 3, ação sempre alcançável. */
.barra-salvar{
  position:sticky; bottom:0; z-index:20; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-top:1px solid var(--line);
  padding:12px 0; margin-top:var(--gap);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.barra-salvar .msg{ font-size:12.5px; color:var(--ink-muted); }

/* ---------- Avisos e mensagens (Heurística 9) ---------- */
.aviso{
  display:flex; gap:10px; align-items:flex-start; padding:11px 14px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--line-soft);
  font-size:13px; margin-bottom:10px;
}
.aviso__icone{ flex:none; font-size:14px; line-height:1.4; }
.aviso--ok{ background:var(--ok-bg); border-color:var(--ok-line); color:#14532d; }
.aviso--alerta{ background:var(--warn-bg); border-color:var(--warn-line); color:#713f12; }
.aviso--erro{ background:var(--danger-bg); border-color:var(--danger-line); color:#7f1d1d; }
.aviso--info{ background:var(--info-bg); border-color:var(--info-line); color:#1e3a8a; }
.aviso b{ font-weight:600; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--navy); color:#fff; padding:11px 18px; border-radius:999px;
  font-size:13px; z-index:70; box-shadow:0 10px 30px -10px rgba(15,23,42,.5);
  display:flex; align-items:center; gap:9px; max-width:calc(100% - 32px);
  margin:0;
}
.toast--erro{ background:var(--danger); }

.tag{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px;
  font-weight:600; border:1px solid var(--line); background:var(--line-soft);
  color:var(--ink-muted); white-space:nowrap;
}
.tag--ok{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.tag--warn{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.tag--info{ background:var(--info-bg); border-color:var(--info-line); color:var(--info); }
.tag--fora{ background:transparent; color:var(--ink-faint); }

kbd{
  font:inherit; font-size:11px; font-family:var(--mono); padding:1px 6px;
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  background:var(--surface); color:var(--ink-muted); white-space:nowrap;
}

/* ---------- Estado vazio (Heurística 10) ---------- */
.vazio{ text-align:center; padding:44px 20px; color:var(--ink-muted); }
.vazio__icone{ font-size:30px; opacity:.5; }
.vazio h3{ font-size:16px; color:var(--ink); margin:12px 0 6px; }
.vazio p{ margin:0 auto 16px; max-width:44ch; font-size:13.5px; }

/* ---------- Lista de empresas ---------- */
/* Heurística 4: os cartões são uma grade de blocos iguais — mesma largura,
   mesma altura, e a fileira de botões alinhada no pé de todos eles. */
.empresas{
  display:grid; gap:12px; align-items:stretch;
  grid-template-columns:repeat(auto-fill, minmax(290px,1fr));
}
.empresa-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px;
  min-width:0; transition:border-color .15s;
}
.empresa-card:hover{ border-color:var(--accent-mid); }
.empresa-card__nome{ font-size:15.5px; font-weight:650; letter-spacing:-.01em; overflow-wrap:anywhere; }
.empresa-card__nome a{ color:var(--ink); text-decoration:none; }
.empresa-card__nome a:hover{ color:var(--accent); }
.empresa-card__meta{ font-size:12px; color:var(--ink-muted); display:flex; gap:10px; flex-wrap:wrap; }
.empresa-card__num{ font-size:13px; margin:0; }
.empresa-card__pe{ display:flex; gap:6px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft); }
.empresa-card__pe .btn{ flex:1; }

/* ---------- Diálogo de confirmação ---------- */
dialog{
  border:1px solid var(--line); border-radius:var(--r); padding:0; max-width:520px;
  width:calc(100% - 32px); max-height:90dvh; box-shadow:0 24px 60px -20px rgba(15,23,42,.4);
  color:var(--ink); background:var(--surface); overflow:auto;
  overscroll-behavior:contain;
}
dialog::backdrop{ background:rgba(15,23,42,.45); }
dialog .panel__body{ padding:20px; }
dialog h2{ font-size:17px; margin-bottom:8px; }
dialog p{ font-size:13.5px; color:var(--ink-muted); margin:0 0 14px; }
dialog .acoes{
  display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap;
  position:sticky; bottom:-20px; padding:12px 0 0; background:var(--surface);
}

/* ---------- Barras de comparação ---------- */
.barra{ height:7px; background:var(--line-soft); border-radius:999px; overflow:hidden; min-width:70px; }
.barra i{ display:block; height:100%; background:var(--accent-mid); border-radius:999px; }
.barra i.venc{ background:var(--ok); }
.barra i.fora{ background:var(--ink-faint); }

/* ---------- Voltar ao topo (telas longas, sobretudo no celular) ---------- */
.ao-topo{
  position:fixed; right:16px; bottom:16px; z-index:40; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-muted); box-shadow:var(--shadow); cursor:pointer; font-size:16px;
  display:none; align-items:center; justify-content:center;
}
.ao-topo[data-ver]{ display:flex; }
.ao-topo:hover{ color:var(--accent); border-color:var(--accent-mid); }

/* ---------- Login ---------- */
.login{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login__caixa{ width:min(380px, 100%); }
.login__marca{ text-align:center; margin-bottom:20px; }
.login__marca h1{ font-size:20px; }
.login__marca p{ color:var(--ink-muted); font-size:13px; margin:6px 0 0; }

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  :root{ --pad-x:16px; }
  .rolagem-cx[data-dir] .rolagem-dica{ display:flex; }
  .head h1{ font-size:20px; }
  .card__value{ font-size:20px; }
  .blocos--separados .bloco + .bloco{
    padding-left:0; padding-top:16px; border-left:0; border-top:1px solid var(--line);
  }
}
@media (max-width:640px){
  body{ font-size:14px; }
  :root{ --pad:14px; --gap:14px; --pad-x:14px; }
  /* A barra do topo cabe numa linha só: a marca encolhe, os links apertam
     e a barra "/" decorativa sai. O nome da empresa fica na linha de baixo. */
  .topbar__in{ min-height:52px; gap:8px; }
  .topbar__mark{ font-size:15px; }
  .topbar__sep{ display:none; }
  .topbar__where{ order:3; flex-basis:100%; font-size:12.5px; }
  .topbar__right{ margin-left:auto; gap:0; }
  .tlink{ padding:8px; font-size:12.5px; }
  .head{ margin-bottom:14px; }
  /* Numa linha própria, a legenda do painel volta a começar à esquerda. */
  .panel__head .right{ margin-left:0; }
  /* Filtro em linha inteira, botões dividindo a linha seguinte — nada de
     rótulo espremido no meio da tela. */
  .head__actions{ margin-left:0; width:100%; }
  .head__actions > form{ flex:1 1 100%; }
  .head__actions > .btn{ flex:1 1 45%; }
  .cards{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
  .card{ padding:12px; }
  .card__label{ min-height:0; }
  .card__value{ font-size:18px; }
  .empresas{ grid-template-columns:1fr; }
  th,td{ padding:8px 10px; font-size:12.5px; }
  .t-densa th, .t-densa td{ padding:7px 8px; font-size:12px; }
  .fixa-1 th:first-child, .fixa-1 td:first-child{ max-width:96px; }
  .rolagem--fixa{ max-height:min(64vh, 520px); }
  .barra-form{ flex-direction:column; align-items:stretch; }
  /* Em coluna, o flex-basis passa a valer como altura: sem isto cada campo
     virava um bloco de 150px de alto, com um buraco no meio da tela. */
  .barra-form .campo, .barra-form .campo--curto, .barra-form .campo--medio,
  .barra-form .campo--largo, .bloco__linha > .campo{ flex:0 1 auto; }
  .barra-salvar{ padding:10px 0; }
  .barra-salvar .btn{ flex:1; }
  /* Alvos de toque de 44px no celular. */
  .btn{ padding:12px 14px; min-height:44px; }
  .btn--sm{ min-height:38px; }
  .tabs a{ padding:14px 12px; }
  /* 16px evita o zoom automático do Safari ao focar um campo. */
  input[type=text], input[type=date], input[type=number], input[type=password],
  input[type=search], input[type=file], select, textarea{ font-size:16px; min-height:44px; }
  /* Diálogo vira folha subindo do pé da tela — o polegar alcança os botões. */
  dialog{
    width:100%; max-width:none; margin:auto 0 0; border-radius:var(--r) var(--r) 0 0;
    max-height:92dvh; border-bottom:0;
  }
  dialog .panel__body{ padding:16px; }
  dialog .acoes{ bottom:-16px; padding-bottom:2px; }
  dialog .acoes .btn{ flex:1 1 46%; }
  .ao-topo{ right:12px; bottom:12px; }
}
@media print{
  .topbar, .tabs, .head__actions, .barra-salvar, .btn, .ao-topo,
  .rolagem-dica, form.nao-imprimir{ display:none !important; }
  body{ background:#fff; }
  .panel{ box-shadow:none; break-inside:avoid; }
  .rolagem, .rolagem--fixa{ overflow:visible; max-height:none; }
  /* No papel nada gruda: cabeçalho, rodapé e coluna do mês voltam ao fluxo. */
  thead th, tfoot td,
  .fixa-1 th:first-child, .fixa-1 td:first-child{ position:static; }
  .rolagem-cx::before, .rolagem-cx::after{ display:none; }
}