/*
 * CADU Cobranças — identidade do design system do CADU / UniCidades.
 *
 * Os nomes das variaveis sao os que esta folha ja usava; o que mudou foram os
 * VALORES, que agora vem dos tokens do DS (src/styles/tokens.css do pacote
 * uds). Trocar so os valores manteve as centenas de regras abaixo intactas.
 *
 * Azul real #0D1272 e o primario. Laranja brasa #EF6912 e acento, usado com
 * parcimonia - destaque, aviso e item ativo, nunca como cor de fundo larga.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --fundo: #F1F2F7;
  --superficie: #FFFFFF;
  --afundado: #EEF0F4;
  --tinta: #1F2937;
  --tinta-suave: #475064;
  --apagado: #5B6473;
  --linha: #E1E4ED;
  --linha-fraca: #EEF0F4;
  /*
   * --borda era usada em todo o CSS novo (filtros, modais, atendimento) sem
   * nunca ter sido declarada: as bordas caiam em currentColor e saiam na cor
   * do texto. E a borda de controle do DS, um tom mais firme que --linha.
   */
  --borda: #CBD0DC;

  --acento: #0D1272;
  --acento-forte: #090D52;
  --acento-lavado: rgba(13, 18, 114, 0.08);
  --acento-medio: rgba(13, 18, 114, 0.16);
  /* Azul impulso: links e controles secundarios. */
  --acento-vivo: #213DFC;

  --alerta: #EF6912;
  --alerta-lavado: rgba(239, 105, 18, 0.14);
  --erro: #C0392B;
  --erro-lavado: rgba(192, 57, 43, 0.10);
  --ok: #2B730D;
  --ok-lavado: rgba(76, 177, 88, 0.16);

  --fonte: 'Inter', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Archivo', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  /* body 14/20 do DS, em vez dos 15/1.55 anteriores. */
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

/*
 * Titulos em Archivo 600, como o DS define. Titulo de pagina em minusculas e
 * convencao do produto ("indicadores", "escolha a cidade") - aqui aplicada
 * so ao h1, que e o titulo da tela.
 */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--tinta);
}
/*
 * O DS escreve titulo de pagina em minusculas, mas por convencao de redacao,
 * nao por CSS: text-transform aqui destruiria as siglas do dominio (CADU,
 * CADWEB, D.A., CNPJ). Os titulos ficam como foram escritos.
 */
h1 { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.005em; }
h3 { font-size: 19px; line-height: 26px; letter-spacing: -0.005em; }

/* ---------- estrutura ---------- */

/*
 * No DS, a unica area sempre escura e a sidebar: gradiente azul real ->
 * roxo, com glow e pontilhado. Esta plataforma usa barra superior em vez de
 * sidebar, entao a barra herda esse tratamento.
 */
