/* ============================================================
   ACCANTA · BASE — componentes do sistema de design
   Consome apenas tokens-fundacao.css e tokens-marca.css.
   Nenhum hex de marca aqui: o fiscal (tests/test_fiscal_css.py)
   reprova o build se aparecer.
   ============================================================ */

* { box-sizing: border-box; }
/* O atributo hidden SEMPRE esconde — sem isto, qualquer componente com
   display próprio (.aviso é flex) ignora hidden e aparece vazio, como o
   bloco de erro do /entrar (regressão pega em 27/08/2026). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pagina);
  color: var(--n-800);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 23px;
}
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-controle); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------- Tipografia — papéis nomeados ---------------- */
.t-display { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--n-950); text-wrap: balance; }
.t-titulo1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--n-950); text-wrap: balance; }
.t-titulo2 { font-size: 19px; line-height: 26px; font-weight: 600; color: var(--n-950); }
.t-titulo3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--n-950); }
.t-corpo   { font-size: 15px; line-height: 23px; font-weight: 400; color: var(--n-800); }
.t-forte   { font-weight: 600; color: var(--n-950); }
.t-apoio   { font-size: 13px; line-height: 19px; color: var(--n-600); }
.t-rotulo  { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--n-600); }
.t-etiqueta{ font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
.num-tab   { font-variant-numeric: tabular-nums; }
a { color: var(--primaria-texto); }

/* ---------------- Cartão ---------------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-1);
  padding: var(--esp-5);
}

/* ---------------- Grades utilitárias ---------------- */
.grade { display: grid; gap: var(--esp-4); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }

/* ---------------- Campo de formulário ---------------- */
.campo { margin-bottom: var(--esp-4); }
.campo label { display: block; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--n-600); margin-bottom: var(--esp-1); }
.campo .obrig { color: var(--erro-600); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; color: var(--n-950);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-controle); padding: 9px 12px; min-height: 40px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 88px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--n-400); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--cor-foco); box-shadow: var(--anel-foco);
}
.campo .ajuda { font-size: 13px; line-height: 19px; color: var(--n-600); margin-top: var(--esp-1); }
.campo.erro input, .campo.erro select, .campo.erro textarea { border-color: var(--erro-600); }
.campo .msg-erro { display: none; gap: 6px; font-size: 13px; line-height: 19px; color: var(--erro-700); margin-top: var(--esp-1); }
.campo.erro .msg-erro { display: flex; }
.campo input:disabled { background: var(--n-100); color: var(--n-500); border-color: var(--borda); cursor: not-allowed; }

/* ---------------- Botões — três níveis + variantes ---------------- */
.btn {
  font: inherit; font-weight: 600; border-radius: var(--raio-controle);
  padding: 0 var(--esp-4); min-height: 40px; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--esp-2);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
@media (pointer: coarse) { .btn, .campo input, .campo select { min-height: 44px; } }
.btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn-1 { background: var(--primaria); color: var(--sobre-primaria); }
.btn-1:hover { background: var(--primaria-hover); }
.btn-1:active { background: var(--primaria-ativa); }
.btn-2 { background: var(--superficie); color: var(--primaria-texto); border-color: var(--primaria); }
.btn-2:hover { background: var(--primaria-suave); }
.btn-3 { background: transparent; color: var(--primaria-texto); }
.btn-3:hover { background: var(--primaria-suave); }
.btn-destrutivo { background: var(--erro-600); color: var(--branco); }
.btn-destrutivo:hover { background: var(--erro-700); }
.btn:disabled { background: var(--n-100); color: var(--n-400); border-color: var(--n-100); cursor: not-allowed; }
.btn-marca { background: var(--acento); color: var(--sobre-acento); }
.btn-marca:hover { background: var(--acento-hover); }
.rodinha {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--veu-claro); border-top-color: var(--sobre-primaria);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.botoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: center; }

/* ---------------- Tabela ---------------- */
.tabela-envelope { border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow-x: auto; box-shadow: var(--sombra-1); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabela th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-500);
  background: var(--n-50); padding: 10px var(--esp-4); border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela td { padding: 11px var(--esp-4); border-bottom: 1px solid var(--n-100); color: var(--n-800); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--primaria-suave); }
