/* =====================================================================
   Painel NF-e — folha única
   Sem CDN, sem build. Fontes do sistema por decisão de projeto:
   o dado fiscal é numérico, então a monoespaçada carrega a identidade.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     Tema escuro do produto.

     Os NOMES dos tokens sao os mesmos de antes — "papel" continua
     sendo o fundo e "tinta" continua sendo a superficie de contraste.
     So os VALORES viraram. Assim as 1.400 linhas de CSS que ja
     funcionavam seguem valendo, e nenhuma linha de JS precisou mudar.
     ------------------------------------------------------------- */

  /* superficies (antes claras, agora escuras) */
  --papel:        #070908;   /* fundo da pagina */
  --papel-2:      #111413;   /* cartao, painel */
  --papel-3:      #171B19;   /* campo, linha alternada */

  /* a "tinta" agora e a barra lateral e os botoes fortes */
  --tinta:        #0B0E0D;
  --tinta-2:      #141817;
  --tinta-3:      #1D2321;

  /* o verde da autorizacao — o mesmo que o usuario ja reconhece */
  --selo:         #35D07F;
  --selo-claro:   rgba(53,208,127,.13);
  --selo-escuro:  #5DF2A3;

  --alerta:       #F5B544;
  --alerta-claro: rgba(245,181,68,.13);
  --perigo:       #FF6B5E;
  --perigo-claro: rgba(255,107,94,.11);

  --texto:        #EEF2F0;
  --texto-2:      #98A29D;
  --texto-3:      #5C6661;
  --borda:        rgba(255,255,255,.09);
  --borda-forte:  rgba(255,255,255,.16);

  /* Archivo para titulo, Inter para texto, JetBrains Mono para digito.
     Em software fiscal o digito e o conteudo — chave, CNPJ, numero e
     valor pedem numeral tabular, senao a coluna desalinha e o erro
     passa despercebido. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dsp:  "Archivo", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r:    9px;
  --r-lg: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* Numerais tabulares em TODO dado fiscal — é o que alinha as colunas */
.num, .chave, td.num, input.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--selo); outline-offset: 2px; }

/* =====================================================================
   LOGIN
   ===================================================================== */

#login {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--tinta);
  z-index: 50;
}

#login[hidden] { display: none; }

/* --- painel esquerdo: a chave de acesso --- */

.entrada-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(32px, 6vw, 88px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(53,208,127,.10) 0%, transparent 70%),
    var(--tinta);
}

.entrada-marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--tinta-3) 1px, transparent 1px);
  background-size: 100% 28px;
  opacity: .16;
  pointer-events: none;
}

.marca {
  position: relative;
  z-index: 1;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--selo);
  margin-bottom: 22px;
  opacity: 0;
  animation: sobe .6s .1s cubic-bezier(.2,.7,.3,1) forwards;
}

.marca b { color: var(--papel); font-weight: 500; }

.entrada-titulo {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--papel);
  opacity: 0;
  animation: sobe .7s .2s cubic-bezier(.2,.7,.3,1) forwards;
}

.entrada-titulo em {
  font-style: normal;
  color: var(--selo);
}

.entrada-sub {
  position: relative;
  z-index: 1;
  max-width: 42ch;
  margin: 0 0 42px;
  color: var(--texto-3);
  opacity: 0;
  animation: sobe .7s .3s cubic-bezier(.2,.7,.3,1) forwards;
}

/* A chave: elemento assinatura */
.chave-bloco {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: sobe .7s .45s cubic-bezier(.2,.7,.3,1) forwards;
}

.chave-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 10px;
}

.chave-rotulo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--selo);
  animation: pulsa 2.4s ease-in-out infinite;
}

#chave {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 1.5vw, 17px);
  line-height: 1.9;
  color: var(--papel);
  word-break: break-all;
  max-width: 30ch;
}

#chave span {
  display: inline-block;
  transition: color .3s;
  color: var(--tinta-3);
}

#chave span.pronto { color: var(--papel); }
#chave span.girando { color: var(--selo); }

.chave-legenda {
  margin-top: 14px;
  font-size: 12px;
  color: var(--texto-3);
  max-width: 34ch;
  line-height: 1.6;
}

/* --- painel direito: o formulário --- */

.entrada-forma {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--papel);
}

.cartao {
  width: 100%;
  max-width: 356px;
  opacity: 0;
  animation: entra .7s .35s cubic-bezier(.2,.7,.3,1) forwards;
}

.cartao h2 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.cartao > p {
  margin: 0 0 28px;
  color: var(--texto-2);
  font-size: 14px;
}

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.campo input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--papel-2);
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.campo input:hover { border-color: var(--texto-3); }

.campo input:focus {
  outline: none;
  border-color: var(--selo);
  background: var(--texto);
  box-shadow: 0 0 0 3px var(--selo-claro);
}

.botao {
  width: 100%;
  position: relative;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r);
  background: var(--tinta);
  color: var(--papel);
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .18s, transform .12s;
}

.botao:hover:not(:disabled) { background: var(--tinta-2); }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .62; cursor: default; }