header.topo {
  background:
    radial-gradient(620px 420px at 0% 100%, var(--glow, rgba(91, 112, 253, 0.38)), transparent 70%),
    linear-gradient(160deg, #0D1272 0%, #2A1F8F 100%);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Pontilhado de 14px, como na sidebar do produto. */
header.topo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
header.topo { position: relative; }
header.topo > * { position: relative; }

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 0;
  letter-spacing: -0.01em;
}

/* Logo oficial: nunca redesenhar a marca em tipografia. */
.marca img { height: 26px; width: auto; display: block; }

.marca span { display: block; line-height: 1.2; }

.marca small {
  display: block;
  font-family: var(--fonte);
  font-weight: 700;
  font-size: 10px;
  opacity: 0.72;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav.menu { display: flex; gap: 2px; flex-wrap: wrap; }

/* Modulo: o titulo abre a lista de telas daquele grupo. */
.modulo { position: relative; }

.modulo .titulo-modulo {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modulo .titulo-modulo i { font-style: normal; font-size: 10px; opacity: 0.7; }
.modulo .titulo-modulo:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.modulo.aberto .titulo-modulo { color: #fff; border-bottom-color: #fff; font-weight: 600; }

.itens-modulo {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
}

/* Abre no hover e tambem no foco por teclado. */
.modulo:hover .itens-modulo,
.modulo:focus-within .itens-modulo { display: block; }

.itens-modulo a,
.itens-modulo .em-breve {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: none;
}

.itens-modulo a:hover { background: var(--acento-lavado); color: var(--acento-forte); }
.itens-modulo a.ativo { color: var(--acento); font-weight: 600; background: var(--acento-lavado); }

.itens-modulo .em-breve { color: var(--apagado); cursor: default; }
.itens-modulo .em-breve small {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--afundado); padding: 1px 6px; border-radius: 3px; margin-left: 6px;
}

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -0.015em; }
h2 { font-size: 17px; margin: 28px 0 12px; letter-spacing: -0.01em; }
.sub { color: var(--apagado); margin: 0 0 20px; font-size: 14px; }

/* ---------- blocos ---------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha-fraca);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.numeros {
  display: grid;
  /* 230px e o minimo para "R$ 999.999.999,99" caber numa linha na menor
     fonte aceitavel. Abaixo disso o numero ficaria pequeno demais para ser
     o destaque do card. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.numero {
  background: var(--superficie);
  border: 1px solid var(--linha-fraca);
  border-left: 4px solid var(--acento);
  border-radius: 5px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* Transforma o card em unidade de medida para o numero: e o que permite a
     fonte acompanhar a largura disponivel em vez de ser fixa. */
  container-type: inline-size;
}

/*
 * O numero nunca quebra em duas linhas.
 *
 * Quebrar transformava "R$ 44.671.693,83" em "R$ 44.671.693,8 / 3", que se le
 * como outro valor. Entre encolher e partir, encolher e o unico que continua
 * dizendo a verdade.
 *
 * O teto de 10.5cqi saiu de medicao, nao de estimativa: "R$ 999.999.999,99"
 * em tabular-nums ocupa 9.1x o tamanho da fonte. Com o card no minimo de
 * 230px (193px uteis), 10.5% disso da ~20px e o valor cabe com folga; em
 * cards largos o min() segura em 27px para o numero nao virar titulo.
 */
.numero b {
  font-size: min(27px, 10.5cqi);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Alinhado a direita, como valor em relatorio: com os cards da grade todos
     da mesma largura, as casas decimais caem na mesma coluna e da para
     comparar magnitude de relance. */
  text-align: right;
  /*
   * Rede de seguranca para valor acima do previsto.
   *
   * A fonte foi dimensionada ate "R$ 999.999.999,99". Passando disso - um
   * municipio grande chega la -, cortar em silencio seria o pior resultado
   * possivel: "R$ 1.234.567.890,12" cortado vira "R$ 1.234.567.890,1", que
   * se le como um valor dez vezes menor. Com as reticencias, quem olha ve
   * que falta numero.
   */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valores monetarios sao os mais longos; a margem extra evita que um card
   mais estreito que a media deixe o cifrao encostar na borda. */
.numero b.valor { font-size: min(23px, 9.5cqi); }

.numero span {
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--apagado);
}

/* Linha secundaria: o detalhe que antes nao cabia em lugar nenhum. */
.numero small {
  text-align: right;
  font-size: 12.5px;
  color: var(--tinta-suave);
  line-height: 1.4;
  margin-top: 2px;
}

.numero.destaque { border-left-color: var(--alerta); }
.numero.destaque b { color: var(--alerta); }

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

/* Vale para todo campo de digitacao. Listar tipo a tipo deixou email e
   password de fora, que ficavam com o estilo padrao do navegador e
   desalinhavam o formulario. */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
select, textarea {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--tinta);
  width: 100%;
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--acento);
  border-radius: 4px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

button:hover:not(:disabled) { background: var(--acento-forte); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secundario { background: transparent; color: var(--acento); }
button.secundario:hover:not(:disabled) { background: var(--acento-lavado); }

/* Campo de formulário: rótulo sempre acima do controle.
   label é inline por padrão, então sem o display:block o rótulo curto
   ficava ao lado do campo e o longo acima - exatamente o desalinhamento
   que apareceu entre "Nome completo" e "E-mail". */
.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--apagado);
  margin-bottom: 5px;
}

.campo .dica { font-size: 12.5px; color: var(--apagado); margin: 5px 0 0; line-height: 1.45; }

/* Grade de campos que se reorganiza sozinha conforme a largura. */
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px;
}

.linha-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha-form > input { flex: 1; min-width: 220px; }

/* ---------- tabelas ---------- */