.tabela tbody tr.selecionavel { cursor: pointer; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- Pílulas de estado ---------------- */
.pilula { display: inline-block; font-size: 12px; font-weight: 600; border-radius: var(--raio-pilula); padding: 2px 10px; }
.pilula-ok { background: var(--sucesso-100); color: var(--sucesso-700); }
.pilula-atencao { background: var(--alerta-100); color: var(--alerta-700); }
.pilula-erro { background: var(--erro-100); color: var(--erro-700); }
.pilula-neutra { background: var(--n-100); color: var(--n-600); }

/* ---------------- Aviso ---------------- */
.aviso {
  display: flex; gap: var(--esp-3); padding: var(--esp-4);
  border-radius: var(--raio-controle); border: 1px solid; border-left-width: 4px;
  margin-bottom: var(--esp-3);
}
.aviso strong { display: block; color: var(--n-950); margin-bottom: 2px; }
.aviso p { margin: 0; font-size: 14px; line-height: 21px; color: var(--n-800); }
.aviso-icone { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--branco); }
.aviso-info    { border-color: var(--primaria-media); border-left-color: var(--primaria); background: var(--primaria-suave); }
.aviso-info    .aviso-icone { background: var(--primaria); }
.aviso-sucesso { border-color: var(--sucesso-100); border-left-color: var(--sucesso-600); background: var(--sucesso-100); }
.aviso-sucesso .aviso-icone { background: var(--sucesso-600); }
.aviso-alerta  { border-color: var(--alerta-100); border-left-color: var(--alerta-600); background: var(--alerta-100); }
.aviso-alerta  .aviso-icone { background: var(--alerta-600); }
.aviso-erro    { border-color: var(--erro-100); border-left-color: var(--erro-600); background: var(--erro-100); }
.aviso-erro    .aviso-icone { background: var(--erro-600); }

/* ---------------- Estado vazio ---------------- */
.vazio {
  text-align: center; padding: var(--esp-8) var(--esp-6);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-cartao);
  background: var(--superficie);
}
.vazio-icone {
  width: 44px; height: 44px; margin: 0 auto var(--esp-4); border-radius: 50%;
  background: var(--primaria-suave); color: var(--primaria-texto);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.vazio h4 { margin: 0 0 var(--esp-1); font-size: 16px; color: var(--n-950); }
.vazio p { margin: 0 0 var(--esp-4); color: var(--n-600); font-size: 14px; }

/* ---------------- Carregamento ---------------- */
.esqueleto {
  border-radius: var(--raio-controle);
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 50%, var(--n-100) 75%);
  background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite;
}
@keyframes brilho { to { background-position: -200% 0; } }
.esq-linha { height: 14px; margin-bottom: var(--esp-3); }

/* ---------------- Barra do aplicativo ---------------- */
.barra-app {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  background: var(--profunda); color: var(--sobre-profunda);
  padding: var(--esp-3) var(--esp-6);
}
.barra-app .contexto { color: var(--sobre-profunda-suave); font-size: 13px; }
.btn-sair { background: transparent; color: var(--sobre-profunda-suave); border: 1px solid var(--profunda-2); }
.btn-sair:hover { background: var(--profunda-2); color: var(--sobre-profunda); }

/* ---------------- Logo — caixas de contenção ----------------
   O logo é encaixado com object-fit: contain (nunca corta, nunca
   estica) e o respiro é padding da própria caixa: mínimo 25% da
   altura, nunca menos de 8px. Uma caixa por posição de uso. */
.logo-caixa { display: flex; align-items: center; overflow: hidden; }
.logo-caixa img, .logo-caixa svg { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
/* Tamanhos definidos nas variáveis --logo-* de tokens-marca.css —
   ajustes de dimensão acontecem lá, nunca aqui nem nas telas. */
.logo-cabecalho {
  width: var(--logo-cabecalho-largura); height: var(--logo-cabecalho-altura);
  padding: max(8px, calc(var(--logo-cabecalho-altura) * 0.25)) 0;
  box-sizing: content-box;
}
.logo-entrada {
  width: var(--logo-entrada-largura); height: var(--logo-entrada-altura);
  padding: max(8px, calc(var(--logo-entrada-altura) * 0.25)) 0;
  box-sizing: content-box;
}
.logo-documento {
  width: var(--logo-documento-largura); height: var(--logo-documento-altura);
  padding: max(8px, calc(var(--logo-documento-altura) * 0.25)) 0;
  box-sizing: content-box;
}
.logo-email {
  width: var(--logo-email-largura); height: var(--logo-email-altura);
  padding: max(8px, calc(var(--logo-email-altura) * 0.25)) 0;
  box-sizing: content-box;
}

/* Fallback sem logo: nome da rede na mesma caixa, sem buraco */
.logo-fallback {
  font-weight: 600; color: inherit; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  font-size: 18px; letter-spacing: .01em;
}
.logo-documento .logo-fallback { font-size: 24px; }

/* ---------------- Assinatura "tecnologia Accanta" ----------------
   Só em rodapé de documento, nunca no conteúdo. Ativada por chave
   por rede; sempre secundária à marca da rede. */
.rodape-assinatura {
  display: block; text-align: right;
  font-size: 11px; line-height: 16px; color: var(--n-500);
  padding-top: var(--esp-2); border-top: 1px solid var(--n-100);
}

/* ---------------- Mensagens utilitárias ---------------- */
.msg { font-size: 13px; margin-top: var(--esp-2); white-space: pre-wrap; }
.msg-ok { color: var(--sucesso-700); }
.msg-falha { color: var(--erro-700); }
.aviso-vazio { color: var(--n-600); font-size: 13px; padding: var(--esp-2) 0; }