/* Painel da folha: menu lateral escuro, topo branco com empresa/referência,
   conteúdo em cartões brancos sobre fundo cinza-azulado.
   Cores: todas vêm dos tokens abaixo (contraste conferido em WCAG 2.1 AA).
   O TEMA ESCURO está no fim do arquivo; o tema claro completo está em painel.css.claro.bak. */
:root {
  /* ---- primária (índigo) ---- */
  --primaria: #2f5d8a;
  --primaria-forte: #264d73;
  --primaria-texto: #1f3d5c;
  --primaria-suave: #edf2f7;
  --foco: #3b6ea5;
  --foco-anel: rgba(59,110,165,.35);

  /* ---- superfícies ---- */
  --fundo: #e6e9ee;
  --cartao: #ffffff;
  --superficie-2: #f6f8fb;
  --superficie-hover: #f1f5f9;
  --linha-hover: #f3f6f9;

  /* ---- bordas ---- */
  --borda: #e2e8f0;
  --borda-campo: #8592a5;
  --borda-suave: #edf1f6;

  /* ---- textos ---- */
  --texto: #1e293b;
  --texto-2: #5b6779;
  --texto-3: #94a3b8;
  --texto-invertido: #ffffff;

  /* ---- menu lateral ---- */
  --lateral: #1f3d2f;
  --lateral-2: #183226;
  --lateral-texto: #d7e6dc;
  --lateral-texto-forte: #eaf2ec;
  --lateral-texto-3: #b5ccbd;
  --lateral-ativo: #ffffff;
  --lateral-hover: rgba(255,255,255,.06);
  --lateral-ativo-fundo: rgba(255,255,255,.10);
  --lateral-destaque: #7fbf95;
  --lateral-selo: #2c5240;
  --lateral-marca: #9cc9aa;
  --modulo: #2f5d8a;
  --modulo-2: #2a4f74;

  /* ---- estados (forte = ícone/borda/botão, suave = fundo, texto = texto sobre o suave) ---- */
  --sucesso: #15803d; --sucesso-suave: #dcfce7; --sucesso-fundo: #f0fdf4; --sucesso-texto: #166534;
  --aviso: #d97706;   --aviso-suave: #fef3c7;   --aviso-fundo: #fffbeb;   --aviso-texto: #92400e;
  --erro: #dc2626;    --erro-suave: #fee2e2;    --erro-fundo: #fef2f2;    --erro-texto: #991b1b;
  --info: #2b6cb0;    --info-suave: #e3edf7;    --info-fundo: #f1f6fb;    --info-texto: #1e4e79;
  --alerta-suave: #ffedd5; --alerta-texto: #9a3412;
  --advert-suave: #ecfccb; --advert-texto: #3f6212;
  --subst-suave: #ede9fe;  --subst-texto: #5b21b6;
  --neutro-suave: #f1f5f9; --neutro-texto: #475569;
  --estrela: #f59e0b;

  /* ---- nomes antigos (usados nos templates) apontam para a paleta nova ---- */
  --indigo: var(--primaria);
  --indigo-2: var(--primaria-texto);
  --azul: var(--info);
  --escuro: #334155;
  --acoes: #475569;
  --cinza: #e2e8f0;
  --verde: var(--sucesso);
  --amarelo: var(--aviso);
  --vermelho: var(--erro);

  /* ---- acabamento ---- */
  --raio: 6px;
  --sombra-1: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.04);
  --sombra-2: 0 4px 14px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.05);
  --sombra-3: 0 10px 30px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.06);
  --sombra-topo: inset 0 -2px 0 var(--primaria), 0 2px 8px rgba(15,23,42,.12);
  --sombra-cartao: inset 0 2px 0 var(--primaria), 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.05);
  --transicao: .15s ease;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 13px; color: var(--texto);
  background: var(--fundo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--primaria); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--primaria-forte); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip-filtro:focus-visible, summary:focus-visible,
.chave:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; -webkit-font-smoothing: antialiased; vertical-align: middle; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 230px 1fr; grid-template-rows: 44px 1fr; height: 100vh; }
.app.recolhido { grid-template-columns: 56px 1fr; }
.lateral { grid-row: 1 / 3; background: var(--lateral); color: var(--lateral-texto); display: flex;
  flex-direction: column; min-height: 0; }
.marca { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--texto-invertido);
  font-size: 19px; font-weight: 500; letter-spacing: .2px; }
.marca .ms { font-size: 24px; color: var(--lateral-marca); }
.marca small { font-size: 10px; background: var(--lateral-selo); border-radius: 4px; padding: 1px 5px; margin-left: 2px;
  color: var(--lateral-texto-forte); font-weight: 400; }