.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--apagado);
  border-bottom: 1px solid var(--linha);
  padding: 0 12px 8px 0;
  white-space: nowrap;
}

td {
  border-bottom: 1px solid var(--linha-fraca);
  padding: 9px 12px 9px 0;
  vertical-align: top;
}

/* ---------- ordenacao por coluna ----------
 * Duas setas por coluna, sempre visiveis: a direcao e uma escolha, nao o
 * resultado de adivinhar em que estado a coluna esta.
 *
 * Ficam reservadas mesmo apagadas - se aparecessem so no hover, a largura da
 * coluna mudaria com o mouse e a tabela inteira dancaria.
 */
.ordenar {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

.ordenar button {
  /* Reset: o botao padrao do tema tem fundo, borda e altura minima. */
  all: unset;
  cursor: pointer;
  font-size: 8px;
  line-height: 1;
  color: var(--apagado);
  opacity: 0.5;
  /* Area de clique maior que a seta, sem ocupar espaco no cabecalho. */
  padding: 1px 2px;
  margin: -1px -2px;
}

.ordenar button:hover { opacity: 0.8; }
.ordenar button.ativa { opacity: 1; color: var(--acento-vivo); }
.ordenar button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-radius: 2px;
  opacity: 1;
}

/* A coluna ordenada ganha destaque no rotulo, nao so na seta: num grid de
   vinte colunas a seta sozinha e facil demais de perder de vista. */
th[aria-sort] { color: var(--texto); }

th:last-child, td:last-child { padding-right: 0; }
tr.atencao td { background: var(--alerta-lavado); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; }

/* ---------- etiquetas ---------- */

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.tag.ok { background: var(--acento-lavado); color: var(--acento-forte); }
.tag.aviso { background: var(--alerta-lavado); color: var(--alerta); }
.tag.ruim { background: var(--erro-lavado); color: var(--erro); }
.tag.neutro { background: var(--afundado); color: var(--tinta-suave); }
.tag.cache { background: #e7eefa; color: #1d4a8f; }

/* Seletor de qualidade dentro do balao de contato: compacto, para nao virar
   o elemento principal de uma linha que existe para mostrar o numero. */
select.qualidade {
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 11.5px;
  width: auto;
  max-width: 170px;
  border-radius: 4px;
}

/* ---------- progresso ---------- */

.barra {
  height: 8px;
  background: var(--afundado);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0 6px;
}

.barra > div {
  height: 100%;
  background: var(--acento);
  width: 0;
  transition: width 0.25s ease;
}

.log {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--afundado);
  border-radius: 4px;
  padding: 12px 14px;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.7;
}

/* ---------- avisos ---------- */

.aviso {
  border-left: 3px solid var(--alerta);
  background: var(--alerta-lavado);
  padding: 11px 15px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 16px;
  font-size: 14px;
}

.aviso.falha { border-left-color: var(--erro); background: var(--erro-lavado); }
.aviso.bom { border-left-color: var(--acento); background: var(--acento-lavado); }

.vazio { color: var(--apagado); padding: 28px 0; text-align: center; font-size: 14px; }

a { color: var(--acento); }
a.cnpj { font-family: var(--mono); font-size: 13px; text-decoration: none; }
a.cnpj:hover { text-decoration: underline; }

.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 20px; }
.par div { padding: 5px 0; border-bottom: 1px solid var(--linha-fraca); font-size: 14px; }
.par dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--apagado); }
.par dd { margin: 0; }

/* ---------- usuário no topo ---------- */

.usuario {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.usuario span { line-height: 1.25; text-align: right; }
.usuario small { display: block; font-size: 11px; opacity: 0.7; }
.usuario a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 13px; }
.usuario a:hover { color: #fff; text-decoration: underline; }

.usuario button {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  padding: 5px 12px;
  font-size: 13px;
}

.usuario button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }

/* lista de permissões por grupo */
.grupo-func { margin-bottom: 16px; }
.grupo-func h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--apagado); margin: 0 0 6px;
}
.func {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 6px 0; border-bottom: 1px solid var(--linha-fraca);
}
.func input { width: auto; margin-top: 3px; }
.func b { font-weight: 600; font-size: 14px; }
.func small { display: block; color: var(--apagado); font-size: 12.5px; }

