/* Painel do Emissor NFS-e Nacional — identidade Excellence Consilium.
   Servido como arquivo estático (/painel/estatico/app.css) para permitir CSP estrita: nenhum estilo inline. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fontes/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fontes/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --fundo: #F2F6FB;
  --superficie: #FFFFFF;
  --superficie-2: #F7FAFD;
  --tinta: #12203A;
  --tinta-2: #34445E;
  --suave: #5A6B84;
  --linha: #CFDAE9;
  --linha-2: #E2E9F3;
  --marinho: #0A1E3C;
  --marinho-2: #061430;
  --azul: #1E5BA8;
  --azul-escuro: #164A8C;
  --ciano: #2BC4E4;
  --ciano-suave: #8FE3F3;
  --link: #1E5BA8;
  --dado: #1E5BA8;
  --grade: #E2E9F3;
  --foco: #2BC4E4;
  --ok: #17703A;       --ok-fundo: #E6F5EC;      --ok-borda: #B5E0C4;
  --erro: #B42318;     --erro-fundo: #FDECEA;    --erro-borda: #F3C2BD;
  --alerta: #8A5A00;   --alerta-fundo: #FFF4DB;  --alerta-borda: #F0D999;
  --neutro: #4E5D73;   --neutro-fundo: #EEF2F7;  --neutro-borda: #D5DEEA;
  --sombra: 0 1px 2px rgba(10, 30, 60, .06), 0 10px 28px -14px rgba(10, 30, 60, .18);
  --raio: 14px;
  --fonte-titulo: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #061430;
    --superficie: #0F2444;
    --superficie-2: #0C1E3B;
    --tinta: #E8EEF7;
    --tinta-2: #C0CCDD;
    --suave: #93A4BC;
    --linha: #2A4268;
    --linha-2: #1D3457;
    --link: #8FE3F3;
    --dado: #3D8FE0;
    --grade: #1D3457;
    --ok: #6FD597;       --ok-fundo: rgba(46, 160, 90, .16);   --ok-borda: rgba(111, 213, 151, .35);
    --erro: #FF9A90;     --erro-fundo: rgba(220, 60, 50, .16); --erro-borda: rgba(255, 154, 144, .35);
    --alerta: #F5C565;   --alerta-fundo: rgba(230, 170, 40, .14); --alerta-borda: rgba(245, 197, 101, .35);
    --neutro: #B3C0D3;   --neutro-fundo: rgba(150, 170, 200, .12); --neutro-borda: rgba(179, 192, 211, .28);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--tinta);
  font: 400 15px/1.55 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--tinta); letter-spacing: -.01em; }
h1 { font-size: 28px; line-height: 1.15; margin: 0; font-weight: 700; }
h2 { font-size: 18px; margin: 0 0 14px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
p { margin: 0 0 12px; }
code, .mono { font-family: var(--fonte-mono); font-size: 13px; }
.mono { overflow-wrap: anywhere; }
code { background: var(--superficie-2); border: 1px solid var(--linha-2); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
ul { margin: 8px 0; padding-left: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, var(--marinho) 0%, var(--marinho-2) 100%);
  color: #F2F6FB;
  box-shadow: 0 1px 0 rgba(143, 227, 243, .12), 0 6px 20px -10px rgba(0, 0, 0, .5);
}
.topo::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, rgba(242, 246, 251, 0) 0%, #8FE3F3 40%, #2BC4E4 70%, rgba(30, 91, 168, 0) 100%);
  opacity: .7;
}
.topo-interno {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; flex-shrink: 0; }
.marca img { height: 30px; width: auto; display: block; }
.marca-produto {
  font: 600 12px/1.2 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase;
  color: #8FE3F3; padding-left: 14px; border-left: 1px solid rgba(143, 227, 243, .3);
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  color: #C9D6E8; text-decoration: none; font-weight: 500; font-size: 14px;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap; position: relative;
}
.nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
.nav a.ativo { color: #FFFFFF; background: rgba(143, 227, 243, .12); }
.nav a.ativo::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #8FE3F3, #2BC4E4);
}
.nav a.sair { color: #93A4BC; }
.ambiente {
  font: 600 11px/1 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(143, 227, 243, .35); color: #8FE3F3;
}
.ambiente.teste { border-color: rgba(245, 197, 101, .6); color: #F5C565; background: rgba(245, 197, 101, .1); }

/* ---------- conteúdo ---------- */
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecalho-pagina .sub { color: var(--suave); margin: 6px 0 0; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.cartao {
  background: var(--superficie); border: 1px solid var(--linha-2); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 22px 24px; margin-bottom: 20px;
}
.cartao > h2:first-child { margin-top: 0; }
.cartao-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.cartao-cabeca h2 { margin: 0; }
.cartao-cabeca a { font-size: 14px; }
.colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.colunas > * { min-width: 0; }
.estreito { max-width: 760px; }

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi {
  background: var(--superficie); border: 1px solid var(--linha-2); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px 20px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--linha); }
.kpi.kpi-destaque::before { background: linear-gradient(180deg, #2BC4E4, #1E5BA8); }
.kpi.kpi-ok::before { background: var(--ok); }
.kpi.kpi-erro::before { background: var(--erro); }
.kpi.kpi-neutro::before { background: var(--neutro); }
.kpi-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.kpi-valor {
  font: 700 32px/1.1 var(--fonte-titulo); margin: 8px 0 4px; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.kpi-rodape { font-size: 13px; color: var(--suave); }

/* ---------- gráfico ---------- */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .base { stroke: var(--linha); stroke-width: 1; }
.grafico .barra { fill: var(--dado); }
.grafico .barra.vazia { fill: var(--linha-2); }
.grafico .alvo { fill: transparent; }
.grafico g.mes:hover .barra { fill: var(--azul-escuro); }
.grafico .rotulo-eixo { fill: var(--suave); font: 400 12px var(--fonte-texto); }
.grafico .rotulo-valor { fill: var(--tinta-2); font: 600 12px var(--fonte-texto); }
@media (prefers-color-scheme: dark) { .grafico g.mes:hover .barra { fill: #6AAAE8; } }
details.tabela-dados { margin-top: 12px; font-size: 14px; }
details.tabela-dados summary { cursor: pointer; color: var(--link); }

/* ---------- selos de situação ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; line-height: 1; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: var(--neutro-fundo); color: var(--neutro); border: 1px solid var(--neutro-borda);
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-AUTORIZADA, .status-REGISTRADO { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.status-REJEITADA, .status-REJEITADO { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.status-SEM_RESPOSTA, .status-ENVIADA, .status-GERADA { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta-borda); }
.status-CANCELADA { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--neutro-borda); }
.status-CANCELADA::before { border-radius: 1px; height: 2px; width: 9px; }
.status-REJEITADA::before { border-radius: 1px; }

/* ---------- mensagens ---------- */
.erro, .aviso, .ok, .info {
  padding: 12px 14px 12px 42px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
  border: 1px solid; position: relative;
}
.erro::before, .aviso::before, .ok::before, .info::before {
  position: absolute; left: 14px; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  font: 700 12px/18px var(--fonte-texto); text-align: center; color: var(--superficie);
}
.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.erro::before { content: "!"; background: var(--erro); }
.aviso { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta); }
.aviso::before { content: "!"; background: var(--alerta); }
.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.ok::before { content: "\2713"; background: var(--ok); }
.info { background: var(--superficie-2); border-color: var(--linha-2); color: var(--tinta-2); }
.info::before { content: "i"; background: var(--azul); color: #fff; }
.erro strong, .aviso strong, .ok strong { color: inherit; }
.dica { margin-top: 8px; margin-bottom: 0; }

/* ---------- listas de alerta ---------- */
.alertas { list-style: none; margin: 0; padding: 0; }
.alertas li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linha-2); font-size: 14px; }
.alertas li:first-child { border-top: 0; padding-top: 0; }
.alertas .icone {
  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font: 700 13px/1 var(--fonte-texto);
}
.alertas .icone.erro-i { background: var(--erro-fundo); color: var(--erro); }
.alertas .icone.alerta-i { background: var(--alerta-fundo); color: var(--alerta); }
.alertas .icone.marca-i { background: var(--marinho); color: #8FE3F3; }
.alertas .icone.ok-i { background: var(--ok-fundo); color: var(--ok); }
.alertas .titulo { font-weight: 600; color: var(--tinta); }
.alertas .desc { color: var(--suave); font-size: 13px; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linha-2); vertical-align: middle; }
th {
  color: var(--suave); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; background: var(--superficie-2);
}
thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.vazio { text-align: center; color: var(--suave); padding: 36px 12px; }
.celula-principal { font-weight: 600; color: var(--tinta); }
.celula-sub { font-size: 12.5px; color: var(--suave); }
.chave-curta { font-family: var(--fonte-mono); font-size: 12.5px; }
.tabela-def th { width: 34%; text-transform: none; letter-spacing: 0; font-size: 13px; background: transparent; white-space: normal; }

/* lista de definição (detalhe) */
.def { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 0; margin: 0; }
.def dt, .def dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--linha-2); }
.def dt { color: var(--suave); font-size: 13px; font-weight: 600; padding-right: 16px; }
.def dd { font-size: 14.5px; overflow-wrap: anywhere; }
.def dt:first-of-type, .def dt:first-of-type + dd { border-top: 0; }

/* ---------- formulários ---------- */
label { display: block; margin: 16px 0 6px; font-size: 13.5px; color: var(--tinta-2); font-weight: 600; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 400 15px/1.3 var(--fonte-texto); color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #9FB2CC; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(43, 196, 228, .35); }
input[type="file"] { padding: 9px; }
input[type="month"], input[type="date"] { min-height: 44px; }
textarea { min-height: 96px; resize: vertical; }
.linha, .grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.ajuda, .voltar { font-size: 13px; color: var(--suave); margin: 6px 0 0; }
.voltar { margin-top: 18px; }
.secao {
  font-size: 16px; margin: 30px 0 2px; padding-top: 22px; border-top: 1px solid var(--linha-2);
  display: flex; align-items: center; gap: 10px;
}
.secao .n {
  width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--marinho); color: #8FE3F3; font: 700 12px/1 var(--fonte-texto);
}
.somente-leitura { background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 10px; padding: 12px 14px; }

/* ---------- botões ---------- */
button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; margin-top: 22px;
  font: 600 14.5px/1 var(--fonte-texto); text-decoration: none; cursor: pointer;
  color: #FFFFFF; background: var(--azul); border: 1px solid var(--azul); border-radius: 10px;
  transition: background .15s, box-shadow .15s, transform .05s;
}
button:hover, .botao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); text-decoration: none; }
button:active, .botao:active { transform: translateY(1px); }
.acoes button, .acoes .botao, .cabecalho-pagina .botao { margin-top: 0; }
.botao.grande, button.grande { min-height: 50px; padding: 14px 24px; font-size: 15.5px; }
.botao.secundario, button.secundario { background: var(--superficie); color: var(--link); border-color: var(--linha); }
.botao.secundario:hover, button.secundario:hover { background: var(--superficie-2); border-color: var(--azul); }
.botao-perigo, button.botao-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao-perigo:hover, button.botao-perigo:hover { background: #8F1C13; border-color: #8F1C13; }
@media (prefers-color-scheme: dark) {
  .botao-perigo, button.botao-perigo { background: #C0392B; border-color: #C0392B; }
}
.botao-acento { background: linear-gradient(135deg, #1E5BA8 0%, #1C7FC4 60%, #22A6D4 100%); border-color: transparent; }
.botao-acento:hover { background: linear-gradient(135deg, #164A8C 0%, #186FAD 60%, #1C93BD 100%); }
button.enviando { opacity: .7; cursor: progress; }
.link-botao { background: none; border: 0; color: var(--link); padding: 0; min-height: 0; margin: 0; font-weight: 600; text-decoration: underline; }
.link-botao:hover { background: none; color: var(--link); }

/* ---------- passos (emissão) ---------- */
.passos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
.passos li {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--suave);
  padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha-2);
}
.passos li .n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--linha-2); color: var(--suave); font-size: 12px;
}
.passos li.atual { color: var(--tinta); border-color: var(--azul); }
.passos li.atual .n { background: var(--azul); color: #fff; }
.passos li.feito .n { background: var(--ok); color: #fff; }

/* resumo da revisão */
.resumo-valor {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, #0A1E3C 0%, #10305E 100%); color: #F2F6FB;
}
.resumo-valor .rotulo { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8FE3F3; font-weight: 600; }
.resumo-valor .valor { font: 700 34px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.resumo-valor .extra { font-size: 13px; color: #C9D6E8; }

/* ---------- detalhe da nota ---------- */
.nota-cabeca { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.nota-cabeca .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.nota-cabeca h1 { margin: 4px 0 8px; }
.nota-valor { text-align: right; }
.nota-cabeca + .acoes { margin-top: 20px; }
.migalha { margin: 0 0 12px; font-size: 14px; }
.def.empilhada { grid-template-columns: minmax(0, 1fr); }
.def.empilhada dt { padding-bottom: 2px; }
.def.empilhada dd { border-top: 0; padding-top: 0; }
.def.empilhada dt:first-of-type + dd { border-top: 0; }
.grafico-estreito { display: none; }
.nota-valor .valor { font: 700 30px/1.1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.nota-valor .rotulo { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
details.zona-perigo { border: 1px solid var(--erro-borda); border-radius: var(--raio); background: var(--superficie); padding: 0; margin-bottom: 20px; }
details.zona-perigo > summary {
  cursor: pointer; padding: 16px 22px; font: 600 15px var(--fonte-titulo); color: var(--erro); list-style: none;
}
details.zona-perigo > summary::-webkit-details-marker { display: none; }
details.zona-perigo > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .15s; }
details.zona-perigo[open] > summary::before { transform: rotate(90deg); }
details.zona-perigo > .conteudo { padding: 0 22px 22px; }

/* ---------- filtros ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 8px; }
.filtros label { margin-top: 0; }
.filtros .acoes { padding-bottom: 0; }
.filtros button { margin-top: 0; }
.filtro-inline { margin: 0; }
.filtro-inline select { width: auto; min-width: 220px; max-width: 320px; }
.celula-estreita { max-width: 200px; font-size: 13px; color: var(--tinta-2); }
.grafico .rotulo-eixo.atual { fill: var(--tinta); font-weight: 600; }
.contagem { color: var(--suave); font-size: 13px; margin: 10px 0 12px; }

/* ---------- login ---------- */
body.tela-login { background: var(--marinho-2); }
.login { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.login-marca {
  position: relative; overflow: hidden; color: #F2F6FB; padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(1200px 500px at -10% 110%, rgba(43, 196, 228, .22), transparent 60%),
    radial-gradient(900px 420px at 110% -10%, rgba(30, 91, 168, .45), transparent 60%),
    linear-gradient(160deg, #0A1E3C 0%, #061430 100%);
}
.login-marca img.logo { width: min(420px, 100%); height: auto; }
.login-marca .onda { position: absolute; left: -5%; right: -5%; bottom: 18%; width: 110%; opacity: .35; pointer-events: none; }
.login-marca h2 { color: #FFFFFF; font-size: 34px; line-height: 1.15; max-width: 460px; margin: 0 0 14px; font-weight: 700; }
.login-marca p { color: #B9C8DD; max-width: 440px; font-size: 16px; }
.login-marca .rodape-marca { font-size: 13px; color: #8FA3BF; position: relative; }
.login-marca .destaques { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; position: relative; }
.login-marca .destaques li { display: flex; gap: 10px; align-items: center; color: #D5E0EF; font-size: 14.5px; }
.login-marca .destaques li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: linear-gradient(135deg, #8FE3F3, #2BC4E4); box-shadow: 0 0 0 4px rgba(43, 196, 228, .15);
}
.login-form { background: var(--fundo); display: grid; place-items: center; padding: 40px 24px; }
.login-form .cartao { width: 100%; max-width: 400px; padding: 34px 32px; margin: 0; }
.login-form h1 { font-size: 26px; margin-bottom: 6px; }
.login-form .sub { color: var(--suave); margin-bottom: 8px; }
.login-form button { width: 100%; margin-top: 26px; }
.login-form .seguranca { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--suave); margin: 18px 0 0; }
.login-form .marca-movel { display: none; }


/* ---------- buscas com sugestões e consulta à Receita ---------- */
.busca { position: relative; margin-bottom: 4px; }
.busca-compacta input { min-height: 38px; font-size: 14px; background: var(--superficie-2); }
.busca-compacta { margin-top: 6px; }
.busca-resultados {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra);
  max-height: 320px; overflow-y: auto;
}
.busca-resultados button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0; min-height: 0;
  padding: 9px 10px; background: transparent; border: 0; border-radius: 8px; color: var(--tinta); text-align: left;
  font: 400 14px/1.35 var(--fonte-texto);
}
.busca-resultados button:hover, .busca-resultados button:focus { background: var(--superficie-2); color: var(--tinta); outline: none; box-shadow: inset 0 0 0 2px var(--foco); }
.busca-principal { font-weight: 600; }
.busca-sub { font-size: 12.5px; color: var(--suave); }
.busca-aviso { padding: 8px 10px; font-size: 13.5px; color: var(--suave); }
.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao button { margin: 0; white-space: nowrap; flex-shrink: 0; }
.descricao-codigo { font-size: 13px; color: var(--tinta-2); margin: 6px 0 0; min-height: 0; }
.descricao-codigo:empty { display: none; }
.consulta-status { font-size: 13.5px; margin: 8px 0 0; }
.consulta-status:empty { display: none; }
.consulta-status.ok { color: var(--ok); }
.consulta-status.alerta { color: var(--alerta); }
.consulta-status.erro { color: var(--erro); font-weight: 600; }
details.endereco { margin-top: 16px; border: 1px solid var(--linha-2); border-radius: 12px; padding: 0 16px; background: var(--superficie-2); }
details.endereco > summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--tinta-2); font-size: 14px; }
details.endereco[open] { padding-bottom: 16px; }
details.endereco[open] > summary { border-bottom: 1px solid var(--linha-2); margin-bottom: 4px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--tinta-2); margin-top: 14px; cursor: pointer; }
label.check input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--azul); }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha-2); color: var(--suave); font-size: 12.5px; }
.rodape-interno { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- vazio / boas-vindas ---------- */
.vazio-grande { text-align: center; padding: 40px 20px; }
.vazio-grande h2 { font-size: 20px; }
.vazio-grande p { color: var(--suave); }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-marca { padding: 36px 28px; min-height: 0; }
  .login-marca h2 { font-size: 26px; }
  .login-marca .onda, .login-marca .rodape-marca { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .topo-interno { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 0; }
  .marca img { height: 26px; }
  .marca-produto { display: none; }
  .ambiente { margin-left: auto; }
  .nav {
    order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 12px 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 10px; }
  main { padding: 20px 16px 40px; }
  h1 { font-size: 24px; }
  .cartao { padding: 18px 16px; border-radius: 12px; }
  .linha, .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 12px 14px 16px; }
  .kpi-rotulo { font-size: 11px; letter-spacing: .04em; }
  .kpi-valor { font-size: 21px; }
  .grafico-largo { display: none; }
  .grafico-estreito { display: block; }
  .acoes { width: 100%; }
  .filtro-inline, .filtro-inline select { width: 100%; max-width: none; }
  .campo-com-botao { flex-direction: column; }
  .celula-estreita { max-width: none; }
  .acoes .botao, .acoes button { flex: 1 1 auto; }
  .cabecalho-pagina { align-items: flex-start; }
  .def { grid-template-columns: minmax(0, 1fr); }
  .def dt { padding-bottom: 0; border-top: 1px solid var(--linha-2); }
  .def dd { border-top: 0; padding-top: 2px; }
  .def dt:first-of-type { border-top: 0; }
  .nota-valor { text-align: left; }
  .resumo-valor .valor { font-size: 28px; }
  .login-marca { padding: 28px 20px 24px; }
  .login-marca .destaques, .login-marca p { display: none; }
  .login-marca h2 { font-size: 22px; margin: 18px 0 0; }
  .login-form { padding: 24px 16px 40px; align-items: start; }
  .login-form .cartao { padding: 26px 20px; }

  /* tabela vira lista de cartões */
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva tr { border: 1px solid var(--linha-2); border-radius: 12px; padding: 6px 14px; margin-bottom: 10px; background: var(--superficie); }
  table.responsiva td { border: 0; padding: 6px 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left; }
  table.responsiva td::before { content: attr(data-rotulo); font-size: 11.5px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
  table.responsiva td > * { justify-self: start; }
  table.responsiva td.vazio { display: block; text-align: center; }
  table.responsiva td.vazio::before { content: none; }
  table.responsiva tbody tr:hover td { background: transparent; }
  table.responsiva td.num { white-space: normal; }
  .tabela-rolagem { overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 340px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .topo, .rodape, .nav, .acoes, details.zona-perigo { display: none !important; }
  body { background: #fff; }
  .cartao { box-shadow: none; border-color: #ccc; }
}
.acoes.acima { margin-top: 18px; }