.marca .recolher { margin-left: auto; background: none; border: 0; color: var(--lateral-texto); cursor: pointer;
  border-radius: var(--raio); transition: color var(--transicao); }
.marca .recolher:hover { color: var(--lateral-ativo); }
.modulo { background: var(--modulo); color: var(--texto-invertido); font-size: 11px; font-weight: 500; text-transform: uppercase;
  padding: 0 14px; height: 40px; display: flex; align-items: center; gap: 10px; letter-spacing: .3px;
  background-image: linear-gradient(90deg, var(--modulo), var(--modulo-2)); }
.menu { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
.menu::-webkit-scrollbar { width: 6px; } .menu::-webkit-scrollbar-thumb { background: var(--lateral-selo); border-radius: 3px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a, .menu .grupo { display: flex; align-items: center; gap: 10px; color: var(--lateral-texto);
  padding: 9px 14px; cursor: pointer; user-select: none; text-decoration: none; font-size: 13px;
  transition: background var(--transicao), color var(--transicao); }
.menu a:hover, .menu .grupo:hover { background: var(--lateral-hover); color: var(--lateral-ativo); text-decoration: none; }
.menu a:focus-visible { outline-offset: -2px; outline-color: var(--lateral-marca); }
.menu .nivel1 > li > .grupo, .menu .nivel1 > li > a { font-weight: 500; color: var(--lateral-texto-forte); }
.menu .seta { margin-left: auto; font-size: 18px; transition: transform .15s; }
.menu li.aberto > .grupo .seta { transform: rotate(180deg); }
.menu li > ul { display: none; }
.menu li.aberto > ul { display: block; }
.menu .nivel2 a, .menu .nivel2 .grupo { padding-left: 26px; }
.menu .nivel3 a { padding-left: 48px; font-size: 12.5px; color: var(--lateral-texto-3); }
.menu .ponto { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.menu a.ativo { color: var(--lateral-ativo); background: var(--lateral-ativo-fundo); box-shadow: inset 3px 0 0 var(--lateral-destaque); }
.menu a.ativo .ponto, .menu li.aberto > .grupo .ponto { background: var(--lateral-destaque); box-shadow: 0 0 0 3px rgba(127,191,149,.3); }
.menu .nivel1 > li > .grupo .ms, .menu .nivel1 > li > a .ms { color: var(--lateral-marca); }
.rodape-lateral { display: flex; justify-content: space-around; padding: 10px; background: var(--lateral-2); }
.rodape-lateral a { color: var(--lateral-texto); }
.rodape-lateral a:hover { color: var(--lateral-ativo); text-decoration: none; }
.recolhido .marca span:not(.ms), .recolhido .marca small, .recolhido .modulo span:not(.ms),
.recolhido .menu .rotulo, .recolhido .menu .seta, .recolhido .menu li > ul { display: none !important; }
.recolhido .marca { justify-content: center; padding: 0; }
.recolhido .marca .recolher { margin: 0; }

.topo { background: var(--cartao); display: flex; align-items: center; gap: 6px; padding: 0 12px;
  box-shadow: var(--sombra-topo); z-index: 5; position: relative; }
.topo .botao-topo { background: none; border: 0; color: var(--texto); display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: var(--raio); cursor: pointer; font: inherit; font-size: 12.5px;
  transition: background var(--transicao), color var(--transicao); }
.topo .botao-topo:hover { background: var(--superficie-hover); color: var(--primaria-texto); text-decoration: none; }
.topo .separador { flex: 1; }
.suspenso { position: relative; }
.suspenso > .painel-suspenso { display: none; position: absolute; top: 38px; left: 0; background: var(--cartao);
  min-width: 260px; border-radius: var(--raio); box-shadow: var(--sombra-3); padding: 6px 0; z-index: 20; }
.suspenso.aberto > .painel-suspenso { display: block; }
.painel-suspenso a { display: block; padding: 7px 14px; color: var(--texto); transition: background var(--transicao); }
.painel-suspenso a:hover { background: var(--primaria-suave); color: var(--primaria-texto); text-decoration: none; }
.painel-suspenso .vazio { padding: 8px 14px; color: var(--texto-2); }
.empresa-topo { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 10px;
  border-radius: var(--raio); text-align: left; background: none; border: 0; font: inherit; color: var(--texto);
  transition: background var(--transicao); }
.empresa-topo:hover { background: var(--superficie-hover); }
.empresa-topo b { display: block; font-size: 12.5px; font-weight: 500; max-width: 340px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.empresa-topo small { display: block; font-size: 11px; color: var(--texto-2); }
.empresa-topo small.fechada { color: var(--erro); }
.painel-referencia { width: 360px; padding: 14px !important; }
.painel-referencia label { display: block; font-size: 11.5px; color: var(--texto-2); margin: 8px 0 3px; }
.usuario { display: flex; align-items: center; gap: 6px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primaria); color: var(--texto-invertido); display: grid;
  place-items: center; font-weight: 500; box-shadow: 0 0 0 2px var(--primaria-suave); }

.conteudo { overflow-y: auto; padding: 0 16px 24px; min-width: 0; }
.trilha { display: flex; align-items: center; gap: 8px; padding: 12px 2px 10px; font-weight: 500; font-size: 14px; }
.trilha .passo { color: var(--texto); }
.trilha a.passo { color: var(--primaria); }
.trilha .sep { color: var(--texto-3); }
.trilha form { margin-left: auto; }
.estrela { background: none; border: 0; cursor: pointer; color: var(--texto-3); transition: color var(--transicao); }
.estrela:hover { color: var(--estrela); }
.estrela.marcada { color: var(--estrela); }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra-cartao);
  padding: 14px; margin-bottom: 14px; }
.cartao h2 { font-size: 14px; font-weight: 500; margin: 0 0 10px; color: var(--primaria-texto); letter-spacing: -.005em; }
.ajuda { color: var(--texto-2); font-size: 12px; margin: -4px 0 10px; }

/* ---------- mensagens ---------- */
.mensagens { list-style: none; padding: 0; margin: 0 0 10px; }
.mensagens li { padding: 9px 12px; border-radius: var(--raio); margin-bottom: 6px; background: var(--info-fundo);
  border-left: 4px solid var(--info); box-shadow: var(--sombra-1); }
.mensagens li.success { background: var(--sucesso-fundo); border-color: var(--sucesso); }
.mensagens li.warning { background: var(--aviso-fundo); border-color: var(--aviso); }
.mensagens li.error { background: var(--erro-fundo); border-color: var(--erro); }
.aviso-fechada { background: var(--erro-suave); color: var(--erro-texto); border-radius: var(--raio); padding: 8px 12px;
  margin-bottom: 10px; display: flex; gap: 8px; align-items: center; box-shadow: inset 3px 0 0 var(--erro); }
.aviso-fechada a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aviso-fechada a:hover { color: inherit; text-decoration-thickness: 2px; }

/* ---------- botões e campos ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0;
  border-radius: var(--raio); font: inherit; font-weight: 500; cursor: pointer; color: var(--texto-invertido); background: var(--primaria);
  background-image: linear-gradient(180deg, var(--primaria), var(--primaria-forte));
  white-space: nowrap; text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
  transition: filter var(--transicao), box-shadow var(--transicao), background var(--transicao); }
.btn .ms { font-size: 18px; }
.btn:hover { filter: brightness(.92); box-shadow: 0 3px 8px rgba(15,23,42,.16); }
.btn:active { filter: brightness(.86); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--foco-anel); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.btn.escuro { background: var(--escuro); }
.btn.azul { background: var(--azul); }
.btn.acoes { background: var(--acoes); }
.btn.cinza { background: var(--cinza); color: var(--texto); box-shadow: none; }
.btn.verde { background: var(--verde); }
.btn.vermelho { background: var(--vermelho); }
.btn.contorno { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); }
.btn.contorno:hover { filter: none; background: var(--superficie-hover); border-color: var(--borda-campo); }
.btn.icone { width: 34px; padding: 0; justify-content: center; }
.btn.pequeno { height: 28px; padding: 0 10px; font-size: 12px; }
.campo, select.campo, .busca input, .painel-referencia select, .painel-referencia input {
  width: 100%; height: 32px; border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 0 9px; font: inherit;
  color: var(--texto); background: var(--cartao); transition: border-color var(--transicao), box-shadow var(--transicao); }
.campo::placeholder, .busca input::placeholder { color: var(--texto-2); }
textarea.campo { height: auto; padding: 6px 9px; }
.campo:hover, .busca input:hover { border-color: var(--texto-2); }
.campo:focus, .busca input:focus, .painel-referencia select:focus, .painel-referencia input:focus {
  outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--foco-anel); }
.campo:disabled { background: var(--superficie-2); color: var(--texto-2); border-color: var(--borda); }
select[multiple].campo { height: 110px; }

/* ---------- barra da lista ---------- */
.barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.barra .situacao { width: 220px; }
.barra .situacao label { display: block; font-size: 11.5px; color: var(--texto-2); margin-bottom: 2px; }
.busca { display: flex; align-items: center; flex: 1; min-width: 240px; max-width: 520px; }
.busca .lupa { position: relative; flex: 1; }
.busca .lupa .ms { position: absolute; left: 8px; top: 6px; color: var(--texto-3); font-size: 19px; }
.busca input { padding-left: 32px; border-radius: var(--raio) 0 0 var(--raio); }
.busca .btn { border-radius: 0; box-shadow: none; }
.busca .btn:last-child { border-radius: 0 var(--raio) var(--raio) 0; }
.barra .direita { margin-left: auto; display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primaria-suave); color: var(--primaria-texto);
  border-radius: 12px; padding: 3px 10px; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(47,93,138,.15); }