/* ---------- cliente ativo no topo ---------- */

.cliente-ativo {
  display: block;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  padding: 5px 12px;
  line-height: 1.25;
  font-size: 13px;
  font-weight: 600;
  max-width: 320px;
  /* Sem isso o municipio longo era cortado no cabecalho. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.cliente-ativo:hover { background: rgba(255, 255, 255, 0.24); text-decoration: none; }
.cliente-ativo small { display: block; font-size: 10px; font-weight: 400; opacity: 0.75;
                       text-transform: uppercase; letter-spacing: 0.05em; }
.cliente-ativo em { font-style: normal; font-weight: 400; opacity: 0.8; font-size: 12px; }
.cliente-ativo.sem { background: var(--alerta); border-color: transparent; }

/* ---------- lista de clientes na tela de selecao ---------- */

.escolha {
  display: grid;
  /* 320px porque razao social de prefeitura e longa e precisa caber. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.escolha button {
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acento);
  color: var(--tinta);
  padding: 16px 18px;
  font-weight: 400;
  line-height: 1.4;
  /*
   * Botao nao quebra linha por padrao em parte dos navegadores, e era isso
   * que cortava o nome do municipio. Com normal + overflow-wrap, nome longo
   * ocupa duas linhas em vez de sumir.
   */
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
}

.escolha button:hover:not(:disabled) { background: var(--acento-lavado); }
.escolha button b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.3;
}
.escolha button small { display: block; color: var(--apagado); font-size: 13px; line-height: 1.35; }
.escolha button .tag { margin-top: 8px; }
.escolha button.atual { border-left-color: var(--alerta); background: var(--alerta-lavado); }

/* ---------- abas ---------- */

.abas {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--linha);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.abas button {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--apagado);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 16px;
  margin-bottom: -2px;
}

.abas button:hover:not(.ativa) { color: var(--tinta); background: var(--afundado); }

.abas button.ativa {
  color: var(--acento);
  border-bottom-color: var(--acento);
  background: transparent;
}

.abas button span {
  font-weight: 400;
  font-size: 13px;
  color: var(--apagado);
  margin-left: 6px;
}

/* Última coluna fixa: com a tabela rolando na horizontal, os botões de ação
   ficavam atrás da rolagem e pareciam não existir. */
th.acoes, td.acoes {
  position: sticky;
  right: 0;
  background: var(--superficie);
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  padding-left: 12px;
}

tr.atencao td.acoes { background: var(--alerta-lavado); }

/* ---------- selecao em lote (Enriquecimento de dados) ---------- */

/* Coluna estreita e fixa: a caixa nao deve competir com o nome pelo espaco. */
th.sel, td.sel { width: 36px; padding-right: 0; text-align: center; }
th.sel input, td.sel input { width: auto; margin: 0; cursor: pointer; }

/*
 * A barra gruda no topo porque a lista e longa: marcar 20 registros e ter de
 * rolar de volta ate o botao seria o caminho mais curto para o erro de
 * mandar o lote errado.
 */
.barra-selecao {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--acento);
  border-radius: 10px;
  background: var(--acento-lavado);
}