.botao .rotulo { transition: opacity .2s; }
.botao.ocupado .rotulo { opacity: 0; }

.botao .giro {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.botao.ocupado .giro { display: flex; }

.giro i {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(237,239,236,.3);
  border-top-color: var(--papel);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}

.aviso {
  display: none;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--perigo);
  border-radius: 0;
  background: var(--perigo-claro);
  color: var(--perigo);
  font-size: 13px;
  animation: treme .32s;
}

.aviso.ativo { display: block; }

.rodape-entrada {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.selo-ambiente {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--alerta-claro);
  color: var(--alerta);
  letter-spacing: .04em;
}

.selo-ambiente[data-ambiente="1"] {
  background: var(--selo-claro);
  color: var(--selo-escuro);
}

/* =====================================================================
   SHELL DO PAINEL
   ===================================================================== */

#painel {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100%;
}

#painel[hidden] { display: none; }

.lateral {
  background: var(--tinta);
  color: var(--papel);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lateral .marca {
  animation: none;
  opacity: 1;
  padding: 0 10px;
  margin-bottom: 26px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  width: 100%;
  text-align: left;
  border-radius: var(--r);
  background: transparent;
  color: var(--texto-3);
  font-size: 14px;
  transition: background .16s, color .16s;
  opacity: 0;
  transform: translateX(-8px);
}

#painel.montado .nav-item {
  animation: desliza .45s cubic-bezier(.2,.7,.3,1) forwards;
}

#painel.montado .nav-item:nth-child(2) { animation-delay: .04s; }
#painel.montado .nav-item:nth-child(3) { animation-delay: .08s; }
#painel.montado .nav-item:nth-child(4) { animation-delay: .12s; }
#painel.montado .nav-item:nth-child(5) { animation-delay: .16s; }
#painel.montado .nav-item:nth-child(6) { animation-delay: .20s; }
#painel.montado .nav-item:nth-child(7) { animation-delay: .24s; }

.nav-item:hover { background: var(--tinta-2); color: var(--papel); }

.nav-item.ativo {
  background: var(--tinta-2);
  color: var(--papel);
  box-shadow: inset 2px 0 0 var(--selo);
}

.nav-item .contagem {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-3);
}

.conteudo { padding: 26px 30px; min-width: 0; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}

.topo h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.seletor-empresa {
  padding: 7px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--papel-2);
  font-size: 13px;
  max-width: 320px;
}

/* Estados de lista */
.carregando, .vazio {
  padding: 48px 20px;
  text-align: center;
  color: var(--texto-3);
  font-size: 14px;
}

.vazio strong {
  display: block;
  color: var(--texto);
  font-weight: 500;
  margin-bottom: 5px;
}