/* ---------- tabela ---------- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); }
table.grade { width: 100%; border-collapse: collapse; background: var(--cartao); }
.grade th { text-align: left; font-size: 12px; font-weight: 500; padding: 10px 8px; border-bottom: 1px solid var(--borda);
  white-space: nowrap; background: var(--primaria-suave); position: sticky; top: 0; color: var(--primaria-texto);
  border-bottom-color: #cfdae6; }
.grade th a { color: var(--primaria-texto); }
.grade th a:hover { color: var(--primaria); }
.grade th .ms { font-size: 15px; color: var(--texto-3); }
.grade td { padding: 10px 8px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; font-size: 12.5px; }
.grade td.curto { white-space: nowrap; }
.grade tr:hover td { background: var(--linha-hover); }
.grade td.num, .grade th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grade td.acoes-linha { white-space: nowrap; text-align: right; width: 1%; }
.grade .ico { color: var(--neutro-texto); padding: 2px 3px; background: none; border: 0; cursor: pointer;
  border-radius: 4px; transition: color var(--transicao), background var(--transicao); }
.grade .ico.editar { color: var(--primaria); }
.grade .ico:hover { color: var(--primaria-forte); background: var(--primaria-suave); text-decoration: none; }
.grade td.sel, .grade th.sel { width: 32px; }
.grade .vazio { text-align: center; color: var(--texto-2); padding: 18px; }
.grade tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 1px solid var(--borda); }

/* Chips de situação: fundo suave + texto escuro do mesmo tom + contorno discreto */
.status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 500;
  background: var(--neutro-suave); color: var(--neutro-texto);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.status.CALCULADO, .status.ENVIADO { background: var(--aviso-suave); color: var(--aviso-texto);
  box-shadow: inset 0 0 0 1px rgba(217,119,6,.22); }
