:root{
  --fundo:#0A1A2F; --barra:#071322; --superficie:#102943; --borda:#1E3E63;
  --texto:#EDF3FA; --suave:#9CB4CE; --azul:#2E6BE6; --azul-claro:#5B9DFF;
  --ok:#35C08A; --alerta:#EFB04A; --erro:#F0736A;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:15px}
a{color:var(--azul-claro);text-decoration:none}
a:hover{color:#8FBCFF}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.3px;
  font-family:'Space Grotesk','IBM Plex Sans',system-ui,-apple-system,sans-serif}
.selo{width:32px;height:32px;border-radius:8px;background:var(--azul);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

/* ---------- Barra lateral em módulos (gaveta) ---------------------- */
/* Duas colunas: a barra (largura fixa) e a área de conteúdo (o resto).
   Em tela estreita empilha (ver media query no fim do arquivo) — a barra
   não pode quebrar o layout num celular. */
.shell{display:flex;min-height:100vh;align-items:stretch}
.barra{flex:0 0 248px;width:248px;background:var(--barra);
  border-right:1px solid var(--borda);padding:20px 14px;
  overflow-y:auto}
.barra .marca{padding:0 8px;margin-bottom:22px}

.modulos{display:flex;flex-direction:column;gap:4px}
.modulo{border-radius:10px}
/* <details>/<summary> dá o accordion sem JavaScript — a CSP deste
   projeto (script-src 'self', sem inline) nunca precisa ser tocada para
   isto funcionar. Só troca o marcador padrão do <summary> por uma seta
   desenhada em CSS, que gira quando o módulo abre. */
.modulo summary{list-style:none;cursor:pointer;padding:10px 12px;
  border-radius:8px;color:var(--suave);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
  letter-spacing:.2px}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s ease;flex:0 0 auto}
.modulo[open] summary::after{transform:rotate(45deg)}
.modulo summary:hover{background:#12345C;color:var(--texto)}
.modulo[open] summary{color:var(--texto)}

.itens-modulo{display:flex;flex-direction:column;padding:4px 0 8px 8px;
  gap:1px}
.itens-modulo a{padding:8px 12px;border-radius:8px;color:var(--suave);
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itens-modulo a:hover{background:#12345C;color:var(--texto)}
.itens-modulo a.ativo{background:var(--azul);color:#fff}
.item-desabilitado{display:block;padding:8px 12px;color:#4E6B8C;
  font-size:13px;cursor:not-allowed}
.item-desabilitado small{display:block;font-size:11px;margin-top:2px;
  color:#3E587A}

/* Área de conteúdo: cabeçalho fino (usuário + sair) e o main de sempre. */
.area{flex:1;min-width:0;display:flex;flex-direction:column}
.topo-area{display:flex;align-items:center;justify-content:flex-end;
  gap:14px;padding:14px 24px;border-bottom:1px solid var(--borda);
  background:var(--fundo)}
.topo-area .direita{display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--suave)}
.form-sair{display:inline}
.botao-link{background:none;border:0;padding:0;margin:0;
  color:var(--azul-claro);font:inherit;cursor:pointer}
.botao-link:hover{color:#8FBCFF}

main{max-width:1240px;margin:0 auto;padding:28px 24px 64px;width:100%}
main.sem-barra{max-width:none;margin:0;padding:0}
h1,h2{font-family:'Space Grotesk','IBM Plex Sans',system-ui,-apple-system,sans-serif}
h1{font-size:24px;letter-spacing:-.4px;margin:0 0 4px}
h2{font-size:17px;margin:0 0 14px}
.sub{color:var(--suave);font-size:13px;margin:0 0 24px}
.suave{color:var(--suave)}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;margin-bottom:28px}
.cartao{background:var(--superficie);border:1px solid var(--borda);
  border-radius:14px;padding:18px}
.cartao .rotulo{font-size:12px;color:var(--suave)}
.cartao .numero{font-family:'IBM Plex Mono',monospace;font-size:30px;margin-top:8px}

.painel{background:var(--superficie);border:1px solid var(--borda);
  border-radius:14px;padding:20px;margin-bottom:20px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--suave);font-weight:500;font-size:12px;
  padding:10px 10px 10px 0;letter-spacing:.3px}
td{padding:12px 10px 12px 0;border-top:1px solid #16324F}
.direita-txt{text-align:right}

.etiqueta{font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;
  background:#12345C;color:#BBD2EA;display:inline-block}
.ok{color:var(--ok)} .alerta{color:var(--alerta)} .erro{color:var(--erro)}

input,select{height:46px;padding:0 14px;border-radius:10px;
  border:1px solid var(--borda);background:#0D2137;color:var(--texto);
  font-family:inherit;font-size:14px;width:100%}
input[type=file]{padding:11px 14px;height:auto}
/* Checkbox nao e campo de texto: a regra generica acima o esticava
   para 100% de largura e 46px de altura, virando um quadrado branco
   com o rotulo descolado embaixo. */
input[type=checkbox]{width:auto;height:auto;margin:0;
  accent-color:var(--azul);flex:0 0 auto}
label.marcar{display:flex;align-items:flex-start;gap:9px;
  font-size:13px;color:var(--texto);line-height:1.45;
  margin-bottom:12px;cursor:pointer}
label.marcar input{margin-top:3px}
details.clausula{margin:0 0 12px;border:1px solid var(--borda);
  border-radius:10px;background:#0D2137;padding:11px 14px}
details.clausula summary{cursor:pointer;font-size:13px;color:var(--azul)}
details.clausula p{margin:10px 0 0;font-size:13px;line-height:1.5;
  color:var(--texto)}
label{display:block;font-size:12px;color:var(--suave);margin-bottom:7px}
.campo{margin-bottom:16px}

button,.botao{height:46px;padding:0 18px;border-radius:10px;border:0;
  background:var(--azul);color:#fff;font-family:inherit;font-size:14px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center}
button:hover,.botao:hover{background:#2559C4;color:#fff}

/* Botao dentro de `fieldset[disabled]` nao reage ao clique — e ate
   23/09/2026 NADA na tela dizia isso: continuava azul, com cursor de
   mao, e o clique caia no vazio. O relato foi literal: "clico ali e nao
   da reacao nenhuma". Travar sem mostrar que travou nao e protecao, e
   defeito: quem le conclui que o sistema quebrou, e nao que falta uma
   confirmacao. `fieldset[disabled]` tambem entra porque o navegador
   desabilita os filhos sem marcar `:disabled` neles. */
button:disabled,.botao:disabled,
fieldset[disabled] button,fieldset[disabled] .botao{
  background:var(--superficie);border:1px solid var(--borda);
  color:#7E96B0;cursor:not-allowed;opacity:.7}
button:disabled:hover,.botao:disabled:hover,
fieldset[disabled] button:hover,fieldset[disabled] .botao:hover{
  background:var(--superficie);color:#7E96B0}
fieldset[disabled] summary{color:#7E96B0;cursor:not-allowed}
fieldset[disabled] input,fieldset[disabled] select,
fieldset[disabled] textarea{opacity:.55;cursor:not-allowed}
.botao.neutro{background:transparent;border:1px solid var(--borda);color:#BBD2EA}

.aviso{padding:14px 16px;border-radius:11px;margin-bottom:14px;font-size:13px;
  line-height:1.5}
.aviso.ok{background:#0F2E24;border:1px solid #1F5C45;color:#8FE3C0}
.aviso.erro{background:#2E1512;border:1px solid #6B2C26;color:#F5A9A2}
.aviso.neutro{background:#0D2137;border:1px solid var(--borda);color:#BBD2EA}
.aviso.alerta{background:#3A2A0C;border:1px solid #7A5A1E;color:#F0C674}

.entrada{display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:100vh;padding:24px}
.caixa-login{width:100%;max-width:400px;background:var(--superficie);
  border:1px solid var(--borda);border-radius:16px;padding:32px}

/* ---------- Modos de acesso por tipo de documento (Parte 2) -------- */
/* Uma linha por tipo, sempre visível (o resumo no <summary>); clicar
   abre o editor. Mesmo padrão de accordion sem JS da barra lateral. */
.linhas-acesso{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.linha-acesso{background:var(--superficie);border:1px solid var(--borda);
  border-radius:12px}
.linha-acesso summary{list-style:none;cursor:pointer;padding:14px 16px;
  display:grid;grid-template-columns:76px 100px 78px 1fr 1fr auto;gap:14px;
  align-items:center;font-size:13px}
.linha-acesso summary::-webkit-details-marker{display:none}
.linha-acesso .servico{font-weight:700;letter-spacing:-.2px}
.linha-acesso .estado.ok{color:var(--ok)}
.linha-acesso .estado.suave{color:var(--suave)}
.linha-editor{padding:0 16px 16px;border-top:1px solid var(--borda)}
.linha-editor form{padding-top:14px}
/* Chave liga/desliga na própria linha. É um <button> de verdade (posta o
   formulário irmão pelo atributo `form=`), não um checkbox decorativo:
   a versão anterior tinha um checkbox que parecia o interruptor e só
   revelava campos por CSS, o que confundiu no primeiro uso. Sem
   JavaScript, como o resto da aplicação (CSP é script-src 'self'). */
.chave-acesso{display:inline-flex;align-items:center;gap:8px;background:none;
  border:0;padding:0;height:auto;font:inherit;font-size:12px;
  color:var(--suave);cursor:pointer}
.chave-acesso:hover{background:none;color:#BBD2EA}
.chave-acesso[disabled]{opacity:.45;cursor:not-allowed}
.chave-acesso .botao-chave{width:38px;height:22px;border-radius:11px;
  background:#16304C;border:1px solid var(--borda);position:relative;
  flex:0 0 auto;transition:background .15s,border-color .15s}
.chave-acesso .botao-chave::after{content:"";position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:var(--suave);
  transition:left .15s,background .15s}
.chave-acesso.ligado{color:var(--ok)}
.chave-acesso.ligado .botao-chave{background:#1F5C45;border-color:#2F8A68}
.chave-acesso.ligado .botao-chave::after{left:18px;background:#8FE3C0}
.nota-chave{font-size:12px;color:var(--suave);white-space:nowrap}

/* ---------- Empresas em cards com busca (Parte 1) ------------------ */
/* Substitui a listagem de uma linha por empresa na barra lateral, que não
   escala para ~500 clientes. Busca é um <form method="get"> puro. */
.busca-empresas{display:flex;gap:10px;margin-bottom:22px;max-width:640px}
.busca-empresas input{flex:1}

.cartoes-empresa{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;margin-bottom:24px}
.cartao-empresa{display:block;background:var(--superficie);
  border:1px solid var(--borda);border-left:4px solid var(--borda);
  border-radius:12px;padding:16px 18px;color:var(--texto)}
.cartao-empresa:hover{border-color:var(--azul-claro);
  border-left-color:var(--azul-claro)}
/* Cor só para status fiscal (CLAUDE.md): a borda esquerda do card carrega
   o sinal de longe, sem depender de abrir cada empresa. */
.cartao-empresa.status-ok{border-left-color:var(--ok)}
.cartao-empresa.status-alerta{border-left-color:var(--alerta)}
.cartao-empresa.status-erro{border-left-color:var(--erro)}

.topo-cartao-empresa{display:flex;flex-direction:column;gap:6px;
  margin-bottom:10px}
.topo-cartao-empresa .razao{font-weight:700;font-size:15px;
  letter-spacing:-.2px;line-height:1.3}
.sinal-certificado{display:inline-flex;align-items:center;gap:6px;
  font-size:12px}
.sinal-certificado .ponto{width:8px;height:8px;border-radius:50%;
  flex:0 0 auto;background:currentColor}
.sinal-certificado.ok{color:var(--ok)}
.sinal-certificado.alerta{color:var(--alerta)}
.sinal-certificado.erro{color:var(--erro)}

.identificadores{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;
  color:var(--suave);margin-bottom:12px}
.identificadores .codigo-cliente{color:var(--texto)}

.etiquetas-servico{display:flex;flex-wrap:wrap;gap:6px}
.etiquetas-servico .etiqueta.suave{background:transparent;
  border:1px solid var(--borda);color:var(--suave)}

.paginacao-empresas{display:flex;align-items:center;gap:14px}

@media (max-width: 760px){
  /* Barra lateral não pode quebrar o layout num celular: empilha em
     cima do conteúdo em vez de espremer as duas colunas lado a lado. */
  .shell{flex-direction:column;min-height:0}
  .barra{width:100%;flex:0 0 auto;border-right:0;
    border-bottom:1px solid var(--borda);max-height:none}
  main{padding:20px 16px 48px}
  .linha-acesso summary{grid-template-columns:1fr;gap:4px}
}


/* Barra de filtros: grade que reflui sozinha, sem media query e sem
   JavaScript. `auto-fit` + `minmax` cabe de 1 a 6 campos por linha
   conforme a largura — o escritorio usa monitor largo e o cliente
   abre no telefone. */
.filtros{display:grid;gap:10px 14px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.filtros label{display:flex;flex-direction:column;gap:4px;
  font-size:12px;color:#8FA6BF}
.filtros label.largo{grid-column:1/-1}
.filtros input,.filtros select{height:40px;padding:0 10px;
  border-radius:8px;border:1px solid var(--borda);
  background:var(--fundo);color:#E6EEF8;font-family:inherit;font-size:13px}
.filtros input:focus,.filtros select:focus{outline:2px solid var(--azul);
  outline-offset:1px}

/* ---------- Abas da empresa ---------------------------------------- */
/* Uma aba por TIPO DE DOCUMENTO, que nasce quando a chave do tipo é
   ligada na visão geral. A tela da empresa era um formulário de 474
   linhas num scroll só: certificado, regime tributário da NFS-e, modos
   de acesso e fila de NF-e empilhados sem separação. Cada coisa dessas
   pertence a um assunto diferente e muda em momentos diferentes.
   Uma aba DESLIGADA continua na barra, marcada — some com ela e os
   parâmetros já configurados viram dado invisível. */
.trilha{color:var(--suave);font-size:13px;margin:0 0 10px}
.trilha a{color:var(--suave)}
.trilha a:hover{color:var(--texto)}

.abas{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 22px;
  border-bottom:1px solid var(--borda);padding-bottom:0}
.abas .aba{padding:9px 15px;border-radius:9px 9px 0 0;font-size:14px;
  font-weight:600;color:var(--suave);border:1px solid transparent;
  border-bottom:none;position:relative;top:1px}
.abas .aba:hover{color:var(--texto);background:rgba(46,107,230,.08)}
.abas .aba.atual{color:var(--texto);background:var(--superficie);
  border-color:var(--borda)}
/* O estado da chave se le sem entrar na aba, e por TRES sinais, nao
   um: peso da fonte, opacidade e a palavra escrita. Cor sozinha nunca
   carrega estado neste projeto — quem enxerga pouco contraste veria
   duas abas iguais. */
.abas .aba{font-weight:700}
.abas .aba .ponto{display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-left:7px;vertical-align:middle;
  background:var(--suave)}
.abas .aba .ponto.ligado{background:var(--ok)}

.abas .aba.desligada{font-weight:400;opacity:.5}
.abas .aba.desligada:hover{opacity:.8}
/* A aba desligada continua sendo a aba ATUAL quando aberta: ali ela
   nao pode sumir no fundo, senao quem entrou nela se perde. */
.abas .aba.desligada.atual{opacity:.85}
.abas .aba .estado-aba{font-size:11px;font-weight:600;margin-left:6px;
  letter-spacing:.3px;text-transform:uppercase;color:var(--suave)}

@media (max-width:760px){
  .abas{gap:2px}
  .abas .aba{padding:8px 11px;font-size:13px}
}