/* Selos de situação — mesmas cores que a equipe já reconhece */
.selo {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.selo-autorizada { background: var(--selo-claro); color: var(--selo-escuro); }
.selo-rejeitada  { background: var(--alerta-claro); color: var(--alerta); }
.selo-cancelada  { background: var(--papel-3); color: var(--texto-2); }
.selo-processando{ background: var(--papel-3); color: #7FB4E8; }

/* =====================================================================
   ANIMAÇÕES
   ===================================================================== */

@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes entra {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes desliza {
  to { opacity: 1; transform: none; }
}

@keyframes gira { to { transform: rotate(360deg); } }

@keyframes pulsa {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@keyframes treme {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Saída do login: some para revelar o painel */
#login.saindo {
  animation: sai .42s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes sai {
  to { opacity: 0; transform: scale(1.015); visibility: hidden; }
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */

@media (max-width: 900px) {
  #login { grid-template-columns: 1fr; }
  .entrada-marca { display: none; }
  #painel { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; overflow-x: auto; padding: 12px; }
  .lateral .marca { display: none; }
  .nav-item { width: auto; white-space: nowrap; }
  .conteudo { padding: 18px 16px; }
  .topo { flex-wrap: wrap; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO — respeitado de verdade
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marca, .entrada-titulo, .entrada-sub, .chave-bloco, .cartao, .nav-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   TELA DE EMPRESAS
   ===================================================================== */

.barra-acoes {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

/* Base dos botões secundários.
 *
 * As regras de contexto ficam dentro de :where(), que tem especificidade
 * ZERO. Assim ".botao-acao" sempre vence, em qualquer lugar do painel —
 * inclusive em contextos criados no futuro.
 *
 * Sem isso já aconteceu duas vezes: uma regra como ".dialogo-rodape button"
 * vale (0,1,1) e ganha de ".botao-acao" (0,1,0) no FUNDO, mas não na COR
 * do texto. Resultado: botão claro com letra clara, invisível.
 */
.botao-acao,
:where(.ce-acoes, .rodape-form, .dialogo-rodape) button {
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--papel-2);
  font-size: 13px;
  transition: background .16s, border-color .16s;
}

/* Botão principal. Sempre fundo escuro com texto claro, em todo contexto. */
.botao-acao {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
  font-weight: 500;
}

.botao-acao:hover:not(:disabled) { background: var(--tinta-2); }
.botao-acao:disabled { opacity: .6; cursor: default; }

:where(.ce-acoes, .rodape-form, .dialogo-rodape) button:hover { background: var(--papel-3); }

:where(.ce-acoes) button.destaque {
  border-color: var(--selo);
  color: var(--selo-escuro);
  background: var(--selo-claro);
}

/* --- cartão da empresa --- */

.cartao-empresa {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--papel-2);
  padding: 16px;
  margin-bottom: 12px;
}

.ce-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ce-nome { font-size: 16px; font-weight: 500; }

.ce-doc {
  font-size: 13px;
  color: var(--texto-2);
  margin-top: 2px;
}

.ce-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.selo-neutro { background: var(--papel-3); color: var(--texto-2); }

.ce-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.ce-saida {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid;
  font-size: 13px;
  font-family: var(--mono);
}

.ce-saida.bom  { display: block; border-color: var(--selo); background: var(--selo-claro); color: var(--selo-escuro); }
.ce-saida.ruim { display: block; border-color: var(--alerta); background: var(--alerta-claro); color: var(--alerta); }

/* --- formulários --- */

.painel-form {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--papel-2);
  padding: 22px;
  max-width: 880px;
}

.painel-form.estreito { max-width: 520px; }

.painel-form h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.painel-form h3 {
  margin: 24px 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.nota-form {
  margin: 6px 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-2);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.campo-form.l-largo { grid-column: 1 / -1; }

.campo-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-2);
}

.campo-form input,
.campo-form select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--texto);
  transition: border-color .16s, box-shadow .16s;
}

.campo-form input:focus,
.campo-form select:focus {
  outline: none;
  border-color: var(--selo);
  box-shadow: 0 0 0 3px var(--selo-claro);
}

.campo-form input[type="file"] { padding: 8px; background: var(--papel); }

.aviso-form {
  display: none;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-left: 3px solid var(--perigo);
  background: var(--perigo-claro);
  color: var(--perigo);
  font-size: 13px;
  line-height: 1.55;
}

.aviso-form.ativo { display: block; animation: treme .32s; }

.aviso-form.bom {
  border-color: var(--selo);
  background: var(--selo-claro);
  color: var(--selo-escuro);
}

.rodape-form {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

.tabela-simples {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 13px;
}

.tabela-simples td {
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
}

.tabela-simples td:last-child { text-align: right; color: var(--texto-2); }

/* =====================================================================
   TABELAS E BUSCA
   ===================================================================== */

.campo-busca {
  flex: 1;
  max-width: 340px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--papel-2);
  font-size: 13px;
}

.campo-busca:focus {
  outline: none;
  border-color: var(--selo);
  box-shadow: 0 0 0 3px var(--selo-claro);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--papel-2);
  font-size: 13px;
}

.tabela th {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
  background: var(--papel-3);
  border-bottom: 1px solid var(--borda);
}

.tabela td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: var(--papel-3); }

.tabela td.direita { text-align: right; }

.tabela td.acao {
  text-align: right;
  white-space: nowrap;
}

:where(.tabela td.acao) button {
  padding: 5px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--papel);
  font-size: 12px;
}

:where(.tabela td.acao) button:hover { background: var(--texto); border-color: var(--selo); }

@media (max-width: 760px) {
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .barra-acoes { flex-wrap: wrap; }
  .campo-busca { max-width: none; }
}

/* =====================================================================
   SITUAÇÃO DO CERTIFICADO
   ===================================================================== */

.cert-estado {
  margin-bottom: 20px;
  padding: 13px 15px;
  border-left: 3px solid var(--selo);
  background: var(--selo-claro);
  color: var(--selo-escuro);
}

.cert-estado.vencendo {
  border-color: var(--alerta);
  background: var(--alerta-claro);
  color: var(--alerta);
}

.cert-estado.vencido,
.cert-estado.ausente {
  border-color: var(--perigo);
  background: var(--perigo-claro);
  color: var(--perigo);
}

.cert-titulo {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
}

.cert-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cert-tabela td { padding: 2px 0; }
.cert-tabela td:last-child { text-align: right; }

.cert-detalhe {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .9;
}

/* =====================================================================
   SELETOR DE CLASSIFICAÇÃO TRIBUTÁRIA
   ===================================================================== */

.seletor-classtrib {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 12px;
  background: var(--papel);
}

.classtrib-escolhido {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 11px;
  margin-bottom: 10px;
  border-left: 3px solid var(--selo);
  background: var(--selo-claro);
  font-size: 13px;
}

.classtrib-escolhido.vazio {
  border-color: var(--borda);
  background: var(--papel-3);
  color: var(--texto-2);
}

.num.forte { font-weight: 600; font-size: 14px; }

.classtrib-desc {
  color: var(--texto-2);
  font-size: 12.5px;
  flex: 1;
  min-width: 180px;
}

.classtrib-lista {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
}

.classtrib-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  font-size: 13px;
}

.classtrib-item:hover { background: var(--selo-claro); }
.classtrib-item:last-child { border-bottom: 0; }