.barra-selecao > span:first-child { font-size: 14px; }
.barra-selecao b { font-size: 16px; }
.acoes-lote { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

/* O custo vai no proprio botao: a decisao de gastar cota se toma ali. */
.acoes-lote button { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.acoes-lote button small { font-weight: 400; opacity: 0.75; font-size: 11.5px; }

/* ---------- construtor de filtros ---------- */

/*
 * O aninhamento precisa ser legivel de relance: cada nivel ganha uma barra a
 * esquerda e um fundo levemente diferente, senao uma arvore de tres niveis
 * vira um bloco so e o operador E/OU perde o escopo.
 */
.grupo {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--fundo);
}
.grupo.raiz { border-left-width: 3px; margin: 0; }
.grupo[data-nivel="1"] { background: var(--afundado); }
.grupo[data-nivel="2"] { background: var(--fundo); }

.cabecalho-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabecalho-grupo .espaco { flex: 1; }
.cabecalho-grupo .explica { font-size: 12.5px; color: var(--apagado); }
.cabecalho-grupo button { padding: 5px 10px; font-size: 13px; }

/* E / OU como um par de botoes: a juncao e uma escolha, nao um texto. */
.juncao { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; }
.juncao button { border: 0; border-radius: 0; background: transparent; color: var(--apagado); font-weight: 600; }
.juncao button.ativa { background: var(--acento); color: #fff; }

.itens-grupo { margin-top: 8px; }

.regra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px dashed var(--borda);
}
.regra:first-child { border-top: 0; }
.regra select, .regra input { width: auto; min-width: 150px; flex: 0 1 auto; }
.regra select[data-papel="operador"] { min-width: 130px; }
.regra .valores { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regra .ate { font-size: 13px; color: var(--apagado); }
.regra .ajuda { font-size: 12px; color: var(--apagado); flex-basis: 100%; }

button.remover { color: var(--erro); padding: 4px 9px; font-size: 15px; line-height: 1; }
button.remover:hover:not(:disabled) { background: var(--erro-lavado); }

.vazio-grupo { font-size: 13px; color: var(--apagado); margin: 6px 0; }

/* ---------- estrategias ---------- */
.topo-estrategia { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.topo-estrategia > div:first-child { flex: 1; min-width: 240px; }
.acoes-estrategia { display: flex; gap: 8px; flex-wrap: wrap; }
.cartao.apagada { opacity: 0.72; }

/* ---------- grade da prévia do filtro ---------- */

/*
 * São 24 colunas: sem fixar o cabeçalho e a primeira coluna, rolar para a
 * direita faz perder de vista de quem é a linha e o que cada número significa.
 */
#grade-previa table { white-space: nowrap; }

#grade-previa thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--fundo);
  box-shadow: inset 0 -1px 0 var(--borda);
}

#grade-previa thead th:first-child,
#grade-previa tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fundo);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#grade-previa thead th:first-child { z-index: 4; }
#grade-previa tbody tr:hover td { background: var(--afundado); }
#grade-previa tbody tr:hover td:first-child { background: var(--afundado); }

/* Link que se comporta como botao secundario, para ficar na mesma barra. */
a.botao-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
}
a.botao-link:hover { background: var(--acento-lavado); }

/* ---------- modal de inspeção (dialog nativo) ---------- */

/*
 * O display fica SO na regra [open]. Declarar display na regra base
 * sobrescreve o `dialog:not([open]) { display: none }` do navegador, e o
 * modal passa a ocupar espaco no fim da pagina mesmo fechado.
 */
dialog#ficha {
  width: min(1100px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#ficha:not([open]) { display: none; }
dialog#ficha[open] { display: flex; flex-direction: column; }
dialog#ficha::backdrop { background: rgba(15, 23, 42, 0.55); }

.topo-ficha {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--borda);
}
.topo-ficha > div:first-child { flex: 1; min-width: 0; }
.topo-ficha button { font-size: 20px; line-height: 1; padding: 4px 12px; }

#abas-ficha { margin: 0; padding: 0 22px; border-bottom: 1px solid var(--borda); }

/* O corpo rola; o cabeçalho e as abas ficam parados. */
.corpo-ficha { padding: 18px 22px 24px; overflow-y: auto; }
.corpo-ficha h3 { margin: 18px 0 8px; font-size: 15px; }
.corpo-ficha h3:first-child { margin-top: 0; }

/* Cadastro em duas colunas: são muitos campos curtos. */
.campos-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 18px;
  margin: 0;
}
.campos-ficha > div {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--borda);
}
.campos-ficha dt { flex: 0 0 42%; color: var(--apagado); font-size: 13px; }
.campos-ficha dd { margin: 0; font-size: 13.5px; font-weight: 500; word-break: break-word; }

/* ---------- sócios ---------- */
.cartao-socio {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--afundado);
}
.topo-socio { display: flex; gap: 16px; align-items: flex-start; }
.topo-socio > div:first-child { flex: 1; min-width: 0; }
.topo-socio small { color: var(--apagado); }

.contatos-socio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--borda);
}
.contato-socio {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--fundo);
  border: 1px solid var(--borda);
}
.contato-socio small { color: var(--apagado); margin-left: 4px; }
/* Não perturbe é restrição legal: precisa saltar aos olhos antes de ligar. */
.contato-socio.bloqueado { border-color: var(--erro); background: var(--erro-lavado); }

