/* SIGA_ME — estilo. Tema claro/escuro por variáveis; responsivo; impressão paisagem. */

:root {
  /* Paleta do e-Transparência (decisão do usuário em 21/08/2026): as três
     instâncias passam a ter o MESMO azul institucional — a cor por município
     saiu de cena. Os nomes das variáveis foram mantidos para o resto do CSS
     continuar valendo; só os valores mudaram.
       ground #F4F7F9 · surface #FFFFFF · ink #1A2C38 · muted #5C7080
       primary #0B5394 · primary-soft #E7F0F8 · line #DCE5EB · gold #A87817 */
  --fundo: #f4f7f9; --cartao: #ffffff; --texto: #1a2c38; --texto-suave: #5c7080;
  --borda: #dce5eb; --primaria: #0b5394;
  --primaria-claro: #e7f0f8;
  --destaque: #083e70; --alerta: #a87817; --critico: #b3261e; --ok: #1b7f4b;
  /* cor do texto SOBRE o azul do botão: no tema escuro o --destaque vira um
     azul CLARO, e o branco de antes ficava ilegível (medido: 1,9:1) */
  --sobre-destaque: #ffffff;
  --sombra: 0 1px 4px rgba(0,0,0,.08);
}
[data-tema="escuro"] {
  --fundo: #0d1520; --cartao: #141f2c; --texto: #ecf2f7; --texto-suave: #9ab0c2;
  --borda: #243546; --primaria: #6fb0e4;
  --primaria-claro: #1a2c3e;
  --destaque: #8fc4ee; --alerta: #d9b45b; --critico: #f87171; --ok: #5bc98e;
  --sobre-destaque: #08131f;
  --sombra: 0 1px 4px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
/* Tipografia do e-Transparência. A reserva importa: no modo PROGRAMA (.exe,
   sem internet) a fonte do Google não carrega e o sistema assume. */
h1, h2, h3, .topo h1, .valor-grande, .card .num, .card-total .num {
  font-family: Lexend, "Segoe UI", system-ui, sans-serif;
}
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 "Source Sans 3", "Segoe UI", system-ui, -apple-system,
        sans-serif;
}
main { max-width: 1180px; margin: 0 auto; padding: 12px; }

/* topo — modelo do e-Transparência (22/08/2026): barra de acessibilidade
   azul-escura, faixa clara com título e selo da carga, e a navegação com os
   MESMOS menus de antes, agora como abas sobre fundo claro. */