.status.FECHADO, .status.ACEITO { background: var(--sucesso-suave); color: var(--sucesso-texto);
  box-shadow: inset 0 0 0 1px rgba(21,128,61,.20); }
.status.ADVERT { background: var(--advert-suave); color: var(--advert-texto); box-shadow: inset 0 0 0 1px rgba(77,124,15,.22); }
.status.REJEITADO { background: var(--erro-suave); color: var(--erro-texto); box-shadow: inset 0 0 0 1px rgba(220,38,38,.20); }
.status.PENDENTE { background: var(--info-suave); color: var(--info-texto); box-shadow: inset 0 0 0 1px rgba(43,108,176,.20); }
.status.SUBST { background: var(--subst-suave); color: var(--subst-texto); box-shadow: inset 0 0 0 1px rgba(124,58,237,.20); }
.status.EXCLUIDO { background: var(--neutro-suave); color: var(--neutro-texto); text-decoration: line-through; }
.status.ALERTA { background: var(--alerta-suave); color: var(--alerta-texto); box-shadow: inset 0 0 0 1px rgba(234,88,12,.22); }

/* Selo da conferência (CONFORME / ATENÇÃO / PENDÊNCIAS) */
.selo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px;
  border-radius: 4px; margin-right: 8px; border: 1.5px solid currentColor; }
.selo.grande { font-size: 16px; padding: 6px 14px; border-width: 2px; }
.selo-conforme { color: var(--sucesso-texto); background: var(--sucesso-suave); }
.selo-atencao { color: var(--aviso-texto); background: var(--aviso-suave); }
.selo-pendencias { color: var(--erro-texto); background: var(--erro-suave); }
@media print { .nao-imprimir { display: none !important; } }

.rodape-lista { display: flex; align-items: center; gap: 10px; padding: 12px 2px 0; flex-wrap: wrap; }
.rodape-lista .registros { margin-right: auto; color: var(--texto-2); }
.paginacao { display: flex; gap: 4px; align-items: center; }
.paginacao a, .paginacao span { min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--borda);
  border-radius: var(--raio); color: var(--texto); background: var(--cartao); padding: 0 6px; text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao); }
.paginacao a:hover { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria-texto); }
.paginacao .atual { background: var(--primaria); color: var(--texto-invertido); border-color: var(--primaria);
  box-shadow: 0 1px 2px rgba(47,93,138,.3); }