.classtrib-aviso {
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-2);
}

.classtrib-aviso.alerta {
  border-left: 3px solid var(--alerta);
  background: var(--alerta-claro);
  color: var(--alerta);
  margin-bottom: 8px;
}

/* =====================================================================
   FAIXA DE REGIME E SEÇÕES CONDICIONAIS
   ===================================================================== */

.faixa-regime {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
  padding: 11px 13px;
  border-left: 3px solid var(--selo);
  background: var(--selo-claro);
  font-size: 13px;
  line-height: 1.55;
  color: var(--selo-escuro);
}

.faixa-regime span:last-child { flex: 1; min-width: 220px; }

.secao-condicional {
  margin-top: 6px;
  padding: 4px 0 2px 12px;
  border-left: 2px solid var(--borda);
}

.nota-form.aviso-prazo {
  margin-top: 18px;
  padding: 10px 12px;
  border-left: 3px solid var(--alerta);
  background: var(--alerta-claro);
  color: var(--alerta);
}

/* =====================================================================
   EMISSÃO
   ===================================================================== */

.emissao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.emissao-ident { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.emissao-serie { font-size: 13px; color: var(--texto-2); }
.emissao-acoes { display: flex; gap: 7px; flex-wrap: wrap; }

.num.grande { font-size: 20px; }
.forte { font-weight: 500; }
.sutil { color: var(--texto-2); font-size: 13px; }
.quebra { word-break: break-all; }

.emissao-resultado {
  display: none;
  padding: 11px 13px;
  margin-bottom: 14px;
  border-left: 3px solid;
  font-size: 13px;
  line-height: 1.55;
}

.emissao-resultado.ativo { display: block; }
.emissao-resultado.sucesso { border-color: var(--selo); background: var(--selo-claro); color: var(--selo-escuro); }
.emissao-resultado.erro    { border-color: var(--perigo); background: var(--perigo-claro); color: var(--perigo); }
.emissao-resultado.alerta  { border-color: var(--alerta); background: var(--alerta-claro); color: var(--alerta); }
.emissao-resultado.neutro  { border-color: var(--borda); background: var(--papel-2); color: var(--texto-2); }

.emissao-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.bloco {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--papel-2);
  padding: 14px;
  margin-bottom: 14px;
}

.bloco-titulo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 10px;
}

.bloco .tabela { border: 0; border-radius: 0; background: transparent; }

.adicionar-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  align-items: end;
}

.adicionar-item .botao-acao { width: 100%; }

.total-nota {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--texto-3);
}

.conf-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
}

.conf-icone { font-weight: 700; width: 14px; flex-shrink: 0; }
.conf-linha.ok .conf-icone     { color: var(--selo); }
.conf-linha.erro .conf-icone   { color: var(--perigo); }
.conf-linha.alerta .conf-icone { color: var(--alerta); }
.conf-linha.erro   { color: var(--perigo); }
.conf-linha.alerta { color: var(--alerta); }

@media (max-width: 980px) {
  .emissao-colunas { grid-template-columns: 1fr; }
}

/* =====================================================================
   DIÁLOGO DE CONFIRMAÇÃO
   ===================================================================== */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 31, 34, .5);
  animation: surge .16s ease-out;
}

.dialogo {
  width: 100%;
  max-width: 440px;
  background: var(--papel-2);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 18px 48px rgba(13, 31, 34, .28);
  animation: sobe-dialogo .22s cubic-bezier(.2, .7, .3, 1);
}

.dialogo-titulo {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.dialogo-faixa {
  padding: 10px 12px;
  margin-bottom: 16px;
  border-left: 3px solid;
  font-size: 13px;
  line-height: 1.55;
}

.dialogo-faixa.teste {
  border-color: var(--alerta);
  background: var(--alerta-claro);
  color: var(--alerta);
}

.dialogo-faixa.producao {
  border-color: var(--perigo);
  background: var(--perigo-claro);
  color: var(--perigo);
}

.dialogo.producao { box-shadow: 0 18px 48px rgba(163, 45, 45, .3); }

.dialogo-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dialogo-tabela td {
  padding: 6px 0;
  border-bottom: 1px solid var(--borda);
}

.dialogo-tabela tr:last-child td { border-bottom: 0; font-size: 15px; font-weight: 500; }
.dialogo-tabela td:first-child { color: var(--texto-2); }
.dialogo-tabela td:last-child { text-align: right; }

.dialogo-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

:where(.dialogo-rodape) button { padding: 9px 16px; }

/* Descartar é destrutivo: botão vermelho, não escuro. */
.dialogo.producao .botao-acao {
  background: var(--perigo);
  border-color: var(--perigo);
  color: var(--texto);
}

.dialogo.producao .botao-acao:hover:not(:disabled) { background: #FF8A80; }

@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

@keyframes sobe-dialogo {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cortina, .dialogo { animation: none; }
}

/* Aviso de rascunho salvo */
.aviso-salvo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-left: 3px solid var(--selo);
  background: var(--selo-claro);
  color: var(--selo-escuro);
  font-size: 12.5px;
  line-height: 1.55;
}

.aviso-salvo-icone { font-weight: 700; flex-shrink: 0; }

.dica-campo {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-3);
  line-height: 1.45;
}

