/* Cofre Fiscal — WE3 Tecnologia */
:root {
  --azul: #004BF7; --azul-2: #3370FF; --azul-claro: #E6EDFF; --marinho: #0A1640; --marinho-2: #002D92; --marinho-fixo: #0A1640; /* -fixo: fundo escuro nos dois temas */
  --grafite: #1C1B29; /* cores oficiais WE3: #004BF7, #002D92, #1C1B29 */
  --texto: #111827; --cinza: #6B7280; --cinza-2: #9CA3AF; --linha: #E5E7EB; --fundo: #F4F6FB; --branco: #fff;
  --verde: #0F8A4B; --verde-claro: #E3F6EC; --amarelo: #A86400; --amarelo-claro: #FFF3D9;
  --vermelho: #C42B21; --vermelho-claro: #FDE7E5; --roxo: #6D28D9; --roxo-claro: #EFE7FF;
  --cabeca-tabela: #F1F4F9; --linha-hover: #FAFBFF;
  --raio: 12px; --sombra: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--texto); background: var(--fundo); }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; color: var(--marinho); letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--marinho); }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--marinho); }
small, .sub { color: var(--cinza); }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- estrutura ---------- */
.lateral { position: fixed; inset: 0 auto 0 0; width: 236px; background: var(--marinho); color: #C7D2FE;
  display: flex; flex-direction: column; padding: 18px 12px; z-index: 20; }