.paginacao .desab { color: var(--texto-3); background: var(--superficie-2); }
.rodape-lista select, .rodape-lista input { height: 30px; border: 1px solid var(--borda-campo); border-radius: var(--raio);
  padding: 0 6px; font: inherit; color: var(--texto); background: var(--cartao); }
.rodape-lista input { width: 52px; }

/* ---------- menu Ações ---------- */
.acoes-menu { position: relative; }
.acoes-menu .painel-suspenso { right: 0; left: auto; min-width: 320px; }
.acoes-menu button.item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 14px;
  font: inherit; cursor: pointer; color: var(--texto); transition: background var(--transicao); }
.acoes-menu button.item:hover { background: var(--primaria-suave); color: var(--primaria-texto); }

/* ---------- formulário ---------- */
.abas { display: flex; background: var(--lateral); border-radius: var(--raio) var(--raio) 0 0; overflow-x: auto; }
.abas button { background: none; border: 0; color: var(--lateral-texto); padding: 11px 18px; cursor: pointer; font: inherit;
  font-weight: 500; border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--transicao), background var(--transicao); }
.abas button:hover { color: var(--texto-invertido); background: rgba(255,255,255,.04); }
.abas button:focus-visible { outline-offset: -3px; outline-color: var(--lateral-marca); }
.abas button.ativa { color: var(--texto-invertido); border-bottom-color: var(--lateral-destaque); background: var(--lateral-ativo-fundo); }
.abas button.com-erro { color: #fecaca; }
.aba { display: none; padding: 16px 4px 4px; }
.aba.ativa { display: block; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.campos .item label.rotulo { display: block; font-size: 11.5px; color: var(--texto-2); margin-bottom: 3px; letter-spacing: .01em; }
.campos .item.largo { grid-column: 1 / -1; }
.campos .item .dica { font-size: 11px; color: var(--texto-2); margin-top: 3px; }
.campos .item.erro .campo { border-color: var(--erro); }
.campos .item.erro .campo:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.25); }
.campos .item .erros { color: var(--erro); font-size: 11.5px; margin-top: 3px; }
.campos .item.marcar { display: flex; align-items: flex-start; gap: 8px; padding-top: 18px; }
.campos .item.marcar label.rotulo { margin: 0; font-size: 12.5px; color: var(--texto); }
.erros-gerais { background: var(--erro-suave); color: var(--erro-texto); border-radius: var(--raio); padding: 8px 12px; margin-bottom: 12px;
  box-shadow: inset 3px 0 0 var(--erro); }
.erros-gerais ul { margin: 0; padding-left: 18px; }
.chave { appearance: none; width: 34px; height: 18px; border-radius: 9px; background: var(--borda-campo); position: relative;
  cursor: pointer; flex: none; margin: 0; transition: background .15s; }
.chave::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--cartao);
  top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 2px rgba(15,23,42,.25); }
.chave:checked { background: var(--primaria); }
.chave:checked::after { left: 18px; }
.chave:disabled { opacity: .6; }
.botoes-form { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--borda);
  margin-top: 16px; flex-wrap: wrap; }
.exibir { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; background: var(--superficie-2);
  border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--borda-suave); }
.exibir small { display: block; color: var(--texto-2); font-size: 11px; letter-spacing: .01em; }