/* O modal de exportação usa a mesma moldura da ficha. */
dialog#exportacao {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#exportacao:not([open]) { display: none; }
dialog#exportacao[open] { display: flex; flex-direction: column; }
dialog#exportacao::backdrop { background: rgba(15, 23, 42, 0.55); }

/* ---------- atendimento ---------- */
.cartao-atendimento {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--afundado);
}
/* O aberto é onde se digita agora: precisa saltar da lista do histórico. */
.cartao-atendimento.aberto { border-color: var(--acento); background: var(--fundo); }

/* A linha à esquerda dá a leitura de diário, de cima para baixo. */
.linha-evolucao {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--borda);
}
.evolucao { padding: 6px 0; }
.evolucao-meta { font-size: 12px; color: var(--apagado); }
.evolucao-texto { font-size: 14px; white-space: pre-wrap; word-break: break-word; }

.acoes-atendimento { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.acoes-atendimento textarea { width: 100%; resize: vertical; }

/* ---------- resultado da cobrança ---------- */
dialog#resultado {
  width: min(900px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#resultado:not([open]) { display: none; }
dialog#resultado[open] { display: flex; flex-direction: column; }
dialog#resultado::backdrop { background: rgba(15, 23, 42, 0.55); }

/*
 * Barra proporcional ao valor, não à contagem: é a leitura que importa para
 * decidir onde insistir.
 */
.barra-funil {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--afundado);
  margin: 0 0 20px;
}
.barra-funil .fatia { display: block; height: 100%; }
.barra-funil .fatia:hover { filter: brightness(0.92); }

dialog#protocolos {
  width: min(1180px, 96vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#protocolos:not([open]) { display: none; }
dialog#protocolos[open] { display: flex; flex-direction: column; }
dialog#protocolos::backdrop { background: rgba(15, 23, 42, 0.55); }

dialog#novas {
  width: min(1100px, 96vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.numero.clicavel { cursor: pointer; }
.numero.clicavel:hover { border-color: var(--acao); background: var(--superficie); }

dialog#congelamento {
  width: min(560px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#congelamento:not([open]) { display: none; }

dialog#agendar {
  width: min(520px, 94vw);
  padding: 0; border: 0; border-radius: 14px;
  background: var(--fundo); color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#agendar:not([open]) { display: none; }
dialog#agendar[open] { display: flex; flex-direction: column; }
dialog#agendar::backdrop { background: rgba(15, 23, 42, 0.6); }
dialog#congelamento[open] { display: flex; flex-direction: column; }
dialog#congelamento::backdrop { background: rgba(15, 23, 42, 0.6); }

dialog#novas:not([open]) { display: none; }
dialog#novas[open] { display: flex; flex-direction: column; }
dialog#novas::backdrop { background: rgba(15, 23, 42, 0.55); }

/* ---------- ficha de retorno de consulta PF ---------- */
.ficha-pf { border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); }

.cabeca-ficha {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linha);
  background: var(--afundado);
  border-radius: 8px 8px 0 0;
}
.cabeca-ficha > div:first-child { flex: 1; min-width: 240px; }
.cabeca-ficha h2 { margin: 0; font-size: 19px; }
.cabeca-ficha .sub { margin: 4px 0 0; }

.gravado-ficha {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
}
.gravado-ficha small {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--apagado);
}
.gravado-ficha small:last-child { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Cada bloco é uma pergunta: quem é, por onde falo, onde mora. */
.bloco-ficha { padding: 16px 20px; border-top: 1px solid var(--linha-fraca); }
.bloco-ficha:first-of-type { border-top: 0; }
.bloco-ficha h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-family: var(--fonte);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
}
/* A contagem ao lado do título evita abrir o bloco para saber se tem algo. */
.bloco-ficha h3 .contagem {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: var(--acento-lavado);
  color: var(--acento);
  font-size: 11px;
  letter-spacing: 0;
}
.nada-ficha { margin: 0; font-size: 13px; color: var(--apagado); }

.endereco-ficha { padding: 8px 0; border-top: 1px dashed var(--linha-fraca); }
.endereco-ficha:first-child { border-top: 0; padding-top: 0; }
.endereco-ficha small { display: block; color: var(--apagado); font-size: 12.5px; margin-top: 2px; }

.campos-ficha .dica-campo {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--apagado);
  letter-spacing: 0.04em;
}
/* Nota de contexto no topo da ficha, antes dos blocos. */
.nota-ficha {
  margin: 0;
  padding: 10px 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
  background: var(--alerta-lavado);
  border-bottom: 1px solid var(--linha-fraca);
}
.nota-ficha code { font-size: 11.5px; }

