/* Base compacta compartilhada pelo painel do escritório, super admin e login. */
:root {
  --bg: #f3f4f6; --card: #fff; --ink: #1b1f24; --ink2: #475467; --muted: #667085; --line: #e4e7ec; --line2: #eef0f3; --field: #fff; --hover: #f7f8fa;
  --brand: #0f6e5a; --brand-ink: #fff; --brand-soft: #e6f3ef;
  --warn: #b54708; --warn-soft: #fef0e6; --err: #b42318; --err-soft: #fef3f2; --ok: #067647; --ok-soft: #ecfdf3; --info: #175cd3; --info-soft: #eff4ff;
  --sel: #e6f3ef;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1114; --card: #171b1f; --ink: #e9edf1; --ink2: #c3cad3; --muted: #98a2b3; --line: #2a3036; --line2: #22272c; --field: #12161a; --hover: #1d2227;
    --brand: #3cc19f; --brand-ink: #062b22; --brand-soft: #143029;
    --warn: #f5a35c; --warn-soft: #3a2614; --err: #f97066; --err-soft: #3a1714; --ok: #47cd89; --ok-soft: #10301f; --info: #84adff; --info-soft: #172443; --sel: #15302a; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); }
.esconde { display: none !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mudo { color: var(--muted); }

/* Barra superior */
.barra { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.marca { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.marca span { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: 2px; height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 10px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-weight: 500; }
.nav a.on { color: var(--ink); border-color: var(--brand); }
.nav a:hover { color: var(--ink); }
.espaco { flex: 1; }
.eu { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.eu b { color: var(--ink); font-weight: 600; }
.selo { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
@media (max-width: 760px) { .eu .papel, .marca span { display: none; } .barra { gap: 8px; } .nav a { padding: 0 6px; } }

.aviso { padding: 8px 14px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.aviso.warn { background: var(--warn-soft); color: var(--warn); }
.aviso.err { background: var(--err-soft); color: var(--err); }
.aviso.info { background: var(--info-soft); color: var(--info); }

/* Controles */
input, select, textarea { font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; height: 30px; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input:disabled, select:disabled { opacity: .7; }
.btn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; background: var(--brand); color: var(--brand-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sec { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.sec:hover:not(:disabled) { background: var(--hover); }
.btn.min { height: 24px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.btn.perigo { color: var(--err); }
.btn.fant { background: none; color: var(--muted); border: 0; padding: 0 6px; }
.btn.fant:hover { color: var(--ink); }
kbd { font: 11px ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--muted); background: var(--card); }

/* Chips e filtros */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--line2); color: var(--ink2); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.err { background: var(--err-soft); color: var(--err); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); flex-wrap: wrap; }
.seg button { border: 0; background: none; font: inherit; padding: 0 10px; height: 28px; cursor: pointer; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--sel); color: var(--ink); font-weight: 600; }
.seg button small { color: var(--muted); font-weight: 500; margin-left: 3px; font-variant-numeric: tabular-nums; }

/* Área de trabalho */
.pagina { padding: 12px 14px 40px; }
.ferramentas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.busca { position: relative; flex: 1 1 260px; max-width: 420px; }
.busca input { width: 100%; padding-left: 28px; }
.busca::before { content: "⌕"; position: absolute; left: 9px; top: 5px; color: var(--muted); font-size: 15px; }
.busca kbd { position: absolute; right: 7px; top: 7px; }
.kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; min-width: 130px; flex: 1 1 130px; }
.kpi small { display: block; color: var(--muted); font-size: 11.5px; }
.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 11.5px; margin-left: 6px; color: var(--muted); }

/* Tabela densa */
.quadro { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
table.densa { width: 100%; border-collapse: separate; border-spacing: 0; }
.densa th { position: sticky; top: 0; background: var(--card); z-index: 2; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.densa th[data-ord] { cursor: pointer; }
.densa th[data-ord]:hover { color: var(--ink); }
.densa th.ord::after { content: " ↓"; } .densa th.ord.asc::after { content: " ↑"; }
.densa td { padding: 5px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; height: 34px; }
.densa tbody tr { cursor: default; }
.densa tbody tr.clic { cursor: pointer; }
.densa tbody tr:hover td { background: var(--hover); }
.densa tbody tr.foco td { background: var(--sel); }
.densa tbody tr.foco td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
.densa td.nome { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.densa td.nome b { font-weight: 600; }
.densa td .doc { color: var(--muted); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.densa .vazio td { text-align: center; color: var(--muted); padding: 30px; height: auto; }
.rodape-tab { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: var(--muted); font-size: 12.5px; gap: 8px; flex-wrap: wrap; }
.delta { font-size: 11px; margin-left: 4px; }
.delta.sobe { color: var(--ok); } .delta.cai { color: var(--err); }

/* Gaveta lateral */
.gaveta { position: fixed; top: 46px; right: 0; bottom: 0; width: min(880px, 100vw); background: var(--card); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgb(0 0 0 / .12); z-index: 15; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease; }
.gaveta.aberta { transform: none; }
.gaveta header { padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.gaveta .titulo { display: flex; align-items: flex-start; gap: 10px; }
.gaveta .titulo h2 { font-size: 16.5px; margin: 0; }
.gaveta .titulo small { color: var(--muted); }
.abas { display: flex; gap: 2px; margin-top: 8px; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 10px; font: inherit; color: var(--muted); cursor: pointer; }
.abas button.on { color: var(--ink); border-color: var(--brand); font-weight: 600; }
.gaveta .corpo { flex: 1; overflow: auto; padding: 14px 16px; }
.gaveta footer { border-top: 1px solid var(--line); padding: 8px 16px; display: flex; gap: 8px; align-items: center; background: var(--card); }
@media (max-width: 760px) { .gaveta { top: 0; z-index: 30; } }

/* Formulário compacto */
h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; font-weight: 600; }
h3:first-child { margin-top: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; }
.campos .larg { grid-column: 1 / -1; }
.campos .duplo { grid-column: span 2; }
@media (max-width: 520px) { .campos .duplo { grid-column: 1 / -1; } }
.campos label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.campos label small { font-weight: 400; color: var(--muted); }
.campos .check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; align-self: end; height: 30px; }
.campos .check input { height: auto; }

.valid { border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; }
.valid.ok { background: var(--ok-soft); color: var(--ok); }
.valid.err { background: var(--err-soft); color: var(--err); }
.valid.warn { background: var(--warn-soft); color: var(--warn); }
.valid ul { margin: 2px 0 0; padding-left: 16px; }

dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); width: min(560px, 94vw); padding: 0; }
dialog.largo { width: min(860px, 94vw); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
dialog .corpo { padding: 14px; }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
dialog pre { margin: 0; padding: 14px; max-height: 70vh; overflow: auto; font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: 8px 14px; border-radius: 8px; font-size: 13px; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }

/* Mini gráfico (uma série) */
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; vertical-align: middle; }
.spark i { display: block; width: 6px; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.spark i:last-child { opacity: .45; }

/* Certificado A1 */
.cert-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; background: var(--bg); border-radius: 9px; padding: 10px 12px; }
.cert-dados small { display: block; color: var(--muted); font-size: 11.5px; }
.cert-dados b { font-weight: 600; word-break: break-word; }
.cert-nota { font-size: 12px; margin: 8px 0 0; }
.cert-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 10px; margin-top: 12px; align-items: end; }
.cert-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.cert-form label small { font-weight: 400; color: var(--muted); }
.cert-form input[type=file] { height: auto; padding: 4px; }
.cert-acoes { display: flex; gap: 8px; }
.cert-msg { grid-column: 1 / -1; font-size: 12.5px; min-height: 16px; }
.receita { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 8px; }
.receita.err { background: var(--err-soft); color: var(--err); }
.painel-esc { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; max-width: 920px; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }