/* Ferramentas fiscais · Alare. Único CSS da aplicação (a CSP não aceita estilo inline nem externo).
   Fundo claro, azul da Alare como destaque, fonte do sistema.

   Classes para as telas:
   estrutura  .conteudo (main)  .centro (main com cartão centralizado)  .cartao  .cartao.estreito
              .cartao > .cabeca / .corpo   .grade .g2 .g3 .g4   .pilha (coluna)   .linha (fileira)
   texto      .sub (texto abaixo do título)  .discreto  .pequeno  .mono  .num (números alinhados)
   botões     .botao  .primario  .perigo  .discreto  .pequeno  .largo (100%)
   formulário .campo (label com span + input/select/textarea)  .ajuda  .erro-campo
   avisos     .aviso .ok | .erro | .atencao   (flash usa estas categorias)
   etiquetas  .etiqueta .ok | .atencao | .erro | .neutra | .destaque
   números    .quadro > .rotulo / .valor / .nota   (bloco de contagem; .atencao e .ok mudam a cor)
   tabelas    .tabela (envolve <table>; rola na horizontal)  td.direita / th.direita  tr.fraca
   abas       nav.abas > a[aria-current="page"] > .qtd
   outros     .trecho (citação do manual)  .texto-simples (pre)  .vazio
*/

:root {
  --fundo: #F4F6F9;
  --superficie: #FFFFFF;
  --superficie-2: #EEF2F7;
  --linha: #D9DFE7;
  --linha-forte: #B9C3CF;
  --tinta: #16202B;
  --tinta-2: #394657;
  --discreto: #5B6778;
  --destaque: #1E4FB8;
  --destaque-escuro: #173F94;
  --destaque-suave: #E6EDFA;
  --ok: #1B7A4E;
  --ok-suave: #E1F2E9;
  --atencao: #8F5600;
  --atencao-suave: #FBF0D9;
  --erro: #B42318;
  --erro-suave: #FDE8E5;
  --sombra: 0 1px 2px rgba(22, 32, 43, .06), 0 6px 20px rgba(22, 32, 43, .06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --raio: 10px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--destaque); text-underline-offset: 2px; }
a:hover { color: var(--destaque-escuro); }

h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
p { margin: 0 0 .8rem; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ---------------------------------------------------------------- topo */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  border-top: 3px solid var(--destaque);
}

.marca {
  color: var(--tinta);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.marca span { color: var(--destaque); font-weight: 600; }
.marca:hover { color: var(--tinta); }

.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a {
  color: var(--tinta-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  padding: 6px 10px;
  border-radius: 8px;
}
.menu a:hover { background: var(--superficie-2); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--destaque-suave); color: var(--destaque); }

.conta { margin-left: auto; position: relative; }
.conta summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .92rem;
  color: var(--tinta-2);
  padding: 6px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.conta summary::-webkit-details-marker { display: none; }
.conta summary::after { content: " ▾"; color: var(--discreto); }
.conta[open] summary { background: var(--superficie-2); }
.conta-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 240px;
  padding: 12px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conta-painel form { margin: 0; }
.conta-painel .botao { width: 100%; }
.conta-painel p { margin: 0 0 4px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- conteúdo */
.conteudo {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 56px;
}
.conteudo.centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
}
.conteudo.centro > .aviso { width: 100%; max-width: 440px; }

.sub { color: var(--discreto); margin: 0 0 1.2rem; max-width: 72ch; }
.discreto { color: var(--discreto); }
.pequeno { font-size: .85rem; }
.mono { font-family: var(--fonte-mono); font-size: .88em; }
.num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 18px 20px;
}
.cartao.estreito { width: 100%; max-width: 440px; padding: 28px 28px 24px; box-shadow: var(--sombra); }
.cartao > .cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: -18px -20px 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--linha);
}
.cartao > .corpo { padding: 0; }