/* ---------- selos de provedor ---------- */
/*
 * Três letras lado a lado (Z, C, W) em vez de três etiquetas de texto: a
 * coluna cabe na tabela e a leitura é de relance. O título explica cada uma.
 */
.selos-provedor { display: inline-flex; gap: 3px; }

.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: help;
  border: 1px solid transparent;
}
.selo.ok     { background: var(--ok-lavado);     color: var(--ok);     border-color: var(--ok); }
.selo.neutro { background: var(--afundado);      color: var(--apagado); border-color: var(--linha); }
/* "Ainda não consultado" é ausência, não falha: fica apagado e sem borda. */
.selo.vago   { background: transparent;          color: var(--linha);  border-color: var(--linha-fraca); }

/* ===========================================================================
 * Painel de recuperação
 * ===========================================================================
 *
 * A paleta categórica abaixo é a única do produto e vale só para gráfico. Os
 * sete matizes passaram nos seis testes de leitura — faixa de luminosidade,
 * croma mínimo, separação sob daltonismo (deutan e tritan), separação em
 * visão normal e contraste contra o branco do cartão — e a ordem é fixa: a
 * cor acompanha o tributo, não a posição dele no ranking, senão filtrar
 * repintaria as barras que sobraram e a leitura se perderia.
 *
 * O cinza no fim não é um oitavo matiz: é a cor reservada ao "Outros", que
 * deve recuar em vez de competir.
 */
:root {
  --cat1: #2F5BD8; --cat2: #EF6912; --cat3: #0C8F7D; --cat4: #8B46C8;
  --cat5: #3F8F29; --cat6: #D1407E; --cat7: #A8761A; --cat8: #98A1B3;
  /* Sequencial: um matiz só, claro a escuro. Para o que é ordenado. */
  --seq1: #C9D2F7; --seq2: #A3B2EE; --seq3: #7B8FE2;
  --seq4: #556FD2; --seq5: #364FB4; --seq6: #1E2F86;
}

/* `.dica` do produto só vale dentro de `.campo`; nos cartões do painel ela
   é a legenda do gráfico e precisa da regra própria. */
.painel .cartao .dica { font-size: 12.5px; color: var(--apagado); margin: 0 0 12px; line-height: 1.45; }

.painel-recorte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 16px;
}
.painel-recorte .rot {
  font-size: 11.5px; font-weight: 600; color: var(--apagado);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.painel-recorte .nenhum { color: var(--apagado); font-size: 13px; }
.painel-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 6px;
  background: var(--acento-lavado); color: var(--acento);
  border: 1px solid var(--acento-medio); border-radius: 999px;
  padding: 3px 5px 3px 10px; font-size: 12.5px; font-weight: 500;
}
.painel-chip button {
  all: unset; cursor: pointer; width: 17px; height: 17px; line-height: 16px;
  text-align: center; border-radius: 50%; color: var(--acento); font-size: 13px;
}
.painel-chip button:hover { background: var(--acento-medio); }
.painel-chip button:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 1px; }

