/* Pregio · Prospecção. Identidade: marinho e aço da Pregio, DM Sans, amarelo só no que é ação ou seleção. */
:root {
  --tinta: #0d1b33;
  --marinho: #031435;
  --marinho-2: #0b2350;
  --aco: #3f7395;
  --aco-2: #5b8fb0;
  --aco-claro: #eaf1f6;
  --linha: #e4e9f0;
  --linha-2: #d5dde7;
  --fundo: #f6f8fb;
  --branco: #ffffff;
  --suave: #667085;
  --suave-2: #98a2b3;
  /* destaque = o azul-aço da Pregio (#4B7D9B e o #E4EAF2 do site deles); no escuro, clareado */
  --destaque: #4b7d9b;
  --destaque-2: #5a8cab;
  --destaque-claro: #e4eaf2;
  --luz: #8fbcd9;
  --ok: #157f5b;
  --ok-claro: #e6f5ee;
  --erro: #c0352b;
  --erro-claro: #fdecea;
  --sim: #8a5a00;
  --sim-claro: #fff4d6;
  --e0: #eef1f5; --e1: #e3edf5; --e2: #bcd3e4; --e3: #84aecb; --e4: #4b84aa; --e5: #1f5480;
  --raio: 14px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --sombra-2: 0 10px 30px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
  --sombra-busca: 0 1px 6px rgba(32, 33, 36, .14);
  --sombra-busca-f: 0 2px 12px rgba(32, 33, 36, .2);
  --cabeca: 68px;
  --pagina: #f6f8fb; --pagina-casa: #ffffff;
  --superficie: #ffffff; --superficie-solida: #ffffff; --sutil: #fafbfd; --sutil-2: #f6f8fb;
  --forte: #031435; --tinta-2: #475467;
  --sobre-marinho: #ffffff; --sobre-marinho-suave: #9cc0d6; --sobre-destaque: #ffffff;
  --aco-claro-2: #dde9f2; --barra-vazia: #d7e0e8; --esq-1: #eef2f6; --esq-2: #f7f9fb;
  --traco-mapa: #ffffff; --campo: #ffffff; --campo-busca: #ffffff; --cabeca-fundo: rgba(255, 255, 255, .94);
  --rede-linha: #c9d5df; --rede-linha-forte: #a9bccb; --mei-fundo: #fdf0e6; --mei-tinta: #a04b00;
  --login-fundo: radial-gradient(1200px 600px at 50% -10%, #eaf1f6 0%, #fff 60%);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "DM Sans", system-ui, -apple-system, sans-serif; color: var(--tinta); background: var(--pagina); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.casa { background: var(--pagina-casa); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--aco); }
h2 { font-size: 20px; color: var(--forte); margin: 0 0 8px; letter-spacing: -.3px; }
h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--suave); margin: 26px 0 10px; font-weight: 700; }
h4 { font-size: 13px; color: var(--forte); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-weight: 700; }
h4 .ico { width: 16px; height: 16px; color: var(--aco); }
h5 { font-size: 12px; color: var(--suave); margin: 14px 0 8px; font-weight: 600; }
.ico { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.mini { font-size: 12.5px; color: var(--suave); }
.mono { font-variant-numeric: tabular-nums; }
.nota { margin-top: 18px; }
.ok-txt { color: var(--ok); }
.erro-txt { color: var(--erro); }

/* ---------------- logo ---------------- */
/* Logo da Pregio: o símbolo (a coluna com o P) redesenhado em vetor a partir do oficial, mais o nome.
   Ao aparecer, a coluna se desenha traço por traço; depois, de tempos em tempos, uma luz amarela corre
   pelo contorno e pelo P. A marcação sai do nucleo.js (P.MARCA) pra não repetir o SVG nas três telas. */
.logo { display: inline-flex; align-items: center; gap: .36em; text-decoration: none; color: var(--forte); view-transition-name: logo; white-space: nowrap; font-size: 22px; line-height: 1; }
.logo .simbolo { height: 1.62em; width: auto; aspect-ratio: 188 / 250; flex: none; overflow: visible; }
/* a palavra PREGIO é a da marca oficial (recortada do logo horizontal, sem a linha CONSÓRCIOS): entra como
   máscara, pintada com a cor do texto, e serve aos dois temas. Proporção da altura: a do logo oficial */
.logo .nome { display: inline-block; height: .62em; width: calc(.62em * 616 / 115); background: currentColor;
  -webkit-mask: url(/static/marca-pregio.png) center / contain no-repeat; mask: url(/static/marca-pregio.png) center / contain no-repeat;
  overflow: hidden; text-indent: 110%; white-space: nowrap; margin-left: .06em; animation: nome-vem .6s .55s cubic-bezier(.2, .8, .2, 1) both; }
.logo .sb-t { stroke-dasharray: 1 1; animation: sb-desenha .8s cubic-bezier(.65, 0, .25, 1) both; animation-delay: var(--d, 0s); }
.logo .sb-luz { stroke: var(--luz); stroke-dasharray: .07 1; stroke-dashoffset: .07; animation: sb-corre 7s linear 2.4s infinite; }
.logo .sb-luz.l2 { animation-delay: 3.8s; }
@keyframes sb-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sb-corre { 0% { stroke-dashoffset: .07; } 38%, 100% { stroke-dashoffset: -1; } }
@keyframes nome-vem { from { opacity: 0; transform: translateX(-.25em); } }
[data-tema="escuro"] .logo .sb-luz { filter: drop-shadow(0 0 3px rgba(146, 193, 221, .8)); }
@media (prefers-reduced-motion: reduce) { .logo .sb-t, .logo .nome { animation: none; } .logo .sb-luz { display: none; } }
.logo.grande { font-size: 30px; }

/* ---------------- botões e campos ---------------- */
.btn { border: 1px solid var(--linha-2); background: var(--superficie-solida); border-radius: 10px; padding: 9px 15px; font-weight: 600; color: var(--forte); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: border-color .15s, background .15s, box-shadow .15s; }
.btn:hover { border-color: var(--aco-2); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ico { width: 16px; height: 16px; }
.btn.primario { background: var(--marinho); border-color: var(--forte); color: var(--sobre-marinho); }
.btn.primario:hover { background: var(--marinho-2); }
.btn.cta { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.btn.cta:hover { background: var(--destaque-2); }
.btn.largo { width: 100%; padding: 12px; margin-top: 14px; }
.btn.mini-btn { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-link { background: none; border: 0; color: var(--aco); font-weight: 600; padding: 0; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.btn-link:hover { color: var(--forte); }
.btn-link .ico { width: 15px; height: 15px; }
.btn-link.perigo { color: var(--erro); }
.btn-link.claro { color: #c7dbe7; }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.campo > span { font-weight: 600; font-size: 12px; color: var(--suave); }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], select {
  border: 1px solid var(--linha-2); border-radius: 10px; padding: 9px 12px; background: var(--campo); width: 100%; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--aco); box-shadow: 0 0 0 3px rgba(63, 115, 149, .14); }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 4px 0; cursor: pointer; }
.check input { accent-color: var(--forte); width: 16px; height: 16px; }
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; min-width: 0; }
.tag-sim { background: var(--sim-claro); color: var(--sim); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tag-erro { background: var(--erro-claro); color: var(--erro); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.selo { display: inline-block; border-radius: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; background: var(--sutil-2); color: var(--tinta-2); font-style: normal; vertical-align: 2px; }
.selo.mei { background: var(--mei-fundo); color: var(--mei-tinta); }
.selo.ok { background: var(--ok-claro); color: var(--ok); }
.vazio { padding: 48px 24px; text-align: center; color: var(--suave); }
.vazio .ico { width: 34px; height: 34px; color: var(--suave-2); margin-bottom: 6px; }
.vazio p { margin: 6px 0 14px; }
.vazio.grande { padding: 90px 40px; font-size: 15px; }
.faixa-fontes { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 24px; background: var(--erro); color: #fff; font-size: 13px; text-align: center; }
.faixa-fontes .ico { width: 16px; height: 16px; flex: none; }
.faixa-fontes.suave { background: var(--sim-claro); color: var(--sim); }
.faixa-fontes.suave a { color: var(--sim); }
.faixa-fontes a { color: #fff; font-weight: 700; text-decoration: underline; }
.alerta { background: var(--erro-claro); color: var(--erro); border-radius: 12px; padding: 11px 14px; margin: 0 0 12px; font-size: 13px; }
.alerta.suave { background: var(--sim-claro); color: var(--sim); }
.alerta .btn { margin-left: 8px; }
.sugestoes { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-2); max-height: 280px; overflow-y: auto; z-index: 30; }
.sugestao { padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; cursor: pointer; }
.sugestao:hover, .sugestao.foco { background: var(--aco-claro); }
.sugestao small { color: var(--suave); white-space: nowrap; }
.seletor { position: relative; }

/* esqueleto enquanto carrega */
.carregando-bloco { display: grid; gap: 10px; padding: 6px 0; }
.carregando-bloco i { display: block; height: 64px; border-radius: 12px; background: linear-gradient(90deg, var(--esq-1) 0%, var(--esq-2) 50%, var(--esq-1) 100%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------------- entrar ---------------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--login-fundo); padding: 16px; }
.login-card { background: var(--superficie); border-radius: 20px; padding: 36px 32px; width: 100%; max-width: 390px; box-shadow: var(--sombra-2); border: 1px solid var(--linha); }
.login-card .logo { margin-bottom: 26px; }
.login-texto { color: var(--suave); line-height: 1.5; margin: 0 0 20px; }
.login-nota { color: var(--suave); font-size: 12.5px; margin: 16px 0 0; text-align: center; }
.erro { color: var(--erro); margin: 0 0 12px; }

/* ---------------- cabeçalho: na tela inicial é o centro da página; depois vira a barra do topo ---------------- */
.cabeca { display: flex; align-items: center; gap: 22px; padding: 12px 24px; position: sticky; top: 0; z-index: 20; background: var(--cabeca-fundo); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linha); min-height: var(--cabeca); }
body.casa .cabeca { flex-direction: column; justify-content: flex-start; gap: 28px; padding: 22vh 20px 0; border-bottom: 0; background: transparent; backdrop-filter: none; position: relative; }
body.casa .logo { font-size: 44px; }
.cabeca-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; position: relative; }
body.casa .cabeca-dir { position: absolute; top: 16px; right: 20px; margin: 0; }
.link-topo { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--forte); font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.link-topo:hover { background: var(--aco-claro); }
.contador { background: var(--marinho); color: var(--sobre-marinho); border-radius: 10px; padding: 0 7px; font-size: 11.5px; line-height: 18px; }
.contador:empty { display: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--marinho); color: var(--sobre-marinho); font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.avatar:hover { box-shadow: 0 0 0 4px var(--aco-claro); }
.menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); border: 1px solid var(--linha); min-width: 270px; overflow: hidden; z-index: 40; }
.menu-cab { padding: 14px 16px; border-bottom: 1px solid var(--linha); font-size: 12.5px; color: var(--suave); line-height: 1.55; }
.menu-cab b { display: block; color: var(--forte); font-size: 14.5px; }
.menu-fontes-resumo { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); font-size: 12.5px; color: var(--suave); }
.menu-fontes-resumo b { color: var(--forte); }
.menu-fontes-resumo .ico { width: 16px; height: 16px; color: var(--aco); margin-top: 1px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 11px 16px; color: var(--tinta); text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--sutil-2); }
.menu .ico { width: 16px; height: 16px; color: var(--suave); }