.barra-acess { background: var(--destaque); color: #fff; font-size: .82rem; }
[data-tema="escuro"] .barra-acess { background: #0a1929; color: var(--texto); }
.barra-acess .miolo {
  max-width: 1180px; margin: 0 auto; display: flex; justify-content: flex-end;
  align-items: center; gap: 6px; padding: 5px 16px;
}
.barra-acess button {
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  color: inherit; border-radius: 7px; padding: 2px 10px; font-size: .82rem;
}
.barra-acess button:hover { background: rgba(255,255,255,.15); }
.topo { background: var(--cartao); }
.topo-miolo {
  max-width: 1180px; margin: 0 auto; padding: 14px 16px 8px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.topo-titulo { display: flex; align-items: center; gap: 12px; }
.logo-ente {
  height: 46px; width: 46px; object-fit: contain; background: #fff;
  border: 1px solid var(--borda); border-radius: 10px; padding: 3px;
}
.topo h1 { margin: 0; font-size: 21px; letter-spacing: .5px; color: var(--texto); }
.topo-sub { font-size: 13px; color: var(--texto-suave); }
.selo {
  margin-left: auto; background: var(--primaria-claro); color: var(--destaque);
  border-radius: 12px; padding: 7px 14px; font-size: 12px; line-height: 1.4;
  text-align: center; font-weight: 500; max-width: 340px;
}
[data-tema="escuro"] .selo { color: var(--primaria); }
/* [PEDIDO DO USUÁRIO 08/09/2026] "quero que tenha um botão de sair".
   Ele existia, mas a barra rolava junto com a página: no celular a tela tem
   4.598 px, e sair exigia voltar ao topo. Agora a faixa de AÇÕES gruda no
   alto — o cabeçalho com brasão, nome do ente e selo da carga continua
   rolando, que é o que ocupa altura. */
.topo-nav {
  max-width: 1180px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 30;
  background: var(--cartao); border-bottom: 1px solid var(--borda);
}
.carga-info { font-size: 12px; }

/* elementos gerais */
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: var(--sombra); padding: 16px; margin: 14px 0;
}
h2 { margin: 0 0 12px; font-size: 18px; color: var(--destaque); }
h3 { margin: 12px 0 6px; font-size: 15px; }
button {
  background: var(--destaque); color: var(--sobre-destaque); border: 0;
  border-radius: 7px;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
/* quem navega por teclado precisa VER onde está; o navegador tira o contorno
   padrão quando a cor de fundo é trocada */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 2px;
}
button.secundario { background: transparent; color: var(--destaque); border: 1px solid var(--destaque); }
.topo-acoes button { background: rgba(255,255,255,.15); }
input, select, textarea {
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda);
  border-radius: 7px; padding: 8px 10px; font-size: 14px;
}
textarea { resize: vertical; font-family: inherit; box-sizing: border-box; }
.oculto { display: none !important; }
.nota { font-size: 12.5px; color: var(--texto-suave); margin: 6px 0; }
.aviso {
  max-width: 1180px; margin: 10px auto 0; padding: 10px 14px; border-radius: 8px;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-size: 14px;
}
.aviso.erro { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
[data-tema="escuro"] .aviso { background: #3a2e10; color: #fcd34d; border-color: #6b5518; }
[data-tema="escuro"] .aviso.erro { background: #3a1515; color: #fca5a5; border-color: #7f2a2a; }

/* assistente */
.pergunta-linha { display: flex; gap: 8px; }
.pergunta-linha input { flex: 1; font-size: 15px; min-width: 0; }
/* min-width:0 é o conserto: campo de texto em flex nasce com
   min-width:auto (~214px) e empurrava o botão Perguntar para fora da
   tela do celular — medido em 19/08/2026: linha de 332px precisando
   de 414px. */
#btn-voz, #btn-imagem { padding: 8px 12px; }
.previa-imagem {
  display: flex; gap: 12px; align-items: center; margin: 8px 0;
  padding: 8px; border: 1px dashed var(--borda); border-radius: 9px;
}
.previa-imagem img {
  max-height: 96px; max-width: 150px; border-radius: 6px;
  border: 1px solid var(--borda);
}
.previa-pdf-icone { font-size: 40px; line-height: 1; }

/* --- receita arrecadada --- */
.rec-cartoes {
  display: grid; gap: 10px; margin-bottom: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rec-cartao {
  background: var(--primaria-claro); border-radius: 9px; padding: 10px 12px;
  border-left: 4px solid var(--borda);
}
.rec-cartao .rotulo { font-size: 11.5px; letter-spacing: .3px; opacity: .85; }
.rec-cartao .num { font-size: 21px; font-weight: 700; }
.rec-cartao .nota { font-size: 11.5px; margin-top: 2px; }
/* a líquida é o número que responde "quanto o município arrecadou" */
.rec-cartao.destaque { border-left-color: var(--ok); }
/* a extra NÃO é receita do ente — cor de alerta para não ser somada por engano */
.rec-cartao.extra { border-left-color: var(--alerta); }
/* previsão é estimativa: borda tracejada para não se confundir com realizado */
.rec-cartao.previsao {
  border-left-color: var(--destaque); border-left-style: dashed;
}
.rec-cartao.previsao .num { font-style: italic; }

/* previsão até dezembro */
td.prev, .rec-lista .prev { color: var(--destaque); font-style: italic; }
tr.linha-total td { border-top: 2px solid var(--borda); background: var(--primaria-claro); }
.rec-memoria {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: var(--primaria-claro); font-size: 12.5px; line-height: 1.5;
}
.rec-memoria > div + div { margin-top: 4px; }

/* lista de barras (nome · barra · valor · % do total) */
.rec-lista { margin-top: 4px; }
.rec-linha {
  display: grid; align-items: center; gap: 8px; padding: 3px 0;
  grid-template-columns: 22px minmax(110px, 1.6fr) minmax(60px, 1.4fr) auto 44px;
  border-bottom: 1px solid var(--borda);
}
.rec-linha:hover { background: var(--primaria-claro); }
.rec-linha.marcada { background: var(--primaria-claro); }
.rec-check { display: flex; align-items: center; cursor: pointer; }
.rec-check input { cursor: pointer; margin: 0; }
/* valor DIGITADO pelo analista: nunca pode se confundir com o calculado */
.prev-manual {
  font-style: normal; font-weight: 700;
  border-bottom: 2px dotted var(--alerta);
}
.prev-input {
  width: 130px; text-align: right; font-size: 12.5px; padding: 3px 6px;
}
.selo-fnde {
  display: inline-block; background: var(--ok); color: #fff;
  border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}
.rec-busca-linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px;
}
.rec-busca { flex: 1; min-width: 200px; font-size: 13px; }
.rec-selecao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--primaria-claro); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; margin: 6px 0;
}
.rec-nome {
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.rec-barra { background: transparent; height: 15px; }
.rec-barra span {
  display: block; height: 100%; border-radius: 3px;
  background: var(--ok); opacity: .55;
}
/* dedução/estorno: barra vermelha — redutora nunca parece arrecadação */
.rec-barra span.neg { background: var(--critico); opacity: .6; }
.rec-valor { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.rec-pct {
  font-size: 11.5px; opacity: .7; text-align: right;
  font-variant-numeric: tabular-nums;
}
.rec-outros { font-size: 12px; opacity: .75; padding: 6px 0 2px; }
@media (max-width: 640px) {
  .rec-linha { grid-template-columns: 20px minmax(80px, 1.4fr) minmax(36px, 1fr) auto 38px; }
  .rec-nome, .rec-valor { font-size: 11.5px; }
}
.lido-doc {
  background: var(--primaria-claro); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; margin: 6px 0;
}
.ok-item { color: var(--ok); font-weight: 700; }
.erro-item { color: var(--critico); font-weight: 600; font-size: 12px; }
#btn-voz.gravando { background: var(--critico); animation: pulso 1s infinite; }
@keyframes pulso { 50% { filter: brightness(1.35); } }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.sugestoes button {
  background: var(--primaria-claro); color: var(--destaque); font-size: 12.5px;
  padding: 5px 10px; border-radius: 14px;
}
.sug-x { margin-left: 7px; opacity: .55; font-size: 11px; }
.sug-x:hover { opacity: 1; color: var(--critico); }
.sugestoes .sug-limpar {
  background: transparent; color: var(--texto-suave);
  border: 1px dashed var(--borda);
}
.sugestoes .sug-limpar:hover { color: var(--critico); border-color: var(--critico); }
#conversa { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.msg { border-radius: 10px; padding: 10px 14px; max-width: 92%; }
.msg-usuario { align-self: flex-end; background: var(--primaria-claro); }
.msg-app { align-self: stretch; background: var(--fundo); border: 1px solid var(--borda); }
.msg-app h4 { margin: 0 0 6px; font-size: 15px; color: var(--destaque); }
.valor-grande { font-size: 24px; font-weight: 700; margin: 4px 0; }
.valores-linha { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0; }
.valores-linha div { min-width: 130px; }
.valores-linha .rotulo { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; }
.valores-linha .num { font-size: 17px; font-weight: 600; }
.base-calculo { font-size: 12px; color: var(--texto-suave); margin-top: 6px; }
.msg-acoes { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.msg-acoes button { font-size: 12.5px; padding: 5px 10px; }
.selo-cache { font-size: 11px; color: var(--texto-suave); }
.proximas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px; }
.proximas button {
  background: var(--primaria-claro); color: var(--destaque); font-size: 12px;
  padding: 4px 10px; border-radius: 14px;
}
.avaliacao { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.avaliacao button {
  background: transparent; border: 1px solid var(--borda); font-size: 13px;
  padding: 2px 9px; line-height: 1.4;
}
.avaliacao button:hover { border-color: var(--destaque); }

/* filtros e cards */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.filtros label { display: flex; flex-direction: column; font-size: 12px; color: var(--texto-suave); gap: 3px; }
.filtros label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.filtro-texto input { min-width: 180px; }
/* O <select> nativo se dimensiona pela MAIOR opção: fontes com descrição de
   180+ caracteres esticavam o campo pela tela inteira. O teto abaixo mantém a
   grade alinhada — o texto longo é truncado pelo próprio campo e continua
   inteiro na lista aberta e no title. */
.filtros label { max-width: 260px; }
.filtros select, .filtros input { max-width: 100%; }
.filtros select { text-overflow: ellipsis; }

/* caixa de seleção pesquisável (substitui o datalist) */
.combo { position: relative; display: inline-flex; align-items: stretch; }
.combo input { padding-right: 26px; width: 100%; }
.combo-seta {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px;
  padding: 0; background: transparent; color: var(--texto-suave);
  border: 0; border-radius: 0 6px 6px 0; font-size: 12px; cursor: pointer;
}
.combo-seta:hover { color: var(--destaque); filter: none; }
.combo-lista {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 60;
  margin: 0; padding: 4px; list-style: none; min-width: 100%;
  max-width: 460px; max-height: 260px; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.combo-lista li {
  padding: 6px 9px; border-radius: 6px; font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-lista li:hover, .combo-lista li.ativo {
  background: var(--primaria-claro); color: var(--destaque);
}
.combo-lista li.combo-vazio {
  color: var(--texto-suave); cursor: default; font-size: 12px; white-space: normal;
}
.combo-lista li.combo-vazio:hover { background: transparent; color: var(--texto-suave); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.card { background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; }
.card .rotulo { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; }
.card .num { font-size: 18px; font-weight: 700; margin-top: 2px; }
.card.neg .num { color: var(--critico); }
/* saldo de contrato negativo (17/09/2026): o aditivo não soma no valor, e é
   quase sempre ele — a cor chama a atenção, a ressalva explica */
td.num.negativo { color: var(--critico); }

/* Modo SUS — uma emenda por bloco recolhível (01/10/2026) */
.sus-emenda { border: 1px solid var(--borda); background: var(--cartao);
  margin-top: 10px; }
.sus-emenda > summary { cursor: pointer; padding: 8px 11px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sus-emenda > summary:hover { background: var(--fundo-suave, #f2f4f7); }
.sus-emenda > summary .valor { font-weight: 400; color: var(--suave, #666);
  white-space: nowrap; }
.sus-emenda .corpo { padding: 0 11px 12px; }
.sus-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; }
@media (max-width: 900px) { .sus-colunas { grid-template-columns: 1fr; } }
/* CARTÃO CLICÁVEL — leva ao que está por trás do número (01/10/2026).
   Serve ao apontamento do Modo SUS e aos números do Modo Contratos. */
.cartao-clicavel { cursor: pointer; }
.cartao-clicavel:hover { border-color: currentColor; }
.cartao-clicavel .acao-pdf { float: right; margin: -2px 0 6px 12px;
  font-size: 12px; padding: 3px 9px; }
.valores-linha > .cartao-clicavel:hover { outline: 1px solid var(--borda); }
/* cartões de totais do painel: um por informação (Pago e A pagar) */
.card-total { padding: 14px 16px; }
.card-total .num { font-size: 26px; line-height: 1.2; margin-top: 4px; }
.card-total .nota { margin: 2px 0 0; font-size: 11.5px; }
.card-apagar { border-left: 4px solid var(--alerta); }
.apagar-card { margin-top: 10px; }
.apagar-card table { margin-top: 6px; }

/* abas e tabelas */
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; align-items: center; }
.abas button { background: transparent; color: var(--texto-suave); border: 1px solid var(--borda); }
.abas button.ativa { background: var(--destaque); color: #fff; border-color: var(--destaque); }
.abas-exportar { margin-left: auto; display: flex; gap: 6px; }
.abas-exportar button, .modal-exportar button.secundario {
  font-size: 12px; padding: 4px 10px; color: var(--destaque);
  border-color: var(--destaque);
}
.modal-exportar { display: flex; gap: 6px; align-items: center; }
.nivel-sel { font-size: 13px; color: var(--texto-suave); }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
th, td { padding: 7px 9px; border-bottom: 1px solid var(--borda); text-align: left; }
th { font-size: 12px; text-transform: uppercase; color: var(--texto-suave); }
.tabela-rolagem th { cursor: pointer; user-select: none; }
.tabela-rolagem th:hover { color: var(--destaque); }
th.ord-asc::after { content: " ▲"; }
th.ord-desc::after { content: " ▼"; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td { vertical-align: top; }
tr.pendencia td { color: var(--alerta); font-weight: 600; }
tbody tr:hover { background: var(--primaria-claro); }
.tabela-rolagem { overflow-x: auto; }
td .mini {
  font-size: 10px; line-height: 1.35; color: var(--texto-suave);
  max-width: 360px;
}
td .mini a { color: var(--destaque); text-decoration: underline; }
button.ver-lanc { font-size: 11.5px; padding: 3px 8px; background: transparent;
  color: var(--destaque); border: 1px solid var(--destaque); }

/* painel flutuante com a evolução mensal do credor */
.cel-credor { cursor: help; }
.cel-credor:hover, .cel-credor:focus { color: var(--destaque); outline: none; }
.painel-credor {
  position: fixed; z-index: 70; width: 372px; padding: 10px 12px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: none;
}
/* fixado por clique: aceita mouse e mostra as exportações */
.painel-credor.fixado { pointer-events: auto; border-color: var(--destaque); }
.pc-topo { display: flex; align-items: start; gap: 8px; }
.pc-titulo {
  font-size: 12.5px; font-weight: 600; color: var(--destaque); flex: 1;
  margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-fechar {
  background: transparent; color: var(--texto-suave); border: 0;
  padding: 0 2px; font-size: 14px; line-height: 1;
}
.pc-acoes { margin-top: 8px; }
.pc-acoes button { font-size: 11.5px; padding: 4px 9px; }
.pc-dica { font-size: 11px; color: var(--texto-suave); margin-top: 6px; }
.grafico-evolucao { width: 100%; height: 148px; display: block; }
.grafico-evolucao .g-valor { font-size: 6.5px; fill: var(--texto); }
.grafico-evolucao .g-liq { fill: var(--primaria-claro); }
.grafico-evolucao .g-pago { fill: var(--destaque); }
.grafico-evolucao .g-eixo { stroke: var(--borda); stroke-width: 1; }
.grafico-evolucao .g-rotulo { font-size: 7px; fill: var(--texto-suave); }
.pc-legenda {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px;
  color: var(--texto-suave); margin-top: 2px;
}
.pc-legenda i {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px;
}
.pc-legenda .p-liq { background: var(--primaria-claro); border: 1px solid var(--borda); }
.pc-legenda .p-pago { background: var(--destaque); }
.pc-total { font-size: 11.5px; color: var(--texto); margin-top: 5px; }

/* acesso e contas */
.campos-acesso { display: flex; flex-direction: column; gap: 8px; }
.campos-acesso input { width: 100%; }
.form-usuario {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0; padding: 10px; border: 1px dashed var(--borda);
  border-radius: 8px;
}
.form-usuario input[type="text"], .form-usuario input[type="email"],
.form-usuario input[type="password"] { flex: 1 1 150px; min-width: 130px; }
.form-usuario .check { display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-suave); }
/* separa o bloco do assistente das contas dentro do mesmo modal (08/09/2026) */
.assist-titulo { margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--borda); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.modal-caixa { background: var(--cartao); border-radius: 12px; max-width: 1100px;
  width: 100%; max-height: 88vh; overflow: auto; padding: 16px; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; }
.modal-topo button { background: transparent; color: var(--texto); font-size: 17px; }

.rodape { text-align: center; font-size: 12px; color: var(--texto-suave);
  padding: 14px; border-top: 1px solid var(--borda); margin-top: 20px; }

@media (max-width: 640px) {
  .msg { max-width: 100%; }
  .filtros label { flex: 1 1 45%; }
  .topo h1 { font-size: 18px; }
}

/* ==================== auditoria (só administrador) ==================== */
.aud-dimensao { margin: 14px 0 6px; font-size: 15px; color: var(--primaria); }
.aud-check { border: 1px solid var(--borda); border-radius: 8px;
  margin: 6px 0; padding: 0; background: var(--fundo-cartao); }
.aud-check summary { cursor: pointer; padding: 8px 10px; font-size: 13.5px;
  list-style-position: inside; }
.aud-check .aud-detalhe { padding: 4px 12px 10px; border-top: 1px solid var(--borda); }
.aud-selo { display: inline-block; min-width: 64px; text-align: center;
  padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
  color: #fff; background: #777; }
.aud-selo.aud-ok { background: #1c7c31; }
.aud-selo.aud-atencao { background: #a66a00; }
.aud-selo.aud-falha { background: #b3261e; }
.aud-selo.aud-nv, .aud-selo.aud-na { background: #666; }
.num.aud-ok { color: #1c7c31; }
.num.aud-atencao { color: #a66a00; }
.num.aud-falha { color: #b3261e; }
.aud-tabela td { padding: 2px 8px 2px 0; font-size: 12.5px; }
.aud-lista { margin: 6px 0 4px 18px; font-size: 12.5px; }
.aud-lista li { margin: 2px 0; }
.aud-base { font-style: italic; }
/* ==================== Modo Portal (PNTP) ====================
   Lista longa (96 itens): cada critério é um bloco com selos de tipo,
   origem e situação. Selo colorido em vez de tabela — a informação é
   qualitativa, e coluna estreita no celular espremeria o texto. */
.portal-dim { font-size: 14px; margin: 16px 0 6px; }
.portal-item {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--cartao);
}
.portal-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
              margin-bottom: 4px; }
.selo-mini {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--primaria-claro); color: var(--destaque);
  white-space: nowrap;
}
.selo-esse { background: var(--critico); color: #fff; }     /* Essencial */
.selo-obri { background: var(--alerta); color: #fff; }      /* Obrigatória */
.sit-atende { background: var(--ok); color: #fff; }
.sit-parcial { background: var(--alerta); color: #fff; }
.sit-nao_atende { background: var(--critico); color: #fff; }
/* o "como atender" é a linha que transforma checklist em plano de ação:
   fica com o mesmo peso do texto do critério, não como nota de rodapé */
.portal-fazer {
  margin-top: 4px; padding-left: 10px; font-size: .93rem;
  border-left: 3px solid var(--primaria-claro); color: var(--texto);
}
.portal-ok { color: var(--ok); }
.portal-falta { color: var(--alerta); }
.portal-marcar { margin-top: 6px; }
.portal-marcar input { min-width: 140px; flex: 1 1 160px; }

/* Tarja da demonstração — âmbar, não vermelha: é aviso, não erro. */
.tarja-demo {
  background: var(--alerta); color: #fff; text-align: center;
  padding: 7px 14px; font-size: .86rem; font-weight: 600;
  line-height: 1.35;
}
body.nao-logado .tarja-demo { display: none; }

/* ==================== CAPA DE ENTRADA ====================
   [PEDIDO DO USUÁRIO 22/08/2026] "torne a versão web responsiva e moderna".
   Antes, quem não estava logado via o app inteiro por baixo de um modal
   pequeno, com um banner vermelho de "Servidor indisponível" que era só
   falta de login. Agora a entrada é uma capa de tela cheia: o app fica
   escondido (`body.nao-logado`), e a página nasce legível no celular.
   Continua sem dizer o que o sistema faz. */
body.nao-logado > *:not(.capa) { display: none !important; }
body.nao-logado { overflow: hidden; }

.capa {
  position: fixed; inset: 0; z-index: 60; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px 16px; overflow-y: auto;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--primaria-claro), transparent 70%),
    var(--fundo);
}
.capa-cartao {
  width: 100%; max-width: 420px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 16px;
  padding: clamp(20px, 5vw, 32px);
  box-shadow: 0 12px 40px rgba(11, 83, 148, .12);
  text-align: center;
}
.capa-logo {
  max-height: 76px; max-width: 60%; object-fit: contain; margin-bottom: 10px;
}
/* brasão de site oficial costuma vir com texto escuro e fundo transparente:
   sobre o cartão escuro ele some. Mesma lição do logo do topo. */
[data-tema="escuro"] .capa-logo {
  background: #fff; border-radius: 10px; padding: 6px;
}
.capa-ente {
  margin: 0; font-size: .95rem; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .04em;
}
.capa-marca {
  margin: 2px 0 0; font-size: clamp(1.7rem, 7vw, 2.1rem); color: var(--primaria);
  letter-spacing: .01em;
}
.capa-linha { margin: 2px 0 20px; color: var(--texto-suave); font-size: .92rem; }
.capa-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.capa-campo { display: flex; flex-direction: column; gap: 5px; }
.capa-campo span { font-size: .82rem; color: var(--texto-suave); }
.capa-campo input {
  width: 100%; padding: 12px 14px; font-size: 1rem;   /* 16px: o iPhone não
      dá zoom no campo focado quando a fonte é >= 16px */
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo); color: var(--texto);
}
.capa-campo input:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 1px;
  border-color: var(--primaria);
}
.capa-botao {
  margin-top: 4px; width: 100%; padding: 13px 16px; font-size: 1rem;
  border-radius: 10px; min-height: 46px;             /* alvo de toque */
}
.capa .erro-senha { margin: 14px 0 0; color: var(--critico); text-align: center; }
.capa-rodape { margin: 0; color: var(--texto-suave); font-size: .82rem; }

/* DigiSUS: cada quadro é uma seção da tela do sistema, e o título separa
   um do outro sem virar um <h2> concorrente do título do cartão */
.digisus-bloco { font-size: 14px; margin: 14px 0 4px; }

.aud-lanc { font-size: 12px; }
.aud-lanc th { white-space: nowrap; }
.aud-lanc td { padding: 3px 6px; vertical-align: top; }
.aud-empenho { font-weight: 700; white-space: nowrap; }
tr.aud-resto.oculto, li.aud-resto.oculto { display: none; }

/* auditoria mensal — formulário de envio */
.audm-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin: 10px 0 14px; }
.audm-form label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--texto-suave); }
.audm-form input[type="file"] { font-size: 12px; max-width: 260px; }
.audm-form input[type="month"] { padding: 5px 8px; border: 1px solid var(--borda);
  border-radius: 6px; background: var(--fundo-cartao); color: var(--texto); }

/* impressão paisagem — invariante do projeto */
@media print {
  @page { size: 297mm 210mm; margin: 10mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  .topo-acoes, .sugestoes, .pergunta-linha, .filtros, .abas,
  .msg-acoes, .modal, button { display: none !important; }
  .cartao { box-shadow: none; border: 1px solid #bbb; page-break-inside: avoid; }
  table { table-layout: fixed; width: 100%; font-size: 10px; }
  th, td { word-wrap: break-word; }
  .rodape { display: block; }
}

.obj-link { color: var(--primaria, #183090); cursor: pointer; text-decoration: none; }
.obj-link:hover, .obj-link:focus { text-decoration: underline; }

/* barra superior em MENUS (16/08/2026): 15 botões soltos não cabiam na tela */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  background: transparent; color: var(--texto); border-radius: 8px;
  padding: 7px 14px; font-size: 14px; white-space: nowrap;
  border: 1px solid transparent;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--primaria-claro); }
.menu[open] > summary { background: var(--primaria-claro); color: var(--destaque); font-weight: 600; }
.menu-itens {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 4px; min-width: 210px;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 6px;
}
.menu-itens button {
  background: transparent; color: var(--texto); text-align: left;
  padding: 8px 10px; font-size: 13.5px; border-radius: 6px;
}
.menu-itens button:hover { background: var(--primaria-claro); filter: none; }
@media (max-width: 760px) {
  .menu-itens { right: auto; left: 0; }
}

/* barra de andamento da atualização (sem valor = indeterminada) */
.barra-atualizacao {
  width: 100%; height: 10px; margin: 6px 0 2px;
  border: 0; border-radius: 6px; background: var(--borda);
  accent-color: var(--destaque);
}
.barra-atualizacao::-webkit-progress-bar {
  background: var(--borda); border-radius: 6px;
}
.barra-atualizacao::-webkit-progress-value {
  background: var(--destaque); border-radius: 6px; transition: width .4s;
}
.barra-atualizacao:not([value]) { animation: pulso 1.4s ease-in-out infinite; }

/* ==================== tabelas largas no celular ====================
   Medido na produção em 18/08/2026, a 390px de largura: as tabelas JÁ rolavam
   dentro da própria caixa (.tabela-rolagem) e a página não quebrava. O que
   incomodava era outra coisa — ao arrastar de lado, a coluna que IDENTIFICA a
   linha (fonte, código, credor) saía da tela e os números perdiam o dono.
   Agora ela fica presa. O fundo precisa ser opaco: sem isso o resto da linha
   passa por baixo enquanto rola. */
@media (max-width: 640px) {
  .tabela-rolagem { position: relative; }
  .tabela-rolagem table { font-size: 12px; }
  .tabela-rolagem th, .tabela-rolagem td { padding: 6px 8px; }
  .tabela-rolagem th:first-child, .tabela-rolagem td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--cartao);
    box-shadow: 1px 0 0 var(--borda);
    max-width: 44vw;          /* nome longo não pode comer a tela toda */
  }
  /* a linha sob o dedo pinta TAMBÉM a célula presa, senão ela destoa */
  .tabela-rolagem tbody tr:hover td:first-child { background: var(--primaria-claro); }
  /* números continuam sem quebrar linha, mas cabem mais colunas por tela */
  .tabela-rolagem td.num, .tabela-rolagem th.num { padding-left: 6px; }
}

/* ---- defeitos vistos nas fotos do celular (19/08/2026) ----
   1. O VALOR SAÍA CORTADO. O grid `repeat(auto-fit, minmax(155px,1fr))` cria
      duas colunas de ~174px num telefone, e "R$ 129.646.017,90" a 26px precisa
      de 225px. Medido na produção: 127px disponíveis para 225px necessários.
      Os cartões de TOTAL passam a ocupar a linha inteira (298px de sobra) —
      os cartões pequenos continuam lado a lado, que ali cabem.
   2. Números da tabela em 18px empurravam a coluna do nome e o botão para
      fora; 15px devolve espaço sem prejudicar a leitura.
   3. O cabeçalho comia 27% da tela (227px). Logo e textos menores: 181px. */
@media (max-width: 640px) {
  /* alvo de toque: botão de 26px de altura erra o dedo. Não vale para os
     botões pequenos de filtro, que são muitos por linha. */
  .cartao > button, .pergunta-linha button, .capa-botao { min-height: 40px; }
  /* Sair fica na barra de cima, sozinho entre menus: 34px erra o dedo */
  #btn-sair { min-height: 38px; padding-inline: 14px; }
  .card-total { grid-column: 1 / -1; }
  .card-total .num { font-size: clamp(18px, 6vw, 26px); }

  .tabela-rolagem td.num, .tabela-rolagem th.num { font-size: 15px; }
  /* [22/08/2026] `overflow-wrap: anywhere` era o culpado das linhas de 100px:
     ele derruba a largura MÍNIMA da coluna para a de um caractere, então a
     coluna presa encolhia para ~70px e "Transferência" saía quebrado no meio
     ("Transfer / ência"). Com `break-word` a largura mínima volta a ser a da
     maior palavra; o que não couber rola de lado, como já rolava. */
  .tabela-rolagem td:first-child {
    overflow-wrap: break-word; hyphens: auto; min-width: 118px;
  }

  /* cabeçalho novo (duas faixas) mais baixo no celular */
  .topo-miolo { padding: 8px 12px 4px; gap: 8px; }
  .logo-ente { height: 34px; width: 34px; }
  .topo h1 { font-size: 17px; }
  .topo-sub { font-size: 11px; }
  /* no celular o selo cai numa linha só para ele; `margin-left:auto` do
     desktop o empurrava para o meio, parecendo desalinhado do resto */
  .selo { font-size: 10.5px; padding: 5px 10px; max-width: 100%;
          margin-left: 0; text-align: left; }
  .topo-nav { padding: 0 12px 8px; gap: 4px; }
  .barra-acess .miolo { padding: 4px 12px; }
}

/* ---- linha da pergunta no celular (foto do usuário, 19/08/2026) ----
   O botão "Perguntar" ficava cortado na borda. Agora o campo ocupa a linha
   inteira e os três botões descem para a linha de baixo, com o principal
   esticado (230px num aparelho de 390px) — alvo de dedo, não de mouse. */
@media (max-width: 640px) {
  .pergunta-linha { flex-wrap: wrap; }
  .pergunta-linha input { flex: 1 1 100%; }
  #btn-perguntar { flex: 1; }
}

/* ---- painel SIGA × Sistema: os dois lados na mesma linha ---- */
.conf-tabela { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.conf-tabela th, .conf-tabela td {
  padding: 6px 8px; border-bottom: 1px solid var(--borda);
  font-size: 13px; vertical-align: top; }
.conf-tabela thead th {
  font-size: 11.5px; text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 2px solid var(--borda); }
.conf-tabela td.num, .conf-tabela th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-tabela .nota { font-size: 11px; margin: 2px 0 0; }
/* a diferença é o que o olho procura: cor só nela e no selo */
.conf-tabela tr.aud-falha td:nth-child(4) { color: #b3261e; }
.conf-tabela tr.aud-ok td:nth-child(4) { color: #1c7c31; }
.conf-tabela tr.aud-atencao td:nth-child(4) { color: #a66a00; }
.conf-tabela tr.conf-detalhe td { border-bottom: none; padding-top: 0; }

@media (max-width: 767px) {
  /* mesma regra das demais tabelas: rola dentro da caixa, a página não quebra */
  .conf-tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .conf-tabela .nota { white-space: normal; }
}

/* Controle de Contratos: o número vira botão — TODOS do mesmo tamanho
   (pedido do usuário, 21/08/2026: '004-2025A' e '028-2025FMAS' saíam com
   larguras diferentes e a coluna ficava serrilhada). */
.btn-contrato { min-width: 140px; text-align: center; }
#contratos-filtro { flex-wrap: wrap; align-items: center; gap: 6px; }
#contratos-filtro label { font-size: 12.5px; color: var(--texto-suave); }
#contratos-busca { min-width: 220px; flex: 1 1 220px; }

/* Uso dos usuários: a coluna de seleção que recorta o movimento por dia.
   [PEDIDO DO USUÁRIO 30/08/2026] A caixa é CONTROLE, não enfeite — por isso
   entra num painel que não usa símbolo para dizer status. A linha marcada é
   sinalizada por fundo e por barra à esquerda: cor sozinha não basta para
   quem não a distingue. */
.aud-lanc th.col-sel, .aud-lanc td.col-sel { width: 42px; text-align: center; padding: 0; }
.aud-lanc td.col-sel label { display: block; padding: 8px 12px; cursor: pointer; }
.aud-lanc td.col-sel input { width: 18px; height: 18px; cursor: pointer; }
.aud-lanc tr.sel > td { background: var(--primaria-claro); }
.aud-lanc tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--primaria); }