/* ---------- home e processos ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card-num { background: var(--cartao); border-radius: var(--raio); padding: 14px; display: flex; gap: 12px; align-items: center;
  box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none !important;
  transition: box-shadow var(--transicao), transform var(--transicao); }
.card-num:hover { box-shadow: var(--sombra-2); color: var(--texto); }
.card-num .ms { font-size: 28px; color: var(--primaria); background: var(--primaria-suave); border-radius: 50%; padding: 8px; }
/* Contadores da página inicial: todos numa linha só, cada um com seu tom suave */
.cards.linha { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cards.linha .card-num { padding: 12px; gap: 10px; min-width: 0; border-top: 3px solid var(--tom, var(--primaria)); }
.cards.linha .card-num .ms { font-size: 24px; color: var(--tom, var(--primaria)); background: var(--tom-suave, var(--primaria-suave)); }
.cards.linha .card-num small { display: block; line-height: 1.25; }
.cards.linha .card-num:nth-child(6n+1) { --tom: #2f5d8a; --tom-suave: #e4ecf5; }
.cards.linha .card-num:nth-child(6n+2) { --tom: #2e7d4f; --tom-suave: #e2f2e8; }
.cards.linha .card-num:nth-child(6n+3) { --tom: #b0473f; --tom-suave: #f8e6e4; }
.cards.linha .card-num:nth-child(6n+4) { --tom: #b07415; --tom-suave: #fbf0dc; }
.cards.linha .card-num:nth-child(6n+5) { --tom: #2b7a85; --tom-suave: #e0f1f3; }
.cards.linha .card-num:nth-child(6n+6) { --tom: #556477; --tom-suave: #e9edf2; }
.card-num b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-num small { color: var(--texto-2); }
/* Contadores compactos (Painel de envio do eSocial): os 6 numa linha só em telas largas */
.cards.compactos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cards.compactos .card-num { padding: 8px 10px; gap: 8px; min-width: 0; }
.cards.compactos .card-num .ms { font-size: 20px; padding: 6px; }
.cards.compactos .card-num b { font-size: 18px; line-height: 1.1; }
.cards.compactos .card-num small { display: block; font-size: 11.5px; line-height: 1.2; }
/* Uma linha só (como na Home), quantos cartões houver. */
@media (min-width: 1000px) { .cards.compactos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.duas { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--borda-suave); }
.lista-simples li:last-child { border: 0; }
/* Painel de envio do eSocial: navegação por mês, filtro por situação e detalhe do evento */
.nav-eventos { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; }
.nav-mes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtro-situacao { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--borda);
  border-radius: 999px; color: var(--texto); text-decoration: none; font-size: 13px; background: var(--cartao);
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao); }
.chip-filtro:hover { border-color: var(--primaria); color: var(--primaria-texto); text-decoration: none; }
.chip-filtro.ativo { border-color: var(--primaria); background: var(--primaria-suave); color: var(--primaria-texto);
  box-shadow: inset 0 0 0 1px var(--primaria); }
.lote-linha { align-items: flex-start; }
.lote-resultado { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.lote-resultado .status { white-space: nowrap; text-decoration: none; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--linha-hover); }
.btn.desab { opacity: .45; pointer-events: none; box-shadow: none; }
.detalhe-evento { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.detalhe-evento dt { color: var(--texto-2); }
.detalhe-evento dd { margin: 0; word-break: break-word; }
.bloco-xml { margin: 10px 0; }
.bloco-xml summary { cursor: pointer; color: var(--primaria-texto); font-weight: 500; }
.bloco-xml summary:hover { color: var(--primaria); }
.bloco-xml pre { max-height: 380px; overflow: auto; background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--texto); }
.passos { counter-reset: passo; list-style: none; padding: 0 6px 0 0; margin: 0; max-height: 268px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--borda-campo) transparent; }
.passos li { counter-increment: passo; display: flex; gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--borda-suave); }
.passos li::before { content: counter(passo); width: 22px; height: 22px; border-radius: 50%; background: var(--primaria-suave);
  color: var(--primaria-texto); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.passos li.ok::before { content: "✓"; background: var(--sucesso-suave); color: var(--sucesso-texto); }
.passos li.erro::before { content: "!"; background: var(--erro-suave); color: var(--erro-texto); }
.passos li.erro small { color: var(--vermelho); }
.passos li.atencao::before { content: "!"; background: var(--aviso-suave); color: var(--aviso-texto); }
.passos li.atencao small { color: var(--amarelo); }
.passos li span { flex: 1; }
.form-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.form-inline input[type=date] { width: 150px; }

/* ---------- lançamentos ---------- */
.lanc { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
.lanc .pessoas { max-height: calc(100vh - 170px); overflow-y: auto; padding: 6px 0; }
.lanc .pessoas input { margin: 0 10px 8px; width: calc(100% - 20px); }
.lanc .pessoas a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--texto);
  border-left: 3px solid transparent; transition: background var(--transicao); }
.lanc .pessoas a:hover { background: var(--superficie-hover); text-decoration: none; }
.lanc .pessoas a.atual { background: var(--primaria-suave); border-left-color: var(--primaria); font-weight: 500; color: var(--primaria-texto); }
.lanc .pessoas .qtd { background: var(--primaria); color: var(--texto-invertido); border-radius: 9px; font-size: 11px; padding: 0 7px;
  height: 18px; display: grid; place-items: center; }
.grade td .campo { height: 30px; }

/* ---------- login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 20% 10%, #2a4f74 0%, transparent 60%), linear-gradient(135deg, var(--lateral), #13261d); }
.caixa-login { background: var(--cartao); width: 360px; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(2,6,23,.45); }
.caixa-login .cab { background: var(--modulo); color: var(--texto-invertido); padding: 18px 22px; font-weight: 500; font-size: 16px;
  display: flex; gap: 10px; align-items: center; letter-spacing: -.005em;
  background-image: linear-gradient(90deg, var(--modulo), var(--modulo-2)); }
.caixa-login form { padding: 22px; }
.caixa-login label { display: block; font-size: 12px; color: var(--texto-2); margin: 10px 0 4px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 56px 1fr; }
  .app .marca span:not(.ms), .app .marca small, .app .modulo span:not(.ms), .app .menu .rotulo,
  .app .menu .seta, .app .menu li > ul { display: none; }
  .duas, .lanc { grid-template-columns: 1fr; }
  .topo .rotulo-topo { display: none; }
}
@media print {
  .lateral, .topo, .barra, .rodape-lista, .trilha form { display: none !important; }
  .app { display: block; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   TEMA ESCURO (inspirado no visual do numera.co: preto neutro, linhas finas,
   cinzas, botão principal claro em pílula e azul suave de destaque).
   Para voltar ao tema claro: apague daqui até o fim do arquivo, ou restaure painel.css.claro.bak.
   ===================================================================== */
:root {
  color-scheme: dark;
  --branco: #ffffff;
  --primaria: #8fb4f2;
  --primaria-forte: #b3cdf7;
  --primaria-texto: #a9c6f5;
  --primaria-suave: #182031;
  --foco: #8fb4f2;
  --foco-anel: rgba(143,180,242,.35);

  --fundo: #08080a;
  --cartao: #121215;
  --superficie-2: #18181c;
  --superficie-hover: #1d1d22;
  --linha-hover: #19191e;

  --borda: #26262b;
  --borda-campo: #66666f;
  --borda-suave: #1e1e23;

  --texto: #ececf0;
  --texto-2: #a5a5ac;
  --texto-3: #6e6e78;
  --texto-invertido: #0b0b0d;

  --lateral: #0c0c0e;
  --lateral-2: #08080a;
  --lateral-texto: #a5a5ac;
  --lateral-texto-forte: #e4e4e8;
  --lateral-texto-3: #84848c;
  --lateral-ativo: #ffffff;
  --lateral-hover: rgba(255,255,255,.05);
  --lateral-ativo-fundo: rgba(255,255,255,.08);
  --lateral-destaque: #8fb4f2;
  --lateral-selo: #1f1f24;
  --lateral-marca: #8fb4f2;
  --modulo: #16161b;
  --modulo-2: #1b2230;

  --sucesso: #15803d; --sucesso-suave: #0f2a1b; --sucesso-fundo: #0d1f15; --sucesso-texto: #6ee7a0;
  --aviso: #f59e0b;   --aviso-suave: #2a2010;   --aviso-fundo: #1d170b;   --aviso-texto: #fcd34d;
  --erro: #dc2626;    --erro-suave: #2a1214;    --erro-fundo: #1f0f10;    --erro-texto: #fca5a5;
  --info: #2563eb;    --info-suave: #121c30;    --info-fundo: #0f1626;    --info-texto: #93b8f5;
  --alerta-suave: #2b1a0e; --alerta-texto: #fdba74;
  --advert-suave: #1c2610; --advert-texto: #bef264;
  --subst-suave: #0f2427;  --subst-texto: #67e8f9;
  --neutro-suave: #1c1c21; --neutro-texto: #a5a5ac;
  --estrela: #fbbf24;

  /* nomes antigos: nos templates --vermelho/--verde aparecem como cor de texto/ícone,
     então no escuro são tons claros; os botões usam --erro/--sucesso abaixo */
  --vermelho: #f87171;
  --verde: #4ade80;
  --azul: var(--info);
  --escuro: #26262c;
  --acoes: #2e2e35;
  --cinza: #2a2a30;
  --amarelo: var(--aviso);

  --raio: 8px;
  --sombra-1: 0 0 0 1px #1f1f24, 0 1px 2px rgba(0,0,0,.5);
  --sombra-2: 0 0 0 1px #34343c, 0 8px 24px rgba(0,0,0,.6), 0 0 28px rgba(143,180,242,.06);
  --sombra-3: 0 0 0 1px #2a2a2e, 0 24px 60px rgba(0,0,0,.7);
  --sombra-topo: inset 0 -1px 0 #1c1c1f;
  --sombra-cartao: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px #1f1f24, 0 1px 2px rgba(0,0,0,.4);
}
body {
  background: radial-gradient(1200px 500px at 70% -10%, rgba(143,180,242,.06), transparent 60%), var(--fundo); }
::selection { background: rgba(143,180,242,.3); color: #fff; }

/* estrutura */
.lateral { box-shadow: inset -1px 0 0 #1c1c1f; }
.marca { color: var(--branco); }
.modulo { color: var(--branco); box-shadow: inset 0 -1px 0 #23232a, inset 0 1px 0 #1c1c1f; }
.topo { background: rgba(12,12,14,.92); }
.cartao, .card-num { background: linear-gradient(180deg, #141418, #111114); }
.cartao h2 { color: var(--texto); }
.avatar { box-shadow: 0 0 0 2px #1f1f24; }
.empresa-topo small.fechada, .campos .item .erros { color: var(--erro-texto); }
.aviso-fechada a, .mensagens a { color: inherit; }

/* botões: principal claro em pílula; coloridos com texto branco */
.btn { border-radius: 999px; background: #f2f2f4; background-image: none; color: var(--texto-invertido);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.btn:hover { filter: none; background: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 20px rgba(255,255,255,.08); }
.btn.escuro, .btn.acoes { background: var(--escuro); color: var(--branco); box-shadow: 0 0 0 1px #34343c; }
.btn.acoes { background: var(--acoes); }
.btn.azul { background: var(--info); color: var(--branco); }
.btn.verde { background: var(--sucesso); color: var(--branco); }
.btn.vermelho { background: var(--erro); color: var(--branco); }
.btn.escuro:hover, .btn.acoes:hover, .btn.azul:hover, .btn.verde:hover, .btn.vermelho:hover { filter: brightness(1.12); }
.btn.cinza { background: var(--cinza); color: var(--texto); }
.btn.cinza:hover { background: #34343b; }
.btn.contorno { background: transparent; color: var(--texto); border-color: rgba(255,255,255,.22); box-shadow: none; }
.btn.contorno:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }

/* campos */
.campo, select.campo, .busca input, .painel-referencia select, .painel-referencia input,
.rodape-lista select, .rodape-lista input { background: #0d0d10; color: var(--texto); }
.campo:hover, .busca input:hover { border-color: #85858f; }
.campo:disabled { background: #141417; }
.chave::after { background: #e4e4e8; }

/* tabela */
.tabela-wrap { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.grade th { background: #16161a; color: var(--texto-2); border-bottom-color: var(--borda); }
.grade th a { color: var(--texto-2); }
.grade th a:hover { color: var(--texto); }
.grade .ico.editar { color: var(--primaria); }
.grade .ico:hover { background: rgba(143,180,242,.12); }
.bloco-xml pre { background: #0b0b0d; }

/* chips, paginação, abas */
.status { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.chip { box-shadow: inset 0 0 0 1px rgba(143,180,242,.25); }
.chip-filtro { background: transparent; }
.chip-filtro.ativo { background: var(--primaria-suave); }
.paginacao a, .paginacao span { background: transparent; }
.paginacao .atual { box-shadow: 0 0 16px rgba(143,180,242,.25); }
.paginacao .desab { background: transparent; }
.abas { background: #0e0e11; box-shadow: inset 0 -1px 0 #1f1f24; }
.abas button:hover, .abas button.ativa { color: var(--branco); }
.lanc .pessoas a.atual { color: var(--primaria-texto); }

/* contadores da página inicial: tons escuros com ícone claro */
.cards.linha .card-num:nth-child(6n+1) { --tom: #8fb4f2; --tom-suave: #182031; }
.cards.linha .card-num:nth-child(6n+2) { --tom: #6ee7a0; --tom-suave: #0f2a1b; }
.cards.linha .card-num:nth-child(6n+3) { --tom: #fca5a5; --tom-suave: #2a1214; }
.cards.linha .card-num:nth-child(6n+4) { --tom: #fcd34d; --tom-suave: #2a2010; }
.cards.linha .card-num:nth-child(6n+5) { --tom: #67e8f9; --tom-suave: #0f2427; }
.cards.linha .card-num:nth-child(6n+6) { --tom: #c4c4cc; --tom-suave: #1f1f24; }
.cards.linha .card-num { border-top-color: transparent; box-shadow: inset 0 2px 0 var(--tom), var(--sombra-1); }
.cards.linha .card-num:hover { box-shadow: inset 0 2px 0 var(--tom), var(--sombra-2); }

/* login */
.tela-login { background: radial-gradient(900px 500px at 50% 0%, rgba(143,180,242,.12), transparent 60%),
  linear-gradient(180deg, #16161b, #0a0a0d 60%, #000); }
.caixa-login { box-shadow: 0 0 0 1px #2a2a2e, 0 24px 60px rgba(0,0,0,.7); }
.caixa-login .cab { color: var(--branco); background: #16161b; background-image: linear-gradient(90deg, #16161b, #1b2230);
  box-shadow: inset 0 -1px 0 #26262b; }

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
}
/* Andamento do robô das guias */
.robo-status { padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--primaria); background: var(--primaria-suave); }
.robo-status.aguardando { border-left-color: var(--aviso-texto); }
.robo-status.ok { border-left-color: #2e7d4f; }
.robo-status.erro { border-left-color: var(--erro-texto); }