/* ---------------- a barra de busca ---------------- */
.busca { position: relative; flex: 1; max-width: 720px; display: flex; align-items: center; background: var(--campo-busca); border: 1px solid var(--linha-2); border-radius: 26px; height: 48px; padding: 0 8px 0 16px; box-shadow: none; transition: box-shadow .2s, border-color .2s; view-transition-name: busca; }
.busca:hover, .busca:focus-within { box-shadow: var(--sombra-busca); border-color: transparent; }
body.casa .busca { width: min(680px, 100%); flex: none; height: 56px; border-radius: 28px; box-shadow: var(--sombra-busca); border-color: transparent; }
body.casa .busca:focus-within { box-shadow: var(--sombra-busca-f); }
.busca-lupa { color: var(--suave-2); display: flex; }
.busca input { flex: 1; border: 0; outline: 0; box-shadow: none; background: transparent; font-size: 16px; padding: 0 10px; height: 100%; min-width: 0; }
.busca input:focus { box-shadow: none; }
.busca input::-webkit-search-cancel-button { display: none; }
body.casa .busca input { font-size: 17px; }
.busca-limpa { border: 0; background: none; color: var(--suave); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.busca-limpa:hover { background: var(--sutil-2); }
.busca.aberta { border-radius: 24px 24px 0 0; box-shadow: var(--sombra-busca-f); border-color: transparent; }
.sugest { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--superficie); border-radius: 0 0 24px 24px; box-shadow: 0 8px 14px rgba(32, 33, 36, .18); padding: 6px 0 12px; z-index: 30; border-top: 1px solid var(--linha); max-height: 70vh; overflow-y: auto; }
.sug-secao { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--suave-2); padding: 12px 20px 4px; }
.sug-item { display: flex; align-items: center; gap: 12px; padding: 8px 20px; cursor: pointer; }
.sug-item:hover, .sug-item.ativo { background: var(--sutil-2); }
.sug-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--sutil-2); color: var(--aco); display: grid; place-items: center; flex: none; }
.sug-ico .ico { width: 16px; height: 16px; }
.sug-ico.av { background: var(--aco-claro); color: var(--forte); font-size: 11.5px; font-weight: 700; }
.sug-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sug-txt b { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-txt small { color: var(--suave); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-dir { font-size: 12.5px; color: var(--suave); font-weight: 600; white-space: nowrap; }
.sug-enter { font-size: 11px; color: var(--suave-2); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 6px; }
.sug-entendi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mini-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--aco-claro); color: var(--forte); border-radius: 10px; padding: 1px 8px 1px 6px; font-size: 11.5px; font-style: normal; font-weight: 600; }
.mini-chip .ico { width: 12px; height: 12px; color: var(--aco); }

/* ---------------- tela inicial ---------------- */
.casa-corpo { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 40px; }
.exemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.exemplos button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 20px; padding: 7px 14px; font-size: 13px; color: var(--tinta); transition: border-color .15s, background .15s, transform .15s; }
.exemplos button:hover { border-color: var(--aco-2); background: var(--sutil); transform: translateY(-1px); }
.exemplos .ico { width: 15px; height: 15px; color: var(--aco); }
.casa-nota { margin: 34px 0 0; color: var(--suave-2); font-size: 12.5px; text-align: center; }

/* ---------------- resultado de uma busca ---------------- */
.resultado { max-width: 1320px; margin: 0 auto; padding: 0 24px 60px; }
/* o topo da busca (filtros, números, abas) fica parado; só a lista rola */
.res-topo { position: sticky; top: var(--alt-cabeca, var(--cabeca)); z-index: 15; background: var(--pagina); margin: 0 -24px; padding: 18px 24px 0; transition: box-shadow .25s; }
.res-topo .visoes { margin-bottom: 0; }
.visao { margin-top: 18px; }
body.compacto .res-topo { box-shadow: 0 14px 24px -18px rgba(3, 20, 53, .28); }
[data-tema="escuro"] body.compacto .res-topo { box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .8); }
/* encolhido: menos respiro e números menores, mesma informação */
.res-topo, .res-topo .resumo-linha, .resumo-nums .num b, .resumo-nums .num.menor b, .btn.cta#montar-lista, .res-topo .visoes button { transition: padding .25s ease, margin .25s ease, font-size .25s ease, box-shadow .25s; }
body.compacto .res-topo { padding-top: 10px; }
body.compacto .res-topo .resumo-linha { margin: 10px 0 2px; }
body.compacto .resumo-nums .num b { font-size: 21px; }
body.compacto .resumo-nums .num.menor b { font-size: 16px; }
body.compacto .btn.cta#montar-lista { padding: 9px 16px; font-size: 13.5px; }
body.compacto .res-topo .visoes button { padding-top: 9px; padding-bottom: 9px; }
/* a barra de cada visão (contagem, ordem) gruda logo embaixo do topo */
.visao-barra { position: sticky; top: calc(var(--alt-cabeca, var(--cabeca)) + var(--alt-res, 0px)); z-index: 14; background: var(--pagina); padding: 8px 0; margin-bottom: 4px; }
.entendi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-f { display: inline-flex; align-items: center; gap: 7px; background: var(--superficie); border: 1px solid var(--linha-2); border-radius: 20px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 600; color: var(--forte); cursor: pointer; max-width: 100%; transition: border-color .15s, box-shadow .15s; }
.chip-f:hover { border-color: var(--aco-2); box-shadow: var(--sombra-1); }
.chip-f > .ico { width: 15px; height: 15px; color: var(--aco); }
.chip-f span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-f button { border: 0; background: var(--sutil-2); color: var(--suave); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.chip-f button:hover { background: var(--erro-claro); color: var(--erro); }
.chip-f button .ico { width: 12px; height: 12px; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.entendi-vazio { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; padding: 6px 4px; }
.entendi-vazio .ico { width: 16px; height: 16px; }
.btn-refinar { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed var(--aco-2); background: var(--aco-claro); color: var(--forte); border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 700; }
.btn-refinar:hover { background: var(--aco-claro-2); }
.btn-refinar .ico { width: 15px; height: 15px; }
.limpar-tudo { font-size: 12.5px; margin-left: 4px; }

/* refinar: painel lateral; os resultados seguem atrás e o rodapé conta ao vivo */
.refinar-fundo { position: fixed; inset: 0; z-index: 37; background: rgba(13, 27, 51, .14); animation: fade .2s ease; }
.refinar { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); z-index: 38; background: var(--superficie-solida); border-left: 1px solid var(--linha); box-shadow: -18px 0 50px rgba(3, 20, 53, .18); display: flex; flex-direction: column; animation: desliza .28s cubic-bezier(.2, .8, .2, 1); }
.ref-cab { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px; border-bottom: 1px solid var(--linha); }
.ref-cab h3 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: -.3px; color: var(--forte); }
.ref-cab > div { min-width: 0; margin-right: auto; }
.ref-cab .btn-link { font-size: 13px; }
.ref-cab .fechar { position: static; flex: none; }
.ref-corpo { flex: 1; overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
.ref-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ref-bloco { border: 1px solid var(--linha); border-radius: 14px; padding: 16px; min-width: 0; transition: box-shadow .3s, border-color .3s; }
.ref-bloco.largo { grid-column: auto; }
.ref-pe { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: var(--superficie-solida); }
#ref-ver { margin-top: 0; font-size: 15px; padding: 14px; border-radius: 14px; transition: opacity .2s, background .15s; }
#ref-ver b { font-weight: 800; }
#ref-ver.carregando { opacity: .65; }
.ref-donos { font-weight: 500; opacity: .85; font-size: 13px; margin-left: 10px; padding-left: 10px; border-left: 1px solid currentColor; }
.ref-bloco.pisca { border-color: var(--destaque); box-shadow: 0 0 0 4px var(--destaque-claro); }
.ref-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ref-linha > * { flex: 1; min-width: 0; }
.ref-bloco .seletor { margin-bottom: 8px; }
.ref-raio { border-top: 1px dashed var(--linha); padding-top: 10px; margin-top: 4px; }
.ref-raio .mini { display: block; margin-bottom: 6px; }
.km-val { flex: none !important; color: var(--forte); font-size: 13px; }
.km-val b { font-size: 18px; }
input[type=range] { width: 100%; accent-color: var(--forte); }
.chips-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips-sel button { border: 1px solid var(--linha-2); background: var(--superficie); border-radius: 16px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--suave); transition: all .12s; }
.chips-sel button:hover { border-color: var(--aco-2); color: var(--forte); }
.chips-sel button.on { background: var(--marinho); border-color: var(--forte); color: var(--sobre-marinho); }

.resumo-linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 0 6px; flex-wrap: wrap; }
.resumo-nums { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; transition: opacity .2s; }
.resumo-nums.carregando { opacity: .45; }
.resumo-nums .num b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--forte); line-height: 1.05; font-variant-numeric: tabular-nums; }
.resumo-nums .num.menor b { font-size: 20px; letter-spacing: -.4px; color: var(--aco); }
.resumo-nums .num span { font-size: 12.5px; color: var(--suave); }
.resumo-nums .custo { font-size: 12.5px; color: var(--suave); align-self: center; }
.resumo-nums .custo b { color: var(--forte); }
.btn.cta#montar-lista { padding: 12px 20px; border-radius: 12px; font-size: 14.5px; }