/* =====================================================================
   MARCA DE AMBIENTE
   ===================================================================== */

.marca-ambiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.marca-ambiente .bolinha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.marca-ambiente.producao {
  background: var(--selo-claro);
  color: var(--selo-escuro);
}

.marca-ambiente.producao .bolinha {
  background: var(--selo);
  box-shadow: 0 0 0 3px rgba(22, 120, 92, .18);
}

.marca-ambiente.teste {
  background: var(--alerta-claro);
  color: var(--alerta);
}

.marca-ambiente.teste .bolinha {
  background: var(--alerta);
  animation: pulsa 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marca-ambiente.teste .bolinha { animation: none; }
}

/* =====================================================================
   EVENTOS: CANCELAMENTO E CARTA DE CORREÇÃO
   ===================================================================== */

:where(.emissao-acoes) button.perigoso {
  border-color: rgba(255,107,94,.3);
  color: var(--perigo);
  background: var(--perigo-claro);
}

:where(.emissao-acoes) button.perigoso:hover { background: var(--perigo-claro); }

.rotulo-evento {
  display: block;
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-2);
}

.campo-evento {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--texto);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.campo-evento:focus {
  outline: none;
  border-color: var(--selo);
  box-shadow: 0 0 0 3px var(--selo-claro);
}

.dialogo.producao .campo-evento:focus {
  border-color: var(--perigo);
  box-shadow: 0 0 0 3px var(--perigo-claro);
}

.evento-linha {
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  line-height: 1.5;
}

.evento-linha:last-child { border-bottom: 0; }
.evento-linha .num { font-size: 12px; margin: 2px 0 4px; }

/* =====================================================================
   TARJA DE AMBIENTE DE TESTE E EDIÇÃO NA LINHA
   ===================================================================== */

.tarja-teste {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--alerta);
  background: repeating-linear-gradient(
    135deg,
    var(--alerta-claro),
    var(--alerta-claro) 12px,
    var(--alerta-claro) 12px,
    var(--alerta-claro) 24px
  );
  color: var(--alerta);
  font-size: 13px;
  line-height: 1.55;
}

.tarja-teste strong {
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.linha-editando td { background: var(--selo-claro) !important; }

.campo-linha {
  width: 100%;
  min-width: 72px;
  padding: 5px 7px;
  border: 1px solid var(--selo);
  border-radius: var(--r);
  background: var(--texto);
  font-size: 13px;
  text-align: right;
}

.campo-linha:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--selo-claro);
}

.linha-editando td.acao { white-space: nowrap; }
.linha-editando td.acao button { margin-left: 4px; }

.tarja-indefinida {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--texto-3);
  background: var(--papel-3);
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.55;
}

.tarja-indefinida strong {
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto);
}

/* =====================================================================
   ABERTURA — enquanto a sessão é verificada
   ===================================================================== */

.tela-abertura {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
}

.tela-abertura .pulso {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--selo);
  animation: respira 1.1s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .tela-abertura .pulso { animation: none; opacity: .6; }
}


/* =====================================================================
   CAMADA DE TEMA — produto
   Acrescentada depois da folha original. Toca so no que a troca de
   token nao resolve sozinha: peso de fonte, brilho e as superficies
   que antes contavam com fundo branco.

   Regras de contexto vao dentro de :where(), que tem especificidade
   zero. Sem isso, ".rodape-form button" (0,1,1) vence ".botao-acao"
   (0,1,0) no fundo mas nao na cor do texto — e o botao principal fica
   invisivel. Ja aconteceu tres vezes no sistema de origem.
   ===================================================================== */

body { background-image:
  radial-gradient(900px 520px at 78% -10%, rgba(53,208,127,.09), transparent 62%); }

h1, h2, h3, .marca, .bloco-titulo, .cartao > h2, .dialogo-titulo, .total-nota {
  font-family: var(--dsp);
  letter-spacing: -.03em;
  font-weight: 700;
}

/* Todo digito em monoespacada tabular: chave, CNPJ, numero, valor. */
.num, .tabela td:first-child, .ce-doc, .chave-legenda + *,
input[inputmode="numeric"], input[type="number"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* superficies */
.lateral { background: var(--tinta); border-right: 1px solid var(--borda); }
.cartao, .bloco, .cartao-empresa, .dialogo, .painel-form {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
}
.conteudo { background: var(--papel); }
.topo { border-bottom: 1px solid var(--borda); }

input, select, textarea {
  background: var(--papel-3);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--selo);
  box-shadow: 0 0 0 3px rgba(53,208,127,.13);
}

/* O botao principal e verde com texto escuro. Vermelho fica reservado
   para acao destrutiva: em software fiscal vermelho significa rejeicao,
   e um botao de emitir vermelho faz a pessoa hesitar. */