.logo { display: flex; gap: 10px; align-items: center; color: #fff; padding: 4px 8px 20px; text-decoration: none !important; }
.logo-marca { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--azul), #5B8CFF);
  display: grid; place-items: center; font-weight: 800; color: #fff; }
.logo b { display: block; font-size: 15px; } .logo small { color: #93A4D8; font-size: 11px; display: block; max-width: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; gap: 11px; align-items: center; color: #C7D2FE; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; font-weight: 500; }
.lateral nav a:hover { background: var(--marinho-2); color: #fff; }
.lateral nav a.ativo { background: var(--azul); color: #fff; }
.lateral details.mais { margin-top: 14px; border-top: 1px solid var(--marinho-2); padding-top: 8px; display: flex; flex-direction: column; }
.lateral details.mais > summary { cursor: pointer; list-style: none; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: #6F80B8; padding: 8px 12px; }
.lateral details.mais > summary::after { content: " ▸"; }
.lateral details.mais[open] > summary::after { content: " ▾"; }
.lateral details.mais > a { display: flex; gap: 11px; align-items: center; color: #C7D2FE; padding: 9px 12px; border-radius: 9px; }
.filtro-historico { margin-top: 4px; }
table.linha-do-tempo td.nowrap, td.nowrap { white-space: nowrap; }
.lateral .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #6F80B8; margin: 18px 12px 6px; }
.lateral .assinatura { margin-top: auto; font-size: 11px; color: #6F80B8; padding: 0 12px; }
.area { margin-left: 236px; min-height: 100vh; }
.barra { height: 62px; background: var(--branco); border-bottom: 1px solid var(--linha); display: flex; align-items: center;
  gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
.busca { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 10px; padding: 0 12px; color: var(--cinza); }
.busca input { border: 0; background: transparent; padding: 9px 0; width: 100%; outline: none; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.usuario form { margin: 0; }
.pilula-gasto { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 10px; text-decoration: none !important;
  background: var(--azul-claro); border: 1px solid var(--linha); color: var(--texto); line-height: 1.2; }
.pilula-gasto .ic { width: 22px; height: 22px; color: var(--azul); flex: none; }
.pilula-gasto small { display: block; font-size: 11px; color: var(--cinza); }
.pilula-gasto b { display: block; font-size: 14px; color: var(--texto); }
.pilula-gasto b i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--cinza); }
.pilula-gasto .barrinha { display: block; height: 4px; border-radius: 2px; background: var(--linha); margin-top: 4px; overflow: hidden; }
.pilula-gasto .barrinha span { display: block; height: 100%; background: var(--azul); }
.pilula-gasto.alto .barrinha span { background: var(--amarelo); } .pilula-gasto.alto .ic { color: var(--amarelo); }
.pilula-gasto:hover { border-color: var(--azul); }
.mes-atual { font-weight: 700; padding: 0 6px; }
tr.selecionada td { background: var(--azul-claro); }
@media (max-width: 900px) { .pilula-gasto small, .pilula-gasto b i, .pilula-gasto .barrinha { display: none; } }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-claro); color: var(--azul);
  display: grid; place-items: center; font-weight: 700; }
.quem { text-align: center; line-height: 1.25; }
.quem b { display: block; font-size: 13px; } .quem small { display: block; font-size: 11px; color: var(--cinza); }
.leve { font-size: 12px; color: var(--cinza); }
.icone-botao { background: none; border: 0; color: var(--cinza); cursor: pointer; padding: 6px; border-radius: 8px; }
.icone-botao:hover { background: var(--fundo); color: var(--vermelho); }
.menu-mobile { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; }
main { padding: 24px; max-width: 1360px; }
main.solto { max-width: none; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 20% -10%, #DCE6FF, transparent), var(--fundo); }

/* ---------- cabeçalho de página ---------- */
.topo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.topo-pagina p { margin: 4px 0 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- componentes ---------- */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.cartao .cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.cartao .cab h2 { margin: 0; }
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 18px; display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none !important; }
.kpi .ic-caixa { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); }
.kpi .ic-caixa .ic { width: 22px; height: 22px; }
.kpi.verde .ic-caixa { background: var(--verde-claro); color: var(--verde); }
.kpi.amarelo .ic-caixa { background: var(--amarelo-claro); color: var(--amarelo); }
.kpi.vermelho .ic-caixa { background: var(--vermelho-claro); color: var(--vermelho); }
.kpi.roxo .ic-caixa { background: var(--roxo-claro); color: var(--roxo); }
.kpi b { display: block; font-size: 22px; color: var(--marinho); line-height: 1.2; }
.kpi span { color: var(--cinza); font-size: 12.5px; }
.duas-colunas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.verde { background: var(--verde-claro); color: var(--verde); }
.chip.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.chip.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.chip.azul { background: var(--azul-claro); color: var(--azul); }
.chip.cinza { background: #F1F2F4; color: var(--cinza); }
.chip.roxo { background: var(--roxo-claro); color: var(--roxo); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13.5px; color: var(--texto);
  font-weight: 500; padding: 13px 14px; background: var(--cabeca-tabela); border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:hover td { background: var(--linha-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td .linha2 { display: block; font-size: 12px; color: var(--cinza); }
.vazio { text-align: center; color: var(--cinza); padding: 28px 14px; }
.tabela-rolagem { overflow: visible; }   /* rolagem só no celular, para os painéis de ação não serem cortados */

button, .botao { display: inline-flex; align-items: center; gap: 7px; background: var(--azul); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 15px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
button:hover, .botao:hover { background: var(--azul-2); }
.botao.secundario, button.secundario { background: var(--branco); color: var(--marinho); border: 1px solid var(--linha); }
.botao.secundario:hover, button.secundario:hover { background: var(--fundo); }
button.perigo { background: var(--vermelho); }
button.pequeno, .botao.pequeno { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
button.copiar { background: var(--azul-claro); color: var(--azul); padding: 3px 10px; font-size: 12px; }
button.link { background: none; color: var(--azul); padding: 0; }

input, select, textarea { font: inherit; padding: 8px 11px; border: 1px solid #D0D5DD; border-radius: 9px; width: 100%; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
label { display: block; font-size: 12.5px; color: var(--cinza); font-weight: 500; margin-bottom: 10px; }
label input, label select, label textarea { margin-top: 4px; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; align-items: end; }
.form-grade .largo { grid-column: 1 / -1; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros label { margin: 0; min-width: 150px; }
.filtros .cresce { flex: 1; min-width: 220px; }
details.acao > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.acao > summary::-webkit-details-marker { display: none; }
details.acao[open] > summary { opacity: .7; }
details.acao .painel-acao { margin-top: 10px; padding: 14px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; min-width: 260px; }
details.acao .painel-acao form { display: grid; gap: 8px; }
summary.botao { list-style: none; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; overflow-x: auto; }
.abas a { padding: 10px 14px; color: var(--cinza); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none !important; }
.abas a.ativo { color: var(--azul); border-bottom-color: var(--azul); }
.abas a:hover { color: var(--marinho); }
.empresa-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.empresa-cab .ini { width: 52px; height: 52px; border-radius: 14px; background: var(--azul-claro); color: var(--azul);
  display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.empresa-cab .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.msg { padding: 11px 14px; border-radius: 10px; margin: 0 0 16px; font-weight: 500; }
.msg.ok { background: var(--verde-claro); color: var(--verde); }
.msg.aviso { background: var(--amarelo-claro); color: var(--amarelo); }
.msg.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.dica { background: var(--azul-claro); color: var(--marinho); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.dica code { background: #fff; padding: 1px 6px; border-radius: 5px; }

.acesso { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 10px 30px rgba(11,26,63,.08); padding: 32px; }
.acesso .logo-marca { margin-bottom: 14px; width: 44px; height: 44px; font-size: 17px; }
.acesso h1 { margin-bottom: 4px; }
.acesso button { width: 100%; justify-content: center; margin-top: 6px; padding: 11px; }
.qr { background: #fff; padding: 10px; width: max-content; margin: 12px auto; border: 1px solid var(--linha); border-radius: 12px; }
.qr svg { width: 190px; height: 190px; display: block; }
dl.segredo dt { color: var(--cinza); font-size: 12.5px; margin-top: 12px; }
dl.segredo dd { margin: 4px 0 0; display: flex; gap: 10px; align-items: center; }
dl.segredo code { font-size: 16px; background: var(--fundo); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--linha); }
.lista-marcar { max-height: 220px; overflow: auto; background: #fff; padding: 8px; border: 1px solid var(--linha); border-radius: 9px; margin: 6px 0; }
.lista-marcar label { color: var(--texto); margin: 3px 0; display: flex; gap: 8px; align-items: center; }
.lista-marcar input { width: auto; margin: 0; }
.barra-progresso { height: 8px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.barra-progresso span { display: block; height: 100%; background: var(--azul); }
.pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pasta { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #FAFBFD; }
.pasta .ic { color: #E2A100; }
.pasta b { display: block; } .pasta small { font-size: 11.5px; }
tr.perto td:first-child { box-shadow: inset 3px 0 0 #F2B544; }
tr.critico td:first-child, tr.vencido td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }

@media (max-width: 980px) { .duas-colunas { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; }
  .lateral.aberta { transform: none; }
  .area { margin-left: 0; }
  .menu-mobile { display: block; }
  .leve { display: none; }
  main { padding: 16px; }
  .barra { padding: 0 16px; }
}

.rodape-acesso { margin-top: 16px; font-size: 12px; }
.miudo { font-size: 12px; }
.cartao .cab.com-padding { padding: 16px 18px 0; }
.flutuante { position: absolute; right: 24px; z-index: 5; width: min(560px, 90vw); }
.topo-pagina { position: relative; }

/* ---------- nova empresa ---------- */
[hidden] { display: none !important; }
.pilha { display: grid; gap: 18px; max-width: 920px; }
.pilha .cartao { margin: 0; }
.cartao h2 .ic { vertical-align: -3px; margin-right: 6px; color: var(--azul); }
.linha-cnpj { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.linha-cnpj label { margin: 0; flex: 1; min-width: 220px; max-width: 320px; }
.linha-cnpj input { font-size: 16px; letter-spacing: .3px; }
.receita-status { padding: 9px 12px; border-radius: 9px; margin-bottom: 12px; font-size: 13px; background: var(--azul-claro); color: var(--marinho); }
.receita-status.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.receita-status.alerta { background: var(--amarelo-claro); color: var(--amarelo); }
.receita-status.ok { background: var(--verde-claro); color: var(--verde); }
.ficha-receita { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px;
  padding: 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); margin-bottom: 14px; }
.ficha-receita .largo { grid-column: 1 / -1; }
.ficha-receita span { display: block; font-size: 11.5px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; }
.ficha-receita b { font-weight: 600; color: var(--texto); }
.acoes-form { display: flex; justify-content: flex-end; }
.acoes-form button { padding: 11px 22px; }
@media (max-width: 900px) { .flutuante { position: static; width: 100%; } }

/* ações por linha de tabela: botões lado a lado, painel flutuando abaixo do botão */
.acoes-linha { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.acoes-linha details.acao { position: relative; }
.acoes-linha details.acao .painel-acao { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; margin-top: 0;
  width: 280px; text-align: left; white-space: normal; background: var(--branco); box-shadow: 0 10px 30px rgba(11,26,63,.12); }
@media (max-width: 900px) {
  .tabela-rolagem { overflow-x: auto; }
  .acoes-linha { flex-wrap: wrap; }
  .acoes-linha details.acao .painel-acao { position: static; width: auto; margin-top: 8px; }
}

/* resultado da conferência do certificado */
.linha-validar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conferencia { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.conferencia li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border-radius: 9px; font-size: 13px;
  background: var(--azul-claro); color: var(--marinho); }
.conferencia li .marca { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--marinho-fixo); margin-top: 1px; }
.conferencia li.ok { background: var(--verde-claro); color: var(--verde); }
.conferencia li.ok .marca { background: var(--verde); }
.conferencia li.aviso { background: var(--amarelo-claro); color: var(--amarelo); }
.conferencia li.aviso .marca { background: var(--amarelo); }
.conferencia li.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.conferencia li.erro .marca { background: var(--vermelho); }

/* tela da extensão */
.passos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--texto); }
.codigo-pareamento { font-family: ui-monospace, Consolas, monospace; font-size: 26px; letter-spacing: 3px; color: var(--azul); }
.pareamento p { margin: 0 0 10px; }

/* preparar importação e file server */
.linha-preparar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.linha-preparar label { min-width: 160px; }
.fs-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; margin-bottom: 4px; }
.fs-status span { display: block; font-size: 11.5px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; }

/* ---------------------------------------------------------------- painel */

.faixa-alertas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.alerta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; font-size: 13px;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.alerta .ic { width: 16px; height: 16px; }
.alerta.vermelho { background: var(--vermelho-claro); color: var(--vermelho); border-color: #F6C9C4; }
.alerta.amarelo { background: var(--amarelo-claro); color: var(--amarelo); border-color: #F5DFA8; }
.alerta:hover { filter: brightness(.97); }
.grade-ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ind { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px; text-decoration: none; display: grid; gap: 2px; border-top: 3px solid var(--azul); }
.ind:hover { box-shadow: 0 4px 14px rgba(11,26,63,.08); }
.ind.atencao { border-top-color: #F2B544; }
.ind span { color: var(--cinza); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.ind b { font-size: 24px; color: var(--marinho); line-height: 1.25; }
.ind small { color: var(--cinza); font-size: 12px; }
.ind small.var { font-weight: 700; }
.ind small.var.sobe { color: var(--verde); }
.ind small.var.desce { color: var(--vermelho); }
.grade-graficos { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 1200px) { .grade-graficos { grid-template-columns: 1fr 1fr; } .grade-graficos .largo-2 { grid-column: 1 / -1; } }
@media (max-width: 700px) { .grade-graficos { grid-template-columns: 1fr; } }
.legenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--texto); }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda li b { margin-left: auto; color: var(--marinho); }
.legenda.em-linha { display: flex; gap: 14px; margin: 0; font-size: 12px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legenda i.ok, .legenda i.entrada { background: var(--azul); }
.legenda i.atencao { background: #F2B544; }
.legenda i.ruim, .legenda i.cancelada { background: var(--vermelho); }
.legenda i.neutro { background: #CBD2DC; }
.legenda i.saida { background: var(--verde); }
.legenda i.terceiros { background: var(--roxo); }
.velocimetro { width: 100%; max-width: 260px; display: block; margin: 0 auto; }
.velocimetro path { fill: none; stroke-width: 18; }
.velocimetro .trilho { stroke: #EEF1F6; }
.velocimetro .seg.ok { stroke: var(--verde); }
.velocimetro .seg.atencao { stroke: #F2B544; }
.velocimetro .seg.ruim { stroke: var(--vermelho); }
.velocimetro .valor, .rosca .valor { font-size: 26px; font-weight: 700; fill: var(--marinho); text-anchor: middle; }
.velocimetro .rotulo, .rosca .rotulo { font-size: 11px; fill: var(--cinza); text-anchor: middle; }
.rosca-caixa { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.rosca { width: 140px; height: 140px; }
.rosca circle { fill: none; stroke-width: 18; }
.rosca .trilho { stroke: #EEF1F6; }
.rosca .seg.entrada { stroke: var(--azul); }
.rosca .seg.saida { stroke: var(--verde); }
.rosca .seg.terceiros { stroke: var(--roxo); }
.rosca .seg.cancelada { stroke: var(--vermelho); }
.barras { width: 100%; height: auto; display: block; }
.barras .guia { stroke: var(--linha); }
.barras .guia.leve { stroke-dasharray: 3 4; }
.barras .eixo { font-size: 10px; fill: var(--cinza); text-anchor: end; }
.barras .mes { font-size: 10px; fill: var(--cinza); text-anchor: middle; }
.barras .b.entrada { fill: var(--azul); }
.barras .b.saida { fill: var(--verde); }
.barras .b.terceiros { fill: var(--roxo); }

/* ---------------------------------------------------------------- detalhe da NF-e */
.faixa-nota, .grade-info, .grade-totais { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 20px; }
.faixa-nota span, .grade-info span, .grade-totais span, .chave-nota span, .rotulo-sec {
  display: block; font-size: 11.5px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; }
.faixa-nota b { font-size: 17px; color: var(--marinho); }
.faixa-nota small, .grade-info small, .parte small { display: block; color: var(--cinza); font-size: 12px; }
.grade-info b, .grade-totais b { display: block; color: var(--texto); font-weight: 600; }
.grade-totais .total { border-left: 3px solid var(--azul); padding-left: 10px; }
.grade-totais .total b { font-size: 18px; color: var(--marinho); }
.chave-nota { margin: 14px 0 0; }
.chave-nota code { font-size: 14px; letter-spacing: .5px; word-break: break-all; }
.parte b { display: block; font-size: 15px; color: var(--marinho); margin: 2px 0; }
.duas-colunas.iguais { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .duas-colunas.iguais { grid-template-columns: 1fr; } }
.texto-livre { white-space: pre-wrap; margin: 0 0 8px; font-size: 13px; }
.tabela-itens td { vertical-align: top; }


/* ---------------------------------------------------------------- marca WECONTADOR / WE3 */
.logo-icone { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.produto { font-weight: 800; letter-spacing: .4px; }
.produto i { font-style: normal; font-weight: 600; color: #8FB0FF; }
.logo .produto { font-size: 16px; }
.lateral .assinatura { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; padding: 14px 12px 4px;
  border-top: 1px solid rgba(255,255,255,.08); margin-top: auto; }
.lateral .assinatura small { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: #6F80B8; }
.lateral .assinatura img { height: 26px; width: auto; align-self: flex-start; opacity: .92; }
.lateral .assinatura:hover img { opacity: 1; }
.acesso-icone { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 8px 24px rgba(0,75,247,.28); }
.acesso h1.produto { font-size: 28px; color: var(--grafite); }
.acesso h1.produto i { color: var(--azul); }
.marca-rodape { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; text-decoration: none !important; }
.marca-rodape small { font-size: 11px; color: var(--cinza-2); text-transform: uppercase; letter-spacing: .8px; }
.marca-rodape img { height: 28px; width: auto; }
body.sem-menu { background: radial-gradient(1200px 500px at 50% -10%, #DCE6FF 0%, var(--fundo) 60%); }

/* ---------------------------------------------------------------- painel WECONTADOR (formato do Hub SIEG) */
.grade-ind.seis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ind small.hora { color: var(--cinza-2); font-size: 11px; margin-top: 4px; }
.acoes-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.acao-cartao { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, var(--marinho-fixo) 0%, var(--marinho-2) 100%);
  color: #fff; border-radius: var(--raio); padding: 14px 16px; text-decoration: none !important; box-shadow: var(--sombra); }
.acao-cartao:hover { filter: brightness(1.08); }
.acao-cartao b { display: block; font-size: 14px; }
.acao-cartao b { color: #fff; }
.acao-cartao small { display: block; color: #C9D6FA; font-size: 12px; margin-top: 2px; }
.acao-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--azul); display: grid; place-items: center; flex: none; }
.acao-icone .ic { width: 20px; height: 20px; color: #fff; }
.relatorio { position: relative; }
.relatorio > input[type=radio] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.abas-css { margin-bottom: 0; padding-top: 6px; }
.abas-css label { display: inline-flex; gap: 7px; align-items: center; padding: 11px 14px; color: var(--cinza); font-weight: 600;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.abas-css label .ic { width: 16px; height: 16px; }
.abas-css label:hover { color: var(--marinho); }
.painel-aba { display: none; }
#aba-empresas:checked ~ [data-aba=empresas], #aba-baixados:checked ~ [data-aba=baixados],
#aba-capturas:checked ~ [data-aba=capturas], #aba-atividade:checked ~ [data-aba=atividade] { display: block; }
#aba-empresas:checked ~ .abas-css label[for=aba-empresas], #aba-baixados:checked ~ .abas-css label[for=aba-baixados],
#aba-capturas:checked ~ .abas-css label[for=aba-capturas], #aba-atividade:checked ~ .abas-css label[for=aba-atividade] {
  color: var(--azul); border-bottom-color: var(--azul); }
.relatorio > input:focus-visible ~ .abas-css { outline: 2px solid var(--azul-claro); }
.legenda i.nfe { background: var(--azul); }
.legenda i.nfse-prest { background: #00A3FF; }
.legenda i.nfse-toma { background: var(--marinho-2); }
.rosca .seg.nfse-prest { stroke: #00A3FF; }
.rosca .seg.nfse-toma { stroke: var(--marinho-2); }
.barras .b.nfe { fill: var(--azul); }
.barras .b.nfse-prest { fill: #00A3FF; }
.barras .b.nfse-toma { fill: var(--marinho-2); }
.grade-ind.seis .ind b { font-size: clamp(16px, 1.2vw, 24px); white-space: nowrap; }
.grade-graficos .rosca-caixa { grid-template-columns: 124px 1fr; gap: 12px; }
.grade-graficos .rosca { width: 124px; height: 124px; }
.grade-graficos .legenda { font-size: 12.5px; }
.grade-graficos .legenda li { white-space: nowrap; }
.lateral .assinatura img { height: 32px; }
.linha-form { display: flex; gap: 6px; align-items: center; } .linha-form input { min-width: 220px; }
/* Ferramentas: um cartão por consulta */
.ferramentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ferramenta { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ferramenta p { margin: 0; }
.ferramenta .custo { font-size: 13px; color: var(--texto-2, #555); }
.ferramenta form { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ferramenta label { display: flex; flex-direction: column; gap: 4px; }
.ferramenta label.confirma { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.ferramenta.destaque { outline: 2px solid var(--azul, #1a56db); }

.atalhos-grupo { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.atalhos-grupo a { padding: 4px 12px; border-radius: 999px; background: var(--azul-claro, #e8efff); text-decoration: none; font-size: 13px; }
.titulo-grupo { font-size: 17px; margin: 20px 0 10px; }
.dados-consulta { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 6px 16px; margin: 0; }
.dados-consulta dt { color: var(--texto-2, #555); }
.dados-consulta dd { margin: 0; word-break: break-word; }
.lista-docs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .dados-consulta { grid-template-columns: 1fr; } }

.acesso label.lembrar { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
nav .contador { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-busca { display: flex; gap: 8px; margin-bottom: 12px; } .linha-busca input { flex: 1; }
.chave-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; word-break: break-all; }
.painel-gasto .grade-kpi { margin-bottom: 12px; }
.painel-gasto .barra-progresso { margin-bottom: 8px; }
.painel-gasto h3 { font-size: 13px; color: var(--cinza); margin: 10px 0 6px; }
table.compacta td { padding: 6px 8px; font-size: 13px; }
.titulo-secao { font-size: 15px; color: var(--marinho); margin: 22px 0 10px; }
.semaforo { border-left: 5px solid var(--linha); }
.semaforo.vermelho { border-left-color: var(--vermelho); } .semaforo.amarelo { border-left-color: var(--amarelo); }
.semaforo.verde { border-left-color: var(--verde); }
.semaforo .motivos { margin: 4px 0 12px 18px; } .semaforo .motivos li { margin: 2px 0; }
a.ind { text-decoration: none; color: inherit; }

/* chave liga/desliga (lista de empresas) */
.chave-form { margin: 0; }
button.chave { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0;
  color: var(--cinza); font-weight: 500; cursor: pointer; box-shadow: none; }
button.chave span { width: 34px; height: 20px; border-radius: 10px; background: #D0D5DD; position: relative; transition: background .15s; }
button.chave span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
button.chave.ligada { color: var(--verde); }
button.chave.ligada span { background: var(--verde); }
button.chave.ligada span::after { left: 16px; }

/* dica visível ao passar o mouse (o title nativo demora e some) */
.dica { position: relative; cursor: help; }
.dica:hover::after, .dica:focus::after {
  content: attr(data-dica); position: absolute; z-index: 30; right: 0; top: calc(100% + 6px);
  width: max-content; max-width: 320px; white-space: normal; text-align: left;
  background: #0f1b3d; color: #fff; font-weight: 500; font-size: 12px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* visualizador de nota dentro do site */
dialog.visualizador { width: min(1180px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px;
  background: var(--fundo, #f4f6fb); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.visualizador::backdrop { background: rgba(10, 18, 40, .55); }
dialog.visualizador .vis-barra { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e3e7f0; }
dialog.visualizador .vis-corpo { padding: 18px 22px 26px; overflow: auto; max-height: calc(92vh - 56px); }
dialog.visualizador .vis-corpo .topo-pagina { margin-top: 0; }
dialog.visualizador .vis-corpo:has(> .vis-pdf-quadro) { padding: 0; }
dialog.visualizador .vis-pdf-quadro { display: block; width: 100%; height: calc(92vh - 56px); border: 0; background: #525659; }
/* NF-e / CT-e / NFS-e: pílulas com a contagem do filtro atual, acima da tabela de notas */
.pilulas-especie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.pilulas-especie .pilula { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--linha);
  border-radius: 999px; color: inherit; text-decoration: none; background: var(--branco); }
.pilulas-especie .pilula b { font-size: 1.05em; }
.pilulas-especie .pilula small { opacity: .7; }
.pilulas-especie .pilula.ativa { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.pilulas-especie .empurra { margin-left: auto; }
.importar-antigas { margin-top: 14px; }
.importar-antigas > summary { cursor: pointer; }

/* títulos de coluna que ordenam a tabela */
th.ordenavel a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
th.ordenavel a:hover, th.ordenada a { color: var(--azul, #1d4ed8); }
th.ordenavel .seta { font-size: 9px; }

/* menu do usuário no topo (no formato do SIEG: pílula com avatar, nome, perfil e seta) */
.menu-usuario { position: relative; }
.menu-usuario > summary, .menu-opcoes > summary { list-style: none; cursor: pointer; }
.menu-usuario > summary::-webkit-details-marker, .menu-opcoes > summary::-webkit-details-marker { display: none; }
.pilula-usuario { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border: 1px solid var(--linha);
  border-radius: 999px; background: var(--branco); min-width: 200px; }
.menu-usuario[open] > .pilula-usuario { border-color: var(--texto); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #5F6368; color: #fff; display: grid; place-items: center;
  overflow: hidden; flex: none; }
.avatar .ic { width: 30px; height: 30px; margin-top: 8px; stroke-width: 0; fill: currentColor; }
.pilula-usuario .quem, .menu-cabeca .quem { text-align: left; flex: 1; }
.quem b { font-weight: 600; color: var(--texto); }
.seta-menu .ic { width: 16px; height: 16px; color: var(--cinza); transition: transform .15s; }
.menu-usuario[open] .seta-menu .ic { transform: rotate(180deg); }
.menu-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--branco);
  border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.16); padding: 6px 0; }
.menu-usuario .menu-lista { min-width: 218px; }
.menu-cabeca { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.menu-lista hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }
.menu-lista form { margin: 0; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 16px;
  color: var(--texto); text-decoration: none !important; font-size: 14px; font-weight: 400; background: none; border: 0;
  border-radius: 0; cursor: pointer; text-align: left; font-family: inherit; }
.menu-item small { display: block; font-size: 11px; color: var(--cinza); }
a.menu-item:has(small) { flex-direction: column; align-items: flex-start; gap: 0; }
.menu-item:hover { background: var(--fundo); color: var(--texto); }
.menu-item.sair { color: #E5484D; }
.menu-item.sair .ic { width: 15px; height: 15px; }
.chave-tema { position: relative; width: 30px; height: 16px; flex: none; }
.chave-tema input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chave-tema span { position: absolute; inset: 0; border-radius: 999px; background: #C9CDD4; transition: background .15s; pointer-events: none; }
.chave-tema span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transition: left .15s; }
.chave-tema input:checked + span { background: var(--azul); }
.chave-tema input:checked + span::after { left: 17px; }

/* botão "⋯" de Opções na linha da tabela (igual ao do SIEG) */
th.opcoes, td.opcoes { width: 70px; text-align: center; }
.menu-opcoes { position: relative; display: inline-block; }
.menu-opcoes > summary { width: 34px; height: 32px; border-radius: 6px; background: var(--azul); color: #fff;
  display: grid; place-items: center; }
.menu-opcoes > summary:hover, .menu-opcoes[open] > summary { background: var(--marinho-2); }
.menu-opcoes > summary .ic { width: 20px; height: 20px; }
.menu-opcoes .menu-lista { position: fixed; top: auto; right: auto; min-width: 230px; text-align: left; }

/* conectar a extensão (automático) */
.conectar-extensao { max-width: 560px; margin: 40px auto; text-align: center; padding: 32px; }
.conectar-extensao h1 { display: flex; gap: 10px; justify-content: center; align-items: center; }
.conectar-extensao .estado { font-size: 17px; font-weight: 600; margin: 18px 0; }
.conectar-extensao[data-estado="ok"] .estado { color: var(--verde); }
.conectar-extensao[data-estado="erro"] .estado { color: var(--vermelho); }
.conectar-extensao .sem-extensao { display: none; }
.conectar-extensao[data-estado="sem-extensao"] .sem-extensao { display: block; }
.conectar-extensao[data-estado="sem-extensao"] .estado { display: none; }

/* diagnóstico no alto da empresa: regime + alertas */
.diagnostico { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin: 4px 0 16px; }
.diagnostico > div { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
.diag-regime { border-left: 5px solid var(--cinza-2) !important; }
.diag-regime.verde { border-left-color: var(--verde) !important; }
.diag-regime.amarelo { border-left-color: var(--amarelo) !important; }
.diag-regime.vermelho { border-left-color: var(--vermelho) !important; }
.diag-linha { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; }
.diag-linha small { display: block; font-size: 11px; color: var(--cinza); }
.diag-linha b { font-size: 16px; }
.diag-regime.amarelo .diag-linha div:last-child b { color: var(--amarelo); }
.diag-regime.vermelho .diag-linha div:last-child b { color: var(--vermelho); }
.diag-regime.verde .diag-linha div:last-child b { color: var(--verde); }
.diag-seta { font-size: 22px; color: var(--cinza-2); }
.diagnostico p { margin: 2px 0; }
.aviso-leve { font-style: italic; }
.diag-alertas { display: flex; flex-direction: column; gap: 6px; }
.diag-alerta { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; }
.diag-alerta svg { width: 15px; height: 15px; flex: none; }
.diag-alerta.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.diag-alerta.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.diag-ok { color: var(--verde); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.diag-ok svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .diagnostico { grid-template-columns: 1fr; } }

/* consultas e-CAC em duas etapas */
.busca-empresa { display: flex; gap: 10px; align-items: center; }
.busca-empresa label { flex: 1; display: flex; gap: 8px; align-items: center; margin: 0; }
.busca-empresa input { flex: 1; font-size: 16px; padding: 12px 14px; }
.ficha-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.ficha-colunas h3 { font-size: 13px; margin: 10px 0 6px; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
.lista-consultas { display: flex; flex-direction: column; gap: 4px; }
.lista-consultas label.consulta-item { display: grid; grid-template-columns: 18px minmax(200px, 270px) minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 8px 12px; margin: 0; border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--texto); font-weight: 400; font-size: 13px; }
.lista-consultas label.consulta-item:hover { border-color: #c7d2fe; }
.lista-consultas label.consulta-item:has(input:checked) { border-color: var(--azul, #1d4ed8); background: #eef2ff; }
.lista-consultas .consulta-item input[type=checkbox] { width: 16px; height: 16px; margin: 0; padding: 0; }
.lista-consultas .consulta-item b { font-weight: 600; }
.lista-consultas .consulta-item small { color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-consultas .consulta-item em { font-style: normal; font-size: 12px; color: var(--cinza); white-space: nowrap; text-align: right; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 800px) { .lista-consultas label.consulta-item { grid-template-columns: 18px 1fr auto; } .lista-consultas .consulta-item small { display: none; } }
.parametros { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.parametros label { margin: 0; }
.rodape-lote { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.guia-form { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; }
@media (max-width: 800px) { .ficha-colunas { grid-template-columns: 1fr; } .busca-empresa { flex-direction: column; align-items: stretch; } }

/* conectar o Claude */
pre.codigo { background: #0f1b3d; color: #e5e7eb; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
code.grande { font-size: 15px; word-break: break-all; }

/* alerta clicado: a aba mostra só o assunto dele */
.foco-aviso { background: #eef2ff; border-radius: 8px; padding: 8px 12px; margin: 6px 0; }

/* estudo do regime (visão geral da empresa) */
.estudo-topo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 12px; }
.estudo-topo small { display: block; font-size: 11px; color: var(--cinza); }
.estudo-topo b { font-size: 16px; }
.barra-uso, .barra-mes span { display: block; height: 6px; border-radius: 3px; }
.barra-uso { background: var(--linha); margin-top: 6px; overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: var(--azul, #1d4ed8); }
.barra-mes { width: 30%; }
.barra-mes span { background: #c7d2fe; }
table.meses td, table.meses th { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 800px) { .estudo-topo { grid-template-columns: 1fr 1fr; } .barra-mes { display: none; } }

/* visão geral única: alertas no topo com rolagem, situação em faixa de ícones, histórico com rolagem */
.diag-lista { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.faixa-situacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.faixa-situacao a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--branco);
  border: 1px solid var(--linha); border-left: 4px solid var(--cinza-2); text-decoration: none; color: inherit; }
.faixa-situacao a svg { width: 22px; height: 22px; flex: none; }
.faixa-situacao a span { display: flex; flex-direction: column; min-width: 0; }
.faixa-situacao small { font-size: 11px; opacity: .7; }
.faixa-situacao b { font-size: 14px; }
.faixa-situacao em { font-size: 11px; font-style: normal; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-situacao a.verde { border-left-color: var(--verde); } .faixa-situacao a.verde svg { color: var(--verde); }
.faixa-situacao a.amarelo { border-left-color: var(--amarelo); } .faixa-situacao a.amarelo svg { color: var(--amarelo); }
.faixa-situacao a.vermelho { border-left-color: var(--vermelho); } .faixa-situacao a.vermelho svg { color: var(--vermelho); }
.historico-rolagem { max-height: 420px; overflow-y: auto; }
.cartao .filtro-historico.com-padding { padding: 10px 18px 14px; }

/* teto do Simples */
.regua-teto { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 18px; }
.regua-teto span { padding: 8px 10px; font-size: 12px; font-weight: 600; border-radius: 6px; }
.regua-teto small { display: block; font-weight: 400; font-size: 11px; color: inherit; opacity: .85; }
.regua-teto .verde { background: var(--verde-claro); color: var(--verde); }
.regua-teto .amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.regua-teto .laranja { background: #FFE4CC; color: #9A4A00; }
.regua-teto .vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.regua-teto .escuro { background: var(--vermelho); color: #fff; }
table.teto td { vertical-align: top; }
.uso-teto { min-width: 120px; }
.uso-teto .barra-uso { width: 100%; margin: 6px 0 3px; }
.barra-uso.verde span { background: var(--verde); } .barra-uso.amarelo span { background: var(--amarelo); }
.barra-uso.vermelho span { background: var(--vermelho); } .barra-uso.cinza span { background: var(--cinza-2); }
@media (max-width: 760px) { .regua-teto { grid-template-columns: 1fr 1fr; } }

/* aba Bancos */
.lista-simples { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-simples li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lista-simples li small { color: var(--cinza); }
form.em-linha { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.conectar-banco { text-align: center; padding: 40px 16px; }
form.em-linha label.confirma { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; margin: 0; }
form.em-linha label.confirma input { width: auto; margin: 0; }

/* ---------- Modo Escuro (menu do usuário; fica salvo neste navegador) ---------- */
html[data-tema="escuro"] {
  --texto: #E8ECF3; --cinza: #9AA6B8; --cinza-2: #7B879A; --linha: #3A4657; --fundo: #1B2433; --branco: #273244;
  --cabeca-tabela: #2F3B4E; --linha-hover: #2D394B; --azul-claro: #23365E; --marinho: #E8ECF3;
  --verde: #4ADE80; --verde-claro: #0B3B22; --amarelo: #FBBF24; --amarelo-claro: #3B2A0B;
  --vermelho: #F87171; --vermelho-claro: #45191A; --roxo: #C4B5FD; --roxo-claro: #2E2257;
  --sombra: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}
html[data-tema="escuro"] .lateral { background: #141C29; }
html[data-tema="escuro"] .lateral nav a:hover { background: #22304A; }
html[data-tema="escuro"] .barra, html[data-tema="escuro"] dialog.visualizador .vis-barra,
html[data-tema="escuro"] .diagnostico > div, html[data-tema="escuro"] .acesso, html[data-tema="escuro"] .lista-marcar,
html[data-tema="escuro"] .dica code { background: var(--branco); border-color: var(--linha); }
html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea {
  background: #1F2938; border-color: var(--linha); color: var(--texto); }
html[data-tema="escuro"] .menu-opcoes > summary { background: #fff; color: #1B2433; }
html[data-tema="escuro"] .menu-opcoes > summary:hover, html[data-tema="escuro"] .menu-opcoes[open] > summary { background: #DCE3EE; }
html[data-tema="escuro"] .qr { background: #fff; }
html[data-tema="escuro"] a:not(.botao):not(.menu-item):not(.kpi) { color: #8AB4FF; }
html[data-tema="escuro"] .lateral nav a, html[data-tema="escuro"] .lateral a { color: #C7D2FE; }
html[data-tema="escuro"] .lateral nav a.ativo { color: #fff; }
html[data-tema="escuro"] .chip { background: #3A4657; color: #D5DCE6; }
html[data-tema="escuro"] .chip.azul { background: #23365E; color: #9DBBFF; }
html[data-tema="escuro"] .chip.verde { background: var(--verde-claro); color: var(--verde); }
html[data-tema="escuro"] .chip.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
html[data-tema="escuro"] .chip.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
html[data-tema="escuro"] button.secundario, html[data-tema="escuro"] .botao.secundario { background: var(--branco); color: var(--texto); border-color: var(--linha); }
html[data-tema="escuro"] th.ordenavel a { color: var(--texto); }
/* cartões de ação e alertas do painel: contraste no escuro (05/11/2026) */
html[data-tema="escuro"] .acao-cartao { background: linear-gradient(135deg, #16223F 0%, #1A3E9E 100%); border: 1px solid #2C4A94; }
html[data-tema="escuro"] .acoes-rapidas a.acao-cartao, html[data-tema="escuro"] .acao-cartao b { color: #fff; }
html[data-tema="escuro"] .usuario a.pilula-gasto { color: var(--texto); }
html[data-tema="escuro"] .acao-cartao small { color: #C9D6FA; }
html[data-tema="escuro"] .alerta { border-left-width: 4px; }
html[data-tema="escuro"] .faixa-alertas a.alerta.amarelo { background: rgba(251,191,36,.10); color: #FCD34D; border-color: rgba(251,191,36,.35); border-left-color: #FBBF24; }
html[data-tema="escuro"] .faixa-alertas a.alerta.vermelho { background: rgba(248,113,113,.10); color: #FCA5A5; border-color: rgba(248,113,113,.35); border-left-color: #F87171; }
html[data-tema="escuro"] .alerta:hover { filter: brightness(1.15); }
html[data-tema="escuro"] th.ordenada a { color: #8AB4FF; }

th.centro, td.centro { text-align: center; }

/* ================= Visual 2.0 (05/11/2026): layout no estilo CASI com as cores da WE3 =================
   menu lateral claro por seções, cartões com número grande colorido, abas em pílula, faixa de PERIGO. */
:root { --ambar: #B7791F; --ambar-claro: #FFF6E0; --borda-ativa: var(--azul); }
.lateral { background: var(--branco); color: var(--texto); border-right: 1px solid var(--linha); overflow-y: auto; }
.logo { color: var(--grafite); }
.logo small { color: var(--cinza); }
.produto i { color: var(--azul); }
.lateral nav { gap: 1px; }
.lateral .grupo { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--cinza-2); margin: 16px 10px 4px; }
.lateral .grupo::before { content: "· "; }
.lateral nav > .grupo:first-child { margin-top: 2px; }
.lateral nav a { color: #374151; padding: 8px 12px; border: 1px solid transparent; font-weight: 500; }
.lateral nav a .ic { color: var(--cinza); }
.lateral nav a:hover { background: var(--fundo); color: var(--marinho-fixo); }
.lateral nav a.ativo { background: var(--azul-claro); color: var(--marinho-2); border-color: #B9CCFF; font-weight: 600; }
.lateral nav a.ativo .ic { color: var(--azul); }
.lateral .assinatura small { color: var(--cinza-2); }
.so-escuro { display: none; }
html[data-tema="escuro"] .so-escuro { display: block; } html[data-tema="escuro"] .so-claro { display: none; }
html[data-tema="escuro"] .lateral { background: #141C29; border-right-color: #243044; }
html[data-tema="escuro"] .logo { color: #fff; }
html[data-tema="escuro"] .lateral nav a { color: #C7D2FE; }
html[data-tema="escuro"] .lateral nav a .ic { color: #8FA2C8; }
html[data-tema="escuro"] .lateral nav a:hover { background: #1E2A3D; color: #fff; }
html[data-tema="escuro"] .lateral nav a.ativo { background: #1D2F57; color: #fff; border-color: #3557A8; }
html[data-tema="escuro"] .lateral nav a.ativo .ic { color: #8AB4FF; }

/* cartões de indicador: número grande colorido, sem faixa no topo; selecionado com borda */
.ind { border-top: 1px solid var(--linha); border-radius: 14px; padding: 16px 18px; }
.ind span { font-size: 11.5px; letter-spacing: .6px; }
.ind b { font-size: 28px; font-weight: 800; letter-spacing: -.3px; }
.ind.atencao { border-top-color: var(--linha); }
.ind.atencao b, .ind.ambar b { color: var(--ambar); }
.ind.azul b { color: var(--azul); } .ind.verde b { color: var(--verde); } .ind.roxo b { color: var(--roxo); }
.ind.vermelho b { color: var(--vermelho); }
.ind.selecionado, a.ind:focus-visible { border: 2px solid var(--borda-ativa); padding: 15px 17px; }
html[data-tema="escuro"] { --ambar: #FBBF24; }

/* abas em pílula com ícone */
.abas { gap: 6px; border-bottom: 0; padding: 4px 0 2px; flex-wrap: wrap; }
.abas a { border: 1px solid transparent; border-radius: 9px; padding: 7px 12px; display: inline-flex; gap: 7px; align-items: center; }
.abas a.ativo { background: var(--azul-claro); border-color: #B9CCFF; color: var(--marinho-2); }
html[data-tema="escuro"] .abas a.ativo { background: #1D2F57; border-color: #3557A8; color: #fff; }

/* faixa de PERIGO no topo da página */
.faixa-perigo { display: flex; align-items: center; gap: 14px; background: #FEF2F2; border: 2px solid #F87171; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px; color: #7F1D1D; }
.faixa-perigo .sirene { width: 38px; height: 38px; border-radius: 10px; background: #DC2626; color: #fff; display: grid; place-items: center; flex: none; }
.faixa-perigo .sirene .ic { width: 22px; height: 22px; }
.faixa-perigo p { margin: 0; flex: 1; font-size: 14px; }
.faixa-perigo p b { color: #991B1B; }
.faixa-perigo .ver { background: #fff; color: #B91C1C; border: 1px solid #FCA5A5; border-radius: 9px; padding: 7px 14px; font-weight: 700;
  white-space: nowrap; text-decoration: none !important; }
.faixa-perigo .ver:hover { background: #FEE2E2; }
html[data-tema="escuro"] .faixa-perigo { background: rgba(248,113,113,.10); border-color: #F87171; color: #FECACA; }
html[data-tema="escuro"] .faixa-perigo p b { color: #FCA5A5; }
html[data-tema="escuro"] .faixa-perigo a.ver { background: transparent; color: #FCA5A5; border-color: #F87171; }
.grade-ind.seis .ind b { font-size: clamp(22px, 1.8vw, 28px); }

/* ---------- 1.6.6: ícones coloridos no menu (um por item) e sugestões da busca do topo ---------- */
.lateral nav a { font-size: 14.5px; padding: 9px 12px; }
.lateral nav a .emo { font-style: normal; font-size: 17px; line-height: 1; width: 22px; text-align: center; flex: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.lateral nav a.ativo { box-shadow: 0 1px 2px rgba(10,22,64,.08); }
form.busca { position: relative; }
.sugestoes { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; list-style: none; margin: 0; padding: 6px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 12px 28px rgba(10,22,64,.16); }
.sugestoes a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; color: var(--texto);
  text-decoration: none !important; }
.sugestoes a b { font-weight: 600; font-size: 14px; }
.sugestoes a small { color: var(--cinza); font-size: 12px; }
.sugestoes a:hover, .sugestoes a.marcado { background: var(--azul-claro); }
html[data-tema="escuro"] .sugestoes { background: #182235; border-color: #2A3850; }
html[data-tema="escuro"] .sugestoes a { color: #E5E7EB; }
html[data-tema="escuro"] .sugestoes a:hover, html[data-tema="escuro"] .sugestoes a.marcado { background: #1D2F57; }

/* valor grande não sai do cartão */
.ind b { overflow-wrap: anywhere; }
.ind b.valor { white-space: nowrap; }

/* menu da empresa: barra própria, separada do resto da tela, com ícone por aba (08/11/2026) */
nav.abas.menu-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--branco);
  border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 14px; padding: 10px 12px;
  margin: 18px 0; box-shadow: 0 2px 8px rgba(10,22,64,.06); position: sticky; top: 8px; z-index: 20; }
.menu-empresa-tit { width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cinza-2); margin: 0 4px 2px; }
nav.abas.menu-empresa a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  border: 1px solid transparent; color: var(--texto); font-weight: 500; text-decoration: none !important; }
nav.abas.menu-empresa a .emo { font-style: normal; font-size: 15px; line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
nav.abas.menu-empresa a:hover { background: var(--fundo); }
nav.abas.menu-empresa a.ativo { background: var(--azul-claro); border-color: #B9CCFF; color: var(--marinho-2); font-weight: 600; }
html[data-tema="escuro"] nav.abas.menu-empresa { background: #182235; border-color: #2A3850; border-left-color: #3370FF; }
html[data-tema="escuro"] nav.abas.menu-empresa a { color: #E5E7EB; }
html[data-tema="escuro"] nav.abas.menu-empresa a.ativo { background: #1D2F57; border-color: #3557A8; color: #fff; }
.fonte-regime { display: block; font-size: 11px; color: var(--cinza); margin-top: 2px; }

/* tela de certidões do escritório */
.tabela-cert th.centro, .tabela-cert td.centro { text-align:center; white-space:nowrap }
.tabela-cert a.chip { text-decoration:none; cursor:pointer }
.tabela-cert a.chip:hover { filter:brightness(.92) }
.mini-link { display:block; font-size:.72rem; font-weight:400; opacity:.75 }
.filtros-cert { margin:12px 0 }
.filtros-cert input[type=search] { min-width:280px }

/* menu da empresa numa linha só (rola de lado em tela estreita) */
.menu-empresa-links { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:0; overflow-x:auto; width:100%; scrollbar-width:thin; }
nav.abas.menu-empresa .menu-empresa-links a { padding:6px 5px; gap:4px; white-space:nowrap; flex:0 0 auto; font-size:12.5px; }
nav.abas.menu-empresa .menu-empresa-links a .emo { font-size:13px; }
.acoes-cert { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.acoes-cert form.inline { margin:0; }
.cartao.sem-padding > form.com-padding, .cartao.sem-padding > p.com-padding { padding-left:16px; padding-right:16px; }
.grade-kpi.kpi-5 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.anexar-cert label.botao { cursor:pointer; margin:0; }
.parc-linha { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }

/* Notas: linha de busca (nº, chave, emitente) separada dos filtros de lista */
.filtros-busca { flex-basis:100%; display:flex; gap:10px; flex-wrap:wrap; align-items:end;
  padding-top:10px; margin-top:2px; border-top:1px dashed var(--linha); }
.filtros-busca label { margin:0; }
.filtros-busca .f-numero { flex:0 0 130px; min-width:0; }
.filtros-busca .f-chave { flex:2 1 360px; min-width:260px; }
.filtros-busca .f-chave input { font-family:ui-monospace, Consolas, monospace; letter-spacing:.3px; }
.filtros-busca .cresce { flex:1 1 220px; }
.filtros-busca .f-botoes { display:flex; gap:10px; align-items:center; }
.filtros-busca .botao-link { font-size:13px; color:var(--cinza); }

/* Notas no meu PC */
.passos-pc { margin:4px 0 10px 18px; line-height:1.7 } .passos-pc pre.codigo { margin:6px 0 }

/* Entrar com Google */
.botao-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px;
  border:1px solid var(--linha); border-radius:10px; background:var(--branco); color:var(--texto); font-weight:600;
  text-decoration:none; box-sizing:border-box; }
.botao-google:hover { background:var(--linha-hover); border-color:var(--cinza-2); }
.acesso .ou { display:flex; align-items:center; gap:10px; color:var(--cinza); font-size:12px; margin:14px 0; }
.acesso .ou::before, .acesso .ou::after { content:""; flex:1; border-top:1px solid var(--linha); }
.google-usuario { display:flex; gap:6px; align-items:center; }
.google-usuario input { min-width:210px; padding:5px 8px; font-size:13px; }

/* Conectar o WECONTADOR Agente */
.conectar-pc { max-width:520px; margin:40px auto; text-align:center; padding:32px; }
.conectar-pc .acesso-icone { width:56px; height:56px; }
.conectar-pc form { display:flex; gap:10px; justify-content:center; margin:18px 0 8px; flex-wrap:wrap; }

/* Precificador */
.calc-grade { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap:16px; align-items:start; }
@media (max-width: 900px) { .calc-grade { grid-template-columns: 1fr; } }
.calc-form { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; align-items:end; }
.calc-form label { margin:0; }
.calc-form .marcar { display:flex; gap:8px; align-items:center; font-weight:500; }
.calc-form button { grid-column: 1 / -1; justify-self:start; }
.calc-resultado { position:sticky; top:16px; }
.calc-total { font-size:34px; font-weight:800; color:var(--azul); margin:4px 0 12px; }
.calc-total small { font-size:14px; color:var(--cinza); font-weight:500; margin-left:4px; }
.calc-memoria { width:100%; border-collapse:collapse; font-size:14px; }
.calc-memoria td { padding:7px 4px; border-bottom:1px solid var(--linha); }
.calc-memoria tr.total td { font-weight:800; border-bottom:none; border-top:2px solid var(--texto); }
.regras-tabela { width:100%; border-collapse:collapse; }
.regras-tabela td, .regras-tabela th { padding:4px 6px; text-align:left; }
.regras-tabela input { width:100%; box-sizing:border-box; }
.calc-form .marcar input { width:auto; margin:0; }
.calc-form .marcar { padding-bottom:10px; }

/* Produtividade */
.barra-pct { display:inline-block; width:90px; height:8px; background:var(--linha); border-radius:6px; overflow:hidden; vertical-align:middle; }
.barra-pct i { display:block; height:100%; background:var(--azul); }

/* Usuários: módulos */
.modulos-chips { display:flex; flex-wrap:wrap; gap:4px; max-width:260px; }
.acessos-usuario { min-width:300px; text-align:left; }
.acessos-usuario form { display:flex; flex-direction:column; gap:8px; }
.acessos-usuario fieldset { border:1px solid var(--linha); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.acessos-usuario .marcar { display:flex; gap:8px; align-items:center; margin:0; font-weight:500; }
.acessos-usuario .marcar input { width:auto; margin:0; }
.chip.azul { background:var(--azul-claro); color:var(--azul); }
.chip.roxo { background:var(--roxo-claro); color:var(--roxo); }

.logins-externos { display:flex; flex-direction:column; gap:8px; width:100%; }