.visoes { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.visoes::-webkit-scrollbar { display: none; }
.visoes button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 12px 14px; font-weight: 600; color: var(--suave); border-bottom: 2.5px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.visoes button .ico { width: 17px; height: 17px; }
.visoes button:hover { color: var(--forte); }
.visoes button.on { color: var(--forte); border-bottom-color: var(--forte); }
.visoes button.on .ico { color: var(--aco); }
.visao { min-height: 300px; animation: entra .2s ease; }
.visao-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; min-height: 36px; }
.visao-barra-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ordem { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); }
.ordem select { width: auto; padding: 7px 10px; border-radius: 9px; font-size: 13px; }
.sel-barra { display: inline-flex; align-items: center; gap: 10px; background: var(--destaque-claro); border-radius: 10px; padding: 4px 6px 4px 12px; font-size: 13px; }
.mais-linha { display: flex; justify-content: center; padding: 18px 0 4px; }
.busca-mini { width: 220px; padding: 7px 12px; border-radius: 9px; }

/* empresas */
.cards { display: grid; gap: 8px; }
.card-emp { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 18px 14px 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card-emp:hover { border-color: var(--linha-2); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.card-emp.marcado { border-color: var(--aco-2); background: var(--aco-claro); }
.marca { display: grid; place-items: center; height: 100%; cursor: pointer; }
.marca input { accent-color: var(--forte); width: 16px; height: 16px; opacity: .35; transition: opacity .15s; cursor: pointer; }
.card-emp:hover .marca input, .marca input:checked, .cid-linha:hover .marca input { opacity: 1; }
.ce-nome { font-weight: 700; font-size: 15px; color: var(--forte); line-height: 1.25; }
.ce-sub { color: var(--suave); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--tinta-2); }
.ce-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ce-meta .ico { width: 14px; height: 14px; color: var(--suave-2); }
.ce-meta .ok { color: var(--ok); }
.ce-meta .ok .ico { color: var(--ok); }
.ce-cap { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ce-cap b { display: block; font-size: 17px; color: var(--forte); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.ce-cap span { font-size: 11.5px; color: var(--suave-2); }
.ce-add { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; visibility: hidden; border: 1px solid var(--linha-2); background: var(--superficie-solida); color: var(--aco); border-radius: 14px; padding: 3px 10px 3px 7px; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .15s, background .15s, color .15s, border-color .15s; }
.ce-add .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.card-emp:hover .ce-add, .ce-add:focus-visible { opacity: 1; transform: none; visibility: visible; }
.ce-add:hover { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.ce-add.enviando { opacity: .5; }

/* pessoas */
.pes-grade { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pes-lista { display: grid; gap: 6px; }
.card-pes { display: grid; grid-template-columns: auto 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card-pes:not(:has(.pos)) { grid-template-columns: 38px minmax(0, 1fr) auto; }
.card-pes:hover { border-color: var(--linha-2); box-shadow: var(--sombra-1); }
.card-pes.on { border-color: var(--forte); box-shadow: inset 3px 0 0 var(--destaque), var(--sombra-1); }
.card-pes .pos { font-weight: 700; color: var(--suave-2); font-size: 12.5px; min-width: 18px; text-align: right; }
.avatar-pq { width: 38px; height: 38px; border-radius: 50%; background: var(--aco-claro); color: var(--forte); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none; }
.avatar-gr { width: 56px; height: 56px; border-radius: 50%; background: var(--destaque); color: var(--sobre-destaque); display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; }
.cp-nome { font-weight: 700; color: var(--forte); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-meta { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dir { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cp-dir b { font-size: 14px; color: var(--forte); white-space: nowrap; }
.cp-ct { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--aco); font-weight: 600; }
.cp-ct.wa { color: var(--ok); }
.cp-ct .ico { width: 13px; height: 13px; }
.pes-lado { position: sticky; top: calc(var(--alt-cabeca, var(--cabeca)) + var(--alt-res, 0px) + 60px); background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 18px; min-height: 420px; }
.lado-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.lado-cab h3 { text-transform: none; letter-spacing: -.2px; font-size: 19px; color: var(--forte); margin: 0 0 2px; }
.lado-contato { margin: 12px 0; padding: 12px 14px; background: var(--sutil-2); border-radius: 12px; }
.lado-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cpf-cartao { display: flex; gap: 14px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.cpf-cartao > .ico { width: 24px; height: 24px; color: var(--aco); margin-top: 2px; }
.cpf-cartao > div { flex: 1; }
.cpf-cartao p { margin: 4px 0 0; }

/* rede */
.rede { background: var(--sutil); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; position: relative; }
.rede svg { width: 100%; height: auto; display: block; }
.rede-palco { overflow: auto; max-height: 520px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; }
/* margem automática centraliza quando a teia é menor que a caixa e ainda deixa rolar quando é maior */
.rede-palco svg { margin: auto; max-width: none; flex: none; }
.rede-maior .rede-palco { cursor: grab; }
.rede-palco.arrastando { cursor: grabbing; user-select: none; }
.rede-zoom { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; background: var(--superficie-solida);
  border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 2px 8px rgba(3, 20, 53, .08); overflow: hidden; }
.rede-zoom button { border: 0; background: none; color: var(--forte); font: inherit; font-size: 18px; font-weight: 600; width: 38px; height: 34px; cursor: pointer; }
.rede-zoom button:hover { background: var(--sutil); }
.rede-zoom .rede-z-val { width: auto; min-width: 54px; padding: 0 8px; font-size: 12.5px; border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); }
.rede line { stroke: var(--rede-linha); stroke-width: 1.2; }
.rede line.l1 { stroke: var(--rede-linha-forte); stroke-width: 1.6; }
.rede .no-p circle { fill: var(--destaque); stroke: var(--forte); stroke-width: 2; }
.rede .no-p .ini-p { fill: var(--sobre-destaque); }
.rede .no-e { cursor: pointer; }
.rede .no-e rect { fill: var(--marinho); transition: fill .15s; }
.rede .no-e:hover rect { fill: var(--aco); }
.rede .no-e text { fill: var(--sobre-marinho); font-size: 11px; font-weight: 600; }
.rede .no-c { cursor: pointer; }
.rede .no-c circle { fill: var(--superficie-solida); stroke: var(--aco); stroke-width: 1.6; transition: fill .15s; }
.rede .no-c:hover circle { fill: var(--destaque); }
.rede text { font-family: "DM Sans", sans-serif; }
.rede .rotulo-c { font-size: 10.5px; fill: var(--suave); }
.rede .rotulo-p { font-size: 13px; font-weight: 700; fill: var(--forte); }

/* mapa */
.mapa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.mapa-card { padding: 16px 18px; }
.mapa-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mapa-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mapa-titulo b { font-size: 18px; color: var(--forte); letter-spacing: -.3px; }
.mapa-svg svg { width: 100%; height: auto; max-height: 68vh; display: block; }
.mapa-svg path { stroke: var(--traco-mapa); stroke-width: .6; cursor: pointer; transition: fill .25s; }
.mapa-svg path:hover { stroke: var(--forte); stroke-width: 1.4; }
.mapa-svg path.sel { fill: var(--destaque) !important; stroke: var(--forte); stroke-width: 1; }
.mapa-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.legenda { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--suave); }
.legenda i { width: 26px; height: 8px; border-radius: 2px; display: block; }
.seg { display: inline-flex; background: var(--sutil-2); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.seg button.on { background: var(--superficie-solida); color: var(--forte); box-shadow: var(--sombra-1); }
.mapa-lado { display: grid; gap: 14px; }
.barras { display: grid; gap: 4px; max-height: 380px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.barras button { position: relative; display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; border-radius: 9px; padding: 7px 10px; font-size: 13px; text-align: left; overflow: hidden; }
.barras button:hover { background: var(--sutil-2); }
.barras button.on { background: var(--destaque-claro); font-weight: 700; }
.barras button i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--e3); border-radius: 2px; }
.barras .b-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .b-val { color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dica { position: fixed; pointer-events: none; background: var(--marinho); color: var(--sobre-marinho); border-radius: 10px; padding: 9px 12px; font-size: 12px; line-height: 1.45; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); display: none; z-index: 60; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.dica b { font-size: 13px; }
.dica span { color: var(--sobre-marinho-suave); }

/* setores */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: left; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 16px; padding: 16px 16px 14px; color: var(--tinta); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--aco-2); box-shadow: var(--sombra-2); }
.tile.on { border-color: var(--forte); background: var(--marinho); color: var(--sobre-marinho); }
.t-nome { font-weight: 700; font-size: 14px; line-height: 1.25; min-height: 36px; padding-right: 22px; }
.t-q { font-size: 24px; font-weight: 700; letter-spacing: -.8px; margin-top: 8px; }
.t-s { font-size: 11.5px; opacity: .65; }
.t-barra { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--destaque); }
.t-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--destaque); color: var(--sobre-destaque); display: grid; place-items: center; }
.t-check .ico { width: 14px; height: 14px; }

/* distribuição */
.dist-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; transition: opacity .2s; }
.dist-grade.carregando { opacity: .55; }
.histo { display: flex; align-items: flex-end; gap: 2px; height: 220px; margin: 6px 0 6px; }
.dist-soma { font-size: 13px; color: var(--suave); margin: -4px 0 10px; min-height: 19px; }
.dist-soma b { font-size: 18px; color: var(--forte); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.histo i { flex: 1; background: var(--barra-vazia); border-radius: 3px 3px 0 0; min-height: 2px; display: block; transition: height .3s, background .15s; }
.histo i.on { background: var(--aco); }
.dupla { position: relative; height: 26px; }
.dupla input { position: absolute; left: 0; right: 0; top: 4px; pointer-events: none; background: none; -webkit-appearance: none; appearance: none; height: 18px; margin: 0; }
.dupla input::-webkit-slider-thumb { pointer-events: all; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--marinho); border: 3px solid var(--superficie-solida); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab; }
.dupla input::-moz-range-thumb { pointer-events: all; width: 15px; height: 15px; border-radius: 50%; background: var(--marinho); border: 3px solid var(--superficie-solida); cursor: grab; }
.dupla .trilho { position: absolute; left: 0; right: 0; top: 12px; height: 3px; background: var(--linha-2); border-radius: 2px; }
.dupla .faixa { position: absolute; top: 12px; height: 3px; background: var(--marinho); }
.regua-val { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--forte); }
.sel-uf { max-width: 240px; margin: 0 auto; }

/* cidades */
.cid-tab { display: grid; }
.cid-cab, .cid-linha { display: grid; grid-template-columns: 28px minmax(160px, 1.2fr) minmax(140px, 2fr) 110px 120px; gap: 12px; align-items: center; padding: 8px 4px; }
.cid-cab { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--suave-2); font-weight: 700; border-bottom: 1px solid var(--linha); }
.cid-linha { border-bottom: 1px solid var(--linha); }
.cid-linha:hover { background: var(--sutil); }
.cid-linha.marcado { background: var(--destaque-claro); }
.cid-nome { color: var(--forte); font-weight: 700; }
.cid-nome .pos { color: var(--suave-2); font-weight: 600; min-width: 26px; display: inline-block; }
.cid-barra { position: relative; display: flex; align-items: center; gap: 8px; }
.cid-barra i { display: block; height: 8px; background: var(--e3); border-radius: 4px; min-width: 2px; }
.cid-barra b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.comp-zona:not(:empty) { margin-bottom: 18px; }
.comp-grade { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.comp-grade > .comp { scroll-snap-align: start; min-width: 0; }
.comp .rot { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--suave-2); margin-bottom: 8px; }
.comp-mais { border-style: dashed; display: flex; flex-direction: column; gap: 8px; }
.comp-mais input { width: 100%; }
.comp-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comp-cab b { font-size: 18px; color: var(--forte); }
.comp-tira { margin-left: auto; }
.comp .kp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.comp .kp div { background: var(--sutil-2); border-radius: 10px; padding: 10px; }
.comp .kp b { display: block; font-size: 18px; color: var(--forte); letter-spacing: -.4px; }
.comp .kp span { font-size: 11.5px; color: var(--suave); }
.barras-set > div { margin-bottom: 8px; }
.barras-set .lb { display: flex; justify-content: space-between; font-size: 12.5px; }
.barras-set .tr { height: 7px; background: var(--sutil-2); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.barras-set .tr i { display: block; height: 100%; background: var(--aco); border-radius: 4px; }

/* contato */
.contato { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.contato .tels { display: flex; flex-direction: column; gap: 3px; }
.contato .tel { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.contato .tel a { color: var(--forte); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.contato .tel a.wa { color: var(--ok); }
.contato .tel .ico { width: 15px; height: 15px; }
.contato .email { color: var(--aco); word-break: break-all; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.contato .email .ico { width: 15px; height: 15px; }
/* Fontes de contato: etiqueta de origem, selos, linha do tempo das Consultas, escolha da Fonte */
.contato .origem { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--suave); background: var(--sutil-2); border: 1px solid var(--linha); border-radius: 8px; padding: 0 6px; }
.contato .tel.fim { opacity: .8; }
.contato > .tag-sim, .consultas .tag-sim { align-self: flex-start; }
.contato .email-linha { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.selo-aviso { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 6px; background: var(--sim-claro); color: var(--sim); }
.consultas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--suave); }
.consultas b { color: var(--tinta-2); font-weight: 600; }
.ct-botoes { position: relative; display: inline-flex; gap: 4px; margin-top: 6px; }
.menu-fontes { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 230px; background: var(--superficie-solida); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-2); padding: 6px; display: flex; flex-direction: column; }
.menu-fontes[hidden] { display: none; }
.menu-fontes button { background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--forte); }
.menu-fontes button:hover { background: var(--sutil-2); }
.ct-andamento { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.ct-pausa { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-pode { display: block; margin-top: 2px; font-size: 12px; }
.ct-pode .btn-link { font-size: 12px; }
.fontes-escolha { grid-template-columns: auto; }
.faixa-simulado { flex-basis: 100%; order: -1; margin: -12px -24px 0; padding: 4px 24px; background: var(--sim-claro); color: var(--sim); font-size: 12px; text-align: center; border-bottom: 1px solid var(--linha); }
.faixa-simulado[hidden] { display: none; }
.cabeca.com-faixa { flex-wrap: wrap; row-gap: 10px; }
body.casa .faixa-simulado { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
@media (max-width: 900px) { .faixa-simulado { margin: -8px -12px 0; padding: 3px 12px; font-size: 11.5px; } }
.selo-plus { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 6px; background: var(--destaque-claro); color: var(--sim); }
.falecido { color: var(--erro); font-size: 12px; }

/* ---------------- listas ---------------- */
.listas { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - var(--cabeca)); max-width: 1380px; margin: 0 auto; }
.listas-lado { padding: 22px 16px; border-right: 1px solid var(--linha); position: sticky; top: var(--alt-cabeca, var(--cabeca)); align-self: start; max-height: calc(100vh - var(--cabeca)); overflow-y: auto; }
.lado-topo { display: flex; justify-content: space-between; align-items: center; margin: 0 6px 12px; }
.lado-topo h2 { margin: 0; }
.listas-ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.listas-ul button { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 14px; padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 3px; transition: background .15s, border-color .15s, box-shadow .15s; }
.listas-ul button:hover { background: var(--superficie); border-color: var(--linha); }
.listas-ul button.on { background: var(--superficie); border-color: var(--linha-2); box-shadow: var(--sombra-1); }
.listas-ul .ln { font-weight: 700; color: var(--forte); display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.listas-ul .lq { font-size: 12px; color: var(--suave); }
.listas-ul .lq b { color: var(--forte); }
.lprog { display: flex; height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; margin: 4px 0 2px; }
.lprog i { display: block; height: 100%; }
.lprog i.ok { background: var(--ok); }
.lprog i.pul { background: var(--suave-2); opacity: .55; }
i.montando, span.montando { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--destaque); background: var(--destaque-claro); border-radius: 8px; padding: 2px 7px; white-space: nowrap; }
span.montando { text-transform: none; letter-spacing: 0; font-size: 12px; }
.lista-vazia { color: var(--suave); font-size: 13px; padding: 8px 6px; }
.lista-detalhe { padding: 22px 28px 120px; min-width: 0; }
.lista-detalhe.chega .lista-cab { animation: sobe .4s cubic-bezier(.2, .8, .2, 1) both; }
.lista-detalhe.chega .etapa { animation: sobe .5s cubic-bezier(.2, .8, .2, 1) both; }
.lista-detalhe.chega .etapa:nth-child(2) { animation-delay: .05s; } .lista-detalhe.chega .etapa:nth-child(3) { animation-delay: .1s; } .lista-detalhe.chega .etapa:nth-child(4) { animation-delay: .15s; }
.lista-boas-vindas { max-width: 460px; margin: 12vh auto 0; text-align: center; color: var(--suave); }
.lista-boas-vindas > .ico { width: 44px; height: 44px; color: var(--aco); }
.lista-boas-vindas h2 { margin: 12px 0 8px; font-size: 24px; }
.lista-boas-vindas p { line-height: 1.55; margin: 0 0 20px; }
.lista-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.lista-tit { min-width: 0; }
.lista-cab h2 { font-size: 28px; letter-spacing: -.8px; margin: 0 0 4px; cursor: text; border-radius: 8px; padding: 0 6px; margin-left: -6px; transition: background .15s; }
.lista-cab h2:hover { background: var(--sutil-2); }
.lista-cab h2 input { font-size: 26px; font-weight: 700; letter-spacing: -.8px; padding: 2px 8px; color: var(--forte); }
.lista-menu { display: flex; gap: 16px; flex: none; padding-top: 8px; }

/* a jornada da lista: 4 etapas, o próximo passo em destaque */
.jornada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; counter-reset: etapa; }
.etapa { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 16px 14px; min-width: 0; transition: border-color .2s, box-shadow .2s, transform .2s; }
.etapa:hover { box-shadow: var(--sombra-2); }
.etapa.agora { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-claro), var(--sombra-2); }
.et-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.et-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--sutil-2); color: var(--suave); flex: none; }
.et-n .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.etapa.agora .et-n { background: var(--destaque); color: var(--sobre-destaque); }
.etapa.feita .et-n { background: var(--ok-claro); color: var(--ok); }
.et-tit { font-weight: 700; font-size: 13px; color: var(--forte); }
.et-agora { margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--destaque); }
.et-valor { font-size: 21px; font-weight: 700; letter-spacing: -.5px; color: var(--forte); line-height: 1.15; font-variant-numeric: tabular-nums; }
.et-sub { font-size: 12.5px; color: var(--suave); margin-top: 3px; min-height: 18px; }
.et-prog { height: 4px; background: var(--linha); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.et-prog i { display: block; height: 100%; background: var(--destaque); border-radius: 4px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.etapa.feita .et-prog i { background: var(--ok); }
.et-acao { margin-top: auto; align-self: flex-start; }
/* o botão vai pro pé do card, na mesma altura nos quatro, por mais texto que cada um tenha */
.etapa .et-acao { margin-top: auto; padding: 8px 13px; font-size: 13px; }
.etapa > :nth-last-child(2) { margin-bottom: 14px; }
.lista-detalhe .alerta { display: flex; align-items: center; gap: 10px; }
.lista-detalhe .alerta .ico { width: 16px; height: 16px; flex: none; }

/* barra de filtros da lista */
.lista-barra { position: sticky; top: var(--alt-cabeca, var(--cabeca)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; margin-bottom: 4px; background: var(--pagina); }
.pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.pilulas button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linha-2); background: var(--superficie); border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--suave); transition: all .15s; }
.pilulas button b { font-size: 12px; color: var(--forte); background: var(--sutil-2); border-radius: 10px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.pilulas button:hover { border-color: var(--aco-2); color: var(--forte); }
.pilulas button.on { background: var(--marinho); border-color: var(--forte); color: var(--sobre-marinho); }
.pilulas button.on b { background: rgba(255, 255, 255, .18); color: inherit; }
[data-tema="escuro"] .pilulas button.on b { background: rgba(0, 0, 0, .12); }
.lista-barra-dir { display: flex; gap: 8px; align-items: center; }
.lista-q { position: relative; display: flex; align-items: center; }
.lista-q .ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--suave-2); }
.lista-q input { width: 270px; padding-left: 33px; border-radius: 20px; }
.lista-barra-dir select { width: auto; border-radius: 20px; padding: 8px 12px; font-size: 13px; }