.botao-acao,
:where(.ce-acoes, .rodape-form, .dialogo-rodape, .barra-acoes, .emissao-acoes) button {
  border-radius: var(--r);
  font-weight: 600;
}
.botao-acao { background: var(--selo); color: #04160D; border: 0; }
.botao-acao:hover:not(:disabled) {
  background: var(--selo-escuro);
  box-shadow: 0 0 26px rgba(53,208,127,.26);
}

.nav-item { color: var(--texto-2); border-radius: var(--r); }
.nav-item:hover { color: var(--texto); background: rgba(255,255,255,.05); }
.nav-item.ativo {
  color: var(--texto);
  background: rgba(255,255,255,.08);
  box-shadow: inset 3px 0 0 var(--selo);
}

.tabela th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 400;
  border-bottom: 1px solid var(--borda);
}
.tabela td { border-bottom: 1px solid rgba(255,255,255,.05); }
.tabela tr:hover td { background: rgba(255,255,255,.022); }

/* A tarja de nota sem valor fiscal precisa ser vista de longe.
   Marcar producao como teste e pior que nao marcar nada — por isso a
   indefinida tem tratamento proprio, e nao herda o de teste. */
.tarja-teste {
  background: repeating-linear-gradient(135deg,
    rgba(245,181,68,.10), rgba(245,181,68,.10) 9px,
    transparent 9px, transparent 18px);
  border-left: 3px solid var(--alerta);
  border-radius: 0;
}
.tarja-indefinida {
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.05), rgba(255,255,255,.05) 9px,
    transparent 9px, transparent 18px);
  border-left: 3px solid var(--texto-3);
  border-radius: 0;
}

.selo-ambiente[data-ambiente="1"] { background: var(--selo-claro); color: var(--selo); }
.selo-ambiente[data-ambiente="2"] { background: var(--alerta-claro); color: var(--alerta); }

.vazio { color: var(--texto-2); }
.sutil, .dica-campo, .chave-legenda { color: var(--texto-3); }

/* =====================================================================
   ELEMENTOS NOVOS DA TELA DE ENTRADA E DA LATERAL
   ===================================================================== */

/* --- trilho das cinco etapas -------------------------------------- */
.trilho-etapas { margin: 30px 0 26px; max-width: 520px; }
.trilho-etapas svg { display: block; width: 100%; height: 64px; overflow: visible; }
.trilho-etapas circle { fill: var(--selo); }

.fio { fill: none; stroke: rgba(53,208,127,.20); stroke-width: 1.5; }
.fio-vivo {
  fill: none;
  stroke: var(--selo-escuro);
  stroke-width: 2;
  stroke-dasharray: 16 190;
  filter: drop-shadow(0 0 5px rgba(93,242,163,.7));
  animation: correfio 3.6s linear infinite;
}
@keyframes correfio { from { stroke-dashoffset: 206; } to { stroke-dashoffset: 0; } }
.fio-vivo.f2 { animation-delay: .7s; }
.fio-vivo.f3 { animation-delay: 1.4s; }
.fio-vivo.f4 { animation-delay: 2.1s; }

.etapas { display: flex; justify-content: space-between; margin-top: 10px; }
.etapas span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.etapas span.on { color: var(--selo); }

.entrada-titulo em { font-style: normal; color: var(--selo); }

/* --- mostrar / ocultar a senha ------------------------------------ */
.campo-senha { position: relative; }
.campo-senha .olhinho {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto-3);
  font: inherit;
  font-size: 12px;
  padding: 9px 10px;
}
.campo-senha .olhinho:hover { color: var(--texto-2); }

.selo-seguranca {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: var(--texto-3);
  text-align: center;
}

/* --- conta em operação, na lateral -------------------------------- */
.conta-atual {
  margin: 0 12px 16px;
  padding: 11px 12px;
  background: rgba(255,255,255,.06);
  border-radius: var(--r);
}
.conta-rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.conta-nome {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  margin-top: 3px;
}

/* --- consumo do período de teste ---------------------------------- */
.consumo { margin: auto 12px 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.consumo-linha { display: flex; align-items: baseline; gap: 7px; }
.consumo-n { font-family: var(--dsp); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.consumo-rot { font-size: 11.5px; color: var(--texto-3); }
.consumo-trilho {
  height: 5px;
  background: rgba(255,255,255,.09);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 9px;
}
.consumo-trilho i { display: block; height: 100%; width: 0; background: var(--selo); border-radius: 99px; }

/* Perto do fim, a barra avisa sozinha — sem susto, mas sem passar batido. */
.consumo.apertado .consumo-trilho i { background: var(--alerta); }
.consumo.apertado .consumo-n { color: var(--alerta); }
.consumo.esgotado .consumo-trilho i { background: var(--perigo); }
.consumo.esgotado .consumo-n { color: var(--perigo); }

@media (prefers-reduced-motion: reduce) {
  .fio-vivo { animation: none; stroke-dasharray: none; opacity: .5; }
}

/* =====================================================================
   CORREÇÕES DA INVERSÃO DE TEMA

   Trocar os valores dos tokens resolveu 90% da folha, mas quebrou as
   regras que usavam DOIS tokens contando com a relação entre eles.
   "fundo --tinta, texto --papel" era escuro sobre claro; com o tema
   virado, virou escuro sobre escuro e o elemento desapareceu.

   Estas regras deixam de depender da relação e dizem a cor que querem.
   ===================================================================== */

/* --- a moldura do login ------------------------------------------- */
#login { background: var(--papel); }
#login .entrada-forma { background: var(--papel); }
#login .entrada-marca {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(53,208,127,.10) 0%, transparent 70%),
    var(--tinta);
}

/* O cartão do login não é caixa: é só o formulário sobre o fundo.
   A borda que a camada de tema pôs em .cartao serve ao painel, não aqui. */
#login .cartao {
  background: transparent;
  border: 0;
}