.grade { display: grid; gap: 14px; }
.grade.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--superficie-2); color: var(--tinta); }
.botao.primario { background: var(--destaque); border-color: var(--destaque); color: #FFFFFF; }
.botao.primario:hover { background: var(--destaque-escuro); border-color: var(--destaque-escuro); color: #FFFFFF; }
.botao.perigo { background: var(--superficie); border-color: var(--erro); color: var(--erro); }
.botao.perigo:hover { background: var(--erro-suave); }
.botao.discreto { border-color: transparent; background: transparent; color: var(--destaque); }
.botao.discreto:hover { background: var(--destaque-suave); }
.botao.pequeno { padding: 5px 10px; font-size: .84rem; }
.botao.largo { width: 100%; padding: 12px 16px; font-size: 1rem; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- formulário */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--tinta-2); }
.campo > span:not(.ajuda) { font-weight: 600; }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="file"], select, textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 9px 11px;
  min-width: 0;
  width: 100%;
}
input[type="file"] { padding: 8px; background: var(--superficie-2); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--destaque); outline: 2px solid var(--destaque-suave); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--destaque); width: 16px; height: 16px; }
.ajuda { font-size: .82rem; color: var(--discreto); }
.erro-campo { font-size: .85rem; color: var(--erro); }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; margin: 0; }
legend { font-weight: 600; padding: 0 6px; }

/* ---------------------------------------------------------------- avisos e etiquetas */
.aviso {
  border: 1px solid var(--linha);
  border-left: 4px solid var(--destaque);
  background: var(--destaque-suave);
  color: var(--tinta);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
}
.aviso.ok { border-left-color: var(--ok); background: var(--ok-suave); }
.aviso.erro { border-left-color: var(--erro); background: var(--erro-suave); }
.aviso.atencao { border-left-color: var(--atencao); background: var(--atencao-suave); }

.etiqueta {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--superficie-2);
  color: var(--tinta-2);
}
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.atencao { background: var(--atencao-suave); color: var(--atencao); }
.etiqueta.erro { background: var(--erro-suave); color: var(--erro); }
.etiqueta.destaque { background: var(--destaque-suave); color: var(--destaque); }

/* ---------------------------------------------------------------- quadros de contagem */
.quadro { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
.quadro .rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discreto); }
.quadro .valor { font-family: var(--fonte-mono); font-size: 1.6rem; font-weight: 600; margin: 4px 0 2px; }
.quadro .nota { font-size: .85rem; color: var(--discreto); }
.quadro.atencao { border-color: var(--atencao); }
.quadro.atencao .valor { color: var(--atencao); }
.quadro.ok .valor { color: var(--ok); }

/* ---------------------------------------------------------------- tabelas */
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.tabela table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--discreto);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
  background: var(--superficie-2);
}
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #F8FAFC; }
.tabela td.direita, .tabela th.direita { text-align: right; }
.tabela tr.fraca td { color: var(--discreto); }

/* ---------------------------------------------------------------- abas */
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linha); margin: 0 0 16px; }
.abas a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 8px;
  color: var(--discreto);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--destaque); }
.abas .qtd { font-family: var(--fonte-mono); font-size: .78rem; padding: 0 7px; border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta-2); }

/* ---------------------------------------------------------------- outros */
.trecho {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--linha-forte);
  background: var(--superficie-2);
  color: var(--tinta-2);
  font-size: .9rem;
  border-radius: 0 8px 8px 0;
}
.texto-simples {
  font-family: var(--fonte-mono);
  font-size: .88rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
}
.vazio { padding: 28px; text-align: center; color: var(--discreto); }

/* ---------------------------------------------------------------- telas estreitas */
@media (max-width: 760px) {
  .topo { padding: 10px 16px; }
  .conteudo { padding: 18px 16px 40px; }
  .conteudo.centro { padding-top: 4vh; }
  .cartao.estreito { padding: 22px 18px 18px; }
  .grade.g2, .grade.g3, .grade.g4 { grid-template-columns: minmax(0, 1fr); }
  .conta-painel { right: auto; left: 0; }
}