/* os sócios */
.socios-lista { display: grid; gap: 6px; }
.so-cab, .so { display: grid; grid-template-columns: 26px 44px minmax(170px, 1.25fr) minmax(150px, 1.2fr) 108px minmax(150px, 1fr) 84px 30px; gap: 12px; align-items: center; }
.so-cab { padding: 4px 14px 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave-2); font-weight: 700; }
.so-cab span:first-of-type { grid-column: span 2; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--suave); }
.so { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 14px 10px 10px; transition: border-color .15s, box-shadow .15s, opacity .2s, background .15s, transform .3s, height .3s, padding .3s, margin .3s; }
.socios-lista.anima .so { animation: sobe .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
.so.saindo { opacity: 0; transform: translateX(40px); height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-color: transparent; overflow: hidden; pointer-events: none; }
.so:hover { border-color: var(--linha-2); box-shadow: var(--sombra-1); }
.so.sim { box-shadow: inset 3px 0 0 var(--ok); }
.so.nao { opacity: .55; }
.so.nao:hover { opacity: .9; }
.so.marcado { background: var(--aco-claro); border-color: var(--aco-2); }
.so .marca input, .so-cab .marca input { opacity: .35; }
.so:hover .marca input, .so .marca input:checked, .so-cab .marca input:checked, .so-cab:hover .marca input { opacity: 1; }
.so-av { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--aco-claro); color: var(--forte); display: grid; place-items: center; font-weight: 700; font-size: 13px; cursor: pointer; }
.so-wa { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; border: 2px solid var(--superficie-solida); }
.so-wa .ico { width: 10px; height: 10px; stroke-width: 2.2; }
.so-quem { min-width: 0; cursor: pointer; }
.so-nome { border: 0; background: none; padding: 0; font-weight: 700; color: var(--forte); font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.so-nome:hover { color: var(--aco); }
.so-sub { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-emp { min-width: 0; font-size: 13px; }
.so-emp b { display: block; font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-emp span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--suave); }
.so-emp span .ico { width: 12px; height: 12px; }
.mais-emp { font-style: normal; font-weight: 700; color: var(--aco); background: var(--aco-claro); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.so-cap { text-align: right; }
.so-cap b { display: block; font-size: 14px; color: var(--forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-cap span { font-size: 11px; color: var(--suave-2); }
.so-ct { min-width: 0; font-size: 12.5px; }
.so-ct .contato.compacto { gap: 2px; font-size: 12.5px; }
.so-ct .tag-sim { align-self: flex-start; }
.ct-estado { color: var(--suave); display: inline-flex; align-items: center; gap: 6px; }
.girando { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linha-2); border-top-color: var(--aco); animation: gira .8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.ct-consultar { font-size: 12.5px; }
.so-tri { display: inline-flex; gap: 4px; justify-self: center; }
.so-tri button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-2); background: var(--superficie-solida); color: var(--suave-2); display: grid; place-items: center; padding: 0; transition: all .15s; }
.so-tri button .ico { width: 16px; height: 16px; stroke-width: 2.3; }
.so-tri .tri-s:hover { border-color: var(--ok); color: var(--ok); }
.so-tri .tri-n:hover { border-color: var(--erro); color: var(--erro); }
.so-tri .tri-s.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.so-tri .tri-n.on { background: var(--erro); border-color: var(--erro); color: #fff; }
.so-tira { width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--suave-2); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s, background .15s; }
.so:hover .so-tira, .so-tira:focus-visible { opacity: 1; }
.so-tira:hover { background: var(--erro-claro); color: var(--erro); }
.so-tira .ico { width: 15px; height: 15px; }

/* seleção em massa: barra flutuante */
.sel-flutua { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 32; display: flex; align-items: center; gap: 10px; background: var(--marinho); color: var(--sobre-marinho); border-radius: 16px; padding: 9px 10px 9px 18px; box-shadow: 0 16px 40px rgba(3, 20, 53, .3); animation: sobe .3s cubic-bezier(.2, .8, .2, 1) both; white-space: nowrap; }
.sel-flutua b { font-size: 13.5px; margin-right: 4px; }
.sel-flutua .btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: inherit; }
.sel-flutua .btn:hover { background: rgba(255, 255, 255, .18); }
.sel-flutua .btn.perigo:hover { background: var(--erro); border-color: var(--erro); }
.sel-flutua .btn-link { color: inherit; opacity: .75; }
[data-tema="escuro"] .sel-flutua .btn { background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .14); }
.aviso.com-acao { padding-right: 8px; }
.aviso-acao { flex: none; border: 0; background: rgba(255, 255, 255, .16); color: inherit; font-weight: 700; border-radius: 9px; padding: 7px 12px; margin-left: 4px; white-space: nowrap; }
.aviso-acao:hover { background: rgba(255, 255, 255, .26); }
.link-topo[aria-current] { background: var(--aco-claro); }
/* indicadores e tabela (admin) */
.kpis-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.kpi b { display: block; font-size: 24px; color: var(--forte); letter-spacing: -.6px; }
.kpi span { color: var(--suave); font-size: 12.5px; }
.kpi small { display: block; color: var(--aco); font-size: 12px; margin-top: 2px; }
.tabela-wrap { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); font-weight: 700; padding: 11px 12px; border-bottom: 1px solid var(--linha); background: var(--sutil); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela .num { text-align: right; }
.estimativa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.estimativa div { background: var(--sutil-2); border-radius: 10px; padding: 10px; }
.estimativa b { display: block; font-size: 18px; color: var(--forte); }
.estimativa span { font-size: 11.5px; color: var(--suave); }
.escolha { display: grid; gap: 4px; margin: 8px 0; }
fieldset.escolha { border: 0; padding: 0; min-width: 0; align-content: start; }
fieldset.escolha legend { padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); }
/* os conjuntos de opções lado a lado (cada um com o seu título); no celular, um embaixo do outro */
.escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 24px; margin: 6px 0 4px; }
.escolhas:empty { display: none; }
.escolhas .quantos-escolha { grid-column: 1 / -1; }