/* --- título e chave: eram claros sobre escuro ---------------------- */
.entrada-titulo { color: var(--texto); font-weight: 700; }
.entrada-sub { color: var(--texto-2); }

#chave { color: var(--texto); }
#chave span { color: rgba(255,255,255,.13); }
#chave span.pronto { color: var(--texto); }
#chave span.girando { color: var(--selo); }

/* --- o botão de entrar --------------------------------------------- */
/* Verde com texto escuro, como o botão principal do painel. Vermelho
   fica reservado para ação destrutiva. */
#login .botao,
.botao {
  background: var(--selo);
  color: #04160D;
  font-weight: 600;
}
.botao:hover:not(:disabled) {
  background: var(--selo-escuro);
  box-shadow: 0 0 26px rgba(53,208,127,.26);
}
.botao:disabled { opacity: .55; box-shadow: none; }

/* O giro herdava a cor do fundo claro e sumia dentro do botão verde. */
.giro i {
  border: 2px solid rgba(4,22,13,.28);
  border-top-color: #04160D;
}

/* --- campos ------------------------------------------------------- */
/* Ao receber foco o campo ficava com fundo --texto, que agora é quase
   branco: o campo acendia em branco no meio da tela escura. */
.campo input,
.campo select,
.campo textarea {
  background: var(--papel-3);
  color: var(--texto);
  border: 1px solid var(--borda);
}
.campo input:hover { border-color: var(--borda-forte); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: var(--papel-3);
  border-color: var(--selo);
  box-shadow: 0 0 0 3px rgba(53,208,127,.13);
}
.campo label { color: var(--texto-2); }

/* --- avisos -------------------------------------------------------- */
.aviso {
  background: var(--perigo-claro);
  border: 1px solid rgba(255,107,94,.28);
  color: #FFB3AC;
}

.rodape-entrada { color: var(--texto-3); border-top: 1px solid var(--borda); }

/* --- a tela de abertura, antes da sessão carregar ------------------ */
.tela-abertura { background: var(--papel); }
.tela-abertura .pulso { background: var(--selo); }

/* --- a chave, com espaço para respirar ----------------------------- */
.chave-bloco { margin-top: 26px; }

/* Restantes da mesma inversão: em ambas, --papel era a cor do TEXTO
   sobre superfície escura. */
.marca b { color: var(--texto); }
.lateral { color: var(--texto); }

/* As duas metades do login com valor literal, não token.
   Se qualquer coisa mexer nos tokens no futuro, a tela de entrada —
   que é a primeira impressão do produto — não vira meia clara e meia
   escura por efeito colateral. */
#login,
#login .entrada-forma { background-color: #070908; }
#login .entrada-marca {
  background-color: #0B0E0D;
  background-image: radial-gradient(ellipse 80% 60% at 20% 0%,
                    rgba(53,208,127,.10) 0%, transparent 70%);
}

/* O botão destrutivo em produção: o coral é claro demais para texto
   branco (2,5:1). Texto escuro sobre ele passa de 8:1 — e é justamente
   o botão que a pessoa precisa ler direito antes de clicar. */