.painel-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.painel-kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 11px 13px; }
.painel-kpi .t {
  font-size: 11px; color: var(--apagado); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.painel-kpi .n {
  font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600;
  letter-spacing: -0.015em; margin-top: 3px; font-variant-numeric: tabular-nums;
}
.painel-kpi .s { font-size: 11.5px; color: var(--apagado); margin-top: 1px; }
.painel-kpi.destaque { border-color: rgba(43, 115, 13, 0.42); background: var(--ok-lavado); }
.painel-kpi.destaque .n { color: var(--ok); }

.painel-grade { display: grid; gap: 14px; margin-bottom: 14px; grid-template-columns: repeat(3, 1fr); }

/* A altura sai do viewBox; fixar px brigaria com a escala e cortaria o
   gráfico. O teto de largura impede que, numa coluna só, a barra vire pôster. */
.painel svg { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; overflow: visible; }
.painel svg#cascata { max-width: none; }
.painel .fantasma { fill: #E7EAF2; }
.painel .barra { cursor: pointer; }
.painel .rotulo-barra { font-size: 12px; fill: var(--tinta-suave); }
.painel .valor-barra { font-size: 12px; fill: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.painel .eixo { font-size: 10.5px; fill: var(--apagado); }
.painel .apagada { opacity: 0.32; }
.painel .alvo { cursor: pointer; fill: transparent; }
.painel .alvo:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 1px; }

table.painel-matriz { border-collapse: separate; border-spacing: 3px; width: 100%; }
table.painel-matriz th {
  font-size: 11px; color: var(--apagado); font-weight: 600; text-align: left; padding: 0 3px 2px;
}
table.painel-matriz th.ch { text-align: center; }
table.painel-matriz td { padding: 0; }
.painel-cel {
  width: 100%; border: none; border-radius: 7px; padding: 8px 4px; cursor: pointer;
  font-family: var(--fonte); color: #fff; text-align: center; line-height: 1.25;
}
.painel-cel .v { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; display: block; }
.painel-cel .q { font-size: 10px; opacity: 0.85; }
/* Célula clara pede tinta escura: o branco sumiria nela. */
.painel-cel.claro { color: var(--tinta-suave); }
.painel-cel:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }

.painel-legenda {
  display: flex; flex-wrap: wrap; gap: 4px 13px; margin-top: 10px;
  font-size: 11.5px; color: var(--tinta-suave);
}
.painel-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.painel-legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.painel-nota { font-size: 12px; color: var(--apagado); margin: 10px 0 0; line-height: 1.5; }
.painel-nota b { color: var(--tinta-suave); font-weight: 600; }

#painel-dica {
  position: fixed; pointer-events: none; z-index: 60; background: #15192B; color: #fff;
  font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); max-width: 270px; opacity: 0;
  transition: opacity 0.09s;
}
#painel-dica.ver { opacity: 1; }
#painel-dica b { font-weight: 600; }
#painel-dica .m { color: #A9B3D0; font-size: 11px; }

@media (max-width: 1100px) {
  .painel-kpis { grid-template-columns: repeat(3, 1fr); }
  .painel-grade { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .painel-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- nome clicável que abre a ficha ---------- */
/*
 * `all: unset` zera o botão temático antes de reconstruí-lo como texto. O nome
 * precisa continuar PARECENDO o nome — negrito, na cor da tinta, alinhado com
 * o resto da célula —, e só o sublinhado pontilhado conta que ele abre algo.
 * Um botão com cara de botão em toda linha do grid viraria ruído.
 */
.nome-ficha {
  all: unset;
  cursor: pointer;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--borda);
  text-underline-offset: 3px;
}
.nome-ficha:hover { color: var(--acento-vivo); text-decoration-color: var(--acento-vivo); }
.nome-ficha:focus-visible {
  outline: 2px solid var(--acento-vivo);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A ficha de pessoa reaproveita a moldura do modal de inspeção. */
dialog#ficha-pessoa {
  width: min(1100px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#ficha-pessoa:not([open]) { display: none; }
dialog#ficha-pessoa[open] { display: flex; flex-direction: column; }
dialog#ficha-pessoa::backdrop { background: rgba(15, 23, 42, 0.55); }

/* Selo de provedor dentro da ficha, com a data da consulta embaixo. */
.provedor-ficha {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 8px 8px 0;
  background: var(--superficie);
  font-size: 12.5px;
}
.provedor-ficha b { font-size: 13px; }
.provedor-ficha small { color: var(--apagado); }
/* Provedor ainda não consultado é oportunidade, não falta: fica em destaque. */
.provedor-ficha.disponivel { border-color: var(--ok); background: var(--ok-lavado); }

/* O modal de vínculo reaproveita a moldura da ficha de inspeção. */
dialog#vinculo {
  width: min(560px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--fundo);
  color: var(--tinta);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
dialog#vinculo:not([open]) { display: none; }
dialog#vinculo[open] { display: flex; flex-direction: column; }
dialog#vinculo::backdrop { background: rgba(15, 23, 42, 0.55); }
#vinculo-lista { max-height: 46vh; overflow-y: auto; }