/* triagem: tela cheia e sólida (nada da página aparece por trás), um baralho de cartões */
.triagem { position: fixed; inset: 0; background: var(--pagina); z-index: 45; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding-bottom: 28px; }
.tri-topo { width: 100%; max-width: 560px; padding: 20px 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tri-topo .mini { display: block; text-transform: uppercase; letter-spacing: 1.4px; font-size: 10.5px; font-weight: 700; color: var(--aco); }
.tri-topo b { font-size: 18px; color: var(--forte); letter-spacing: -.3px; }
.tri-fechar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-2); background: var(--superficie-solida); color: var(--forte); display: grid; place-items: center; flex: none; }
.tri-fechar .ico { width: 18px; height: 18px; }
.tri-prog { width: calc(100% - 40px); max-width: 520px; height: 5px; border-radius: 5px; background: var(--linha); margin-top: 16px; overflow: hidden; flex: none; }
.tri-prog i { display: block; height: 100%; width: 0; background: var(--destaque); border-radius: 5px; transition: width .35s ease; }
.tri-sub { margin-top: 8px; font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pilha { position: relative; width: min(380px, calc(100% - 32px)); height: 392px; margin-top: 22px; flex: none; }
.cartao { position: absolute; inset: 0; background: var(--superficie-solida); border: 1px solid var(--linha); border-radius: 24px; box-shadow: 0 18px 44px rgba(3, 20, 53, .16); padding: 24px; display: flex; flex-direction: column; gap: 16px; touch-action: none; user-select: none; transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .34s ease; cursor: grab; overflow: hidden; }
.cartao:active { cursor: grabbing; }
.cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px var(--tinta-arrasto, transparent); opacity: var(--forca, 0); }
.cartao.atras { pointer-events: none; box-shadow: 0 10px 26px rgba(3, 20, 53, .1); }
.cartao.atras > * { opacity: 0; transition: opacity .25s; }
.cartao.vem { animation: tri-vem .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes tri-vem { from { transform: translateY(14px) scale(.95); } }
.ct-cab { display: flex; align-items: center; gap: 14px; padding-right: 56px; }
.cartao .av { width: 58px; height: 58px; border-radius: 50%; background: var(--aco-claro); color: var(--forte); font-weight: 700; font-size: 20px; display: grid; place-items: center; flex: none; }
.cartao h4 { font-size: 20px; letter-spacing: -.5px; margin: 0; color: var(--forte); line-height: 1.2; }
.cartao .cg { color: var(--suave); font-size: 13px; margin-top: 3px; }
.ct-emp { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--sutil-2); }
.ct-emp > .ico { width: 20px; height: 20px; color: var(--aco); flex: none; margin-top: 1px; }
.ct-emp b { display: block; color: var(--forte); font-size: 14.5px; line-height: 1.3; }
.ct-cid { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); font-size: 12.5px; margin-top: 4px; }
.ct-cid .ico { width: 13px; height: 13px; }
.ct-num { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-num > div { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.ct-num b { display: block; font-size: 19px; color: var(--forte); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ct-num span { font-size: 12px; color: var(--suave); }
.ct-contato { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sim); }
.ct-contato.tem { color: var(--ok); }
.ct-contato .ico { width: 16px; height: 16px; }
.aconsultar { color: var(--sim); font-style: normal; }
.cartao .carimbo { position: absolute; top: 24px; right: 22px; z-index: 2; font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; border: 3px solid; border-radius: 9px; padding: 3px 10px; opacity: 0; transform: rotate(10deg); background: var(--superficie-solida); }
.cartao .carimbo.sim { color: var(--ok); }
.cartao .carimbo.nao { color: var(--erro); left: 22px; right: auto; transform: rotate(-10deg); }
.acoes-tri { display: flex; gap: 26px; margin-top: 24px; align-items: flex-end; }
.acoes-tri button { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.acoes-tri .bola { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(3, 20, 53, .14); transition: transform .15s; }
.acoes-tri button:active .bola { transform: scale(.92); }
.acoes-tri .bola .ico { width: 26px; height: 26px; stroke-width: 2.4; }
.acoes-tri .n .bola { background: var(--superficie-solida); color: var(--erro); border: 1px solid var(--linha-2); }
.acoes-tri .s .bola { background: var(--destaque); color: var(--sobre-destaque); }
.acoes-tri .v .bola { width: 46px; height: 46px; background: var(--superficie-solida); color: var(--suave); border: 1px solid var(--linha-2); box-shadow: none; }
.acoes-tri .v .bola .ico { width: 18px; height: 18px; }
.rodape-tri { margin-top: 20px; text-align: center; font-size: 13px; color: var(--suave); padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.tri-cont { border: 1px solid var(--linha-2); border-radius: 20px; padding: 4px 12px; }
.tri-cont b { color: var(--forte); font-variant-numeric: tabular-nums; }
.tri-cont.ok-c b { color: var(--ok); }
.rodape-tri .mini { flex-basis: 100%; margin-top: 4px; }
.tri-fim { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--superficie-solida); border: 1px solid var(--linha); border-radius: 24px; padding: 24px; }
.tri-fim b { font-size: 22px; color: var(--forte); }
@media (max-height: 700px) { .pilha { height: 360px; } .ct-emp { padding: 11px; } .cartao { gap: 12px; } }

/* ---------------- admin ---------------- */
.admin { padding: 24px; max-width: 1120px; margin: 0 auto; display: grid; gap: 16px; }
.adm-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.adm-cab h2 { margin: 0; }
.adm-acoes { display: flex; flex-wrap: wrap; gap: 4px 12px; }  /* num div dentro do td: flex no td desmonta a linha */
.adm-acoes .btn-link { white-space: nowrap; }
#adm-usuarios .tabela td { vertical-align: middle; }
#adm-usuarios .tabela th { white-space: normal; }  /* "consultas hoje" numa linha alargava a coluna de um número */
.adm-papel { width: auto; padding: 6px 10px; }  /* o select geral é 100% e a tabela espremia até cortar */
tr.inativo { opacity: .5; }
.fontes-modo { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 14px; padding: 14px 16px; margin: 10px 0 14px; }
.fontes-modo.sim { background: var(--sim-claro); }
.fontes-modo.real { background: var(--ok-claro); }
.fontes-modo p { margin: 4px 0 0; }
.fontes-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fontes-form > .check { grid-column: 1 / -1; margin: 4px 0 10px; }
.fo-cartao { border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; margin: 14px 0; }
.fo-cartao.desligada { background: var(--sutil); }
.fo-cartao .adm-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.fo-cartao .par { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.fo-cartao .par label { display: flex; flex-direction: column; gap: 4px; }
.tag-ok { background: var(--ok-claro); color: var(--ok); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.fontes-salvar { grid-column: 1 / -1; display: flex; gap: 8px; }
.chamadas td { font-size: 12.5px; }
.link-copiar { display: flex; gap: 8px; }
.pre { background: var(--sutil-2); border-radius: 8px; padding: 12px; font-size: 12px; overflow: auto; max-height: 300px; }

/* ---------------- gaveta, modal, aviso ---------------- */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(13, 27, 51, .28); z-index: 35; animation: fade .2s ease; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%); background: var(--superficie); z-index: 36; overflow-y: auto; box-shadow: -14px 0 40px rgba(3, 20, 53, .18); padding: 28px 28px 0; animation: desliza .25s cubic-bezier(.2, .8, .2, 1); }
#gaveta-corpo { padding-bottom: 32px; }
/* rodapé fixo da ficha com a ação principal */
.gaveta-pe { position: sticky; bottom: 0; z-index: 3; margin: 26px -28px -32px; padding: 14px 28px calc(16px + env(safe-area-inset-bottom)); background: var(--superficie-solida); border-top: 1px solid var(--linha); box-shadow: 0 -10px 30px rgba(3, 20, 53, .06); text-align: center; }
.gaveta-pe .btn.largo { margin-top: 0; font-size: 15px; padding: 13px; border-radius: 13px; }
.gaveta-pe .mini { display: block; margin-top: 7px; }
/* botão de lista das fichas: "Tirar" quando a pessoa já está na lista em montagem */
.btn.tirar-lista { border-color: var(--erro); color: var(--erro); background: var(--superficie-solida); }
.btn.tirar-lista:hover { background: var(--erro-claro); border-color: var(--erro); }
.mini .btn-link.tirar-lista { color: var(--erro); font-size: inherit; display: inline; }
.lado-acoes { flex-direction: column; align-items: stretch; }
.lado-lista { text-align: center; }
.lado-lista .btn.largo { margin-top: 0; }
.lado-lista .mini { display: block; margin-top: 6px; }
.cp-lista { display: none; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-claro); border-radius: 8px; padding: 1px 7px 1px 5px; }
.cp-lista .ico { width: 11px; height: 11px; stroke-width: 2.6; }
.card-pes.na-lista .cp-lista { display: inline-flex; }
@keyframes desliza { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes folha { from { transform: translateY(60px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.fechar { position: absolute; top: 14px; right: 14px; border: 0; background: var(--sutil-2); width: 36px; height: 36px; border-radius: 50%; color: var(--suave); display: grid; place-items: center; z-index: 2; }
.fechar:hover { background: var(--linha); color: var(--forte); }
.ficha-topo { padding-right: 40px; }
.ficha-topo.pessoa { display: flex; gap: 16px; align-items: center; }
.ficha-tag { font-size: 11.5px; color: var(--aco); font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.ficha-topo h2 { margin: 4px 0 4px; font-size: 23px; line-height: 1.2; }
.ficha-fant { color: var(--suave); }
.ficha-cnpj { color: var(--suave); margin-top: 4px; font-size: 13px; }
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 18px 0 4px; }
.ficha-grade div { background: var(--sutil-2); border-radius: 12px; padding: 11px 12px; }
.ficha-grade span { display: block; font-size: 11.5px; color: var(--suave); }
.ficha-grade b { color: var(--forte); font-size: 15px; }
details.sec { font-size: 13px; color: var(--tinta-2); }
details.sec ul { padding-left: 18px; }
.socio { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.socio-topo { display: flex; gap: 12px; align-items: center; }
.socio-txt { flex: 1; min-width: 0; }
.socio-nome, .socio-nome .btn-link { font-weight: 700; color: var(--forte); }
.socio-info { color: var(--suave); font-size: 12.5px; margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.socio-info .ico { width: 14px; height: 14px; }
.socio-contato { margin-top: 10px; border-top: 1px dashed var(--linha); padding-top: 10px; }
.rede-emp { border-top: 1px solid var(--linha); padding: 12px 0; }
.rede-emp > .btn-link { color: var(--forte); font-weight: 700; }
.cosocios { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.cosocios .btn-link { font-weight: 500; }
.modal-fundo { position: fixed; inset: 0; background: rgba(13, 27, 51, .4); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s ease; }
.modal { background: var(--superficie); border-radius: 18px; width: 100%; max-width: 480px; padding: 24px; box-shadow: var(--sombra-2); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal h3 { margin: 0 0 8px; color: var(--forte); font-size: 19px; text-transform: none; letter-spacing: -.2px; }
.modal-texto { color: var(--suave); line-height: 1.5; margin: 0 0 16px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* aviso: no computador, canto de baixo à esquerda (longe da ficha, da bandeja e da barra de seleção, que ficam
   à direita e no meio); no celular, no alto, em largura cheia. Sem left:50% + translate: isso limita a largura
   à metade da tela e o texto quebrava uma palavra por linha. */
.aviso { position: fixed; bottom: 24px; left: 24px; width: max-content; max-width: min(520px, calc(100% - 48px)); display: flex; align-items: center; gap: 10px; background: var(--marinho); color: var(--sobre-marinho); padding: 11px 16px; border-radius: 14px; z-index: 70; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); animation: aviso-sobe .28s cubic-bezier(.2, .8, .2, 1); line-height: 1.35; }
.aviso > .ico { flex: none; }
.aviso > span { flex: 1; min-width: 0; }
@keyframes aviso-sobe { from { opacity: 0; transform: translateY(10px); } }
@keyframes aviso-desce { from { opacity: 0; transform: translateY(-10px); } }
.aviso.erro { background: var(--erro); }
.aviso.ok { background: var(--ok); }

/* ---------------- telas menores ---------------- */
@media (max-width: 1100px) {
  .mapa-grade { grid-template-columns: 1fr; }
  .mapa-lado { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --cabeca: 60px; }
  .cabeca { gap: 10px; padding: 8px 12px; }
  .rot-link { display: none; }
  body:not(.casa) .logo { font-size: 19px; }
  .busca { height: 44px; padding-left: 12px; }
  body.casa .cabeca { padding-top: 16vh; }
  body.casa .logo { font-size: 34px; }
  .resultado { padding: 0 12px 110px; }
  .res-topo { margin: 0 -12px; padding: 10px 12px 0; }
  body.compacto .res-topo { padding-top: 6px; }
  body.compacto .res-topo .resumo-linha { margin: 6px 0 0; }
  body.compacto .resumo-nums .num b { font-size: 18px; }
  body.compacto .resumo-nums .num span { font-size: 11px; }
  .entendi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .entendi::-webkit-scrollbar { display: none; }
  .chip-f, .btn-refinar { flex: none; }
  .resumo-linha { margin-top: 14px; }
  .resumo-nums { gap: 16px; }
  .resumo-nums .num b { font-size: 24px; }
  .resumo-nums .custo, .resumo-nums .num.menor { display: none; }
  .btn.cta#montar-lista { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
  .pes-grade { grid-template-columns: 1fr; }
  .pes-lado { display: none; }
  .mapa-lado { grid-template-columns: 1fr; }
  .dist-grade { grid-template-columns: 1fr; }
  .comp-grade { grid-auto-columns: 78%; }
  .cid-cab, .cid-linha { grid-template-columns: 26px minmax(0, 1fr) minmax(90px, 1fr); }
  .cid-cab span:nth-child(n+4), .cid-linha > .num { display: none; }
  .card-emp { grid-template-columns: 24px minmax(0, 1fr); padding: 12px 14px 12px 6px; }
  .ce-cap { grid-column: 2; text-align: left; }
  .ce-cap b { display: inline; font-size: 15px; margin-right: 6px; }
  .ce-cap { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 0 6px; }
  .ce-add { opacity: 1; transform: none; visibility: visible; margin: 0 0 0 auto; }
  .sel-flutua.emp { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .listas { grid-template-columns: 1fr; }
  .listas-lado { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--linha); padding: 14px 12px 10px; }
  .listas-ul { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 4px; }
  .listas-ul::-webkit-scrollbar { display: none; }
  .listas-ul li { flex: none; width: 220px; }
  .listas-ul button { background: var(--superficie); border-color: var(--linha); }
  .lista-detalhe { padding: 14px 12px 120px; }
  .lista-cab h2 { font-size: 22px; }
  .lista-menu { gap: 12px; }
  .lista-menu .btn-link { font-size: 0; gap: 0; }
  .lista-menu .btn-link .ico { width: 18px; height: 18px; }
  .jornada { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -12px 14px; padding: 2px 12px 4px; scrollbar-width: none; }
  .jornada::-webkit-scrollbar { display: none; }
  .etapa { flex: none; width: 78%; scroll-snap-align: start; }
  .lista-barra { flex-direction: column; align-items: stretch; }
  .pilulas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
  .pilulas::-webkit-scrollbar { display: none; }
  .pilulas button { flex: none; }
  .lista-barra-dir { width: 100%; }
  .lista-q { flex: 1; }
  .lista-q input { width: 100%; }
  .so-cab { display: none; }
  .so { grid-template-columns: 24px 40px minmax(0, 1fr) auto; grid-template-areas: "m av quem tri" ". . emp tri" ". . ct cap"; row-gap: 6px; padding: 12px 10px; }
  .so .marca { grid-area: m; }
  .so-av { grid-area: av; }
  .so-quem { grid-area: quem; }
  .so-emp { grid-area: emp; }
  .so-ct { grid-area: ct; }
  .so-cap { grid-area: cap; align-self: end; }
  .so-tri { grid-area: tri; flex-direction: column; align-self: start; }
  .so-tira { display: none; }
  .sel-flutua { left: 12px; right: 12px; transform: none; bottom: calc(12px + env(safe-area-inset-bottom)); overflow-x: auto; }
  .kpis-linha { grid-template-columns: 1fr 1fr; }
  .fontes-form { grid-template-columns: 1fr; }
  .estimativa { grid-template-columns: 1fr; }
  .gaveta { padding: 22px 16px 0; }
  .gaveta-pe { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .refinar { top: 6vh; width: 100%; border-left: 0; border-radius: 22px 22px 0 0; animation: folha .32s cubic-bezier(.2, .8, .2, 1); }
  .admin { padding: 14px; }
  .tabela td, .tabela th { padding: 8px; }
}
@media (max-width: 520px) {
  body:not(.casa) .cabeca .logo { display: none; }
  .link-topo { padding: 6px; }
  .exemplos button:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
::view-transition-old(busca), ::view-transition-new(busca), ::view-transition-old(logo), ::view-transition-new(logo) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* =====================================================================================
   Tema escuro: fundo preto, texto branco, e o mapa vivo do Brasil por trás (fundo.js).
   ===================================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --pagina: #05070c; --pagina-casa: #05070c;
  --superficie: rgba(14, 19, 29, .88); --superficie-solida: #121a28; --sutil: rgba(255, 255, 255, .03); --sutil-2: rgba(255, 255, 255, .06);
  --tinta: #d9e1ec; --tinta-2: #aab6c6; --forte: #f4f7fb;
  --marinho: #eef3f9; --marinho-2: #ffffff; --sobre-marinho: #05070c; --sobre-marinho-suave: #4d5b70; --sobre-destaque: #05070c;
  --aco: #7fb0d4; --aco-2: #9cc4e2; --aco-claro: rgba(127, 176, 212, .13); --aco-claro-2: rgba(127, 176, 212, .22);
  --linha: rgba(255, 255, 255, .08); --linha-2: rgba(255, 255, 255, .15);
  --suave: #8e9aac; --suave-2: #667386;
  /* no escuro o destaque é o azul-aço da Pregio (#4B7D9B do site deles) clareado, no lugar do amarelo */
  --destaque: #92c1dd; --destaque-2: #a8cfe6; --destaque-claro: rgba(146, 193, 221, .14); --luz: #92c1dd;
  --ok: #44d391; --ok-claro: rgba(68, 211, 145, .12); --erro: #ff8073; --erro-claro: rgba(255, 128, 115, .13); --sim: #ffd27a; --sim-claro: rgba(255, 210, 122, .12);
  --e0: #0e1420; --e1: #13203a; --e2: #1a3558; --e3: #245a8a; --e4: #3584c0; --e5: #6fb7ee;
  --barra-vazia: rgba(255, 255, 255, .09); --esq-1: rgba(255, 255, 255, .04); --esq-2: rgba(255, 255, 255, .09);
  --traco-mapa: #05070c; --campo: rgba(255, 255, 255, .04); --campo-busca: rgba(14, 20, 32, .72); --cabeca-fundo: rgba(5, 7, 12, .7);
  --rede-linha: rgba(255, 255, 255, .14); --rede-linha-forte: rgba(127, 176, 212, .5); --mei-fundo: rgba(255, 170, 90, .14); --mei-tinta: #ffb26b;
  --login-fundo: radial-gradient(1000px 600px at 50% 0%, #10203a 0%, #05070c 62%);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .45); --sombra-2: 0 14px 40px rgba(0, 0, 0, .55);
  --sombra-busca: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 34px rgba(0, 0, 0, .45);
  --sombra-busca-f: 0 0 0 1px rgba(127, 176, 212, .45), 0 12px 40px rgba(0, 0, 0, .55);
}
[data-tema="escuro"] .busca, [data-tema="escuro"] .refinar, [data-tema="escuro"] .menu, [data-tema="escuro"] .sugest { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-tema="escuro"] .sugest, [data-tema="escuro"] .menu, [data-tema="escuro"] .sugestoes { background: rgba(12, 17, 27, .94); }
[data-tema="escuro"] body.casa .logo { filter: drop-shadow(0 0 26px rgba(127, 176, 212, .28)); }
[data-tema="escuro"] .btn.cta { box-shadow: 0 0 0 1px rgba(146, 193, 221, .4), 0 8px 26px rgba(146, 193, 221, .18); }
[data-tema="escuro"] .exemplos button { background: rgba(14, 20, 32, .6); backdrop-filter: blur(6px); }
.casa-nota { text-shadow: 0 0 6px var(--pagina-casa), 0 0 12px var(--pagina-casa); }
[data-tema="escuro"] .gaveta, [data-tema="escuro"] .modal { background: #0d131e; }
[data-tema="escuro"] .avatar-gr, [data-tema="escuro"] .rede .no-p circle { filter: drop-shadow(0 0 14px rgba(146, 193, 221, .35)); }

/* o fundo vivo, nos dois temas: só na tela inicial, na hora da pergunta; a busca saiu, ele some */
#fundo-vivo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform; }
body.casa #fundo-vivo { opacity: .5; }
[data-tema="escuro"] body.casa #fundo-vivo { opacity: .7; }
#app, .login { position: relative; z-index: 1; }

/* botão do tema */
.tema-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha-2); background: var(--superficie-solida); color: var(--forte); display: grid; place-items: center; transition: transform .3s; }
.tema-btn:hover { transform: rotate(-18deg); }
.tema-btn .ico { width: 18px; height: 18px; }

/* =====================================================================================
   Movimento: a busca chega em camadas, os números contam, os cartões vêm em sequência.
   ===================================================================================== */
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sobe-longe { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
.seq > * { animation: sobe .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 34ms); }
.entendi .chip-f.novo { animation: pop .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
/* quando a busca chega da tela inicial: cada faixa sobe numa velocidade (parallax) */
.resultado.chegando .res-topo > .entendi { animation: sobe-longe .55s cubic-bezier(.2, .8, .2, 1) both; }
.resultado.chegando .res-topo > .resumo-linha { animation: sobe-longe .7s cubic-bezier(.2, .8, .2, 1) .08s both; }
.resultado.chegando .res-topo > .visoes { animation: sobe-longe .85s cubic-bezier(.2, .8, .2, 1) .14s both; }
.resultado.chegando > .visao { animation: sobe-longe 1s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
/* backwards, não both: ao terminar não pode sobrar transform, senão a barra flutuante (fixed) fica presa dentro da visão */
.visao.troca { animation: sobe .32s cubic-bezier(.2, .8, .2, 1) backwards; }
.resumo-nums .num b.conta, .bj-n b.conta { color: var(--aco); }
.resumo-nums .num b { transition: color .6s; }
.btn.enviando { opacity: .6; pointer-events: none; }

/* cabeçalho fica mais fino quando desce a página */
body.rolou .cabeca { box-shadow: 0 6px 24px rgba(3, 20, 53, .07); }
[data-tema="escuro"] body.rolou .cabeca { box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }

/* a bandeja: a lista se criando no canto da tela */
.bandeja { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: flex; align-items: center; gap: 14px; background: var(--superficie-solida); border: 1px solid var(--linha); border-radius: 18px; padding: 12px 14px 12px 16px; box-shadow: var(--sombra-2); min-width: 260px; max-width: 360px; cursor: pointer; animation: pop .45s cubic-bezier(.2, .8, .2, 1) both; transition: transform .2s; }
.bandeja:hover { transform: translateY(-2px); }
.bandeja.pula { animation: pula .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes pula { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.bj-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--destaque); color: var(--sobre-destaque); display: grid; place-items: center; flex: none; }
.bj-txt { flex: 1; min-width: 0; }
.bj-nome { font-weight: 700; color: var(--forte); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-n { font-size: 12.5px; color: var(--suave); }
.bj-n b { color: var(--forte); font-size: 15px; font-variant-numeric: tabular-nums; }
.bj-rostos { display: flex; margin-top: 6px; height: 24px; }
.bj-rostos span { width: 24px; height: 24px; border-radius: 50%; background: var(--aco-claro); color: var(--forte); border: 2px solid var(--superficie-solida); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; margin-left: -6px; animation: pop .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.bj-rostos span:first-child { margin-left: 0; }
.bj-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bj-trocar { font-size: 11.5px; color: var(--suave); background: none; border: 0; padding: 0; }
.bj-trocar:hover { color: var(--forte); }
/* fechar a lista: sempre à vista (no celular não tem "passar o mouse") */
.bj-fechar { align-self: flex-start; flex: none; width: 28px; height: 28px; margin: -4px -6px 0 2px; border-radius: 50%; border: 0; background: var(--sutil-2); color: var(--suave); display: grid; place-items: center; padding: 0; transition: background .15s, color .15s; }
.bj-fechar:hover { background: var(--erro-claro); color: var(--erro); }
.bj-fechar .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.cont-fechar { flex: none; width: 30px; height: 30px; margin-left: 4px; border-radius: 50%; background: var(--sutil-2); color: var(--suave); display: grid; place-items: center; transition: background .15s, color .15s; }
.cont-fechar:hover { background: var(--erro-claro); color: var(--erro); }
.cont-fechar .ico { width: 14px; height: 14px; stroke-width: 2.2; }
/* o que voa até a bandeja */
.voando { position: fixed; z-index: 80; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; background: var(--destaque); color: var(--sobre-destaque); font-weight: 700; font-size: 13px; border-radius: 16px; padding: 6px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .75s cubic-bezier(.5, -.2, .3, 1), opacity .75s ease-in; }
body.tela-listas .bandeja, body.casa .bandeja { display: none; }
@media (max-width: 900px) {
  .bandeja { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; min-width: 0; }
  .aviso { top: calc(var(--alt-cabeca, 60px) + 8px); bottom: auto; left: 12px; right: 12px; width: auto; max-width: none; animation-name: aviso-desce; }
}
/* =====================================================================================
   Paleta de comandos (⌘K), atalhos e "continuar de onde parou"
   ===================================================================================== */
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--linha-2); border-bottom-width: 2px; background: var(--superficie-solida); color: var(--suave); font: 600 11px/1 "DM Sans", system-ui, sans-serif; }
.pal-botao { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha-2); background: var(--superficie-solida); border-radius: 20px; padding: 6px 7px 6px 12px; font-weight: 600; font-size: 13px; color: var(--forte); white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.pal-botao > .ico { width: 15px; height: 15px; color: var(--destaque); fill: var(--destaque); fill-opacity: .18; }
.pal-botao kbd { height: 20px; font-size: 11px; }
.pal-botao:hover { border-color: var(--aco-2); box-shadow: var(--sombra-1); }
.pal-busca > .ico { fill: var(--destaque); fill-opacity: .15; color: var(--destaque) !important; }
@media (max-width: 1100px) { .pal-botao span { display: none; } }
.paleta-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(13, 27, 51, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade .15s ease; }
.paleta { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--superficie-solida); border: 1px solid var(--linha); border-radius: 18px; box-shadow: 0 30px 80px rgba(3, 20, 53, .35); overflow: hidden; animation: pal-vem .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes pal-vem { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.pal-busca { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.pal-busca > .ico { width: 20px; height: 20px; color: var(--suave-2); }
.pal-busca input { flex: 1; border: 0; outline: 0; box-shadow: none !important; background: none; font-size: 17px; padding: 4px 0; }
.pal-lista { overflow-y: auto; padding: 6px 8px 10px; }
.pal-grupo { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--suave-2); padding: 12px 10px 5px; }
.pal-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; border-radius: 11px; padding: 9px 10px; text-align: left; color: var(--tinta); }
.pal-item > .ico { width: 18px; height: 18px; color: var(--aco); flex: none; }
.pal-item.ativo { background: var(--aco-claro); }
.pal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-txt small { font-size: 12px; color: var(--suave); }
.pal-tecla { display: flex; gap: 3px; flex: none; }
.pal-vazio { padding: 28px 16px; text-align: center; color: var(--suave); }
.pal-pe { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--linha); background: var(--sutil); font-size: 12px; color: var(--suave); }
.pal-pe span { display: inline-flex; align-items: center; gap: 4px; }
.pal-pe kbd { min-width: 18px; height: 18px; font-size: 10.5px; }
body.casa .pal-botao { display: none; }

.casa-continuar { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(680px, 100%); margin-bottom: 18px; }
.continuar { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 14px 16px; box-shadow: var(--sombra-1); transition: transform .15s, box-shadow .15s, border-color .15s; animation: sobe .4s cubic-bezier(.2, .8, .2, 1) both; }
.continuar:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--aco-2); }
.cont-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--destaque); color: var(--sobre-destaque); display: grid; place-items: center; flex: none; }
.cont-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cont-txt small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--aco); }
.cont-txt b { font-size: 15.5px; color: var(--forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont-txt span { font-size: 12.5px; color: var(--suave); }
.cont-ir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--aco); font-size: 13px; white-space: nowrap; }
.cont-ir .ico { width: 15px; height: 15px; }
.recentes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; animation: sobe .45s cubic-bezier(.2, .8, .2, 1) .05s both; }
.rec-rot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--suave-2); text-transform: uppercase; letter-spacing: .7px; margin-right: 2px; }
.rec-rot .ico { width: 14px; height: 14px; }
.recentes button { border: 1px solid var(--linha); background: var(--superficie); border-radius: 20px; padding: 7px 14px; font-size: 13px; color: var(--tinta); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, transform .15s; }
.recentes button:hover { border-color: var(--aco-2); transform: translateY(-1px); }
[data-tema="escuro"] .continuar, [data-tema="escuro"] .recentes button { background: rgba(14, 20, 32, .6); backdrop-filter: blur(6px); }
@media (max-width: 900px) {
  .pal-botao { display: none; }
  .paleta-fundo { padding-top: 8vh; }
  .pal-pe { display: none; }
  .recentes button:nth-child(n+5) { display: none; }
}

/* troca de tema: as cores deslizam em vez de pular */
html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease !important; }

/* ---------------- pedidos do Stefano (20/10/2026): capital somado, cidade sugerida, CPF ---------------- */
.cidade-sugerida { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--destaque-claro); color: var(--forte); border-radius: 12px; padding: 8px 10px 8px 14px; margin: 0 0 12px; font-size: 13.5px; animation: sobe .35s cubic-bezier(.2, .8, .2, 1) both; }
.cidade-sugerida > .ico { width: 16px; height: 16px; color: var(--aco); }
.cidade-sugerida span { flex: 1; min-width: 180px; }
.fechar-mini { border: 0; background: none; color: var(--suave); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.fechar-mini:hover { background: var(--linha); color: var(--forte); }
.fechar-mini .ico { width: 15px; height: 15px; }
.aviso-recorte { display: inline-flex; align-items: center; gap: 4px; color: var(--aco); font-weight: 600; }
.aviso-recorte .ico { width: 13px; height: 13px; }
.cp-total { font-size: 11.5px; color: var(--suave); white-space: nowrap; }
.cp-cargo { font-size: 13px; font-weight: 600; color: var(--forte); white-space: nowrap; }
.so-cpf { color: var(--suave-2); }
.so-cpf.completo { color: var(--tinta-2); }
.h3-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h3-linha .btn-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; text-decoration: none; }
.h3-linha .btn-link .ico { width: 14px; height: 14px; }
.casa-refinar { margin: 0 0 18px; animation: sobe .4s cubic-bezier(.2, .8, .2, 1) both; }
.fo-apelido { font-size: 12px; font-weight: 600; color: var(--suave); text-transform: none; letter-spacing: 0; }
.aviso-apelido { display: flex; align-items: center; gap: 6px; color: var(--sim); background: var(--sim-claro); border-radius: 10px; padding: 8px 12px; }
.aviso-apelido .ico { width: 15px; height: 15px; }
.lista-cidades { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.lista-cidades .lc-rot { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--suave-2); text-transform: uppercase; letter-spacing: .7px; margin-right: 2px; }
.lista-cidades .lc-rot .ico { width: 13px; height: 13px; }
.lista-cidades button { border: 1px solid var(--linha-2); background: var(--superficie); border-radius: 18px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); display: inline-flex; gap: 6px; align-items: center; }
.lista-cidades button b { color: var(--suave); font-weight: 700; }
.lista-cidades button.on { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
.lista-cidades button.on b { color: var(--sobre-marinho-suave); }
.so-razao { display: block; font-size: 11.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quantos-escolha input[type="number"] { width: 84px; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--linha-2); border-radius: 8px; background: var(--campo); }
.quantos-escolha .mini { display: block; margin-top: 4px; }
p.alerta.suave { display: flex; gap: 8px; align-items: flex-start; }
p.alerta.suave .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
@media (max-width: 900px) { .lista-cidades { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .lista-cidades button { flex: none; } }

/* ---------------- teia de sócios em tela própria ---------------- */
.teia-tela { max-width: 1400px; margin: 0 auto; padding: 18px 24px 40px; }
.teia-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.trilha-item { border: 0; background: none; padding: 5px 8px; border-radius: 8px; font-weight: 600; color: var(--aco); font-size: 13.5px; }
.trilha-item:hover { background: var(--aco-claro); }
.trilha-item.atual { color: var(--forte); background: var(--superficie); box-shadow: var(--sombra-1); }
.trilha-sep .ico { width: 13px; height: 13px; color: var(--suave-2); }
.teia-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.teia-rede { min-height: 60vh; display: flex; align-items: center; }
.teia-rede .rede-palco { width: 100%; max-height: calc(100vh - 170px); }
.teia-lado { padding: 18px; position: sticky; top: calc(var(--alt-cabeca, var(--cabeca)) + 12px); }
.teia-empresas { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 14px; max-height: 32vh; overflow: auto; }
.teia-empresas .btn-link { text-align: left; font-weight: 700; color: var(--forte); margin-top: 6px; }
@media (max-width: 900px) {
  .teia-tela { padding: 12px 12px 30px; }
  .teia-grade { grid-template-columns: 1fr; }
  .teia-rede { min-height: 0; }
  .teia-lado { position: static; }
  .trilha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .trilha-item { flex: none; }
}

/* ---------------- mapa: modo do clique, raio e bairros ---------------- */
.mapa-cliques { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.mapa-svg svg.com-raio path { opacity: .4; }
.mapa-svg svg.com-raio path.raio-dentro { opacity: 1; }
#mapa-circulo { fill: rgba(75, 125, 155, .16); stroke: var(--destaque); stroke-width: 1.6; stroke-dasharray: 5 3; pointer-events: none; }
.raio-card h4 .ico { color: var(--aco); }
.raio-km { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.raio-km input { flex: 1; }
.raio-km b { min-width: 58px; text-align: right; color: var(--forte); }
.raio-acoes { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.raio-lista button { cursor: default; }
.barras button.outros { color: var(--suave); font-style: italic; cursor: default; }
.mapa-sem-malha { fill: var(--suave); font-size: 13px; font-family: "DM Sans", sans-serif; }