.dialogo.producao .botao-acao { color: #2A0806; font-weight: 600; }

/* =====================================================================
   TELA DE GERÊNCIA E FAIXA DE ATENDIMENTO
   ===================================================================== */

.grade-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.bloco-resumo {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.bloco-resumo .valor {
  font-family: var(--dsp);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.bloco-resumo .rotulo {
  font-size: 11.5px;
  color: var(--texto-3);
  margin-top: 3px;
}
.bloco-resumo.atencao { border-color: rgba(245,181,68,.35); }
.bloco-resumo.atencao .valor { color: var(--alerta); }

.ce-numeros {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--borda);
}
.ce-dado .rot {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.ce-dado .val {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}

.alerta-conta {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r);
  font-size: 13px;
}
.alerta-conta.atencao {
  background: var(--alerta-claro);
  color: var(--alerta);
  border-left: 3px solid var(--alerta);
}
.alerta-conta.grave {
  background: var(--perigo-claro);
  color: #FFB3AC;
  border-left: 3px solid var(--perigo);
}

/* A faixa é fixa no rodapé e listrada: precisa ser impossível de não
   ver. Estar atendendo a conta de um cliente e não perceber é o erro
   mais caro que este painel permite cometer. */
.faixa-atendimento {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 20px;
  font-size: 13.5px;
  color: #2A1B02;
  background: repeating-linear-gradient(135deg,
    #F5B544, #F5B544 14px, #E0A63C 14px, #E0A63C 28px);
  box-shadow: 0 -6px 24px rgba(0,0,0,.4);
}
.faixa-atendimento strong { font-weight: 700; }
.faixa-atendimento button {
  border: 0;
  border-radius: 99px;
  padding: 7px 15px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #2A1B02;
  color: #F5B544;
}
body.atendendo .conteudo { padding-bottom: 64px; }

@media (max-width: 760px) {
  .grade-resumo { grid-template-columns: repeat(2, 1fr); }
  .faixa-atendimento { flex-direction: column; gap: 9px; text-align: center; }
}

/* =====================================================================
   TELA DE USUÁRIOS
   ===================================================================== */

.titulo-grupo { margin: 26px 0 12px; }
.titulo-grupo:first-child { margin-top: 8px; }
.tg-titulo {
  font-family: var(--dsp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tg-dica { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }

.cartao-empresa.inativo { opacity: .55; }

/* --- CNPJs liberados a um cliente fiscal --- */
.lista-cnpj {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--borda);
}
.linha-cnpj {
  display: grid;
  grid-template-columns: 1fr auto 110px;
  gap: 14px;
  align-items: center;
  padding: 7px 0;
  font-size: 13.5px;
}
.linha-cnpj + .linha-cnpj { border-top: 1px solid rgba(255,255,255,.04); }
.lc-doc { font-size: 12px; color: var(--texto-3); }
.lc-perm {
  text-align: right;
  font-size: 12px;
  color: var(--selo);
}

/* --- escolha do perfil --- */
.escolha-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perfil-op {
  text-align: left;
  padding: 14px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--papel-3);
  color: var(--texto);
  cursor: pointer;
  display: block;
  font: inherit;
}
.perfil-op:hover { border-color: var(--borda-forte); }
.perfil-op.escolhido {
  border-color: var(--selo);
  box-shadow: 0 0 0 2px rgba(53,208,127,.16);
}
.po-nome { display: block; font-weight: 600; font-size: 14.5px; }
.po-resumo {
  display: block;
  font-size: 12.5px;
  color: var(--texto-3);
  margin-top: 4px;
  line-height: 1.45;
}

/* --- liberação por empresa --- */
.linha-permissao {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.linha-permissao input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--selo);
  cursor: pointer;
}
.lp-nome span:first-child { display: block; font-size: 14px; font-weight: 500; }
.lp-nome span:last-child { display: block; font-size: 11.5px; color: var(--texto-3); }
.lp-opcoes { display: flex; gap: 16px; transition: opacity .15s; }
.lp-opcoes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--texto-2);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 760px) {
  .escolha-perfil { grid-template-columns: 1fr; }
  .linha-cnpj { grid-template-columns: 1fr; gap: 2px; }
  .lc-perm { text-align: left; }
  .linha-permissao { grid-template-columns: 22px 1fr; }
  .lp-opcoes { grid-column: 2; }
}

/* =====================================================================
   BOTÃO SEM ESTILO NÃO EXISTE MAIS

   A barra de ações tinha um botão secundário que nenhuma regra pegava:
   ele caía no visual padrão do navegador e saía cinza, amarelo ou o que
   o sistema operacional decidisse. Corrigir aquele botão resolveria só
   aquele — o próximo apareceria igual.

   Esta regra usa o seletor `button`, de especificidade mínima (0,0,1).
   Qualquer regra com classe vence dela, então .botao e .botao-acao
   continuam mandando. Ela só recolhe o que ninguém pegou.
   ===================================================================== */
button {
  background: var(--papel-3);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 10px 16px;
  font-weight: 500;
  transition: background .16s, border-color .16s;
}
button:hover:not(:disabled) {
  background: var(--tinta-3);
  border-color: var(--borda-forte);
}
button:disabled { opacity: .5; cursor: default; }

/* Avisa o navegador que a página é escura. Sem isso, ele desenha os
   controles nativos — select, caixa de marcar, barra de rolagem — no
   tema claro do sistema, e eles destoam do resto. */
:root { color-scheme: dark; }

/* O primeiro botão da barra é a ação principal; os demais, secundários.
   Fica explícito qual é o caminho esperado. */
.barra-acoes .botao-acao { background: var(--selo); color: #04160D; border: 0; }
.barra-acoes .botao-acao:hover:not(:disabled) {
  background: var(--selo-escuro);
  box-shadow: 0 0 24px rgba(53,208,127,.24);
}

/* Botão secundário, com classe própria.
   O seletor `button` sozinho já cobre o caso, mas depender só dele
   significa depender de o navegador ter buscado a folha nova. Com
   classe, o JS marca o elemento e a regra tem especificidade de sobra. */
.botao-secundario {
  background: var(--papel-3);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 10px 16px;
  font-weight: 500;
}
.botao-secundario:hover:not(:disabled) {
  background: var(--tinta-3);
  border-color: var(--borda-forte);
}